Element with presentational children has focusable content
| Field | Value |
|---|---|
| Rule code | Html_PresentationChildren_Tabbable |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
Elements with roles that make their children presentational should not contain focusable elements. If an element has a role that makes its children presentational, any focusable descendant elements (e.g., links, buttons, or inputs) should either be removed or made non-focusable to prevent unintended focus navigation.
How to fix
When an element has a role that makes its children presentational, ensure it does not contain focusable elements. Remove any focusable attributes (like tabindex) from child elements or set them as disabled to prevent focus navigation. For instance, an input element within a menu item should either be disabled or have its role adjusted accordingly to avoid being focusable: <ul role="menu"><li role="menuitemcheckbox" aria-checked="true"><input type="checkbox" role="none" disabled checked /> Sort by Last Modified</li></ul>