Interactive element without a meaningful name

names/symbol-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: high
axe-core rule: aria-label

Why we flag this

Screen reader users are not told what the element does.

Missing or purely symbolic aria-label/aria-labelledby/text content.

What the rule checks

Scope. Interactive elements in the accessibility tree whose name comes from an author attribute (aria-label, aria-labelledby, title).

Expectation. Review when the authored name is a single character that is neither a letter nor a digit ("×", "☰", "✕"): a screen reader reads "times" or nothing. 4.1.2 requires a name, not a good one, so never a violation. One-character names that are letters (also non-ASCII, "Ä") or digits pass, and a symbol that comes from content rather than an attribute is not this id. Hidden subtrees are out of scope.

Source. WCAG 2.2 SC 4.1.2 Name, Role, Value (a name must identify the control); accname 1.2

Detection: shared; needs dom, ax_tree.

Failing example

The check flags this for review. Corpus case aria_names_missing, element button#close-player. The page may contain further findings for other rules.

aria_names_missing.htmlHTML

<!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>

        <!-- names/required-missing: custom controls whose name sources come
             out empty -->
        <div id="volume" role="slider" tabindex="0" 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"></span>
        <label for="station">   </label>
        <input id="station" type="text">

        <!-- names/symbol-only: the author-provided name is a single symbol -->
        <button type="button" id="close-player" aria-label="&#x00D7;"><span aria-hidden="true">&#x00D7;</span></button>

        <!-- names/title-only: the title tooltip is the only name -->
        <button type="button" id="share" title="Share"><svg aria-hidden="true" width="16" height="16"><circle cx="8" cy="8" r="6"></circle></svg></button>

        <!-- label-in-name/mismatch: spoken "Play" does not match the name -->
        <button type="button" id="play" aria-label="Start stream">Play</button>
        <!-- the visible label stays visible under aria-hidden -->
        <button type="button" id="skip" aria-label="Next song"><span aria-hidden="true">Skip</span></button>
        <!-- named by aria-labelledby, which leaves out the visible "Back" -->
        <button type="button" id="rewind" aria-labelledby="rewind-label">Back</button>
        <span id="rewind-label" hidden>Rewind 10 seconds</span>
        <!-- threshold: visible text exactly twice as long as the name still
             is the label, so it fails -->
        <button type="button" id="continue" aria-label="Next">Continue</button>
        <!-- threshold: visible text more than twice the name, a card whose
             visible label is ambiguous: review -->
        <a href="/shows/jazz-night" id="show-card" aria-label="Jazz night">Tonight on air: smooth jazz from the archives</a>

        <!-- description-duplicates-name: name and description identical -->
        <button type="button" id="mute" aria-describedby="mute-desc">Mute</button>
        <span id="mute-desc" hidden>Mute</span>

        <!-- summary/name-missing: empty disclosure summary -->
        <details id="lyrics">
            <summary id="lyrics-summary"></summary>
            <p>No lyrics available.</p>
        </details>

        <!-- svg/name-missing: an explicit image without a name -->
        <svg id="cover" role="img" width="120" height="120" viewBox="0 0 120 120">
            <rect width="120" height="120" fill="#335"></rect>
        </svg>
        <!-- svg/name-missing (review): no role, may be decoration -->
        <svg id="waveform" width="200" height="40" viewBox="0 0 200 40">
            <path d="M0 20 L200 20" stroke="#000"></path>
        </svg>
    </main>
    <footer>
        <p>Example radio</p>
    </footer>
</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.

aria_names_valid.htmlHTML

<!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="&#x00C4;">&#x00C4;</button>
        <button type="button" id="next-arrow">&#x2192;</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>&#x00B9;</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">&#x2139;</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.