Button Name

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

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”
        )
    }
}