Ha azioni di accessibilità valide

ID regola: has-valid-accessibility-actions

WCAG 2.0 (A) 4.1.2

Le azioni di accessibilità consentono alla tecnologia assistiva di richiamare a livello di programmazione le azioni di un componente. Per supportare le azioni di accessibilità, un componente deve fare due cose:

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

La accessibilityActions proprietà 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 e spesso non viene utilizzato dalle tecnologie assistive.

Azioni personalizzate

I campi name e label sono obbligatori 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

Utilizzando il campo corretto accessibilityActions name o assicurandosi che le azioni personalizzate abbiano sia un name che un label , gli utenti di tecnologie assistive potranno utilizzare gesti specifici. Se un utente non riesce a utilizzare 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 onAccessibilityAction gestore eventi sia implementato per l'azione. Se si utilizza un'azione di accessibilità personalizzata, è necessario definire anche un label.

Esempi di successo

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

Esempi fallimentari

Un custom accessibilityAction è definito correttamente, ma non esiste un 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à React Native