axe-core frame-title error frame missing accessible name

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