Las imágenes deben tener texto alternativo

ID de la regla: image-alt
Conjunto de reglas: axe-core 4.13
Impacto en el usuario: Crítico
Directrices: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549, RGAA

Solucione más errores de accesibilidad con axe DevTools Pro

Encuentre y solucione más problemas con Intelligent Guided Tests™ respondiendo una serie de preguntas simples sobre el contenido de su página. Prueba gratuita. No se necesita tarjeta de crédito.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Persona ciega
  • Sordociegos

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549
  • RGAA

Criterios de Éxito WCAG [WCAG 2.1 (A)]

  • 1.1.1: Non-text Content

Criterios de Éxito WCAG [WCAG 2.0 (A)]

  • 1.1.1: Non-text Content

Criterios de Éxito WCAG [WCAG 2.2 (A)]

  • 1.1.1: Non-text Content

Directrices de la Sección 508

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

Directrices para probadores de confianza

  • 7.A: The accessible name and accessible description for a meaningful image provides an equivalent description of the image.
  • 7.B: There is no accessible name and accessible description for a decorative image.

    RGAA

    • 1.1.1: Images (<img> or role="img") that convey information have a text alternative.

    Cómo solucionar el problema

    Asegúrese de que todos los elementos informativos <img> tengan un texto alternativo breve y descriptivo y que todos los elementos decorativos <img> tengan atributos alt vacíos (por ejemplo, alt="").

    Hay tres formas principales de agregar texto alternativo a una imagen:

    • Usando un atributo, es decir alt atributo <img alt="drawing of a cat" src="...">
    • Usando un aria-label atributo, es decir <img aria-label="drawing of a cat" src="...">
    • Usando un atributo, es decir aria-labelledby atributo <img arialabelledby="someID" src="...">

    Consejos para escribir texto alternativo

    Al escribir texto alternativo, tenga en cuenta que su propósito es transmitir información a los usuarios ciegos sobre el contenido y el propósito de la imagen: los usuarios ciegos deben poder obtener tanta información del texto alternativo como un usuario vidente obtiene de la imagen misma. El texto alternativo debe indicar la intención, el propósito y el significado de la imagen.

    Al escribir texto alternativo, es útil tener en cuenta las siguientes preguntas:

    • ¿Por qué aparece aquí contenido no textual?
    • ¿Qué información presenta?
    • ¿Qué finalidad cumple?
    • Si no pudiera usar el contenido no textual, ¿qué palabras usaría para transmitir la misma información o función?

    Asegúrese de que todo el texto contenido en el atributo sea útil. Palabras como "gráfico", "imagen", "diagrama" o nombres de archivos de imagen no suelen ser muy útiles y, por lo tanto, no deberían usarse en el texto alternativo.

    Elementos decorativos

    Proporcione atributos "null" alt (usando alt="") para las imágenes que no proporcionan información o que no requieren texto alternativo porque la imagen se describe en el contenido de la página. Algunos desarrolladores omitirán por error el alt atributo por completo en imágenes que consideren que no necesitan alternativas. Esto no es útil para los usuarios de tecnología de asistencia porque la tecnología de asistencia, como el lector de pantalla, a menudo leerá el atributo de origen (es decir, el nombre del archivo) como texto alternativo. Para decirle a la tecnología de asistencia que ignore una imagen, use un atributo de "texto alternativo vacío": alt="".

    Ejemplo:

    <img src="line.jpg" alt="">

    Por qué es importante

    Los lectores de pantalla no tienen forma de traducir una imagen en palabras que se leen al usuario, incluso si la imagen solo consta de texto. Como resultado, es necesario que las imágenes tengan un texto breve y descriptivo alt 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.

    Descripción de la regla

    Todas las imágenes deben tener texto alternativo para transmitir su propósito y significado a los usuarios del lector de pantalla.

    El algoritmo (en términos simples)

    Asegura que cada elemento <img> tenga texto alternativo y role="presentation" o role="none" (ARIA 1.1).

    Recursos

    Páginas de cursos de Deque University (se requiere suscripción)

    Contribuir a axe-core en GitHub

    Otros recursos

    Quizás también quieras consultar estos otros recursos.

    Consulte la lista completa de reglas de axe 4.13 .

    ¿Le ha sido útil esta información?

    Ya has dado tu opinión, gracias..

    Su respuesta fue la siguiente:

    ¿Le ha sido útil esta información?
    Fecha y hora en que se enviaron los comentarios: