Edit Text Value

Text input elements should have its value available for assistive technologies such as TalkBack and Voice Access.

Impact

Issues found by this rule impact people with blindness.

EditText elements should provide information where the Android OS expects. As a result, assistive technologies can communicate information predictably.

Confirmation

1. Turn on TalkBack
2. Focus on the element
3. One of the following will happen:
   • Accessible: TalkBack announces the entered text, for, and the associated label's Text.
   • Inaccessible: TalkBack either didn't announce the above information or announced it in the wrong order.

How to Fix

Ensure that a label is properly associated with an EditText or TextField element so that both the name and value are available to assistive technologies.

XML

EditText editText = .......; // Role: EditText
TextView label = .......; // Role: Label
label.setLabelFor(editText.getId()); // Associate the Checkbox with its Name

Compose

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

React Native

Avoid setting the accessibilityLabel property to the the input's value. When setting an example, you can add the value to the placeholder property.

<TextInput 
   accessibilityLabel='Username'
   accessible={true}
   placeholder='John'
   style={{height: 45, width: 200, backgroundColor: 'azure', fontSize: 20, margin:20}}
 />