A des actions d'accessibilité valides

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

WCAG 2.0 (A) 4.1.2

Les actions d'accessibilité permettent à la technologie d'assistance d'invoquer de manière programmatique 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 supporte via la propriété accessibilityActions.
• Mettre en œuvre une fonction onAccessibilityAction pour gérer les demandes d'actions.

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

Actions standard

Le champ name 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 et label sont exigés 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 à exécuter.

<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

Utiliser le champ accessibilityActions name correct ou s'assurer que les actions personnalisées ont à la fois un name et un label permettra aux utilisateurs de technologies d'assistance d'utiliser des gestes spécifiques. Si un utilisateur ne peut pas utiliser certains gestes, il pourrait ne pas être en mesure de réaliser des tâches critiques dans une application, comme effectuer un achat ou prendre un rendez-vous.

Comment résoudre le problème

Assurez-vous qu'un name est spécifié pour les actions d'accessibilité standard et qu'un gestionnaire d'événements onAccessibilityAction est mis en œuvre pour l'action. Si vous utilisez une action d'accessibilité personnalisée, vous devez également définir un label.

Exemples réussis

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

Exemples non réussis

Un accessibilityAction personnalisé est correctement défini, mais il n'y a pas de fonction onAccessibilityAction pour gérer l'événement.

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

Une action personnalisée est définie et dispose d'une fonction onAccessibilityAction associée, mais un label 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