Text fields

 Visible Focus

When a text field receives keyboard focus or when a user clicks into the field, that focus must be visibly shown. There are several ways to do this, including:

• Displaying a vertical bar in the field to show that the user can insert text
• Displaying a visible border around the field
• Highlighting all placeholder text to indicate that the user can type over the placeholder

Required Fields

At the start of a form, inform the user in plain language that some fields are required. Provide a key for how required fields are indicated.

Here are some ways to indicate required fields:

• Choose consistent words or symbols to programmatically associate with required fields
  • Usually contained within the label element
• Visually indicate a required field with:
  • An asterisk (*, also called “keyboard star”) next to the field
  • The world “required” next to the field label
  • An inline image (like a graphic star) with an appropriate alt attribute (like “mandatory text field” or “required information”)
• Verbally indicate a required field with:
  • The word “required” as part of the <label for> tag
  • The word “required” as part of the HTML 5 code
  • area-required=true

Other considerations

• When focus lands on a text field, there should be no change of context.
• When a user types in the field or tabs out of it, this should not trigger a change of context.