L'image comporte une étiquette d'accessibilité
ID de règle : image-has-accessibility-label
Toutes les images doivent avoir un texte alternatif pour transmettre leur objectif et leur signification aux utilisateurs de synthèse vocale.
Pourquoi c'est important
La synthèse vocale n'a pas de moyen de traduire une image en mots par défaut. Les versions plus récentes de VoiceOver et TalkBack disposent de fonctionnalités avancées qui tentent de fournir du texte pour les images, mais ce n'est pas toujours précis. Par conséquent, il est nécessaire que les images comportent un texte alternatif court et descriptif afin que les utilisateurs de synthèse vocale comprennent clairement le contenu et l'objectif 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 afin que les lecteurs d’écran puissent convertir ce texte en son ou en braille. Il en va de même à des degrés divers pour les personnes malvoyantes ou daltoniennes.
Comment résoudre le problème
Assurez-vous que tous les Image composants avec un accessible prop défini sur true incluent également un accessibilityLabel prop. De plus, assurez-vous que tous les Image composants avec un accessibilityLabel prop ont également le accessible prop défini sur true afin d'être disponibles pour les 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'échecs
Le composant Image a une accessible propriété mais pas de accessibilityLabel propriété.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>Le composant Image a une accessibilityLabel propriété mais pas de accessible propriété.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>Le composant Image avec une accessible propriété ne doit pas avoir un accessibilityLabelvide.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>