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.

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