In this Article
What is a focusable element and why does it matter?
Web visitors who utilize a screen reader typically rely on a keyboard to tab through a page versus scrolling through the page using a mouse. Other users may also prefer using a keyboard over a mouse for speed or simply because of limited access to a mouse.
Maintaining a visual tab focus is important so that web visitors utilizing a keyboard for browsing know where they are within the page's content. The tab focus will often allow users to click on links to navigate throughout a website.
Tab focus can appear lost if the focus goes into an expandable menu when it is collapsed. Tab focus can also appear lost if the focus goes to an element within a slideshow when the element is not currently displayed on the screen. Simply put, tab focus appears lost whenever a user can tab to something not displayed on the screen.
What is aria-hidden?
The aria-hidden
attribute is a property that indicates whether an element is visible or hidden to assistive technologies such as screen readers. When set to "true"
, it hides the element from assistive technologies while remaining visible to sighted users.
The following code snippet shows how this attribute may be used:
<div aria-hidden="true">
This content is hidden from assistive technologies.
</div>
While aria-hidden="true"
can be useful for hiding decorative or redundant content from assistive technologies, its misuse can lead to accessibility issues.
The aria-hidden="true"
attribute on an element removes the element and all of its children from the accessibility API, making them entirely inaccessible to screen readers and other assistive technologies.
How can I check for this error myself?
A simple way to test tab focus is to tab through a webpage and verify that you are never taken to an element that is not displayed on the webpage.
Below is a sample as seen while tabbing through the DubBot site's footer, showing the tab focus around the link for Web Accessibility Checks, which is also in a different color from the other links in the footer.
Resources
Learn more with WCAG
Understanding Name, Role, Value (Level A)
DubBot flag: 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!