Digital AccessibilityCore ConceptsListsLists and Accessibility

Lists and Accessibility

This web page is intentionally created with accessibility errors to demonstrate the functionality of automatic accessibility checkers for web pages. View this webpage in an accessibility checker (WAVE) to help identify accessibility issues.

A numbered list is also referred to as an ordered list. A bulleted list is also referred to as an unordered list.

Error Types: Errors must be fixed. Alerts should be fixed. These fixes, both errors and alerts, improve the accessibility and usability of the content.

Best Practice: Using the appropriate tool to create lists. Lists also help people scan the content easily.

Assistive technology: Lists are identified by assistive technology, the number of items within them, and provide a way to navigate through them.

Fake Lists

Be sure to use the appropriate formatting tools to create lists.

Fake Numbered (Ordered) List

1. This list

2. Is Fake

3. Created by just adding

4. Numbers in front.

5. Many editors will automatically convert to a numbered list when you start typing a number and period.

Fake Bulleted (Unordered) List

* Another fake list

– An asterick or dash might be flagged by accessibility checkers

∙ Other forms of bullets (∙bullet, ·middot, and ■ blacksquare)

∙ Will not be flagged by accessibilty checkers

Error Type: Alert

Best Practice: Use the appropriate formatting tool to create lists.

Nested Lists

Use appropriate formatting tools (indent and outdent) to create nested lists. Accessibility checkers will show the nested items as lists, too.

Nested Numbered (Ordered) List

  1. Use the appropriate application tool for lists.
    1. Select the bullet (unordered) or numbered (ordered) list icon from the toolbar.
  2. Create the list.
    1. Select Enter to start a new item in the list.
    2. Use the indent and outdent icons to properly nest items.

Nested Bulleted (Unordered) List

  • Logical Sequences lists follow a specific order
    • Steps in a recipe or instructions
    • Top 10 books
  • Unordered Collections don’t need a specific order
    • Recipe ingredients
    • Lists of related links

Error Type: Alert.

Best Practice: Use the appropriate formatting tool to create nested lists.

Empty Lists

Empty lists can confuse assistive technology.

Empty Item in Numbered (Ordered) List

  1. Take this step first.
  2. Then this step.
  4. Finally, this step.

Empty Item in Bulleted (Unordered) List

  • Collection item this
  • Collection item that
  • Collection item whatchamacallit

Error Type: Alert. Accessibility checkers may not identify the empty list item.

Best Practice: Don’t include empty list items.

Accessibility Checks 

Use this checklist as a guide to ensure your lists are in an accessible format.

  • Lists use application formatting tools or HTML tags. [automatic & manual]
  • Lists are properly nested. [automatic & manual]
  • Lists are not manually created. [automatic & manual]

Tools for Web Pages

WAVE (website) and browser extensions: This is a full-page accessibility automatic check.

Additional Support

Analyze the Lists

Lists help organize content and make it easier to scan. Bulleted (ordered) lists show the relationship between items. Numbered lists provide the sequence of steps to take. Lists are helpful for more than 2–3 items.

  • Would the content be easier to understand and scan as a list?
  • Are there steps to take in a specific order?

Resources

  • Beginner’s guide to lists and how to make them accessible
    Source: PopeTech

    HTML lists are just lists that have the correct HTML behind them. When the HTML is correct, screen readers can navigate and read the list more easily. When writing content, lists group together related pieces of information.

    Tags: Article
  • Foundations: lists
    Source: Tetra Logical

    A list is generally agreed to be a series of words or phrases that are grouped together for a reason. That reason might be to remember the items we want from the store, to share our top five favorite movies, or to write down the steps needed to complete a task.

    Tags: Article
  • When to Use Lists and Why They Matter
    Source: Scott Vinkle

    Using lists appropriately is crucial for accessibility, especially for screen reader users. Here’s a breakdown of when to use different types of lists and why.

    Tags: Article
  • When to Use Lists for Better Accessibility
    Source: Scott Vinkle

    When creating HTML content, using lists appropriately is crucial for accessibility, especially for screen reader users. Here’s a breakdown of when to use different types of lists and why.

    Tags: Article

Video of List and Accessibility Training

Includes information about readability and plain language found on the Web Communication website.