An Interest In:
Web News this Week
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
Importance Of Lists
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
Original Link: https://dev.to/yuridevat/importance-of-lists-5ek6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To