Name, Role and Value

The Name, Role, and Value rule ensures interactive elements on an app are accessible to all users, including those relying on assistive technologies. The “Name” provides a human-readable identifier for elements, helping users understand their purpose. The “Role” defines the type of element, such as a button or link, aiding user interaction. The “Value” communicates the current state or value of elements and is important for form fields and controls.

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".

Editable element accessibility label

Editable elements such as EditTexts or TextViews should have both name and value available to screen readers. This ensures editable elements are fully accessible, allowing their purpose (name) and current value to be accurately communicated to users relying on screen readers.

App Accessibility can automatically check for violations related to editable element accessibility labels. These tools ensure that all editable fields are appropriately labeled and can be read by screen readers, identifying any missing or incorrect labels.

Success Criteria

The rule checks for the following potential violations:

• Missing Labels
  Editable elements must have a descriptive label.
• Label-Value Association
  The label should be associated with the corresponding editable element, ensuring screen readers convey both the label and the current value.
• Consistency
  Labels should be consistent across different parts of the application.

How to fix?

To ensure the accessibility label is defined for an editable element, follow these steps:

Android

• Provide a hint
   Use the hint attribute for EditText or editable TextView elements to provide a label. Screen readers read this hint as the name of the field.
• Use labelFor
   Associate a TextView with an EditText using the labelFor attribute to define a relationship between the label and the editable element.

iOS

• Set accessibility label
   Use the accessibilityLabel property to provide a descriptive label for UITextField or UITextView elements.

Example

The following example scan report highlights the editable element with the ID com.bsstag.espressotesting:id/url lacks an accessibility label. This violation prevents screen readers from providing the necessary information to users.

Fix

• For Android
   Add a hint attribute to the EditText element to provide a label. This ensures the screen reader can convey the purpose of the field.
• For iOS
   Set the accessibilityLabel property for UITextField or UITextView elements to provide a descriptive label.

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.

Reference

Learn more about Name, Role, Value WCAG: 2.1 - 4.1.2 (Level A) guideline