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.
Solution:
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.
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
