La imagen tiene etiqueta de accesibilidad

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Free Trial
Not for use with personal data

ID de regla: image-has-accessibility-label

WCAG 2.1 (A) 1.1.1

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

Recursos