<dl> must contain properly-ordered <dt>/<dd> groups
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Assistive technologies depend on semantic structure to convey relationships (terms/definitions, list items, table headers). Invalid structures break navigation and comprehension.
How to fix this issue
Use the correct semantic elements and associations: `<dl>` with `<dt>`/`<dd>` pairs, lists with `<li>`, real headings `<h1>`–`<h6>`, and tables with `<caption>`, `<th scope>` or `headers`/`id` associations for complex tables.
Developer guidance
Add eslint/jsx-a11y rules for lists, headings, and table semantics. Provide table helpers that enforce captions and header associations.
Code examples
Incorrect Implementation
<dl><div>Term</div><div>Definition</div></dl>Correct Implementation
<dl><dt>API</dt><dd>Application Programming Interface</dd></dl>
Trusted by organizations across Europe working toward WCAG and EAA conformance