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.

TheControl + Option combination is often referred to asVO.

Let's take a look on how I went through the lists in this example. To read the page useVO + A, to stop it useControl.

You can find the example to test it on your own on codepen.

*I did research on other browser/screen reader combination. I found out that with JAWS with Chrome or Firefox you can doControl + 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