Guía para incluir textos alternativos adecuados y accesibles a las imágenes de tu web
Página de resultado. Seleccionaste:
- Que tu imagen es o forma parte de un enlace o botón
- Que no es un botón de tipo imagen ni un mapa de imagen
- Que dentro del enlace también hay texto
- Que la imagen no aporta información adicional al texto del enlace, es solo decorativa.
La imagen no complementa la información del texto del enlace, solo es decorativa
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.
Siempre es preferible que las imágenes decorativas no estén en el código de la página sino definidas en la CSS, por ejemplo mediante background-image
Ejemplos:
HomeEl código HTML debería ser:
<a href="home.html"><img src="images/home.png" alt=""/> Home</a>
La imagen no aporta información adicional, incluir en ella un texto alternativo sería redundante.
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 H30 de las WCAG 2.0: H30: Providing link text that describes the purpose of a link for anchor elements
- 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.8 Icons, 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.
