Etichetta nel nome

Scopri come utilizziamo l'intelligenza artificiale per questa regola!

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.

Comporre

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>