Term without definition in a description list
lists/term-without-definition
- WCAG success criterion
- 1.3.1 (level A)
- Outcome class
- Automatic. An automated check that can report a confirmed violation.
- Area
- Accessibility, Structure & Semantics
- Default severity
- medium
- axe-core rule
lists/term-without-definition
Why we flag this
Screen reader users cannot recognize the term and its definition as belonging together.
<dt> without a following <dd> inside the <dl>.
What the rule checks
Scope. Every rendered, not aria-hidden term: <dt> or role="term".
Expectation. HTML's <dl> content model is groups of one or more <dt> followed by one or more <dd> (or <div> groups of the same). A term with no definition following it in its group fails 1.3.1: the reader hears a term and nothing that defines it. Several terms sharing one definition pass. A <dt> after the last <dd> (a trailing term) has no definition and fails even though its <dl> holds other definitions. role="term" without any role="definition" sibling fails the same way. Located at the term.
Source. WCAG 2.2 SC 1.3.1 Info and Relationships (F2, H48); HTML §4.4.5-4.4.10 list content models; WAI-ARIA 1.2 list/listitem/term/definition
Detection: shared; needs dom, computed_style.
Failing example
The check reports a violation here. Corpus case content_lists_trailing_term, element dt#trailing-term. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Glossary with a trailing term</title>
<style>
nav a, .skip-link { display: inline-block; min-width: 44px; min-height: 44px; }
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<p>City Library</p>
<nav aria-label="Main"><a href="/" aria-current="page">Home</a> <a href="/catalogue">Catalogue</a> <a href="/visit">Visit</a></nav>
</header>
<main id="main">
<h1>Glossary</h1>
<dl id="glossary">
<dt>Catalogue</dt>
<dd>The searchable index of all holdings.</dd>
<dt id="trailing-term">Stacks</dt>
</dl>
</main>
<footer><p>City Library, 1 Market Square</p></footer>
</body>
</html>Passing example
The check passes here and reports nothing. Corpus case content_lists_ok. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reading lists</title>
<style>
.plain { list-style: none; padding: 0; }
</style>
<style>
nav a, .skip-link, button { display: inline-block; min-width: 44px; min-height: 44px; }
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<header>
<p>City Library</p>
<nav aria-label="Main"><a href="/" aria-current="page">Home</a> <a href="/catalogue">Catalogue</a> <a href="/visit">Visit</a></nav>
</header>
<main id="main">
<h1>Reading lists</h1>
<h2>Genres</h2>
<ul id="genres">
<li>Crime</li>
<li>Poetry</li>
<script>/* analytics hook */</script>
<template><li>Placeholder</li></template>
</ul>
<h2>Steps to join</h2>
<ol id="join-steps"><li>Fill in the form.</li><li>Show an ID at the desk.</li></ol>
<h2>Branches</h2>
<ul role="list" class="plain" id="branch-list">
<li>North branch</li>
<li>South branch</li>
</ul>
<div role="list" id="aria-list"><div role="listitem">Mobile library</div></div>
<h2>Glossary</h2>
<dl id="glossary">
<div><dt>Interlibrary loan</dt><dd>A book borrowed from another library for you.</dd></div>
<div><dt>Renewal</dt><dd>Extending a loan by three weeks.</dd></div>
</dl>
<dl id="synonyms">
<dt>Reservation</dt>
<dt>Hold</dt>
<dd>A request to keep a book for you.</dd>
</dl>
<div role="term">Fine</div><div role="definition">A fee for late returns.</div>
<h2>Toolbar</h2>
<ul role="none" id="tool-list"><li role="none"><button type="button">Print</button></li></ul>
<h2>Shelves</h2>
<slotted-shelf><li>Atlas</li><li>Maps</li></slotted-shelf>
<script>
customElements.define('slotted-shelf', class extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' }).innerHTML = '<ul id="shadow-shelf"><slot></slot></ul>';
}
});
</script>
</main>
<footer><p>City Library, 1 Market Square</p></footer>
</body>
</html>This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.