Iframe without accessible name

frames/name-missing

WCAG success criterion: 2.4.1 (level A)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Content & Alternatives
Default severity: high
axe-core rule: frame-title

Why we flag this

Screen reader users cannot identify the purpose and content of the embedded frame.

Missing accessible name on iframe/frame.

What the rule checks

Scope. iframe elements included in the accessibility tree, also inside open shadow roots: not display:none, not aria-hidden, not role=none/presentation.

Expectation. Fails for every applicable iframe whose accessible name is empty: no title, an empty title, no aria-label or aria-labelledby. A name from title or aria-label passes. Frames that are hidden (display:none, aria-hidden) or presentational are not exposed as frames and do not apply. One finding per frame, at the iframe.

Source. WCAG 2.2 SC 4.1.2 Name, Role, Value; ACT cae760 (iframe element has accessible name); H64

Detection: shared; needs dom, computed_style.

Failing example

The check reports a violation here. Corpus case frame_missing_title. The page may contain further findings for other rules.

frame_missing_title.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Frame missing title corpus case</title>
</head>
<body>
    <main>
        <h1>Page with an untitled iframe</h1>
        <iframe src="/embedded-widget" width="300" height="200"></iframe>
    </main>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case structure_bypass_missing. The page may contain further findings for other rules.

structure_bypass_missing.htmlHTML

<!DOCTYPE html>
<html lang="en_US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font: 16px/1.5 sans-serif; margin: 0 16px; }
        a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; }
        input, button { min-width: 44px; min-height: 44px; }
    </style>
</head>
<body>
    <!-- An old intranet page (#783): no <title> at all, a locale-style lang
         value ("en_US" uses an underscore, which BCP 47 does not allow, so
         the primary subtag is not "en"), and a repeated navigation block with
         no way to bypass it: no heading, no main landmark, no skip link. -->
    <nav>
        <a href="/">Intranet home</a>
        <a href="/staff/">Staff directory</a>
        <a href="/forms/">Request forms</a>
        <a href="/help/">IT help desk</a>
    </nav>
    <!-- The only heading is hidden, so it bypasses nothing. -->
    <h1 hidden>Intranet</h1>
    <div class="content">
        <p>Holiday requests for next year are due by the end of the month.</p>
        <p>Use the staff portal to submit them.</p>
        <!-- An embedded calendar with its own title: it titles the frame
             document, not this page. -->
        <iframe title="Staff calendar" width="300" height="150"
            srcdoc="<!DOCTYPE html><html lang='en'><head><title>Staff calendar</title></head><body><p>No events today</p></body></html>"></iframe>
    </div>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.