Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Focusable frame has negative tabindex (WCAG Level A Issue)

Keyboard - Lumar Accessibility Thumbnail

What does this accessibility issue mean?

Accessibility issue summary: Focusable frame has a negative tabindex, causing issues for keyboard operability

The tabindex attribute is used in HTML to define the order in which elements receive focus when users navigate a webpage using the keyboard. This attribute is crucial for keyboard operability for website accessibility.  By specifying the tabindex value for an element, web developers can control the sequence in which users can navigate through interactive elements, such as links, form fields, and buttons, using the “Tab” key on the keyboard.

Assigning a negative tabindex to focusable frames or iframes can lead to unintended navigational issues for users who rely on a keyboard to navigate a website or who use other assistive technologies. 


To comply with web accessibility best practices for keyboard operality, ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1 or any other negative tabindex attribute. 

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: Focusable frame has negative tabindex (WCAG Level A Issue)

 <h1>Frame Focusable Content Issue</h1>
 <iframe>Buy now tabindex="-1" title="Focusable content with tabindex=-1"  </iframe>

The above HTML violates the frame-focusable-content accessibility rule because it includes frames with focusable content that have a tabindex=-1.


How to fix "Focusable frame has negative tabindex (WCAG Level A Issue)" issue

<h1>Frame Focusable Content Issue</h1>
<iframe tabindex="0" title="Focusable content with tabindex=0"></iframe>

Here, the value of tabindex attribute of the <iframe> has been changed from -1 to 0.Why? The tabindex value is used for determining if an element can receive input focus (which might be needed for users to interact with the content or application) via the keyboard.

When the tabindex value is set to -1, it means that the element cannot be reached via sequential keyboard navigation, but it could still be focused via JavaScript or visually.

Setting it to 0 indicates that the element should be placed in the natural tabbing order as per its location within the document.In the original version, the iframe contained a focusable element (<button>), and having its tabindex set to -1 caused it to be unfocusable. Hence, the violation. Reference: WCAG 2.1 Guideline

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform