The browser exposes information like the role and accessible name to screen readers. Without this association the browser will not know the label belongs to the form field.įor the heading, the accessible name comes from the text content of the element: Favourite books Note: the for/id attribute paring is important because it associates the label with the form field. For the form fields it would be something like this: The accessible name for form fields is most commonly provided using the label element. For the heading the role is implicit when you use the h1-h6 element. So type='radio' and type='checkbox' respectively. Note: The combination of patterns supported varies from element to element and support for a particular element varies between screen reader software.įor 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.įor the form fields the role is determined by the type attribute. 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.Instructions on how to operate interactive elements such as form controls.Emission of a beep or other sound when an element with a particulat state or property receives virtual focus.Announcement of an element's accessible name and/or description.Change in voice as the content of an element is announced.Announcement of the start and end of an element.Announcement of the text content of an element.Identification of an element by role as the user moves through the content.Typical support patterns of HTML elements by screen readers: You'll find examples from each of JAWS, VoiceOver, NVDA, and Window Eyes. One is also a screen reader user, so she understands it better than you or I could. 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). It is not complete, but it has quite a lot. There is a great resource online that is capturing how each screen reader speaks different elements.

Html5 accessibility screen reader