ID de regla: image-has-accessibility-label
Todas las imágenes deben tener texto alternativo para transmitir su propósito y significado a los usuarios del lector de pantalla.
Por qué es importante
Los lectores de pantalla no tienen una forma de traducir una imagen en palabras de forma predeterminada. Las versiones más nuevas de VoiceOver y TalkBack tienen funciones avanzadas que intentan proporcionar texto a las imágenes, pero no siempre es preciso. Como resultado, es necesario que las imágenes tengan un texto alternativo breve y descriptivo para que los usuarios de lectores de pantalla comprendan claramente el contenido y el propósito de la imagen.
Si no puede ver, todo tipo de información visual, como las imágenes, es completamente inútil a menos que se proporcione una alternativa de texto digital para que los lectores de pantalla puedan convertir ese texto en sonido o braille. Lo mismo ocurre en diversos grados con personas con baja visión o daltonismo.
Cómo solucionar el problema
Asegúrese de que todos los Image componentes con una propiedad accessible establecida como verdadera también incluyan una propiedad accessibilityLabel . Además, asegúrese de que todos los Image componentes con una propiedad accessibilityLabel también tengan la propiedad accessible establecida en verdadero para que estén disponibles para los lectores de pantalla.
Ejemplos aprobados
<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}
/>Ejemplos reprobados
El componente tiene una prop Image pero ninguna prop accessible . accessibilityLabel
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>El componente Image tiene una prop accessibilityLabel pero ninguna prop accessible .
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>El componente Image con una propiedad accessible no debe tener un accessibilityLabel vacío.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>