Skip to main content

Using tabindex to Solve Focusable Content Flags

Examples of aria-hidden flags and how to fix using the tabindex attribute.

Updated over a week ago

In this Article

What is the tabindex attribute?

In many cases, the tabindex attribute can be used to remove focusable elements from the tab order.

tabindex lets web authors "make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation." mdn web docs on tab index

The attribute takes an integer as its value, with different results, as described below:

  • tabindex="-1" (any negative value, usually -1) means the element cannot be reached via sequential keyboard navigation.

  • tabindex="0" means an element should be reachable via sequential keyboard navigation, after any positive values. More than one tabindex="0" results in the order being defined by their order in the document source

  • tabindex="1" (any positive integer) means the element should be focusable, with its order defined by the given positive number.

  • If tabindex is included as an attribute with no value, the user agent determines if the element is focusable.

Slideshow Example

In the example below, the <button> has the attribute of tabindex="0". The tabindex="0" makes the element focusable via keyboard navigation (e.g., using the Tab key) and includes it in the natural tab order of the document, even though it is not visible on the page.

Flagged:

<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="nav01" id="slick-slide01">

<button type="button" data-role="none" role="button" tabindex="0">

</button>

</li>

​How to fix:

Slides not currently displayed should have tabindex="-1" with the active image having tabindex="0". The tabindex attribute should be adjusted using the slideshow javascript to reflect the correct tabindex value relative to a slideshow image's state.

Iframe Example

This error is often seen with third-party embeds, but that does not remove a site's responsibility for accessibility issues related to using the embed. In the example below, the flagged <div> has an attribute of aria-hidden="true", yet the div contains multiple-choice questions, most certainly focusable elements.

Learn more about Third-Party Content on Your Sites and Accessibility Issues.

Flagged:

<div class="layout-inner" id="layout-primary" style="width: 100%; position: relative; overflow: hidden; height: 8588.38px;" aria-hidden="true">


​

Link around an image in a 'card' layout

A common issue found is the 'wrapping' link placed around an image. In the <a> tag below, there is an attribute of aria-hidden="true" that hides the link and its contents (including the <img> inside it) from assistive technologies such as screen readers. This makes the link inaccessible to users who rely on assistive tools, even though the image inside has an alt attribute describing it.

To correct the code, remove the aria-hidden="true" from the wrapping <a> tag to make it interactive and accessible to all users.

Flagged:

<a class="post-thumbnail" href="https://site.com" aria-hidden="true">

<img width="360" height="300" src="https://site.com/pic.jpg" class="thumbnail" alt="food" >

</a>

Corrected:

<a class="post-thumbnail" href="https://site.com" >

<img width="360" height="300" src="https://site.com/pic.jpg" class="thumbnail" alt="food" >

</a>

Focusable item in an aria-hidden Paragraph

The <p> below has an attribute of aria-hidden="true" which removes the element and all of its children from the accessibility API, making them entirely inaccessible to screen readers and other assistive technologies.

The problem below is that there are two focusable hyperlinks in the paragraph which are now inaccessible to assistive tech

Flagged:

<p aria-hidden="true">
<span style="color: #008000;"><strong>This seminar is presented by
<a style="color: #008000;" href="https://materialscience.uoregon.edu/"><span style="color: #3366ff;">Material Science Institute</span></a> and <span style="color: #3366ff;">
<a style="color: #3366ff;" href="https://omq.uoregon.edu/">Oregon Center for Optical Molecular &amp; Quantum Science</a></span></strong></span>
</p>

There are two options for fixing this flag:

  • remove aria-hidden=true from paragraph OR

  • add tabindex=-1 to the two links

More on using the aria-hidden attribute

Resources

Learn more with WCAG & W3C

DubBot flag:
ARIA hidden element must not be focusable or contain focusable elements
Ensures aria-hidden elements are not focusable nor contain focusable elements

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

Did this answer your question?