Ha Azioni di Accessibilità Valide

ID Regola: ha-azioni-di-accessibilità-valide

WCAG 2.0 (A) 4.1.2

Le azioni di accessibilità consentono alla tecnologia assistiva di invocare programmaticamente le azioni di un componente. Per supportare le azioni di accessibilità, un componente deve fare due cose:

• Definire l'elenco delle azioni che supporta tramite la proprietà accessibilityActions.
• Implementare una funzione onAccessibilityAction per gestire le richieste di azione.

La proprietà accessibilityActions dovrebbe contenere un elenco di oggetti azione. Ogni oggetto azione dovrebbe contenere i seguenti campi:

Azioni Standard

Il campo name deve essere uno dei seguenti per le azioni standard:

Il campo label è facoltativo per le azioni standard ed è spesso non utilizzato dalle tecnologie assistive.

Azioni Personalizzate

I campi name e label sono richiesti per le azioni personalizzate.

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'}
  ]}
/>

onAccessibilityAction

L'unico argomento di questa funzione è un evento contenente il nome dell'azione da eseguire.

<View
  accessible={true}
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
    {name: 'copy', label: 'copy'},
    {name: 'paste', label: 'paste'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>

Perché è Importante

Usare il corretto campo accessibilityActions name o assicurarsi che le azioni personalizzate abbiano sia un name che un label permetterà agli utenti della tecnologia assistiva di usare gesti specifici. Se un utente non può usare determinati gesti, potrebbe non essere in grado di completare attività critiche all'interno di un'app, come effettuare un acquisto o pianificare un appuntamento.

Come Risolvere il Problema

Assicurarsi che un name sia specificato per le azioni di accessibilità standard e che un gestore di eventi onAccessibilityAction sia implementato per l'azione. Se si utilizza un'azione di accessibilità personalizzata, è necessario anche definire un label.

Esempi Correttamente Implementati

<View
  accessibilityActions={[
    {name: 'magicTap'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'magicTap':
        Alert.alert('Alert', 'magicTap action success');
        break;
    }
  }}
/>

Esempi di Implementazione Errata

Un accessibilityAction personalizzato è definito correttamente, ma non c'è una funzione onAccessibilityAction per gestire l'evento.

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
  ]}
/>

Un'azione personalizzata è definita e ha una funzione associata onAccessibilityAction, ma un label non è impostato.

<View
  accessibilityActions={[
    {name: 'cut'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
    }
  }}
/>

Risorse

• Azioni di Accessibilità in React Native