Lists
Lists make content easier to scan, understand, and navigate. For screen reader users, properly coded lists announce how many items are present and allow efficient movement between them. In this chapter, you’ll learn what makes lists accessible, how they improve comprehension and navigation, the best practices for coding them, and how to test lists to ensure they work for everyone.
)
Want to learn more about AudioEye?
Share Course
What are the Three Types of HTML Lists?
Lists are one of the simplest, yet most powerful tools for organizing content. Using the correct HTML element for the right type of list ensures both clarity and consistency.
HTML provides three main types of lists:
Unordered lists (<ul>)
Used for items without a particular order, such as feature lists or navigation menus.
Ordered lists (<ol>)
Used for numbered or sequential items, such as step-by-step instructions or ranked items.
Description lists (<dl>)
Used for terms and their descriptions, such as glossaries or FAQ sections.
Each of these elements defines the inherent structure of lists, aiding in comprehension and navigation. Choosing the right list type enables you to improve readability and ensure that assistive technologies communicate the intended meaning of content.
How Do Lists Impact Accessibility?
Lists play a critical role in accessibility. They provide structure and meaning to information for users who rely on assistive technologies.
Screen reader navigation: Using correct list markup (<ul>, <ol>, <dl>) ensures that assistive technologies, like screen readers, can correctly identify and announce lists to users. For example, a screen reader will typically announce "list with N items" and then read each list item, providing crucial context that plain text cannot.
Consistency across devices: Lists adapt well to different screen sizes and zoom levels, keeping relationships between items clear whether viewed on a desktop, tablet, or phone.
Cognitive support: Proper list structure helps users understand the relationships between items and the overall organization of content. This is particularly beneficial for users with cognitive disabilities who rely on clear content structures.
Predictability: Using the correct HTML elements ensures users experience lists consistently across websites, building trust and reducing confusion.
Navigation: While not a primary navigation method like headings, screen readers can navigate by lists, allowing users to jump directly to list content.
What WCAG Success Criteria are Relevant for Lists?
Creating accessible lists enables you to fulfill WCAG success criterion 1.3.1 Info and Relationships (Level A). This success criterion directly applies to lists, requiring that information, structure, and relationships conveyed through presentation are programmatically determinable. Using <ul>, <ol>, and <dl> ensures this semantic structure is exposed to assistive technologies.
Which of the following is not a common list type?
Hint: If it's not something you'd use to structure or order items, it's likely not a list type.
True or False: Lists help users with cognitive disabilities understand the relationship between items.
Hint: Remember, the purpose of lists is to provide more structure to content.
What is the primary benefit of using correct HTML list markup (e.g., <ul>, <ol>) for accessibility?
Hint: Think about how screen readers understand and communicate content structure.
Which of the following is considered a coding best practice for lists?
Hint: Focus on what makes a list navigable for users, not just what it looks like.
The WCAG criterion 1.3.1 Info and Relationships (Level A) directly applies to lists by requiring what?
Hint: Think about how assistive technologies understand the connections between items in a list.
How Do I Maximize Accessibility When I Code Lists?
Getting the markup of lists right ensures that all users, including screen reader users, can navigate, understand, and interact with your content without confusion or extra effort.
Below are a few ways to code lists in an accessible manner:
Appropriate markup: Always use the correct HTML list element (<ul>, <ol>, or <dl>) for the type of list being presented. Do not use generic elements like <div> or <span> with CSS styling to simulate lists, as this removes the semantic meaning for assistive technologies.
List items: Each item within an <ul> or <ol> must be enclosed within an <li> (list item) tag. For description lists, use <dt> (description term) and <dd> (description details) tags.
Avoid formatting with spaces: Do not use whitespace characters (like spaces or tabs) to create visual indentation or multiple columns within plain text to simulate lists, as this breaks the programmatic determination of structure and sequence.
How Do I Test the Accessibility of Lists?
Testing is essential to ensure that lists are not only visually correct but also usable by everyone, including users of assistive technologies.
Let’s explore a few ways you can test list accessibility.
Screen Readers
Test with popular screen readers (e.g., VoiceOver, NVDA, JAWS).
Navigate using the arrow keys and listen carefully for announcements like "list with N items" and a clear reading of each list item. This ensures that the list structure is properly conveyed.
Use the screen reader's "elements list" (NVDA: Insert + F7) or "rotor" (VoiceOver: Control + Option + U) to check for lists and their content specifically. Ensure that each item is correctly announced.
Keyboard and Visual Testing
Navigate lists using only a keyboard to confirm that focus moves logically from one item to the next.
Visually inspect lists on the page to ensure that items are properly next, reading order matches expectations, and spacing or indentation clearly differentiates levels of hierarchy.
Verify that simulated lists (e.g., using CSS or spacing tricks) are not present, as these can break accessibility and confuse assistive technologies.
Additional Tips
Test both desktop and mobile layouts to ensure list structures remain accessible across screen sizes.
Combine screen reader and visual review for a comprehensive assessment, catching issues that one method alone might miss.
When conducting screen reader testing on lists, what should you look for?
Hint: Pay attention to whether the screen reader announces how many items are in the list and reads them in the correct order — this helps users understand the list’s structure and content.
How Can I Learn More About Accessible Lists?
To deepen your understanding of accessible lists, explore scenarios where lists are nested within other lists, such as multi-level menus or detailed instructions. Properly nesting <ul> or <ol> elements within <li> elements ensures that screen readers accurately convey hierarchy and relationships, making complex content understandable for all users.
Additionally, practice testing nested and complex lists with screen readers and keyboard navigation to see how the structure is communicated. Reviewing W3C’s guidance on HTML lists and WCAG success criteria can provide concrete examples and best practices to implement in your projects.
Keep Learning
Move to the next chapter: Pop-up Dialogs