Native title attribute as the only description
names/title-only
- WCAG success criterion
- 4.1.2 (level A)
- Outcome class
- Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
- Area
- Accessibility, Technical Robustness
- Default severity
- medium
- axe-core rule
title-only-description
Why we flag this
The title attribute's tooltip only appears on mouse hover; with a keyboard and on touch devices the element's purpose stays invisible.
The accessible name comes only from the title attribute; no text content, no aria-label, no aria-labelledby.
What the rule checks
Scope. Buttons, links and button/image/checkbox/radio inputs in the accessibility tree whose only name source is the title attribute; text fields are forms/title-only-label.
Expectation. Review when the title attribute is the only name: its tooltip appears on mouse hover only, not on keyboard focus or touch. title is a valid name source (H65), so never a violation. A control with a visible or ARIA name and a title that only adds a hint passes. Hidden subtrees are out of scope.
Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; HTML-AAM / accname 1.2 (title as last name source); WCAG technique H65 (sufficient), APG on title tooltips
Detection: shared; needs dom, ax_tree.
Failing example
The check flags this for review. 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.