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 onetabindex="0"
results in the order being defined by their order in the document sourcetabindex="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 & Quantum Science</a></span></strong></span>
</p>
There are two options for fixing this flag:
remove
aria-hidden=true
from paragraph ORadd
tabindex=-1
to the two links
More on using the aria-hidden attribute
Resources
Using aria-hidden from mdn web docs
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!