L'immagine ha un'etichetta di accessibilità
Regola che richiede ai componenti Image di React Native di avere un testo alternativo per gli utenti di lettori di schermo
ID della regola: image-has-accessibility-label
Tutte le immagini devono avere un testo alternativo per trasmettere il loro scopo e significato agli utenti di lettori di schermo.
Perché è importante
I lettori di schermo non hanno un modo predefinito per tradurre un'immagine in parole. Le versioni più recenti di VoiceOver e TalkBack dispongono di funzionalità avanzate che tentano di fornire testo per le immagini, ma non è sempre accurato. Di conseguenza, è necessario che le immagini abbiano un testo alternativo breve e descrittivo affinché gli utenti di lettori di schermo comprendano chiaramente il contenuto e lo scopo dell'immagine.
Se non puoi vedere, tutti i tipi di informazioni visive, come le immagini, sono completamente inutili a meno che non venga fornita un'alternativa testuale digitale, in modo che i lettori di schermo possano convertire quel testo in suono o braille. Lo stesso vale, in diversi gradi, per le persone con ipovisione o daltonismo.
Come risolvere il problema
Assicurati che tutti i componenti Image con un prop accessible impostato su true includano anche un prop accessibilityLabel. Inoltre, assicurati che tutti i componenti Image con un prop accessibilityLabel abbiano anche il prop accessible impostato su true per essere disponibili ai lettori di schermo.
Esempi Correttamente Implementati
<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}
/>Esempi Errati
Il componente Image ha un prop accessible ma non ha un prop accessibilityLabel.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>Il componente Image ha un prop accessibilityLabel ma non ha un prop accessible.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>Il componente Image con un prop accessible non dovrebbe avere un accessibilityLabel vuoto.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>