DEV Community

Cover image for Importance Of Lists
Julia πŸ‘©πŸ»β€πŸ’» GDE
Julia πŸ‘©πŸ»β€πŸ’» GDE

Posted on • Updated on

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.

Voice Over settings where the list is one of the selected items in the web rotor.

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)

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Thanks Cristian ☺️