What does this accessibility issue mean?
Accessibility issue summary: Nested interactive controls causing screen reader issues
Nested interactive controls refer to situations where interactive elements, such as buttons or links, are placed within another interactive container, like a form or a clickable div.
The accessibility concern arises because screen readers and other assistive technologies may struggle to convey the correct information to users navigating the page if interactive controls are nested.
Solution:
Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies.
Example HTML violation: Nested interactive controls (WCAG Level A Issue)
<button> Add to cart <input id="check" name="check" type="checkbox" value="check" />
</button>In this example, the input checkbox is nested within the button element which is a violation of the 'Interactive controls must not be nested' accessibility rule. This is because assistive technologies such as screen readers might ignore or respond unexpectedly to such nested controls.
Here's how to correct the above:
How to fix "Nested interactive controls (WCAG Level A Issue)" issue
<button> Add to cart </button>
<input id="check" name="check" type="checkbox" value="check" />In this corrected version, the button and the checkbox are not nested within each other. Both can be interacted with separately, which makes this code compatible with assistive technologies. This adheres to the 'Interactive controls must not be nested' rule.
To learn more about this rule, you can check the Web Content Accessibility Guidelines and dive deeper into the topic.
