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
Ordered lists are written with a parent element <ol>
containing child elements of <li>
.
The screen reader announces e.g. list, 3 items, 1 list-element 1, 2 list-element 2, 3 list-element 3.
Unordered lists
Unordered lists are written with a parent element <ul>
containing child elements of <li>
.
The screen reader announces e.g. list, 3 items, bullet list-element 1, bullet list-element 2, bullet list-element 3.
Description lists
Description lists are written with a parent element <dl>
, a term element <dt>
containing child elements of <dd>
.
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.
The Control + Option
combination is often referred to as VO
.
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 Control
.
You can find the example to test it on your own on codepen.
Methods | Β Screen Reader | Browser | Command |
---|---|---|---|
Show All Lists | VoiceOver | Safari |
Control + Option + U (to open rotor*), but List was not shown in the web rotor, even though I selected the item in the settings* |
Navigate from One List Item to the Next | VoiceOver | Safari | Control + Option + Command + X |
*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 (1)
Thanks Cristian βΊοΈ