A des actions d'accessibilité valides

ID de règle : has-valid-accessibility-actions

WCAG 2.0 (A) 4.1.2

Les actions d’accessibilité permettent à la technologie d’assistance d’invoquer par programmation les actions d’un composant. Pour prendre en charge les actions d’accessibilité, un composant doit faire deux choses :

• Définir la liste des actions qu'il prend en charge via la accessibilityActions propriété.
• Implémenter une onAccessibilityAction fonction pour gérer les demandes d'action.

La accessibilityActions propriété doit contenir une liste d’objets d’action. Chaque objet d'action doit contenir les champs suivants :

Actions standard

Le name champ doit être l'un des suivants pour les actions standard :

Le champ label est facultatif pour les actions standard et est souvent inutilisé par les technologies d'assistance.

Actions personnalisées

Les champs name nom et label valeur sont obligatoires pour les actions personnalisées.

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

onAccessibilityAction

Le seul argument de cette fonction est un événement contenant le nom de l'action à effectuer.

<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;
    }
  }}
/>

Pourquoi c'est important

L'utilisation du champ correct accessibilityActions name ou la vérification que les actions personnalisées comportent à la fois un name nom et un label valeur permettra aux utilisateurs de technologies d'assistance d'utiliser des gestes spécifiques. Si un utilisateur ne peut pas utiliser certains gestes, il risque de ne pas être en mesure d'effectuer des tâches critiques dans une application, telles que faire un achat ou planifier un rendez-vous.

Comment résoudre le problème

Assurez-vous qu'un name nom est spécifié pour les actions d'accessibilité standard et qu'un onAccessibilityAction gestionnaire d'événements est implémenté pour l'action. Si vous utilisez une action d’accessibilité personnalisée, vous devez également définir un [terme manquant] label.

Exemples de réussite

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

Exemples d'échecs

Une accessibilityAction personnalisée est correctement définie, mais il n'existe pas de onAccessibilityAction fonction pour gérer l'événement.

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

Une action personnalisée est définie et possède une onAccessibilityAction fonction associée, mais un label [terme manquant] n'est pas défini.

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

Ressources

• Actions d'accessibilité React Native