Revisiting Fundamentals - Semantic lists for Improved Accessibility

by Winnie Bosibori published on Dec 17, 2023

Lists are one of the fundamental semantic HTML configurations that, when implemented appropriately can enhance accessibility.

HTML Lists Refresher

Whenever I visit any website, I have formed the habit of checking for any accessibility issues and delving deeper into the HTML code structure. One apparent thing is that a large number of sites are characterized by non-semantic code structures that result in inaccessible sites.
One common culprit that I constantly come across is poorly marked-up list structures. From having list elements made with the paragraph elements to having headings, div, or span elements as direct children of <ul>, <ol>, or <dl> elements.

As developers or designers, we may sometimes overlook and deem lists as insignificant HTML constructs. However, Without lists, it will be difficult for people to follow content or information on a site. This is because they facilitate grouping related pieces of information, so they are associated with each other and make it easy to read and understand. In addition, people who use assistive technologies such as screen readers may be able to easily interact with a page using keyboard shortcuts.

In this article, we are going to not only point out some of the bad practices that result from non-semantic lists but also provide best practices for creating accessible and inclusive lists. This article focuses exclusively on unordered and ordered lists.

Unordered List

An unordered list is used to represent data or content whose order or hierarchy is not important. The items are commonly displayed in bullet form. A use case scenario for implementing an unordered list includes grouping related hyperlinks or a to-do list. Below is a code sample that demonstrates how to create an unordered list.

<h2> Shopping List </h2>
<ul>
  <li> Apples </li>
  <li> Pears </li>
  <li> Oranges </li>
</ul>

Ordered Lists

The ordered list is used to represent data or content whose order or hierarchy is important. The items are indexed and commonly displayed as a numbered list, in alphabet letters, or in Roman numerals. Some of the use case scenarios for implementing an ordered list include but are not limited to a food recipe guide, a list of instructions for an online registration process, or multiple-choice tests. Below is a code sample demonstrating an ordered list.

<h2> Online Conference Registration Process </h2>
<ol>
  <li>Go to the conference's official website and find the registration section.</li>
  <li>Select the appropriate registration category.</li>
  <li>Complete the online form with personal and professional details, and choose sessions if available.</li>
  <li>Make a secure payment to confirm your registration.</li>
  <li>Check emails for any conference updates and preparations.</li>
</ol>

Semantic HTML lists and Accessibility

Semantic HTML entails the use of HTML tags to convey the meaning of a site’s content. Regarding lists, this refers to the use of lists for structuring or grouping related content, organizing information by importance, and conveying a particular order for processes or procedures.

For sighted users, identifying items organized as lists, including the type of list and the total number of items, is usually straightforward. This is due to their reliance on visual formatting cues like markers and indentation. However, for people using screen readers, the experience differs significantly. Screen readers, when encountering poorly marked-up lists, may fail to announce content as list items or specify the number of items present. Instead, they announce information based on the content's code structure. For example, if paragraph tags are utilized instead of list tags, the screen reader will present the content as paragraphs. This can hinder users' understanding and expectations, as they remain unaware of the actual number of items on the perceived 'list'.

<p>
  • Apples
  <br>
  • Pears
  <br>
  • Oranges
</p>

The use of semantic lists is crucial for people relying on screen readers. They are notified they are interacting with a list, the index of the current item (in the case of ordered lists), the number of items, and the end of a list (NVDA will announce "out of list"). For instance, in the unordered list example, the NVDA screen reader on Windows will announce the following: "List with 3 items: Bullet Oranges, Bullet Pears, and Bullet Oranges". With this announcement, the users are communicated with semantic information (a list), the number of items (3), and the prepended bullet point markers to indicate an unordered list.
Having such information upfront provides people using screen readers with an understanding of what to expect from the content. This is particularly beneficial in situations where establishing appropriate expectations is key to preparing them to interact with the content, enabling them to decide whether or not to go through the list.

Screen readers also provide several navigation techniques that ensure people are navigating seamlessly on a webpage. This is especially important for a web page that features several lists or a large list item. They include: jumping from one list to another, jumping from one list item to another, and in some screen readers getting out of the list. These navigation techniques are aligned with the keyboard to provide shortcut keys for accessing any list content present on a webpage. This resource provides keyboard shortcuts to how other screen-readers interact with lists. The table below provides a summary of the navigation techniques and keyboard shortcuts for navigating lists with NVDA (NonVisual Desktop Access, version 2023.2) screen reader.

Semantic lists hugely contribute to content readability. This is especially important for people with cognitive and learning disabilities. Large blocks of content can be difficult to read and understand. List facilitates breaking content into comprehensible chunks making it easier to read and understand the structure of the content. This is in addition to highlighting important points that might otherwise be lost when presented in a paragraph. For instance, the use of an ordered list for a food recipe demonstrates that the process has several sequential steps for its preparation.

In summary, lists provide the following benefits for accessibility:

• Improved readability
• Highlight important points
• Provide the total number of items in a list
• May announce the current index of an item (in the case of ordered lists)
• Provide shortcuts to navigate between lists
• Provide shortcuts to navigate between list items

Common Mistakes and how to avoid them:

Here are some common mistakes associated with the implementation of semantic HTML lists.

