Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.
In this article, let's take a closer look at how a screen reader interacts with a list, provided it is written with correct semantic HTML.
Access lists with a screen reader
When the screen reader encounters a list, it announces that it is a list and how many elements the list contains.
Depending on the type of list, the screen reader reads the list slightly differently.
Ordered lists are written with a parent element
<ol> containing child elements of
The screen reader announces e.g. list, 3 items, 1 list-element 1, 2 list-element 2, 3 list-element 3.
Unordered lists are written with a parent element
<ul> containing child elements of
The screen reader announces e.g. list, 3 items, bullet list-element 1, bullet list-element 2, bullet list-element 3.
Description lists are written with a parent element
<dl>, a term element
<dt> containing child elements of
The screen reader announces e.g. description list, 3 items, term, term element, child element 1, group, child element 1, ... .
Access lists with a screen reader (live demo)
I am using VoiceOver on the MacBook Air. I tried it in Safari, Chrome and Firefox, it worked the same everywhere.
Control + Option combination is often referred to as
Let's take a look on how I went through the lists in this example. To read the page use
VO + A, to stop it use
You can find the example to test it on your own on codepen.
|Show All Lists||VoiceOver||Safari||
|Navigate from One List Item to the Next||VoiceOver||Safari||
*I did research on other browser/screen reader combination. I found out that with JAWS with Chrome or Firefox you can do
Control + L to show all lists.
Note: If you have further information on this I would be happy if you could share in the comments.
Follow me for more accessibility content on:
Website - accessibilityfirst.xyz
Instagram - accessibilityfirst.xyz
LinkedIn - accessibilityfirst
Top comments (2)
Thanks Cristian ☺️