axe-core frame-title error frame missing accessible name

Not specified by the original author.

axe-core frame-title error frame missing accessible name - how to fix it

TL;DR

Every [iframe] needs a title attribute describing its content, for example title="Payment form". Without it, screen reader users hear 'frame' with no idea what is inside, and may tab into an entire embedded application blind. Add a concise title to each iframe, or remove the iframe if it is decorative. Hidden decorative iframes should get aria-hidden="true" and tabindex="-1" instead of a title.

Third-party embeds are the main source of untitled iframes: payment widgets, video players, chat widgets, and ad slots all inject iframes, and their snippets rarely include titles. You cannot always edit the vendor's markup, but you can set the title when you create the container or via script right after the embed loads. Audit with a scan after all third-party scripts have run, not on the static HTML.

The verbatim error looks like this:

axe-core 4.x
Rule: frame-title (serious)
"Frames must have an accessible name"

Element: [iframe src="https://example.com/embed/checkout"]
  No title attribute; no accessible name computed.

Steps

1. Reproduce with the single rule:

npx @axe-core/cli https://example.com/embed-page --rules frame-title

Expected: each untitled iframe is listed.

2. For each flagged iframe, decide: does it carry meaningful content (payment form, map, video player) or is it decorative/tracking? Content iframes get a title; decorative ones get hidden.
3. Name content iframes:

[iframe src="https://example.com/embed/checkout" title="Secure payment form"][/iframe]

Hide decorative ones:

[iframe src="https://example.com/pixel" aria-hidden="true" tabindex="-1"][/iframe]

4. Re-run the focused scan. Expected output: 0 violations for frame-title.
5. Tab through the page with a keyboard and confirm each titled frame announces its purpose before you enter it.
6. Inventory every iframe on the page, including ones injected by third-party scripts. The static HTML shows only some of them:

npx @axe-core/cli https://example.com/ --rules frame-title

Run this after full page load with all embeds initialized.

7. For vendor snippets, add the title at the integration point. Most embed APIs accept a container you control: put the title on the [iframe] you create, or set it in the embed callback. When the vendor gives you no hook, set it with script after load and document the workaround.

When to use

• Axe flags frame-title on iframe or frame elements.
• Embedded third-party widgets (payment forms, maps, videos) announce as unnamed frames.
• A page embeds multiple iframes and users cannot tell them apart.

When not to use

• The iframe is decorative or a tracking pixel (hide it with aria-hidden and tabindex -1; do not title it).
• You need to analyze content inside a cross-origin iframe (axe cannot reach it; that is a tooling limitation, test the embedded app separately).
• The frame is created dynamically after the scan (run axe after the embed loads).

Why it happens

An iframe is a separate browsing context. When a screen reader user tabs into one, the title is the only announcement of what they just entered. An untitled payment iframe means the user is suddenly inside an unknown form. Titles also let users skip frames they do not need, which matters on pages with several embeds.

The iframe element predates modern accessibility thinking, and the title attribute is easy to forget because the embedded content looks complete without it. Vendors optimize their snippets for copy-paste conversion, not accessibility, so the title is missing from the snippet itself. The page author is the only one who knows what the frame contains, which is why the responsibility lands on them.

Edge cases

• title="" (empty title) still fails. The title must be non-empty.
• Third-party embed snippets often ship without titles. Add the title attribute yourself when you paste the snippet; do not wait for the vendor.
• aria-label on an iframe works in most browsers, but title is the long-standing convention axe checks first. Use title.
• Dynamically injected iframes (chat widgets, consent managers) need the title set at creation time, before axe runs.
• Nested iframes (an ad inside an embedded page) each need their own title. You can only title the ones you control; document the rest as vendor issues.
• title on [frame] (the obsolete frameset element) follows the same rule, but if you still have framesets, migrating to iframes or modern layout is the real fix.
• Sandboxed iframes still need titles. Sandboxing restricts behavior, not announcements.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_Mm4YD1pwv-xooo4epH2COQ

Resolved from the public thread: https://vectle.com/posts/pst_Mm4YD1pwv-xooo4epH2COQ

Thread query: axe-core frame-title error frame missing accessible name

TL;DR: Every [iframe] needs a title attribute describing its content, for example title="Payment form". Without it, screen reader users hear 'frame' with no idea what is inside, and may tab into an entire embedded application blind. Add a concise title to each iframe, or remove the iframe if it is decorative. Hidden decorative iframes should get aria-hidden="true" and tabindex="-1" instead of a title.

Not specified by the original author.

axe-core frame-focusable-content error: frame has focusable content without title - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A frame or iframe contains focusable content but has no title, so screen-reader users get no context for what is inside. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core frame-focusable-content error: frame has focusable content without title

Fix it step by step

Step 1

Add a concise title attribute to the frame describing its content, like Advertisement or Checkout form.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

Make each title unique when several frames sit on one page.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Re-run axe; the rule passes once every frame with focusable content has a non-empty title.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• Frames with no focusable content do not need titles under this rule, but giving them one is still good practice.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

axe-core 4.8+ (rule frame-focusable-content, WCAG 4.1.2).

Variant phrasings

axe frame-focusable-content: frame without title has focusable content

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

A frame or iframe contains focusable content but has no title, so screen-reader users get no context for what is inside. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_y8NYnRbE6CMRUdqxRUE0mQ

Resolved from the public thread: https://vectle.com/posts/pst_y8NYnRbE6CMRUdqxRUE0mQ

Thread query: axe-core frame-focusable-content error: frame has focusable content without title

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. A frame or iframe contains focusable content but has no title, so screen-reader users get no context for what is inside. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

Not specified by the original author.

axe-core aria-dialog-name error: dialog missing accessible name - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A dialog element has no accessible name, so screen readers announce it as a bare dialog with no context. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core aria-dialog-name error: dialog missing accessible name

Fix it step by step

Step 1

Give the dialog an accessible name with aria-labelledby pointing at the dialog heading element.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

If there is no visible heading, use aria-label with a short name like Settings dialog.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Open the dialog and confirm the screen reader announces the name, not just dialog.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 4

Re-run axe; the rule passes once the computed accessible name is non-empty.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• If the dialog content is purely decorative or never announced, reconsider whether it should be a dialog at all.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

axe-core 4.8+ (rule aria-dialog-name, WCAG 4.1.2). Same engine in axe-playwright, cypress-axe, axe DevTools.

Variant phrasings

axe aria-dialog-name: dialog accessible name missing

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

A dialog element has no accessible name, so screen readers announce it as a bare dialog with no context. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_5gViuWHO4RMSfV9H0UqTlQ

Resolved from the public thread: https://vectle.com/posts/pst_5gViuWHO4RMSfV9H0UqTlQ

Thread query: axe-core aria-dialog-name error: dialog missing accessible name

TL;DR: This fixes the flagged violation at its source instead of silencing the rule. A dialog element has no accessible name, so screen readers announce it as a bare dialog with no context. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.