Skip to content

Sounds like

Some HTML bits and what they sound like to a screen reader. Some big things to remember are:

  • every form control needs a name (visible or not);
  • every group of controls needs a name (visible or not);
  • generally prefer (correctly marked-up) visible names as they work for all users;
  • when we don’t use the right HTML, things can be invisible or opaque to screen reader users.

Here are a bunch of tiny samples:

Single inputs

  1. Input wrapped in label sounds like Username, edit text.
  2. No for and id attributes on the label and input sounds like Edit text.
  3. With for and id attributes on the label and input sounds like Username, edit text. (best choice)
  4. With just an input and an aria-label sounds like Username, edit text.

Grouped inputs, radios

  1. Radios without fieldset or legend sounds like Once-off, radio button
  2. Radios without legend sounds like Once-off, radio button
  3. Radios with fieldset and legend sounds like Frequency grouping, Once-off, radio button, not checked, 1 of 2 (best choice)
  4. Radios without a visible group name sounds like Frequency grouping, Once-off, radio button, not checked, 1 of 2
  5. Radios without a visible radio button sounds like Frequency grouping, Once-off, radio button, not checked, 1 of 2

Grouped inputs

  1. Four part date control with visible names sounds like Event date group, Day, 1, combo box (best choice)
  2. Four part date control without visible names sounds like Event date group, Day, 1, combo box
  3. From and to dates, in three parts sounds like Event date group, From day, 1, combo box
  4. Radios with sentence style contents and form controls in them sounds like Recurring options group, Repeat frequency, radio button, not checked. [tab] Recurring options group, Number, 1, combo box.

Inputs and errors

  1. Input with HTML5 required sounds like Username, edit text, required, invalid entry
  2. Input with aria-required sounds like Username, edit text, required
  3. Input with aria-required, error-state error message not linked sounds like Username, edit text, required.
  4. Input with aria-required and aria-describedby error message, initial state sounds like Username, edit text, required. (best choice)
  5. Input with aria-required, aria-invalid, and aria-describedby error message sounds like Username, edit text, required, invalid entry. Please enter a value. (best choice)

Described By

  1. Button with some text nearby sounds like Add, Button
  2. Button with some extra text in it sounds like Add 10 items, Button.
  3. Button with aria-describedby sounds like Add, Button. 10 items selected. (best choice)

Accessible names

  1. Button with text in it sounds like Add a question, Button
  2. Button with text and screen reader text in it sounds like Add a question, Button
  3. Button with text and an icon in it sounds like Add, Button
  4. Button with just an icon in it sounds like Add, Button
  5. Button with just an icon in it, aria-labelledby sounds like Add a question, Button