Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1

Ensure that <frame> and <iframe> elements containing focusable content do not have a negative tabindex, as this can hinder keyboard navigation and accessibility.

About This Rule

This rule ensures that frames containing focusable elements do not have a negative tabindex, thereby maintaining proper keyboard accessibility. Adhering to this guideline helps users navigate interactive content within frames effectively.

Why It Matters

Assigning a negative tabindex (e.g., tabindex="-1") to a frame prevents browsers from directing focus to any interactive elements within that frame. This means users navigating via keyboard may be unable to access buttons, links, or form controls inside the frame, leading to a significant accessibility barrier, especially for users who rely on keyboard navigation.

How to Fix

To ensure accessibility:

• Avoid Negative tabindex: Do not assign tabindex="-1" to frames containing focusable content. Instead, use a non-negative tabindex or omit the attribute entirely.
• Assess Frame Content: If the frame contains no interactive elements and does not require keyboard navigation, a negative tabindex may be appropriate. However, exercise caution, as future content updates could introduce focusable elements, inadvertently creating accessibility issues.

Examples

Incorrect Implementation

An iframe with focusable content and a negative tabindex:

<iframe
  srcdoc="<button>Click me</button>"
  tabindex="-1"
  title="Interactive frame">
</iframe>

Correct Implementation

An iframe with focusable content and a non-negative tabindex:

<iframe
  srcdoc="<button>Click me</button>"
  tabindex="0"
  title="Interactive frame">
</iframe>