La Imagen Tiene Etiqueta de Accesibilidad
Regla que requiere que los componentes Image de React Native tengan texto alternativo para los usuarios de lectores de pantalla
ID de la regla: image-has-accessibility-label
Todas las imágenes deben tener texto alternativo para transmitir su propósito y significado a los usuarios de lectores de pantalla.
Por qué es Importante
Los lectores de pantalla no tienen una forma de traducir una imagen en palabras por defecto. Las versiones más recientes de VoiceOver y TalkBack tienen funciones avanzadas que intentan proporcionar texto para imágenes, pero no siempre son precisas. Como resultado, es necesario que las imágenes tengan un texto alternativo corto y descriptivo para que los usuarios de lectores de pantalla comprendan claramente el contenido y el propósito de la imagen.
Si no puedes 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 es cierto en diversos grados para personas con baja visión o daltonismo.
Cómo Solucionar el Problema
Asegúrese de que todos los componentes Image con un prop accessible establecido en verdadero también incluyan un prop accessibilityLabel. Además, asegúrese de que todos los componentes Image con un prop accessibilityLabel también tengan el prop accessible establecido en verdadero para estar disponibles para los lectores de pantalla.
Ejemplos Correctos
<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 Incorrectos
El componente Image tiene un prop accessible pero no un prop accessibilityLabel.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>El componente Image tiene un prop accessibilityLabel pero no un prop accessible.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>El componente Image con un prop accessible no debe tener un accessibilityLabel vacío.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>