SiteLint documentation and guidelines

Aria hidden true focusable descendants

Description

The aria-hidden="true" attribute is used to hide elements from screen readers and other assistive technologies, indicating that the element and its descendants are not relevant for accessibility purposes. However, having focusable descendants (such as links, buttons, or form controls) within an element that is hidden with aria-hidden="true" creates a confusing and inaccessible experience. Focusable elements within a hidden parent should not be interactive, as they can cause issues for users navigating with assistive technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers may encounter focusable elements that are not announced, causing confusion.
  • Cognitive disabilities: users with cognitive disabilities may find it difficult to understand and navigate content if focusable elements are not correctly presented.
  • Motor impairments: users with motor impairments who use keyboards or other assistive devices may experience issues if focusable elements are hidden but still interactable.

Why it matters

Ensuring that aria-hidden="true" elements do not contain focusable descendants is crucial for maintaining a logical and accessible user experience. Focusable elements within hidden parents can lead to confusion, as users may be able to focus on elements that provide no context or are not announced by screen readers. Properly managing visibility and focusability ensures seamless and understandable navigation for all users.

Coding problems and solutions

Common coding problems

  • Focusable elements within hidden parents: elements with aria-hidden="true" contain focusable descendants, making them interactable but inaccessible.
  • Incorrect management of visibility and focusability: using CSS to hide elements but not managing their focusability correctly.

How to fix it

Remove focusable elements or make them unfocusable

Ensure that elements within a container with aria-hidden="true" are not focusable.

Incorrect example
<div aria-hidden="true">
  <a href="#container">Hidden Link</a>
</div>
Correct example
<div aria-hidden="true">
  <a href="#container" tabindex="-1">Hidden Link</a>
</div> 

Hiding visually and from assistive technologies

Use the attribute hidden to hide visually and from screen readers.

Correct example
<div hidden>
 <button type="button">Hidden Button</button>
</div>

Conditionally hide focusable elements

If elements need to be hidden conditionally, ensure their focusability is also managed appropriately.

Known limitations

  • Complex dynamic content: managing visibility and focusability for complex, dynamically changing content can be challenging and requires thorough testing.
  • Testing across devices: ensure that the behavior is consistent across different devices and assistive technologies to avoid unexpected issues.
  • User preferences: be mindful of user preferences and provide ways to manage visibility and focusability that are intuitive and accessible.

Resources