Web A11y Testing Demo > Lists > Inaccurate List Type Used

Inaccurate List Type Used

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

Compared to the reference page that has no accessibility issues that affect lists, all of the lists on this page have had their list type inverted. Lists of items that do not need a particular order have been given one, and lists of items that should be articulated in a definite order are confusingly expressed as unordered. This issue will require a manual check as there is probably no safe way for automatic testing to “know” that a list should be of a certain type.

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:

  1. Apples
  2. Grapes
  3. Kiwis
  4. Oranges
  5. 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:

  • Check yeast expiration date.
  • Add flour to bowl.
  • Add room-temperature yeast to the flour.
  • Add warm water.
  • Kneed the ingredients into dough.

Structuring Lists

Multi-column List Example

WSU Top Ten Seniors for 2024

  1. Felicia Adesope
  2. Preston Bebich
  3. Alexis Dunn
  4. Stevie Fawcett
  5. Charlisse Leger-Walker
  6. Zachary “Zack” Martian
  7. Reem Osman
  8. Sidney Serna
  9. Logan Terry
  10. Thomas Wieland

Nesting Lists

Unordered Nested List

Foods that a person likes:

  1. Fruits
    1. Apples
      1. Fuji
      2. Cosmic Crisp
      3. Honeycrisp
    2. Grapes
    3. Kiwis
    4. Oranges
    5. Pears
      • Anjou
      • Bartlett
      • Bosc
      • Concorde
  2. Vegetables
    • Broccoli
    • Carrots
    • Onions
      • Red
      • Sweet

Ordered Nested List

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

  • Introduction
  • Common infrastructure
  • Semantics, structure, and APIs of HTML documents
  • The elements of HTML
    • The document element
      • The html element
    • Document metadata
      • The head element
      • The title element
      • The base element
      • The link element
      • The meta element
      • The style element
      • Interactions of styling and scripting
    • Sections
    • Grouping content
    • [And so on]

Nested List with Mixed Ordering

Schedule of appointments with an embedded shopping list:

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