Duplicate accessibility label on screen

A duplicate accessibility label is when multiple UI elements on the same screen share the same accessibility label. This can cause issues for users relying on assistive technologies, such as screen readers and voice control, as they cannot distinguish between different elements with the same label. By ensuring unique accessibility labels for each element, you can accurately reference and announce each on-screen element individually.

App accessibility testing can help identify accessibility violations, ensuring your app meets the necessary WCAG accessibility standards.

Success criteria

The rule checks for the following potential violations:

• Multiple elements within the same view have identical accessibility labels.
• Any element that does not have a unique identifier within the context of its use.

How to fix?

To fix duplicate accessibility label violations, follow these steps:

Android

For Android applications, each element’s accessibility label must be unique. The accessibility label can be defined using various properties, not just the contentDescription property. If the accessible name is not unique, screen reader users will have difficulty distinguishing between controls and their purposes. To fix this:

• Identify elements with duplicate accessibility labels.
• Assign unique accessibility labels to each element to clearly describe their function or content.

iOS

For iOS applications, the accessibilityLabel property must be unique for each element on the screen. If the accessible name is not unique, screen reader users will have difficulty distinguishing between controls and their purposes. To fix this:

• Identify elements with duplicate accessibilityLabel.
• Assign unique accessibilityLabel values to each element to clearly describe their function or content.

Example

The following example scan report shows duplicate accessibility label violation in the app’s interface. Several elements have duplicate accessibility labels, creating confusion for users who rely on screen readers.

Violations

• Link
  The accessibilityLabel is set to [] for multiple elements.
• StaticText
  The accessibilityLabel is set to b for multiple elements.
• StaticText
  The accessibilityLabel is set to and for multiple elements.

Fix

• #1 Link []
  Assign unique labels to each link, such as accessibilityLabel: "Link to article" or accessibilityLabel: "Link to references".
  
• #2 StaticText (b)
  Assign unique labels that describe the text, such as accessibilityLabel: "Musical note B" or accessibilityLabel: "Key B".
  
• #3 StaticText (and)
  Assign unique labels that provide context, such as accessibilityLabel: "Connector and" or accessibilityLabel: "And symbol".