nested-interactive
Focusable descendants of interactive elements are not announced by screen readers.
Description
To ensure accessibility and usability for all users, interactive elements should not be nested within one another.
Why is it important?
Nested interactive controls, where interactive elements are contained within one another, pose accessibility challenges. Screen readers may not announce the nested elements, resulting in an empty tab stop. This can create difficulties for users with motor impairments who require precise clicking and may trigger unintended actions.
Examples
-
Success:
- Having an anchor element outside a button can make all users interact with both the button and the link.
-
Failure:
- Having an anchor element with a link part of the text inside a button will make Screen Readers skip the text.
How to fix?
Nested interactive components such as buttons, checkboxes, links, input fields, etc. should be separated from one another and should be styled as single elements.
Tags
cat.keyboard, wcag2a, wcag412
References
- WCAG 4.1.2: Name, Role, Value
- WCAG 1.3.1: Info and Relationships
- ACT-Rules-307n5z
- Deque University: nested-interactive
- Accessibility Insights: nested-interactive
- Evinced Digital Accessibility Knowledge Base: nested-interactive
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!