Using the Wrong List Type

This entails implementing unordered lists when the order is important and vice versa. The key emphasis is if the order of your content or items is not relevant, implement an unordered list <ul> otherwise implement an ordered list <ol>. Below is a code sample demonstrating the relevance of using an ordered list.

Do not:

<h2> Cake Recipe </h2>
<ul>
  <li>Preheat your oven to 350°F (175°C).</li>
  <li>Grease and flour two 9-inch round cake pans.</li>
  <li>In a medium bowl, sift together the flour, baking powder, baking soda, and salt.</li>
 </ul>

Do:

<h2> Cake Recipe </h2>
<ol>
  <li>Preheat your oven to 350°F (175°C).</li>
  <li>Grease and flour two 9-inch round cake pan.</li>
  <li>In a medium bowl, sift together the flour, baking powder, baking soda, and salt.</li>
 </ol>

While both unordered and ordered lists present information sequentially, their implications differ significantly, especially in languages like English which are read from left to right and top to bottom. An unordered list, despite lacking explicit indexing, still suggests a sequence. In contrast, an ordered list emphasizes a specific, often chronological, sequence. By indexing the list items, people are directed to follow the information in a particular order, which is crucial for understanding instructions or processes, as illustrated in the example of the ordered list code. This difference matters in various contexts such as instructional or procedural information, where the order of steps can affect how well they are understood and done.

Using Lists for Non-List Content

HTML lists can sometimes be misused by authors who wish to achieve a particular visual effect on a webpage. This can involve manipulating the typical structure and presentation of lists for reasons unrelated to their intended purpose. One common example is wrapping entire paragraphs of text within <li> tags when the content is not itemized or part of a sequence. This could make the text harder to read and understand for everyone including people relying on screen readers, as it suggests a list structure where there isn't one. Instead, authors should use tags semantically, to reflect the type of content they are communicating. In this case, a paragraph <p></p> constructs are appropriate.

Creating ‘fake’ lists.

This involves implementing items in a way that they are visually recognized as lists. Often, some authors use divs, spans, or paragraphs, decorating them with hyphens, emojis, images, or numbers to simulate list formatting. While this approach might seem adequate for sighted users due to the presence of markers, it falls short for people who rely on screen readers. This is because screen readers announce the content based on its code structure, not on how the lists appear visually.

Don't:

<h2> To-do List </h2>
<div>*Clean</div>
<div>-Exercise </div>
<div>⭐Meal Prep </div>

Do:

<h2> To-do List </h2>
<ul>
  <li>Clean</li>
  <li>Exercise</li>
  <li>Meal Prep</li>
 </ul>

In the first code sample, a screen reader will only announce the text content of the divs. People relying on screen readers will not know that this is a list or how many items are present. However, in the second example, the screen reader will announce the items as a list and provide the context of the number of items, which is three.

Implementing invalid list structure.

Implementing invalid list structures is another common issue on the web. Using divs, p, and spans as direct children-ordered lists <ol> or unordered lists <ul> is not valid. According to the Web Hypertext Application Technology Working Group (WHATWG), it disallows other elements as direct children on <ul> or <ol> constructs as outlined in their HTML specifications. This ensures that content is structured and presented consistently and accessible across various platforms such as web browsers and assistive technologies like screen readers, making it usable for everyone.

Don't:

<h2> My Favorite Fruits </h2>
<ul>
  <li> Orange</li>
  <div> Apple</div>
  <li> Banana </li>
</ul>

Do:

<h2> My Favorite Fruits </h2>
<ul>
  <li>Orange</li>
  <li> Apple</li>
  <li> Banana </li>
 </ul>

Screen readers interpret and announce lists based on the code's structure. Consider the two above code samples with NVDA (screen reader). In the first code sample, a non-list child element is included within a list. This results in a confusing output. Although the screen reader recognizes three items in the list, it fails to correctly identify 'apple' as a separate item. Instead, it announces 'apple' as plain text, seemingly part of the 'Orange' item, leading to an output like 'Bullet Orange apple'. In addition, this creates confusion because the screen reader announces the presence of three items, but effectively only two are clearly announced. In the second code sample, the list is structured correctly with valid items. The screen reader accurately announces the number of items, along with each item's context, providing clarity and understanding of the list items.

Conclusion

Lists, when implemented semantically, are great. They facilitate the visual conveyance of relationships between items, ensuring that information is easier to consume and understand. Assistive technologies such as screen readers can also present information accurately. Let's aim to implement semantic HTML lists so that we can continue creating meaningful structures and content for everyone.

Thank you for reading!

Resources for Further Reading

• On the <dl> by Ben Myers
• The Unordered List element by MDN (Mozilla Developer Network)
• The Ordered List element by MDN
• The Description List element
• ARIA Lists: Jump to Native ul and ol announcements

About Winnie Bosibori

Winnie is a Freelance Accessibility Consultant and Auditor from Kenya. She is deeply passionate about digital accessibility and inclusive design. She is a firm believer that accessible and inclusive technologies will allow a range of diverse people to fully participate in their day-to-day lives.

Winnie on LinkedIn: LinkedIn
Winnie on Mastodon: Mastodon

More articles