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.
Hiding visually and from assistive technologies
Use the attribute hidden
to hide visually and from screen readers.
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.