Active View Name

Any interactive view should have an accessible name available for assistive technologies such as TalkBack and Voice Access.

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.

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

XML

Utilize a control's text property or a view's content description to ensure TalkBack has accurate information to share.

Button button = .......
button.setText("Button's Name");

ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");

Compose

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

React Native

To fix an issue found by this rule, add an accessibilityLabel to the control component.

<TextInput
  ...
  accessibilityLabel="First Name"
/>