Ha azioni di accessibilità valide

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Free Trial
Not for use with personal data

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:

Nome Tipo Obbligatorio
name stringa
label stringa No

Azioni standard

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

Nome Supporto della piattaforma
magicTap Solo iOS
escape Solo iOS
activate Android e iOS
increment Android e iOS
decrement Android e iOS
longpress Solo Android

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