Escribir un buen texto alternativo

La accesibilidad realmente es una buena estrategia, un diseño cuidadoso, pero a menudo son las pequeñas cosas las que marcan la diferencia para la persona que leen nuestro contenido. Las descripciones de texto para las imágenes se encuentran entre los requisitos de accesibilidad más básicos, pero también están entre los más difíciles de corregir.
Las descripciones de los textos hacen posible que cualquier persona que no pueda ver una imagen entienda qué contiene la imagen. Esto incluye a las personas con discapacidades permanentes como ser ciegos o con baja visión, las personas con discapacidades temporales como la tensión ocular, o las personas con discapacidades situacionales como las imágenes que no se cargan correctamente. La mejor manera de proporcionar una descripción de texto es usar el atributo alt en el elemento img. Es posible hacer esto en la mayoría de los Sistemas de administración de contenido (CMS), y la descripción del texto resultante es casi universalmente compatible con los navegadores, las Tecnologías de asistencia (AT) como los lectores de pantalla y los asistentes de voz como Siri.

Imágenes en enlaces o botones.

Si la imagen es el único contenido de un enlace o botón, la descripción del texto debe describir el propósito del control.

Imágenes de visualización de datos.

Si la imagen contiene datos complejos, el primer paso es proporcionar una descripción de texto que describa brevemente los datos. Por ejemplo, una imagen que muestra la cuota de mercado actual para los navegadores de uso habitual en la web.

Si los datos en la imagen requieren una descripción más detallada, esto debería incluirse en el contenido (visible) de la página, ya que será útil para todos. La descripción más larga también puede asociarse con la imagen utilizando el atributo descrito por aria, lo que significa que los usuarios del lector de pantalla serán informados de que la descripción más larga está disponible.

Imágenes que incluyen texto.

No utilice imágenes de registro (como PNG o JPG) que contienen texto. El texto no se escala y se vuelve rápidamente ilegible cuando se lo ve con una gran ampliación o zoom. Si el texto debe presentarse con un diseño personalizado, use CSS para personalizar el contenido del texto.

Imágenes estéticas

Las imágenes a menudo se usan para agregar "atmósfera" a una página, para evocar emociones particulares o para transmitir un estado de ánimo particular. Las descripciones de texto de estas imágenes deben tener como objetivo transmitir el mismo sentido de significado, lo que significa que pueden permitirse ser un poco más imaginativos que otras formas de descripción de texto. Por ejemplo, la descripción de texto de un logotipo.

<img src = "balloons.svg" alt = ”tres globos de aire caliente se unen en un cielo tranquilo y soleado">

Imágenes puramente decorativas

Estas son las imágenes utilizadas para proporcionar adornos visuales a una página, pero que no tienen otro propósito que no sea ese. Estas imágenes no necesitan una descripción de texto, pero el atributo alt todavía debe estar presente en el elemento img. Cuando el atributo alt está presente, pero está completamente vacío, la imagen es completamente ignorada por AT y los asistentes de voz.

<img src = ”bar.png” alt = ””>