type-in-label

Avoid using the type name of the control or view in its accessibility label.

Who might be affected

Screen Reader

Voice Control

Description

The information regarding the element’s type is mediated by its built-in semantics, and therefore should never be repeated in the label.

When announcing UI controls, screen readers by default announce the control type based on its built-in or user-defined traits. Therefore, using the control type name in the accessibility label will make screen readers read it twice.

Quick Fixes

Ensure that the accessibility labels of UI elements do not contain the name of the element’s type.

For example, remove the word “button” from the accessibility labels of button elements, remove the word “link” from the accessibility labels of link elements, etc.

iOS (SwiftUI):

1✓ Button {
2      // The confirmation logic
3  } label: {
4      Image("checkmark")
5  }
6  .accessibilityLabel("Confirm")
7
8  Button {
9    // // The confirmation logic
10  } label: {
11    Text("Confirm")
12  }

1✗ Button {
2      // The confirmation logic
3  } label: {
4      Image("checkmark")
5  }
6  .accessibilityLabel("Confirm button")
7
8  Button {
9    // // The confirmation logic
10  } label: {
11    Text("Confirm button")
12  }

Android (.xml):

1✓ <Button
2    android:id="@+id/btnBuy"
3    android:text="Buy now"
4    android:contentDescription="Buy now"
5  .../>

1✗ <Button
2    android:id="@+id/btnBuy"
3    android:text="Buy now"
4    android:contentDescription="Buy now button"
5  .../>

Android (Kotlin):

1✓ btnBuy.contentDescription = "Buy now"

1✗ btnBuy.contentDescription = "Buy now button"

Android (Java):

1✓ btnBuy.setContentDescription("Buy now")

1✗ btnBuy.setContentDescription("Buy now button")

React Nativ:

1✓  <Button
2     title="Buy now"
3     color="#841584"
4     accessibilityLabel="Buy now "
5   />

1✗  <Button
2     title="Buy now"
3     color="#841584"
4     accessibilityLabel="Buy now button"
5   />

How Users Are Affected

The UI control type will be read twice each time the screen reader gets to it, making the user experience unpleasant and tedious, and in some cases it might even motivate users to stop using the application.

WCAG Success criteria

N/A