WCAG 1.3.1: Info and Relationships (List)

Back to all WCAG criteria

OVERVIEW

Effort:

  • Complexity:Easy
  • Duration:Fast

Important for:

Development

What's it about?

Content that visually looks like a list must also be marked up as a list in HTML.

Example of an unordered list with the correct HTML elements.

How to

Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.

    Notes

        • Example of a breadcrumb created as an ordered list and using the correct HTML elements. Here, the order of the items is important. **Alt-Text** Illustration of a breadcrumb navigation built with an ordered list, showing list items in the correct sequence to reflect the navigation path.

          Hint: Lists as ul or ol

          Depending on whether the order of the items in a list matters or not, they should be marked up as <ol> or <ul>.

          For a breadcrumb navigation or a step-by-step guide, the order is important, so an <ol> is used. For a regular navigation menu, the exact order is usually not essential. Therefore, a <ul> is used.

          Accessible development?

          Our workshop for developers!

          Learn everything you need to know in our workshop to build accessible websites!

          More about the workshop

          Learn accessibility with us?

          Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.

          Send us an email!