Crear activos accesibles: Imágenes e iconos

Hacer que tu sitio web sea accesible significa garantizar que todos los visitantes, incluidos los que tienen problemas visuales, puedan experimentar plenamente tu contenido. Este artículo explica cómo utilizar imágenes e iconos de forma que cumplan las normas de accesibilidad, añadiendo texto alternativo, utilizando elementos visuales significativos y evitando los errores más comunes. Sigue estas buenas prácticas para crear activos inclusivos y fáciles de usar para tu sitio web o página de destino.

Requisitos

• Todas las imágenes e iconos con información deben tener un texto alternativo que describa el contenido de la imagen o icono
  • El texto alternativo no debe incluir palabras que identifiquen el elemento como gráfico o imagen (por ejemplo, evita frases como “gráfico de” o “imagen de”, etc.) porque los lectores de pantalla ya establecen la función (por ejemplo, diciendo “gráfico” y leyendo después el texto alternativo).
  • Evita utilizar mayúsculas, ya que algunos lectores de pantalla leerán cada letra
  • Necesario para:
    • imágenes que utilicen <img>
    • imágenes activas
    • imágenes de entrada de formulario
    • SVG con <img>
    • SVG con <SVG>
    • Lienzo HTML5
    • fuentes de iconos
• Las descripciones del texto Alt deben aportar contexto para el usuario y deben ser significativas
  • La imagen/icono de los enlaces debe describir el destino del enlace.
  • La imagen/icono de los enlaces de botón/control debe describir la finalidad del botón o control y/o la acción resultante.
  • La longitud del texto alternativo de las imágenes/iconos informativos debe ser concisa (no más de 250 caracteres)
• El texto alternativo debe estar localizado según el idioma utilizado en una página.
• No utilices texto en las imágenes si puedes utilizar texto real en su lugar, a menos que sea esencial (como un logotipo) o necesites fuentes, tamaños, colores o fondos específicos.
• Si es necesario utilizar la imagen del texto, sigue las directrices de color y contraste.
• Si una imagen de fondo tiene información útil, debe añadirse texto alt (por ejemplo, mediante texto visible normal, añadiendo role="imagen" y aria-label, o por otros medios).
• Si hay texto sobre una imagen, prueba el contraste del texto superpuesto con al menos 8 colores de la imagen.
• Proporciona controles (botones de pausa, flechas) para los contenidos que se inician automáticamente como: carruseles, deslizadores de imágenes y vídeos de fondo.
• No hagas que los carruseles se reproduzcan automáticamente.
• No utilices botones fantasma sobre las imágenes (botones sin fondo ni contorno).
• Ningún contenido debe parpadear más de tres veces por segundo.
• Los objetos gráficos como un icono independiente, un gráfico o una imagen tienen un contraste mínimo de 3:1 entre el elemento y su fondo.
• Los iconos utilizados en varias páginas deben compartir el mismo significado y funcionalidad.
• Si utilizamos un icono específico para iniciar una acción (por ejemplo, una flecha hacia abajo para desplegables o acordeón/expansión), no lo utilizamos decorativamente en otra página.

Excepciones

Imágenes o iconos decorativos o redundantes

Cuando las imágenes no sirven al contenido, son puramente decorativas o duplican información ya transmitida en un texto, se recomienda asignarles un texto alternativo nulo (vacío)(alt="), designarlas con ARIA role="presentation", o implementarlas como fondos CSS.

Imágenes de fondo decorativas o redundantes

No des texto alternativo a las imágenes de fondo que no sean importantes y no aporten información al usuario.

Ejemplos

	HACER: El texto en alt proporciona contexto e información: “mujer madura trabajando con un portátil, vestida con ropa de oficina y sonriendo, de pie sobre un fondo blanco”. NO HACER: Una descripción no es suficientemente específica: “mujer madura”.
	El icono aporta información y es importante para el usuario. Texto en alt: “icono de facebook”, “icono de Instagram”, “icono de Pinterest”.
	En la página, hay seis descripciones con un icono ilustrativo. Esas imágenes son imágenes decorativas. Lo establecemos añadiendo un atributo alt vacío: <img src="nombrearchivo.png" alt="">. Las tecnologías de asistencia, como un lector de pantalla, ignorarán entonces la imagen. Sin el atributo alt vacío, un lector de pantalla puede leer el nombre del archivo, lo que no tiene sentido y confunde al usuario.
	En este ejemplo, el logotipo cumple dos funciones: indicar a los usuarios en qué sitio se encuentra el usuario y proporcionar un enlace de vuelta a la página principal. HACER: Describe la imagen y su función, por ejemplo, utilizando aria-label-"Página principal de GetResponse".