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 <li> the only element children of <ul>/<ol>; wrap stray content in an <li>. When restructuring is impossible, role="listitem" on the stray child (or role="presentation" on decorative separators) restores valid list semantics.

Example#

<ul><div>One</div></ul>

<ul><li>One</li></ul>

Example#

<ul><span>One</span><span>Two</span></ul>

<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

References#

• W3C — Lists