L'immagine ha un'etichetta di accessibilità
ID regola: image-has-accessibility-label
Tutte le immagini devono avere un testo alternativo per comunicare il loro scopo e significato agli utenti di lettori di schermo.
Perché è importante
Di default, gli screen reader non hanno la possibilità di 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 ciò è accurato. Di conseguenza, è necessario che le immagini abbiano un testo alternativo breve e descrittivo, in modo che gli utenti di lettori di schermo possano comprendere chiaramente il contenuto e lo scopo dell'immagine.
Per chi non può vedere, tutti i tipi di informazioni visive, come le immagini, sono completamente inutili a meno che non venga fornita un'alternativa testuale digitale che consenta ai lettori di schermo di convertire tale testo in suono o Braille. Lo stesso vale in varia misura per le persone ipovedenti o daltonizzate.
Come risolvere il problema
Assicurarsi che tutti i Image componenti con un accessible prop impostata su true includano anche un accessibilityLabel prop. Inoltre, assicurati che tutti i Image componenti con un accessibilityLabel prop abbiano anche la accessible prop impostata su true per essere disponibili per gli screen reader.
Esempi positivi
<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 negativi
Il componente Image ha una accessible proprietà ma nessuna accessibilityLabel proprietà.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>Il componente Image ha una accessibilityLabel proprietà ma nessuna accessible proprietà.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>Il componente Image con una accessible proprietà non dovrebbe avere una accessibilityLabelproprietà vuota.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>