Working examples

Example: Alpha, Bravo, Charlie

Description text

When a person using a screen reader encounters a text field, they hear the label/name of the field, that it’s a text field, and they automatically hear the descriptive helper text.

  • The text should be of a size and contrast that it’s easy to read (it does not have to be tiny and grayed out)
  • Do not put descriptions in a tooltip

Required input

Disabled but focusable input

  • There may be times that it is advantageous for the input to be disabled but still focusable
  • Fully disabled inputs are not focusable and may not be as discoverable in a form
  • Use readonly to prevent editing

Fully disabled input

  • Fully disabled inputs are not focusable so may not be as discoverable in a form

readonly input

  • Only use readonly when presenting already submitted information.
  • readonly inputs are focusable but not editable
  • VoiceOver does not describe readonly attribute, so aria-disabled was added to reinforce that it’s not editable

Email input

  • Setting type="email" changes the keyboard for mobile app users
We’ll never sell or share your information

Group of inputs

After the screenreader focuses on each input, it will read the group name “Enter your personal information” after the input.

Enter your personal information

Annotations for text fields

  • Define the type
    • type="text"
    • type="email"
    • type="tel"
    • type="url"
    • type="date"
  • For number inputs (like PIN)
    • type="text" inputmode="numeric"

Related text input entries