How screen readers read elements from HTML

Question

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.

Collation

Answer 1

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.

Iowa

Thank you for sharing this truly great resource, Aardrian. – Collation

Answer 2

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

Burhans