invalid-labeling-attribute
Mobile validation
Text inputs need a valid labeling method, so assistive technologies can announce both the field's name and its current value. On Android, android:contentDescription is not a valid way to label an editable field such as an EditText. It replaces what TalkBack announces for the field, so the entered value may not be announced, and the label may be read inconsistently.
Instead, label the field with a visible TextView that uses android:labelFor, or with android:hint. Use contentDescription only for views that convey information graphically, such as images and image buttons.
Note: This validation applies to Android, including Flutter and React Native apps running on Android. In React Native, accessibilityLabel on a TextInput becomes its contentDescription on Android.
Pass Patterns
Android
XML Views
A visible TextView labels the field with android:labelFor, and android:hint adds a hint.
<LinearLayout
android:layout_width="..."
android:layout_height="..."
android:orientation="vertical">
<TextView
android:layout_width="..."
android:layout_height="..."
android:text="First name"
android:labelFor="@+id/firstNameField" />
<EditText
android:id="@+id/firstNameField"
android:layout_width="..."
android:layout_height="..."
android:hint="Type your first name" />
</LinearLayout>Cross Platform
React Native (Android)
A visible Text labels the field with the Android-only accessibilityLabelledBy prop, instead of accessibilityLabel.
<Text nativeID="firstNameLabel">First name</Text>
<TextInput
accessibilityLabelledBy="firstNameLabel"
placeholder="Type your first name"
/>Fail Patterns
Android
XML Views
The EditText is labeled with android:contentDescription, which is not valid for editable fields.
<EditText
android:id="@+id/firstNameField"
android:layout_width="..."
android:layout_height="..."
android:contentDescription="First name" />Cross Platform
React Native (Android)
The TextInput is labeled with accessibilityLabel, which becomes its contentDescription on Android.
<TextInput accessibilityLabel="First name" />Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Turn on TalkBack.
- Move to the empty text field, and check that its name is announced.
- Enter a value.
- Move focus away from the field, and then back to it.
Expected results: TalkBack announces the field's name and the value you entered.
Actual results: TalkBack announces only the name, without the entered value, or announces the name inconsistently.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
1.3.1 requires that information, structure, and relationships shown visually are also available in code. For form fields, this means the relationship between a label and its input must be programmatically exposed so assistive technology can determine the input’s accessible name.
If you use invalid labeling attributes or methods, that relationship is not conveyed in code. The field may look labeled to sighted users, but assistive technology cannot associate or announce the label, so it does not meet 1.3.1.
How does this issue relate to 4.1.2 Name, role, value?
SC 4.1.2 requires the name and value of every user interface component to be programmatically determinable. When a text field is labeled with an invalid method, its name may be announced inconsistently, and its value may not be announced at all, so assistive technologies cannot reliably convey the field's purpose together with its value.
Why is this issue marked as Minor?
The field usually still has a name, so people can identify it and type into it. However, what is announced may be unclear or incomplete, especially after a value is entered, which can slow users down and lead to errors, so it is rated minor.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| WCAG 2.2 | 4.1.2 Name, Role, Value (A) | For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to assistive technologies. |
| EN 301 549 | 11.1.3.1 Info and Relationships | Same as the WCAG text. |
| EN 301 549 | 11.4.1.2 Name, Role, Value | Same as the WCAG text. |