Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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.

like image 867
vewiwajeg Avatar asked May 29 '16 15:05

vewiwajeg


People also ask

Do screen readers read HTML entities?

If you type an HTML document using all the punctuation marks available on your keyboard and listen to a screen reader read the document in a web browser, you'll hear only some of the punctuation and characters read aloud to you. If you use HTML entities or other special characters, you'll hear even less.

Which attributes can the screen readers read HTML?

In this case, most screen readers will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.

How does a screen reader read HTML?

Screen readers can't “read” images. Instead they read the alternate text provided through the HTML tag. This alternate text should give an accurate and clear description of the image's contents. If there is no alternate text provided, the screen reader will read “graphic”.

How does a screen reader know what to read?

They work in one of two separate forms: Text-to-Speech, where the words are read directly to the user, or. Braille Display, where the user can read the output through a tactile pad that translates the words into Braille.


2 Answers

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.

like image 73
aardrian Avatar answered Nov 08 '22 07:11

aardrian


For the three cases you've asked about, the screen reader needs at least two pieces of information: the element's role and its accessible name.

For the form fields the role is determined by the type attribute. So type="radio" and type="checkbox" respectively. For the heading the role is implicit when you use the h1-h6 element.

The accessible name for form fields is most commonly provided using the label element. For the form fields it would be something like this:

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

Note: the for/id attribute paring is important because it associates the label with the form field. Without this association the browser will not know the label belongs to the form field.

For the heading, the accessible name comes from the text content of the element:

<h1>Favourite books</h1>

The browser exposes information like the role and accessible name to screen readers. In these examples the screen reader would announce something like "Red checkbox", or "Favourite books heading level 1".

like image 2
Léonie Watson Avatar answered Nov 08 '22 06:11

Léonie Watson