Geek Answers Handbook

How screen readers read elements from HTML

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

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

The screen program will be displayed as: Button Text inside.

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

  • for <input type="radio">

  • for <input type="checkbox">

  • for tags <h1> - <h6> .

+7
html accessibility screen-readers
source share
2 answers

There is an excellent resource on the Internet that captures how each screen reader talks about different elements. This is not complete, but he has quite a lot. It is also growing:

HTML element aural interface

The team that runs it represents the people behind ARIA and HTML , so they don’t do it for kicks, they do it for the benefit of specifications (and this can be included as a note along the way). One of them is also a screen reader, so she understands it better than you or me.

You will find examples from each of JAWS, VoiceOver, NVDA, and Window Eyes. From the doc:

Typical HTML element support templates using on-screen devices:

  • Identification of an element by role when the user navigates through the content.
  • Declaring the text content of an element.
  • Declaration of the beginning and end of an element.
  • Voice change when declaring the contents of an element.
  • Declare an accessible element name and / or description
  • Declaring states and properties.
  • Emission of a sound signal or other sound when an element with a state or property of a face receives virtual focus.
  • Instructions for working with interactive elements, such as form controls.
  • Navigating items using the keyboard and quick access lists for specific items, list items are associated with each instance of the item on the page.

Note. The combination of supported patterns varies from element to element, and the support for a particular element depends on the screen reader software.

+7
source share

In the three cases that you requested, the screen reader needs at least two pieces of information: the role of the element and its accessible name.

For form fields, the role is determined by the type attribute. So, type = "radio" and type = "checkbox" respectively. For the title, the role is implied when using the h1-h6 element.

An accessible form field name is most often provided using the label element. For form fields, it will be something like this:

 <input type="checkbox" id="red"> <label for="red">Red</label>

Note: validating the for / id attribute is important because it associates a label with a form field. Without this connection, the browser will not know that the label belongs to the form field.

For the title, the available name comes from the text content of the element:

 <h1>Favourite books</h1>

The browser provides information, such as a role and an accessible name, for reading from the screen. In these examples, the screen reader would declare something like "Red checkbox" or "Favorite books heading level 1".

+2
source share

More articles:


All Articles