Text Field Label in Name

Link to Text Field Label in Name copied to clipboard
Free Trial

WCAG 2.1 - 2.5.3 A Impact - Serious

Checks each TextFields 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 widgets name.
    • Accessible: Text announced by TalkBack is the same or includes the displayed widgets name.

How to Fix

Ensure TextFields name is included or equal to its label.

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