axe-core frame-focusable-content error: frame has focusable content without 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 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 skip-link error skip link target not focusable failed - how to fix it

TL;DR

A skip link that points at a non-focusable target fails silently: keyboard users activate it and focus stays on the link. Give the target tabindex="-1" so it can receive programmatic focus, for example [main id="main" tabindex="-1"]. Keep the skip link visually hidden until focused, and test it with a keyboard from the top of the page.

The skip link is the cheapest accessibility feature on a page and the most embarrassing to get wrong. It is also the feature most likely to be broken by third-party scripts: consent banners, chat widgets, and A/B testing tools inject focusable elements before it. Re-verify skip link behavior after every third-party addition, not just at launch.

The verbatim error looks like this:

axe-core 4.x
Rule: skip-link (moderate)
"Ensure all skip links have a focusable target"

Element: [a href="#main" class="skip-link"]Skip to main content[/a]
  Target [main id="main"] is not focusable; activating the link moves nothing.

Steps

1. Reproduce with the single rule:

npx @axe-core/cli https://example.com/ --rules skip-link

Expected: the skip link is listed because its target cannot receive focus.

2. Check the target element. [main], [div id="main"], and most landmarks are not focusable by default, which is the usual cause.
3. Make the target focusable:

[a href="#main" class="skip-link"]Skip to main content[/a]
[main id="main" tabindex="-1"]...[/main]

tabindex="-1" allows programmatic focus without adding the target to the tab order.

4. Re-run the focused scan. Expected output: 0 violations for skip-link.
5. Keyboard-test from a fresh page load: press Tab once, confirm the skip link becomes visible, activate it, and confirm focus lands at the start of the main content.
6. Audit what comes before the skip link in the final rendered DOM. View source is not enough; scripts inject content. Use devtools to inspect the first tabbable elements on a fresh load with all third-party scripts running.
7. Style the skip link to be visually hidden but not display:none, and reveal it on focus:

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

A skip link nobody can see when focused helps nobody.

When to use

• Axe flags skip-link on a skip navigation link.
• A page has a skip link but keyboard users report it does nothing.
• An audit lists a non-focusable skip target as a moderate violation.

When not to use

• The page has no skip link at all (add one as the first focusable element).
• The skip link points at the wrong landmark (fix the href target).
• The target is inside a modal or hidden region (restructure; the main content must exist on page load).

Why it happens

Skip links exist so keyboard users can bypass repeated navigation. When the target is not focusable, the browser may scroll visually but focus stays behind, so the next Tab press sends the user right back into the nav they tried to skip. tabindex="-1" is the standard fix because it enables focus without polluting the tab order.

Skip links date to the earliest web accessibility guidance, and every accessibility checklist mentions them, which is why pages have them and why they are often broken: they were added to satisfy a checklist, then never tested. The tabindex="-1" requirement is the detail that checklist-driven implementations miss, because the link appears to work visually (the page scrolls) while focus stays behind.

Edge cases

• Single-page apps that replace [main] on route change must re-apply tabindex="-1" to the new target or move focus to the new view's heading instead.
• The skip link itself must be the first tabbable element. Consent banners or chat widgets injected before it break the pattern.
• Do not hide the skip link with display:none; use the visually-hidden-until-focused pattern so it appears on keyboard focus.
• If the main landmark has an accessible name via aria-label, keep it; the skip target fix is independent.
• Multiple skip links (to main content, to navigation, to search) are fine; each target needs tabindex="-1".
• In SPAs, route changes should move focus to the new view's heading or main landmark. A skip link alone does not handle route-change focus.
• Do not point the skip link at an element inside a collapsed accordion or tab. The target must be visible and focusable on load.

Provenance

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

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

Thread query: axe-core skip-link error skip link target not focusable failed

TL;DR: A skip link that points at a non-focusable target fails silently: keyboard users activate it and focus stays on the link. Give the target tabindex="-1" so it can receive programmatic focus, for example [main id="main" tabindex="-1"]. Keep the skip link visually hidden until focused, and test it with a keyboard from the top of the page.