Description repeats the name
description-duplicates-name
- WCAG success criterion
- 4.1.2 (level A)
- Outcome class
- Automatic. An automated check that can report a confirmed violation.
- Area
- Accessibility, Technical Robustness
- Default severity
- low
- axe-core rule
description-duplicates-name
Why we flag this
Screen readers announce the same text twice without adding information.
aria-describedby or title yields the same text as the name.
What the rule checks
Scope. Non-ignored nodes in Chrome's accessibility tree with an interactive role (button, link, textbox, checkbox, ... switch).
Expectation. Reports (best practice, tagged so) an interactive element whose accessible description is identical to its accessible name after trimming: screen readers announce the same text twice. A description that adds information passes; an element without description passes. Hidden elements are not in the tree. Applies in the top document, shadow roots and same-origin frames. Test strength: skipping ignored nodes is an equivalent mutation in Chrome — ignored AX nodes carry neither name nor description (aria_variant_hidden, button under aria-hidden), so the guard cannot change the outcome there; it stays for other tree sources.
Source. WCAG 2.2 SC 4.1.2 Name, Role, Value (best practice); accname 1.2 description computation
Detection: tree; needs ax_tree.
Failing example
The check reports a violation here. Corpus case name_description_best_practice. 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>Name and description best-practice corpus case</title>
</head>
<body>
<main>
<h1>Name and description best practice (#711, #713)</h1>
<!-- title-only-description: the title attribute is the only descriptive text -->
<button type="button" title="Search"><svg aria-hidden="true" width="10" height="10"></svg></button>
<!-- description-duplicates-name: the button has a name, its description
repeats it (Chrome drops a title equal to the name, aria-describedby not) -->
<button type="button" aria-describedby="close-desc">Close</button>
<span id="close-desc" hidden>Close</span>
<!-- neither: title adds information beyond the name -->
<button type="button" title="Opens the help page in a new window">Help</button>
<!-- neither: a real <label> names the field, title only adds a hint (#711) -->
<label for="kw">Keywords</label>
<input id="kw" type="search" title="Search the whole portal">
<input type="submit" value="Search" title="Start the search">
</main>
</body>
</html>Passing example
The check passes here and reports nothing. Corpus case aria_names_valid. 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>Media player - Example radio</title>
</head>
<body>
<header>
<p>Example radio</p>
</header>
<main>
<h1>Live stream</h1>
<!-- Every alternative name source: aria-label, aria-labelledby,
<label>, title on a native field, content -->
<div id="volume" role="slider" tabindex="0" aria-label="Volume" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10"></div>
<div id="autoplay" role="switch" tabindex="0" aria-checked="false" aria-labelledby="autoplay-label"></div>
<span id="autoplay-label">Autoplay</span>
<label for="station">Station</label>
<input id="station" type="text">
<input id="search" type="search" title="Search stations">
<div id="genre" role="radiogroup" aria-label="Genre">
<div role="radio" id="genre-jazz" tabindex="0" aria-checked="true">Jazz</div>
<div role="radio" id="genre-pop" tabindex="-1" aria-checked="false">Pop</div>
</div>
<!-- One-character names that are letters or digits, and a symbol
from content rather than from an attribute -->
<button type="button" id="channel-1" aria-label="1">1</button>
<button type="button" id="umlaut" aria-label="Ä">Ä</button>
<button type="button" id="next-arrow">→</button>
<!-- Title only adds to a visible name -->
<button type="button" id="share" title="Opens the share dialog">Share</button>
<!-- Name contains the visible label; a symbol label is exempt -->
<button type="button" id="play" aria-label="Play live stream">Play</button>
<a href="/notes#fn1" id="fn-ref" aria-label="Footnote 1"><sup>¹</sup></a>
<!-- Description adds information beyond the name -->
<button type="button" id="mute" aria-describedby="mute-desc">Mute</button>
<span id="mute-desc" hidden>Silences the stream until you unmute it</span>
<!-- Named summary, also through aria-label on an icon-only summary -->
<details id="lyrics">
<summary id="lyrics-summary">Lyrics</summary>
<p>No lyrics available.</p>
</details>
<details id="credits">
<summary id="credits-summary" aria-label="Credits"><span aria-hidden="true">ℹ</span></summary>
<p>Produced by Example radio.</p>
</details>
<!-- SVGs: named by title, by aria-label, decorative, and an icon inside
a named button -->
<svg id="cover" role="img" width="120" height="120" viewBox="0 0 120 120">
<title>Album cover: Blue Nights</title>
<rect width="120" height="120" fill="#335"></rect>
</svg>
<svg id="logo" role="img" aria-label="Example radio logo" width="40" height="40"><circle cx="20" cy="20" r="18"></circle></svg>
<svg id="divider" role="presentation" width="200" height="4"><path d="M0 2 L200 2" stroke="#000"></path></svg>
<button type="button" id="like"><svg id="like-icon" width="16" height="16"><circle cx="8" cy="8" r="6"></circle></svg> Like</button>
</main>
<footer>
<p>Example radio</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.