Iframes focusable content must not use tabindex=-1 (WCAG)

Frames and iframes with focusable content must not use tabindex=-1

Frames and iframes that contain focusable content must not be given a negative tabindex. If tabindex is -1, keyboard focus cannot move into the embedded document and its controls are skipped. This often affects embedded widgets, maps, ads, chat, video players, and legacy frames.

Why It Matters

Keyboard users, including people who use switch devices or alternative input, rely on Tab and Shift+Tab to move through interactive content. A negative tabindex on a frame blocks entry, effectively hiding everything inside from keyboard navigation.

For scrollable frames, preventing focus also prevents keyboard scrolling within the frame. Screen reader users may hear the frame announced but cannot reach links, buttons, or form fields inside. This impacts WCAG 2.2 success criteria such as 2.1.1 Keyboard and 2.4.3 Focus Order.

Common Causes

• Adding tabindex="-1" to iframes to suppress focus styles instead of fixing styles properly.
• Third‑party embeds that ship with tabindex="-1" by default.
• Misunderstanding focus behavior for browsing context containers (frames/iframes).
• Trying to remove an iframe from the Tab order even though it contains interactive elements.
• Making a frame scrollable but preventing focus from entering it.

How to Fix

• Step 1: Locate all <frame> and <iframe> elements with tabindex="-1".
• Step 2: Determine whether the embedded document has any focusable elements (links, buttons, inputs, video controls) or requires keyboard scrolling.
• Step 3: If it contains focusable or scrollable content, remove the tabindex attribute or set tabindex="0" so focus can enter. Do not use positive tabindex values.
• Step 4: If the embed truly has no focusable content and never needs keyboard interaction or scrolling, tabindex="-1" is acceptable. Reconfirm this after any third‑party updates.
• Step 5: Provide a meaningful title attribute on the iframe so assistive technologies announce it (recommendation).
• Step 6: For legacy <frame>/<frameset>, apply the same rule; plan to replace framesets as they are obsolete.

How to Test

• Keyboard check:
• Tab through the page. Confirm focus moves into the iframe and reaches interactive elements inside.
• If the frame scrolls, verify Arrow keys/Page Up/Page Down/Space scroll within the frame when focused.
• Use Shift+Tab to move backward and confirm you can exit the frame.
• Screen reader check (NVDA/JAWS/VoiceOver):
• Navigate to the iframe. Ensure it is announced with a helpful title.
• Use Tab or quick-nav to reach controls inside. Confirm content is not skipped.
• Mobile/touch check:
• With a hardware keyboard (or Switch Control) on iOS/Android, ensure focus can enter the iframe and interact with its controls.
• Developer inspection:
• Search the DOM for frames with negative tabindex and verify the embedded content.

const frames = document.querySelectorAll('iframe[tabindex="-1"], frame[tabindex="-1"]');
frames.forEach(f => console.warn('Check frame with negative tabindex:', f));

Good Example

An iframe with interactive content and no negative tabindex:

<iframe title="Product demo iframe" srcdoc=\
  <div>Try the demo:</div>\
  <button id='start'>Start</button>\
  <a href='details.html'>Details</a>\
></iframe>

A purely non-interactive iframe excluded from the Tab order:

<iframe title="Analytics container" src="about:blank" tabindex="-1"></iframe>

Bad Example

An iframe that contains focusable elements but is removed from the Tab order:

<iframe title="Signup widget" tabindex="-1" srcdoc=\
  <form>\
    <input type='email' placeholder='Email address'>\
    <button type='submit'>Join</button>\
  </form>\
></iframe>

Quick Checklist

• No iframe or frame with focusable content uses tabindex="-1".
• Frames that need keyboard interaction or scrolling have no tabindex or tabindex="0".
• Decorative/utility iframes use tabindex="-1" only when they contain no focusable content.
• Iframe has a concise, descriptive title (recommendation).
• Tab and Shift+Tab can enter and exit the frame in sequence.
• Interactive elements inside frames are reachable and operable by keyboard.
• Avoid positive tabindex values on frames.