How screen readers read elements from HTML

vewiwajeg picture vewiwajeg · May 29, 2016 · Viewed 7.4k times · Source

I know that screen readers read for some elements/tags not only what they contain, but also the element/tag it self. For example:

<button class="class-of-the-button">Text inside</button>

Will result for screen readers as: Button Text inside.

Or something similar to that, I'm not very sure(please correct if you know how exactly it will be). Saying that, I would like to ask you to tell me what are the other elements/tags that screen reader read with the content of the element/tag it self, and particular this(but not only. if you have a list of them or just know some, please tell. I would really appreciate you help):

  1. for <input type="radio">

  2. for <input type="checkbox">

  3. for <h1> to <h6> tags.

Answer

aardrian picture aardrian · May 29, 2016

There is a great resource online that is capturing how each screen reader speaks different elements. It is not complete, but it has quite a lot. It is also growing:

Aural UI of the Elements of HTML

The team managing it represent folks behind the ARIA and HTML specifications, so they aren't doing it for kicks, they are doing it in the interest of the specs (and it may be incorporated as a note down the road). One is also a screen reader user, so she understands it better than you or I could.

You'll find examples from each of JAWS, VoiceOver, NVDA, and Window Eyes. From the document:

Typical support patterns of HTML elements by screen readers:

  • Identification of an element by role as the user moves through the content.
  • Announcement of the text content of an element.
  • Announcement of the start and end of an element.
  • Change in voice as the content of an element is announced.
  • Announcement of an element's accessible name and/or description
  • Announcement of states and properties.
  • Emission of a beep or other sound when an element with a particulat state or property receives virtual focus.
  • Instructions on how to operate interactive elements such as form controls.
  • Navigation of elements by keyboard and “quick access” lists of a particular elements, list items are linked to each instance of an element on the page.

Note: The combination of patterns supported varies from element to element and support for a particular element varies between screen reader software.