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.
The version of Android, device, and manufacturer may play a part in issue detection.
Confirmation
- Turn on TalkBack
- Attempt to focus the control
- 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"
/>When elements are grouped together within a containing view, add the accessible prop, and the accessibilityLabel prop to the containing view:
<View
importantForAccessibility='no-hide-descendants'
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel={"Dark Mode"}
accessibilityValue={{ text: "" + isEnabled }}
accessibilityRole='switch'
onPress={() => {
setIsEnabled(!isEnabled)
}}
>
<Switch
trackColor={{ false: 'lightgray', true: 'dimgray' }}
ios_backgroundColor={'lightgray'}
thumbColor={'white'}
onValueChange={ () => {
setIsEnabled(!isEnabled)
}}
value={isEnabled}
accessibilityElementsHidden={true}
/>
</View>