Active View Name

Link to Active View Name copied to clipboard
Free Trial

WCAG 2.0 - 4.1.2 A Impact - Critical

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.

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

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>