Making Your Website's Lists Screen-reader Friendly
Sep 5, 2020 • 6 Minute Read
Introduction
Ensuring your website is screen reader accessible is important to increasing the reach of your website and brand. If your website follows the Web Content Accessibility Guidelines, it will make the user experience pleasant rather than unusable for users with blindness or vision impairment.
This guide will explain the specific challenges faced by screen reader users when working with lists. Then we will walk through some simple changes that web developers can implement to make a big difference to users with accessibility requirements. This guide will use a blog with a list of blog posts as an example throughout.
Understand How Screen Reader Users Access Web Content
There are a few ways a user may interact with a blog:
- Jump to the list of blog posts from anywhere on the page
- Understand how many posts are in the list
- Read the label for each blog post
- Jump to the end of the list
Sighted users can rely on visual markers such as margins and colors to help them easily skim over the content and perform the above interactions. In contrast, a screen reader user relies on keyboard shortcuts to navigate around a page (and sometimes swipe gestures on mobile). This is only possible when pages are marked up correctly to allow the screen reader to parse them.
Tagging HTML Document Correctly
The good news is that tagging your lists as described above is concise and simple. HTML offers two main list tags: <ul /> and <ol />. From a screen reader's perspective they are both semantically lists and only differ in their default list-style css property. By default, <ul /> will prepend a bullet point and <ol /> will prepend a number before the list item, which will be announced by the screen reader when the user focuses over the list item.
There are other ways to make your lists known to screen readers but they are not recommended. One example of this is <dl />. It is another type of list, but not all screen readers understand the hierarchy of its child tags. A second option is adding the attributes role="list" and role="listitem" to generic container tags like <div />, but this makes the markup unnecessarily verbose and has compatibility issues.
For the purpose of making the blog post list accessible, focus on two elements:
- <ul />, an unordered listed container
- <li /> for list items that should be used strictly inside <ol /> or <ul />.
The following is an extract of adding a list of latest articles to a blog's HTML.
<h1>My awesome blog</h1>
<h2>Latest articles</h2>
<ul aria-label="latest articles">
<li>
<a href="/http-guide-part-1">A guide to http part 2</a>
<span>Published on December 19, 2020</span>
</li>
<li>
<a href="/http-guide-part-1">A guide to http part 1</a>
<span>Published on December 18, 2020</span>
</li>
</ul>
You can see that there is a <ul /> tag with <li /> tags as its direct descendants.
Test Your Web App
The best way to test your website for screen reader accessibility is to install a commonly used screen reader such as NVDA.
Once installed you can enable Speech Viewer to see a history of all voice feedback and enable Focus Highlight to make it easier to follow the focus of the screen reader.
To test the interactions with the list, open NVDA and the webpage with modified HTML in your browser.
Press l repeatedly to jump to the desired list from anywhere in your page. The focus will jump to first list item of each list on the page. You should hear the following text being announced. It will also appear in the NVDA's Speech Viewer window.
latest articles list with 2 items • A guide to http part 2 link Published on December 19, 2020
Note that the aria-label and the number of list items were announced which is very useful when jumping quickly between elements on the page.
Test Going to the Next and Previous List item
Once in the list, press i and shift+i to navigate to the next and previous list item.
• A guide to http part 2 link Published on December 19, 2020
• A guide to http part 1 link Published on December 18, 2020
• A guide to http part 2 link Published on December 19, 2020
• A guide to http part 1 link Published on December 18, 2020
Jump to the End of the List
Once in the list, you can press , to get out of the list. If list wasn't tagged correctly, the user would be forced to press tab or ctrl+down arrow continuously to get to the end of the list. This is frustrating when the list is long.
Customize the Date Voice Output
You may have requirements where dates need to be displayed differently to save space, for example, 18.12.2020 instead of December 18, 2020. If you change your HTML to
<li>
<a href="/http-guide-part-1">A guide to http part 1</a>
<span>Published on 18.12.2020</span>
</li>
NVDA will read the content literally:
Published on one eight dot one two dot two zero two zero.
In this case, you can customize the label for screen readers by using bootstrap's sr-only class.
<li>
<a href="/http-guide-part-1">A guide to http part 1</a>
Published on <span aria-hidden="true">18.12.2020</span>
<span class="sr-only">December 18, 2020</span>
</li>
This technique allows updating the visual text without impacting what the screen reader announces.
Conclusion
This guide has shown that making your web lists screen reader accessible can be simple and concise. Sometimes minor tweaks are required for screen readers, so it's important to test that your content is pleasant to use for all users.
