Accessibility rule: Role with implied hidden content has keyboard focus, explained

Summary

This rule ensures that elements intended to hide or present their internal content purely for visual purposes do not contain interactive or focusable elements. If such hidden or presentational content can receive keyboard focus, users may encounter controls with no accessible information, leading to confusion and broken navigation.

Overview

Some HTML element roles define that all sub-elements will automatically become presentational. Presentational means that the content is only for visual purposes. 

For example, the button role defines that whatever is inside an element with a role of a button will not be announced. Consider a “Save” button where the button contains an image of a floppy disk visually presenting the action of saving. This image should not be announced by screen readers. The user only needs to know that by clicking the button, something will be saved, but they don’t need to know that there is an image of a floppy disk on the button.

This rule flags any child nodes (sub-elements) that are made presentational based on their parent role but can receive keyboard focus. When a focusable element is hidden, users will not know what happens if they click on the element.

What This Rule Means

Presentational child elements are elements whose semantics are removed because of their parent role. These elements are not exposed to assistive technologies, even though they may appear visually. If any of these presentational child elements can receive keyboard focus, they create an accessibility issue because they are interactive but not perceivable.

Why This Matters (Impact)

Who is impacted by this?

Screen readers have a hard time identifying and structuring a website’s navigation if elements can be focused on but, at the same time, are not exposed to assistive technology. Furthermore, being able to focus on elements that should be presentational only makes keyboard navigation cumbersome.

How the Check Works

How does the rule work?

The rule checks that elements with a role that makes its children presentational do not contain focusable elements. The rule applies to elements with a semantic role defining its children to be presentational children, which are all of the following: button, checkbox, img, math, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, separator, slider, switch, and tab.

How to fix the issue

You can fix the issue in two ways: 

1. Remove the child node with the focusable content. 
2. Change the parent element role so that it doesn’t have a child node containing focusable content. Of course, you should not change a button into a paragraph or any other role if it is intended to be a button. That would break the accessibility of the page.

Additional Resources

Read more about the rule in the technical documentation here.