These docs are for CORA 0.10, an older release. Read this page in the newest docs.
Frames with controls need to be reachable by keyboard
- Rule:
axe/frame-focusable-content - Checks: Frames with focusable content must not have tabindex=-1
- WCAG: 2.1.1
- Fix class:
mechanical: A fix needs no authored text or visual decision.
Who it affects
Section titled “Who it affects”- People who use a keyboard or a switch device instead of a mouse.
- People who use a screen reader or a braille display, most of them blind.
How to fix it
Section titled “How to fix it”A frame with links or controls inside has tabindex="-1"
Section titled “A frame with links or controls inside has tabindex="-1"”Remove tabindex="-1" from the frame. In Chrome and Firefox it keeps Tab from reaching anything inside the frame, so keyboard users cannot use its controls.
<iframe src="/embed/newsletter-signup" title="Newsletter sign-up form"></iframe>The frame should stay out of reach until something opens it, such as a chat window
Section titled “The frame should stay out of reach until something opens it, such as a chat window”Hide the frame with the hidden attribute or display: none while it is closed, and show it without tabindex="-1" when it opens.
Fixes that fail
Section titled “Fixes that fail”Adding aria-hidden="true" to the frame
Section titled “Adding aria-hidden="true" to the frame”axe stops checking it, but its controls are still on screen. Screen reader users can no longer perceive them, and keyboard users still cannot reach them.
Adding tabindex="-1" to every control inside the frame
Section titled “Adding tabindex="-1" to every control inside the frame”axe stops reporting it, but then no keyboard user can reach the controls at all.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.