Nome visualizzazione attiva

Ogni visualizzazione interattiva dovrebbe avere un nome accessibile disponibile per tecnologie assistive come TalkBack e Voice Access.

Impatto

Le persone più colpite sono quelle che utilizzano TalkBack. L'impossibilità di mettere a fuoco una vista o di far pronunciare il nome della vista tramite TalkBack crea un'esperienza inaccessibile.

Conferma

1. Attiva TalkBack
2. Tentare di focalizzare il controllo
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: impossibile mettere a fuoco il controllo.
   • Inaccessibile: a fuoco ma non annunciato con TalkBack.
   • Accessibile: a fuoco e annunciato in TalkBack.

Come risolvere

XML

Utilizza la proprietà di testo di un controllo o la descrizione del contenuto di una vista per garantire che TalkBack disponga di informazioni precise da condividere.

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

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

Compose

Associare i pulsanti immagine a una descrizione del contenuto o a un testo per indicarne lo scopo.

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

I pulsanti senza immagine dovrebbero fornire testo per TalkBack.

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

React Native

Per risolvere un problema rilevato da questa regola, aggiungere un elemento accessibilityLabel al componente di controllo.

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

Quando gli elementi sono raggruppati insieme all'interno di una vista contenitore, aggiungi la accessible prop e la accessibilityLabel prop alla vista contenitore:

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