Groups of links should use list semantics

Rule link-group-semantics · Component patterns (best practice) · impact minor · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Screen readers announce the number of items in a list and let users navigate it as a group. Several related links placed directly in a container, with no list structure, lose that grouping and item count.

How to fix#

Best fix: wrap the links in a list — <ul>``<li>…</li>``</ul> — inside a <nav> when they are navigation. If the markup cannot be restructured, put the grouping on the links' own container (the element this finding points at, not a wrapper above it): role="navigation" with an aria-label for navigation links, or role="group" with an aria-label for any other related set. A <nav> or role="navigation" on any ancestor also counts. Do not use role="list" on the existing container — a list must contain <li> or role="listitem" children, so on bare links it fails 4.1.2 instead — and never role="link" on the container. Links inside a sentence are prose: leave them as they are.

Example#

<div><a href="/1">One</a><a href="/2">Two</a><a href="/3">Three</a></div>

<ul><li><a href="/1">One</a></li><li><a href="/2">Two</a></li><li><a href="/3">Three</a></li></ul>

Example#

<div class="collections"><a href="/a"><img src="a.jpg" alt="Alpha"></a><a href="/b"><img src="b.jpg" alt="Beta"></a><a href="/c"><img src="c.jpg" alt="Gamma"></a></div>

<div class="collections" role="group" aria-label="Shop by collection"><a href="/a"><img src="a.jpg" alt="Alpha"></a><a href="/b"><img src="b.jpg" alt="Beta"></a><a href="/c"><img src="c.jpg" alt="Gamma"></a></div>

When restructuring is not possible, the role and its label go on the links' own container. role="list" here would also need role="listitem" children.

Example#

<footer><a href="/terms">Terms</a> | <a href="/privacy">Privacy</a> | <a href="/cookies">Cookies</a></footer>

<p>Read our <a href="/terms">terms</a>, <a href="/privacy">privacy policy</a> and <a href="/cookies">cookie policy</a> before signing up.</p>

Inline links in a sentence are prose, not a link group — they must not be converted to a list.

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 Best practice

References#

• W3C — Page Structure