Button Name

Link to Button Name copied to clipboard
Free Trial

WCAG 2.0 - 4.1.2 A Impact - Critical

Button Name looks for buttons with a click action and ensures the view is focusable and its name or text is available to TalkBack.

Supported within:
Compose Layouts

Impact

People using TalkBack are most affected. The inability to focus on a view or have the view's name announced through TalkBack creates an inaccessible experience.

note

The version of Android, device, and manufacturer may play a part in issue detection.

Confirmation

  1. Turn on TalkBack
  2. Attempt to focus the control
  3. One of the following will happen:
    • Inaccessible: Unable to focus on the control.
    • Inaccessible: Focused but not announced with TalkBack.
    • Accessible: Focused and announced in TalkBack.

How to Fix

Pair image buttons with a content description or text to indicate its purpose.

@Composable
fun EmailIconButton() {
    IconButton(
        onClick = {},
    ) { 
        Icon(
            painter = painterResource(id = R.drawable.email_icon),
            contentDescription = “Send an Email”
        )
    }
}

Non-image buttons should provide text for TalkBack.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = {},
    ) { 
        Text(
            text = “Email”
        )
    }
}