Accessibility Wiki

Lists must be structured correctly

Rule list-structure · Structure & semantics · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters

Screen readers announce list length and position ("item 2 of 5"). Foreign elements directly inside a list, or list items outside a list, break that semantic and the announced counts.

How to fix

Make

  • the only element children of
      /
        ; wrap stray content in an
      1. . When restructuring is impossible, role="listitem" on the stray child (or role="presentation" on decorative separators) restores valid list semantics.

        Example

        ✕ Fails
        <ul><div>One</div></ul>
        ✓ Passes
        <ul><li>One</li></ul>

        Example

        ✕ Fails
        <ul><span>One</span><span>Two</span></ul>
        ✓ Passes
        <ul role="listbox" aria-label="Color"><div role="option">Red</div><div role="option">Blue</div></ul>

        A role override removes list semantics, so native list-content requirements no longer apply.

        WCAG success criteria

        1.3.1 Info and Relationships — Level A

        Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

        Understanding 1.3.1

        Standards

        This rule contributes to the following standards:

        WCAG A EN 301 549

        Standard Criteria
        EN 301 549 9.1.3.1

        References