L'image a une étiquette d'accessibilité

ID de la règle : image-a-une-étiquette-d'accessibilité

WCAG 2.1 (A) 1.1.1

Toutes les images doivent avoir un texte alternatif pour transmettre leur but et leur signification aux utilisateurs de lecteurs d'écran.

Pourquoi c'est important

Les lecteurs d'écran n'ont pas, par défaut, moyen de traduire une image en mots. Les versions plus récentes de VoiceOver et TalkBack ont des fonctionnalités avancées qui tentent de fournir un texte pour les images, mais ce n'est pas toujours précis. Par conséquent, les images doivent avoir un texte alternatif court et descriptif afin que les utilisateurs de lecteurs d'écran comprennent clairement le contenu et le but de l'image.

Si vous ne pouvez pas voir, tous les types d'informations visuelles, telles que les images, sont complètement inutiles à moins qu'une alternative textuelle numérique ne soit fournie pour que les lecteurs d'écran puissent convertir ce texte en son ou en braille. Il en va de même, à divers degrés, pour les personnes malvoyantes ou daltoniennes.

Comment résoudre le problème

Assurez-vous que tous les Image composants avec une prop accessible définie sur true incluent également une prop accessibilityLabel. De plus, assurez-vous que tous les Image composants avec une prop accessibilityLabel ont également la prop accessible définie sur true afin d'être accessibles aux lecteurs d'écran.

Exemples de réussite

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible
  accessibilityLabel="A small fawn pug"
/>

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible={true}
  accessibilityLabel="A small fawn pug"
/>

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible="true"
  accessibilityLabel="A small fawn pug"
/>

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible={false}
/>

<Image
  source={require("pug.jpg")}
  style={styles.image}
/>

Exemples d'échec

Le composant Image a une prop accessible mais aucune prop accessibilityLabel.

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible
/>

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible={true}
/>

Le composant Image a une prop accessibilityLabel mais aucune prop accessible.

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessibilityLabel="A small fawn pug"
/>

Le composant Image avec une prop accessible ne devrait pas avoir une accessibilityLabel vide.

<Image
  source={require("pug.jpg")}
  style={styles.image}
  accessible
  accessibilityLabel=""
/>

Ressources

• React Native Image
• React Native Image - accessibilityLabel
• React Native Image - accessible