type-in-label

Assistive technologies already convey an element's type through its built-in semantics, such as its role or traits. Screen readers announce the type by default, for example “button” or “link”. When the accessible name also contains the type, such as “Submit button”, screen readers announce it twice, which adds noise and slows users down. Voice input users may also have to include the extra word in their commands. Remove the type from the accessible name, and let the element's role be announced on its own.

Pass Patterns

Android

<Button
    android:id="@+id/submitButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Submit" />

Text(
    text = "Submit",
    modifier = Modifier
        .semantics { role = Role.Button }
        .clickable { submit() },
)

iOS

let submitButton = UIButton(type: .system)
submitButton.setTitle("Submit", for: .normal)

Button {
    submit()
} label: {
    Text("Submit")
}

Cross Platform

ElevatedButton(
  onPressed: submit,
  child: const Text('Submit'),
),

<Pressable accessibilityRole="button" onPress={submit}>
  <Text>Submit</Text>
</Pressable>

Fail Patterns

Android

<Button
    android:id="@+id/submitButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Submit"
    android:contentDescription="Submit, Button" />

Text(
    text = "Submit",
    modifier = Modifier
        .semantics {
            role = Role.Button
            contentDescription = "Submit, Button"
        }
        .clickable { submit() },
)

iOS

let submitButton = UIButton(type: .system)
submitButton.setTitle("Submit", for: .normal)
submitButton.accessibilityLabel = "Submit, Button"

Button {
    submit()
} label: {
    Text("Submit button")
}

Cross Platform

Semantics(
  label: 'Submit, Button',
  button: true,
  excludeSemantics: true,
  child: ElevatedButton(
    onPressed: submit,
    child: const Text('Submit'),
  ),
),

<Pressable
  accessibilityRole="button"
  accessibilityLabel="Submit, Button"
  onPress={submit}
>
  <Text>Submit</Text>
</Pressable>

Try It Yourself

Using a screen reader

1. Turn on VoiceOver on iOS, or TalkBack on Android.
2. Swipe right or left to move to the element.
3. Listen to the element's name and its role.

Expected results: The screen reader announces the element's type once, for example “Submit, button”.

Actual results: The screen reader announces the type twice, once from the name and once from the element's role, for example “Submit, button, button”.

Using developer tools

1. iOS: In Xcode, open Xcode > Open Developer Tool > Accessibility Inspector, select the simulator or device, and point at the element. Check its Label.
2. Android: In Android Studio, open the Layout Inspector and select the element. Check its contentDescription, for Views, or its semantics, for Jetpack Compose.

Expected results: The name contains no type, such as “button”, “link”, or “image”.

Actual results: The name contains the element's type.

FAQ

Standards and Regulations

Personas impacted by this issue

• Voice Input
• Screen Reader

Learn More

• Apple Human Interface Guidelines: Guidelines for Creating Labels
• Android: Describe each UI element
• Apple: accessibilityLabel (UIKit)
• Apple: accessibilityLabel(_:) (SwiftUI)

Related Issues

• conflicting-type-in-label
• instruction-in-name
• state-in-name