accessible-name-starts-with-label

Elements\’ names that are read programmatically by assistive technologies should start with 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. Some voice recognition and activation software will work better or even require that the vocal reference to the element in the activation command matches the accessible name. Therefore, the accessible name must contain the visible label, and the best practice is to also start the accessible name with it.

Quick Fixes

iOS

SwiftUI (Fail):

1Toggle("Executed orders", isOn: $executedOrdersDisplay)
2    .accessibility(label: Text("Display executed orders"))

SwiftUI (Pass):

1Toggle("Executed orders", isOn: $executedOrdersDisplay)

UIKit (Fail):

1let button = UIButton(type: .system)
2button.setTitle("Order", for: .normal)
3button.accessibilityLabel = "Place order"

UIKit (Pass):

1let button = UIButton(type: .system)
2button.setTitle("Order", for: .normal)

UIKit (Pass) 2:

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

Android

XML (Fail):

1<Button
2    android:id="@+id/btn_submit"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Submit"
6    android:contentDescription="Complete the form submission"/>

XML (Pass):

1<Button
2    android:id="@+id/btn_submit"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Submit"
6    android:contentDescription="Submit the form"/>

Java (Fail):

1Button nonCompliantButton = new Button(this);
2nonCompliantButton.setText("Submit");
3nonCompliantButton.setContentDescription("Complete the form submission");

Java (Pass):

1Button compliantButton = new Button(this);
2compliantButton.setText("Submit");
3compliantButton.setContentDescription("Submit the form");

Kotlin (Fail):

1val nonCompliantButton = Button(this).apply {
2    text = "Submit"
3    contentDescription = "Complete the form submission"
4}

Kotlin (Pass):

1val compliantButton = Button(this).apply {
2    text = "Submit"
3    contentDescription = "Submit the form"
4}

Compose (Fail):

1@Composable
2fun NonCompliantButton() {
3    Button(
4        modifier = Modifier
5            .semantics { contentDescription = "Complete the form submission" }
6    ) {
7        Text("Submit")
8    }
9}

Compose (Pass):

1@Composable
2fun CompliantButton() {
3    Button(
4        modifier = Modifier
5            .semantics { contentDescription = "Submit the form" }
6    ) {
7        Text("Submit")
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:
Best Practice