Etichetta nel nome

Una vista focalizzabile per l'accessibilità dovrebbe garantire che il suo nome includa l'etichetta visibile.

Impatto

Le persone che utilizzano TalkBack e/o che soffrono di ipovedenza sono quelle maggiormente interessate dai problemi rilevati. Alcuni problemi possono contribuire a creare un'esperienza confusa o conflittuale tra l'annuncio di TalkBack e il contenuto sullo schermo.

Conferma

1. Attiva TalkBack
2. Tentare di focalizzare il controllo
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: il testo annunciato da TalkBack è diverso dal nome del widget visualizzato.
   • Accessibile: il testo annunciato da TalkBack è lo stesso o include il nome del widget visualizzato.

Come risolvere

XML

Imposta una descrizione del contenuto che corrisponda o contenga il testo visibile. Se il controllo è un Button o un TextViewcliccabile:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");

Se il controllo è un CheckBox, vedere Nome casella di controllo.

Compose

Assicurarsi che i widgets contentDescription contengano il nome della vista.

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

React Native

La proprietà accessibilityLabel dovrebbe corrispondere o contenere il testo visibile del componente.

Per impostazione predefinita, un pulsante utilizzerà il suo titolo come accessibilityLabel e quindi rispetterà questa regola.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Per gli elementi interattivi senza titolo, utilizzare una vista toccabile che contenga i componenti di controllo e di testo. In questo modo, il componente testo diventa l'etichetta visibile per il controllo. Imposta l'attributo dell'elemento contenitore accessibilityLabel in modo che corrisponda o contenga il testo visibile.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>