Web A11y Testing Demo > Lists

Lists

About This Page

This page has been adapted from the lists core concept page on the WSU digital accessibility website by Daniel Rieck (daniel.rieck@wsu.edu). Specifically, Daniel first included narrative content from the original lists page and then expanded it with additional thoughts, opinions, and examples to create more opportunities to demonstrate how to test a document for common accessibility errors that involve lists. This page was used as part of a presentation on web accessibility testing for GAAD 2024.

Test this page using WAVE

This page has no accessibility issues that affect lists. All of its text that should be lists were coded as lists using proper app formatting tools. List types—ordered or unordered—have also been correctly chosen. All lists are properly structured, including those that are nested.

Importance of Lists

A person with a visual impairment will not perceive the visual cues that help a sighted person understand that a set of items, displayed in digital content, should be considered as a group. When a person using assistive technology, like a screen-reader, comes across an accessible list in digital content, the first thing identified will be the number of items in the list. This helps orient them to the fact that they are entering a list, and how long it is.

If a list is improperly formatted, it may be confusing as to why there is a random string of words like “apple orange banana” in the middle of a document.

Types of Lists

There are two main types of lists: Unordered (bulleted) and ordered (numbered or lettered).

Unordered List

An unordered list is comprised of a collection of items that should be grouped together but in no particular order. For example, a list of fruits that a person is willing to eat would be best expressed as an unordered list:

  • Apples
  • Grapes
  • Kiwis
  • Oranges
  • Pears

Note that even though the list above is alphabetized, and in a sense thereby [manually] “ordered,” it is still an unordered list as far as the code is concerned.

Ordered List

An ordered list is comprised of a collection of items that should be grouped together in a specific order for the collection to be fully understood. For example, a list of instructions for preparing a dough to rise must be ordered because the steps must be followed in sequence to achieve success:

  1. Check yeast expiration date.
  2. Add flour to bowl.
  3. Add room-temperature yeast to the flour.
  4. Add warm water.
  5. Kneed the ingredients into dough.

Structuring Lists

Multi-column List Example

WSU Top Ten Seniors for 2024

  • Felicia Adesope
  • Preston Bebich
  • Alexis Dunn
  • Stevie Fawcett
  • Charlisse Leger-Walker
  • Zachary “Zack” Martian
  • Reem Osman
  • Sidney Serna
  • Logan Terry
  • Thomas Wieland

Nesting Lists

Unordered Nested List

Foods that a person likes:

  • Fruits
    • Apples
      • Fuji
      • Cosmic Crisp
      • Honeycrisp
    • Grapes
    • Kiwis
    • Oranges
    • Pears
      • Anjou
      • Bartlett
      • Bosc
      • Concorde
  • Vegetables
    • Broccoli
    • Carrots
    • Onions
      • Red
      • Sweet

Ordered Nested List

Abbreviated excerpt of the table of contents from the WHATWG HTML5 spec:

  1. Introduction
  2. Common infrastructure
  3. Semantics, structure, and APIs of HTML documents
  4. The elements of HTML
    1. The document element
      1. The html element
    2. Document metadata
      1. The head element
      2. The title element
      3. The base element
      4. The link element
      5. The meta element
      6. The style element
      7. Interactions of styling and scripting
    3. Sections
    4. Grouping content
    5. [And so on]

Nested List with Mixed Ordering

Schedule of appointments with an embedded shopping list:

  1. Doctor’s appointment at 8:30 a.m.
  2. Get groceries.
    • Apples
    • Bread
    • Broccoli
    • Carrots
    • Tofu
  3. Lunch with Jordan at 12:00 p.m.
  4. Dental appointment at 3:00 p.m.
  5. Pick up hardware supplies to finish kitchen remodeling.
    • Paint
    • Roller brush
    • Wall hole repair kit