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#

Wrap related links in <ul>``<li>…</li>``</ul> (inside a <nav> when they are navigation), instead of placing bare <a> elements side by side. Setting role="list"/role="navigation" (or role="group" with a label) on the existing container conveys the grouping without restructuring.

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#

<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