Web A11y Testing Demo > Lists > Lists Not Properly Structured or Nested

Lists Not Properly Structured or Nested

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, something wrong has happened with the nesting of all the lists on this page. In some cases, a list that should be cohesive has been accidentally split apart. In one case, items within a sub-list were needlessly grouped together by an interposing div element. In another case, an attempt to mix list types when nesting went awry creating three separate lists. Finally, a multi-column list was incorrectly split into separate lists contained in separate layout containers.

Unfortunately, should you check this page in WAVE, you will find no errors or alerts are generated by the tool. Manual testing is required to uncover all the accessibility issues with the lists on this page. However, WAVE’s structure and code inspection tools are helpful in this case for more easily and quickly spotting issues when manually testing.

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.
  1. Add warm water.
  2. 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
      1. The meta element
      2. The style element
      3. 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
  1. Lunch with Jordan at 12:00 p.m.
  2. Dental appointment at 3:00 p.m.
  3. Pick up hardware supplies to finish kitchen remodeling.
    • Paint
    • Roller brush
    • Wall hole repair kit