Text Field Label in Name

Link to Text Field Label in Name copied to clipboard

WCAG 2.1 - 2.5.3 A Impact - Serious

Checks each TextField's label to ensure it's equal to, or part of, the name of the view.

Supported within:
Compose Layouts

Impact

Issues detected by this rule can contribute to a confusing or conflicting experience between the announcement from TalkBack and the content on the screen.

Confirmation

  1. Turn on TalkBack
  2. Attempt to focus the control
  3. One of the following will happen:
    • Inaccessible: Text announced by TalkBack is different from the displayed widget's name.
    • Accessible: Text announced by TalkBack is the same or includes the displayed widget's name.

How to Fix

Ensure TextField's name is included or equal to its label.

@Composable
fun ZipCodeInput() {
    OutlinedTextField(
        modifier = Modifier.semantics {
            this.contentDescription = “Enter your Zip Code”
        },
        label = “Zip Code”
    )
}