Actieve Weergavenaam

Elke interactieve weergave moet een toegankelijke naam hebben die beschikbaar is voor ondersteunende technologieën zoals TalkBack en Voice Access.

Impact

Mensen die TalkBack gebruiken worden het meest getroffen. Het onvermogen om op een weergave te focussen of de naam van de weergave door TalkBack te laten aankondigen, creëert een ontoegankelijke ervaring.

Bevestiging

1. Schakel TalkBack in
2. Probeer de besturingselementen te focussen
3. Een van de volgende dingen zal gebeuren:
   • Niet toegankelijk: Kan niet op de besturingselementen focussen.
   • Niet toegankelijk: Gefocust maar niet aangekondigd met TalkBack.
   • Toegankelijk: Gefocust en aangekondigd in TalkBack.

Hoe te repareren

XML

Gebruik de tekst-eigenschap van een besturingselement of de inhoudsbeschrijving van een weergave om ervoor te zorgen dat TalkBack accurate informatie heeft om te delen.

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

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

Componeren

Koppel afbeeldingsknoppen met een inhoudsbeschrijving of tekst om de bedoeling aan te geven.

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

Niet-afbeeldingsknoppen moeten tekst bieden voor TalkBack.

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

React Native

Om een probleem gevonden door deze regel te verhelpen, voeg een accessibilityLabel toe aan het besturingscomponent.

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

Wanneer elementen gegroepeerd zijn binnen een omvattende weergave, voeg de accessible eigenschap toe, en de accessibilityLabel eigenschap aan de omvattende weergave:

<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>