nested-interactive

Nested interactive controls are not announced by screen readers

Who might be affected

Screen Reader

Motor/Mobility

Keyboard

Description

To be understandable and operable by all users, interactable elements must not be nested within each other.

Quick Fixes

Ensure that the parent elements of interactive controls, such as buttons, links, input fields etc. are not interactable.

1✗ <button>
2    Settings
3    <a href="go/to/options">Advanced Settings</a>
4  </button>
5
6✗ <div role="button" tabindex="0">
7    Settings
8    <a href="go/to/options">Advanced Settings</a>
9  </div>

How Users Are Affected

Nested interactive controls are inaccessible for screen reader users since screen readers skip them. Only the parent element will therefore be operable by screen readers. People with motor impairments may have difficulty interacting with nested interactivity because they will usually require precise clicking on a small area, and inaccuracy in clicking may trigger wrong and sometimes even unwanted action.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and Relationships (A) | 4.1.2 Name, Role, Value (A)