Nested Active Control

Link to Nested Active Control copied to clipboard
note

This is an experimental rule, and therefore its result(s) are considered to be in beta testing. Learn more about experimental rules and how you can help improve them.

WCAG 2.0 - 2.1.1 A Impact - Critical

An accessibility element should not have multiple active controls embedded within it. Each active control should be individually focused and interacted with.

Impact

People using TalkBack are most impacted. TalkBack can not activate more than one active control within another accessibility element.

Confirmation

  1. Turn on TalkBack
  2. Attempt to focus the control
  3. Attempt to activate the control
  4. One of the following will happen:
    • Inaccessible: A different control is activated.
    • Inaccessible: The control is activated, but its focus box contains another control.
    • Inaccessible: Nothing happens.
    • Accessible: The control is activated and is the only control in its focus box.

How to Fix

Avoid nested clickable elements. Make sure each clickable item is focusable by accessibility technology. Views that can be accessed without assistive technology should be available to anyone using assistive technology.

XML

Avoid setting the importantForAccessibility property to no on all clickable views nested inside a layout.

Compose

In the example below, remove invisibleToUser to ensure views are available to anyone using assistive technology. Note that the parent is clickable and may result in undesired behavior rather than engaging with 'Settings' or 'Information' views directly.

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

A passing example would have all views be visible for integration with assistive technology with a parent that is not clickable:

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}