Duplicate clickable elements

If a screen shows more than one interactive item in the same location, it can be difficult for a user to interact with the app. It also becomes difficult for some accessibility services, such as Switch Access, to clearly represent the actionable items to the user.

Implementation

View

When you implement OnClickListeners and OnLongClickListeners, check if the clickable View has an ancestor or descendant that's clickable and shares the same on-screen location. In a well-implemented user interface, clickable items appear separately.

Consider the following when implementing clickable Views:

• Certain View types, like Button, are denoted as clickable by default. In your app, if the View is not clickable, or does not perform an action when clicked, remove its OnClickListener or set android:clickable="false". In this way, you tell accessibility services to consider the View not clickable.
• In more complex user interfaces, multiple clickable Views may have parent/child relationships in the view hierarchy. In cases of nested clickable Views, implement click handling so that only one View handles clicks for any single action.

Compose

When you implement the onClick or onLongClick properties of Modifier.clickable or Modifier.combinedClickable, check if the composable has an ancestor or descendant that's clickable and shares the same on-screen location. In a well-implemented user interface, clickable items appear separately.

• Certain low-level composables, like Button, have clickable semantics by default. In your app, if the composable isn’t clickable, or doesn’t perform an action when clicked, remove its clickable semantics with Modifier.clearAndSetSemantics.
• In more complex user interfaces, multiple clickable composables may have parent or child relationships in the view hierarchy. 
  • In cases of nested clickable composables, implement click handling so that only one composable in a parent or child relationship handles clicks for any single action.

Design

The purpose of each clickable item should be clear, and a user should be able to reasonably anticipate the action that will be performed by clicking or long-clicking an item. These actionable items should also be of an appropriate size for touch targets.

Testing

To manually verify that an app's user interface doesn't contain duplicate clickable items:

1. Turn on Switch Access for Android and set up two-switch step scanning.
2. Open the app.
3. Use the switch assigned to the “Next” action to move switch access focus item-by-item through the interface.
4. If any item appears to be focused more than once, the interface may contain duplicate clickable items.

Android's automated testing tools can detect duplicate clickable Views. Consider using Accessibility Scanner for Android for manual testing of your app on-device. For automated tests, turn on accessibility checking in Espresso and Robolectric.