label-in-name

Elements\’ names that are read programmatically by assistive technologies must contain the element's visible label.

Who might be affected

Voice Control

Description

In many cases, the UI elements can have a visible label but also a programmatic name intended mainly for assistive technologies (also known as an "accessible name"), which assistive technologies will usually prefer. To avoid a conflict between the names and to enable intuitive activation and browsing mainly by voice control software users, the accessible name must at least contain the visible label.

Quick Fixes

iOS

SwiftUI (Fail):

1Toggle("Read more",isOn: $premiumFilterIsOn)
2    .accessibility(label: Text("Discover more options"))

SwiftUI (Pass):

1Toggle("Selected only", isOn: $premiumFilterIsOn)

SwiftUI (Pass) 2:

1Toggle("Read more",isOn: $premiumFilterIsOn)
2    .accessibility(label: Text("Read more about our products"))

UIKit (Fail):

1let button = UIButton(type: .system)
2button.setTitle("Refresh", for: .normal)
3button.accessibilityLabel = "Reload"

UIKit (Pass):

1let button = UIButton(type: .system)
2button.setTitle("Refresh", for: .normal)
3button.accessibilityLabel = "Reload"

Android

XML (Fail):

1<EditText
2    android:id="@+id/username_input"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:hint="Username"
6    android:contentDescription="Please enter your name in the input field" />

XML (Pass):

1<EditText
2    android:id="@+id/username_input"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:hint="Username"
6    android:contentDescription="Please enter your Username in the input field" />

Java (Fail):

1EditText nonCompliantTextField = new EditText(this);
2nonCompliantTextField.setHint("Username");
3nonCompliantTextField.setContentDescription("Please enter your name in the input field");

Java (Pass):

1EditText compliantTextField = new EditText(this);
2compliantTextField.setHint("Username");
3compliantTextField.setContentDescription("Please enter your Username in the input field");

Kotlin (Fail):

1val nonCompliantTextField = EditText(this).apply {
2    hint = "Username"
3    contentDescription = "Please enter your name in the input field"
4}

Kotlin (Pass):

1val compliantTextField = EditText(this).apply {
2    hint = "Username"
3    contentDescription = "Please enter your Username in the input field"
4}

Compose (Fail):

1@Composable
2fun NonCompliantTextField() {
3    TextField(
4        value = "",
5        label = { Text("Username") },
6        modifier = Modifier.semantics {
7            contentDescription = "Please enter your name in the input field"
8            }
9    )
10}

Compose (Pass):

1@Composable
2fun CompliantTextField() {
3    TextField(
4        value = "",
5        label = { Text("Username") },
6        modifier =
7Modifier.semantics { contentDescription = "Please enter your Username in       the input field" }
8    )
9}

How Users Are Affected

Voice control users may find the UI difficult to operate, and they may be forced to use it in a cumbersome and unintuitive way.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.5.3 Label in Name (A)