Guía para incluir textos alternativos adecuados y accesibles a las imágenes de tu web
Página de resultado. Seleccionaste:
- Que la imagen no es o no forma parte de un enlace o botón
- Que la imagen es decorativa, invisible o no aporta información adicional
La imagen es decorativa, invisible o no aporta información adicional
alt=""
Debes incluir el atributo ALT a la imagen, pero este debe estar vacío.
Incluir un ALT vacío no es lo mismo que no incluir el atributo ALT. La imagen solo será ignorada por los productos de apoyo incluyéndolo pero vacío.
Además la imagen no debe tener el atributo TITLE, o este debe estar también vacío.
Sin embargo, siempre es preferible que las imágenes decorativas no estén en el código sino definidas en la CSS, por ejemplo mediante background-image
Ejemplos:
Ejemplo 1. Pixel transparente o blanco
Un pixel blanco o transparente utilizado para separar elementos en la página.
<img src="images/pixel.png" alt=""/>
Lo ideal sin embargo es que no se usen este tipo de recursos, sino que los espacios entre elementos vengan definidos por los estilos de la CSS.
Ejemplo 2. Imagen o icono que no aporta información adicional
¡Advertencia! Tu sesión está a punto de expirar.
El código HTML debería ser:
<p><img src="images/advertencia.jpg" alt=""/><strong>¡Advertencia!</strong> Tu sesión está a punto de expirar.</p>
El icono de advertencia que precede al texto no está aportando información adicional, por tanto añadirle un texto alternativo sería redundante.
Ejemplo 3. Imágenes o iconos decorativos
Imagen capturada de la web de Renfe
El código recomendado sería:
<h2 class="con_bullet_decorativo"><a href="profesionales.html" aria-describedby="info">Acceso profesionales</a><h2>
<div class="con_imagen_decorativa"><p id="info"><strong>Información y contacto</strong>. Espacio destinado exclusivamente a medios de comunicación</p><div>
En este caso, las dos imágenes decorativas no se incluyen en el código sino que se definen en la CSS.
Recomendaciones generales
- No es lo mismo
alt=""que la ausencia de alt. - Las imagénes decorativas no deben tener el atributo TITLE o debe estar vacío.
- Siempre es preferible definir las imágenes decorativas en la CSS.
Recursos:
- Técnica H67 de las WCAG 2.0: H67: Using null alt text and no title attribute on img elements for images that AT should ignore
- Técnica C9 de las WCAG 2.0: C9: Using CSS to include decorative images
- 3.5 A purely decorative image that doesn't add any information, en HTML5: Techniques for providing useful text alternatives (W3C)
- 4.1.2 Using an empty alt attribute alt="" en HTML5: Techniques for providing useful text alternatives (W3C)
- The alt and title attributes, de 456 Berea St.
- Otras técnicas con WAI-ARIA u otras tecnologías (Flash, PDF):
¿A quién beneficia?
Definir las imágenes decorativas en la CSS beneficia a todos usuarios y al posicionamiento de la web, ya que implica un código más limpio y ligero. Además, si la imagen no se puede mostrar no aparece el icono de imagen fallida, de modo que el usuario ya no se preguntará si mostraba o no un contenido importante.
En cualquiera de los casos, beneficia a las personas con dificultades para percibir el contenido visual (personas con ceguera, baja visión, sordo-ciegas) o con dificultades de comprensión del contenido visual que puedan estar usando productos de apoyo, como un lector de pantalla, pues estos ignorarán las imágenes decorativas.
