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=""
/>