In this Article
Basic Examples of Issue Failures and Corrections
First steps for troubleshooting:
You need to understand this:
aria-hiddenis meant to remove content from being read by assistive technology like a screen reader.Focusable means that an item can receive focus by a keyboard.
Ensure this:
You are using appropriate ARIA attributes (roles, states, and properties)
You have spelled all attributes and their assigned values correctly, as misspellings will also trigger a flag.
Following are some basic examples of what can fail this issue check and how to correct them.
Off-Screen Links in a Hidden Element
If you have placed a link off-screen so it can't be seen, you must ensure it can't be accessed programmatically.
To fix this, ensure the style for the link is style="display:none" to make the link invisible and inaccessible both visually and programmatically.
Flagged:
<div aria-hidden="true">
<a href="/" style="position:absolute; left:-999em">Can't See Link</a>
</div>
Corrected:
<div aria-hidden="true">
<a href="/" style="display:none"> Can't See Link</a>
</div>
Incorrectly Disabled Form Field
If a form field is disabled incorrectly, it can confuse accessible technologies.
Using aria-hidden="true" hides a <div> and all its child elements from assistive technologies, such as screen readers. This makes the <input> element (and any other interactive or meaningful content inside the <div>) inaccessible to screen readers, even though it appears visually.
An aria-disabled="true" on the <input> indicates it is disabled for assistive technologies. However, it doesn't disable the input for users interacting with it via mouse or keyboard.
In most cases, the disabled attribute is preferable for native interactive elements like <input>. The disabled attribute prevents all user interaction. Use aria-hidden and aria-disabled carefully to avoid accessibility conflicts.
Flagged:
<div aria-hidden="true"> <input aria-disabled="true" /> </div>
Corrected: <div aria-hidden="true"> <input disabled aria-hidden="true"> </div>
You should avoid using aria-hidden="true" with focusable or interactive elements. These elements will become completely inaccessible. It can be kept if you want assistive tech to know that everything in the associated <div> is disabled.
aria-hidden set on an Ancestor
Using aria-hidden="true" on an element removes the element and its children from the accessibility API, making them entirely inaccessible to screen readers and other assistive technologies.
This also cannot be overwritten by including aria-hidden="false" in a child element's tag. In the flagged example below the <div id="second"> does not make the <button> content visible. The button should add a tabindex="-1" attribute to make it unfocusable.
Flagged:
<div aria-hidden="true">
<div id="second" aria-hidden="false">
<button>Some button</button>
</div> </div>
Corrected:
<div aria-hidden="true">
<div id="second"aria-hidden="false">
<button tabindex="-1">Button</button>
</div> </div>
Hidden Element is Focusable due to tabindex
When a tabindex value of 0 or greater is assigned to an element, it will be accessible via sequential keyboard navigation, and the content must not be hidden. Changing the element's attribute to tabindex="-1" makes the element unfocusable.
Flagged:
<p tabindex="0" aria-hidden="true">Hidden text</p>
Corrected:
<p tabindex="-1" aria-hidden="true">Hidden text</p>
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!