Interactive element accessibility label

Interactive element accessibility labels ensure all UI elements or custom views in an application have a descriptive label. These labels are essential for screen readers to interpret the element’s name, value, and purpose, facilitating accessibility for users with disabilities.

Testing for Interactive element accessibility labels is necessary as it ensures that all users, regardless of their abilities, can navigate and interact with the application effectively.

Success criteria

The rule checks for the following potential violations:

• All interactive UI elements must have a non-null, descriptive accessibility label.
• Custom views used as interactive elements must also have a descriptive accessibility label.
• The labels must be clear and convey the element’s purpose effectively.

How to fix?

To fix violations related to interactive element accessibility labels, follow these steps:

Android
Ensure the contentDescription property is defined for the element. This label is used by assistive technologies, such as screen readers to announce and trigger actions for interactable elements.

iOS
Ensure the accessibilityLabel property is defined for the element. This label is used by assistive technologies such as screen readers to announce and trigger actions for interactable elements.

Example

The following example scan report shows an Interactive element accessibility label violation in the app’s interface. The issue is identified for two buttons that lack proper accessibility labels.

Violation

• Button 1:
  The first button, located at the bottom of the screen, currently does not have an accessibility label. This means that a screen reader cannot convey any information about this button to users who rely on assistive technologies. As a result, users with visual impairments won’t know the purpose of this button.
• Button 2:
  Similar to the first button, the second button also lacks an accessibility label. This omission means that the button is effectively invisible to screen readers, and users who depend on such tools will not be able to interact with or understand its function.

Fix

To fix these violations, ensure that each button has a clear and descriptive accessibility label. This can be done by assigning a meaningful label that conveys the button’s purpose to assistive technologies.

• Button 1:
  Assign an accessibility label that describes the button’s action, such as “Support in 30 seconds.” This label will inform the screen reader to announce that this button provides support in 30 seconds when activated.

• Button 2:
  Assign an accessibility label that describes the button’s action, such as “Discount flights.” This label will enable the screen reader to announce that this button offers a discount on flights when activated.

References

• Learn more about Resize Text WCAG: 2.1 - 1.3.1 (Level A) guideline
• Learn more about Resize Text WCAG: 2.2 - 1.3.1 (Level A) guideline