A primera vista, las imágenes accesibles pueden parecer un tema rápido: agregas un poco de "texto alternativo" a una imagen y listo. Sin embargo, el tema es más complejo de lo que algunas personas creen. En esta sección, revisaremos lo siguiente:
- Cómo actualizar el código para que las imágenes sean accesibles
- Qué información se debe compartir con los usuarios y dónde hacerlo
- Formas adicionales de mejorar tus imágenes para ayudar a las personas con discapacidades
Propósito y contexto de la imagen
Antes de escribir una sola línea de código, piensa en el propósito de la imagen, dónde se mostrará y cómo se usará. Hacerte estas preguntas puede ayudarte a determinar la mejor manera de transmitir la información a una persona que usa tecnología de asistencia (TA), como un lector de pantalla.
Puedes preguntarte lo siguiente:
- ¿La imagen es esencial para comprender el contexto de la función o la página?
- ¿Qué tipo de información intenta transmitir la imagen?
- ¿La imagen es simple o compleja?
- ¿La imagen evoca una emoción o le solicita al usuario que actúe?
- ¿O la imagen es solo un "deleite visual" sin un propósito real?
Un diagrama de flujo visual, como un árbol de decisiones de imágenes, puede ayudarte a decidir a qué categoría pertenece tu imagen.
Intenta ocultar las imágenes de tu sitio o app web con una extensión del navegador o con otros métodos. Luego, pregúntate: "¿Entiendo el contenido que queda?". Si la respuesta es sí, es muy probable que sea una imagen decorativa. De lo contrario, la imagen es informativa de alguna manera y es necesaria en el contexto. Una vez que determines el propósito de la imagen, podrás determinar la forma más precisa de codificarla.
Imágenes decorativas
Una imagen decorativa es un elemento visual que no agrega contexto ni información adicionales que permitan al usuario comprender mejor el contexto. Las imágenes decorativas son complementarias y pueden proporcionar estilo en lugar de sustancia.
Si decides que una imagen es decorativa, debe ocultarse de forma programática de las TAs. Cuando programas una imagen para que se oculte, le indica a la TA que no es necesaria para comprender el contenido, el contexto o la acción de la página. Existen muchas formas de ocultar imágenes, como usar una alternativa de texto vacía o nula, aplicar ARIA o agregar la imagen como fondo de CSS. Estos son algunos ejemplos de cómo ocultar una imagen decorativa a los usuarios.
alt vacío o nulo
Un atributo de texto alternativo vacío o nulo difiere de un atributo de texto alternativo faltante. Si falta el atributo de texto alternativo, la TA puede leer el nombre del archivo o el contenido circundante para brindarle al usuario más información sobre la imagen.
Rol establecido en presentation o none
Un rol establecido en
presentation o none
quita la semántica de un elemento de la exposición al árbol de accesibilidad.
Mientras tanto, aria-hidden= "true"
quita todo el elemento (y todos sus elementos secundarios) de la
API de accesibilidad.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Usa aria-hidden con precaución, ya que puede ocultar elementos que no quieres ocultar.
Imágenes en CSS
Cuando agregas una imagen de fondo con CSS, un lector de pantalla no puede detectar el archivo de imagen. Asegúrate de que quieres que la imagen se oculte antes de aplicar este método.
Imágenes informativas
Una imagen informativa es una imagen que transmite un concepto, una idea o una emoción. Las imágenes informativas incluyen fotos de objetos del mundo real, íconos esenciales, dibujos simples e imágenes de texto.
Si tu imagen es informativa, debes incluir texto alternativo programático que describa el propósito de la imagen. Las descripciones de imágenes alternativas, que a menudo se abrevian como "texto alternativo", les brindan a los usuarios de TAs más contexto sobre una imagen y los ayudan a comprender mejor el mensaje o la intención de una imagen.
Las descripciones alternativas para los
<img> elementos
se agregan incluyendo el atributo alt, independientemente del tipo de archivo al que
apunte, como .jpg, .png, .svg, y otros.
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Sin embargo, cuando usas elementos <svg> intercalados, debes prestar atención a la accesibilidad.
Primero, dado que los SVG están codificados semánticamente, la TA los omitirá de forma predeterminada.
Si tienes una imagen decorativa, esto no es un problema: la TA la ignorará como se espera. Sin embargo, si tienes una imagen informativa, se debe agregar un ARIA role="img"
al patrón para que la TA la reconozca como una imagen.
En segundo lugar, los elementos <svg> no usan el atributo alt, por lo que
se deben usar diferentes métodos de codificación para agregar descripciones alternativas a tus imágenes informativas.
<svg role="img" ...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Imágenes funcionales
Una imagen funcional está conectada a una acción. Un ejemplo de imagen funcional es un logotipo que vincula a la página principal, una lupa que se usa como botón de búsqueda o un ícono de redes sociales que te dirige a otro sitio web o app.
Al igual que las imágenes informativas, las imágenes funcionales deben incluir una descripción alternativa para informar a todos los usuarios sobre su propósito. A diferencia de una imagen informativa, cada imagen funcional debe describir la acción de la imagen, no los aspectos visuales.
En el ejemplo del logotipo, la imagen es informativa y accionable, ya que es una imagen que transmite información y se comporta como un vínculo. En casos como estos, puedes agregar descripciones alternativas a cada elemento, pero no es un requisito.
Una forma de agregar descripciones alternativas a las imágenes es a través de texto oculto visualmente. Cuando usas este método, los lectores de pantalla leerán el texto porque está en el DOM, pero se oculta visualmente con la ayuda de CSS personalizado.
En el fragmento de código, puedes ver que "Navigate to the homepage" es el título del wrapper y que el texto alternativo de la imagen es "Lovely Ladybugs for your Lawn". Cuando escuchas el código del logotipo con un lector de pantalla, escuchas el elemento visual y la acción transmitidos en una imagen.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Imágenes complejas
Una imagen compleja suele requerir más explicación que una imagen decorativa, informativa o funcional. Requiere una descripción alternativa corta y una larga para transmitir el mensaje completo. Las imágenes complejas incluyen infografías, mapas, gráficos y diagramas, y también ilustraciones complejas.
Al igual que con los otros tipos de imágenes, existen diferentes métodos que puedes usar para agregar descripciones alternativas a tus imágenes complejas.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Una forma de agregar una explicación adicional a una imagen es vincularla a un recurso o proporcionar un vínculo de salto a una explicación más larga más adelante en la página. Este método es una buena opción, no solo para los usuarios de TAs, sino que también ayuda a las personas con discapacidades, como discapacidades cognitivas, de aprendizaje y de lectura, que podrían beneficiarse de tener esta información adicional de la imagen disponible en la pantalla en lugar de estar oculta en el código.
Otro método que puedes usar es agregar el aria-describedby atributo al
<img> elemento. Puedes vincular la imagen de forma programática a un ID que contenga una descripción más larga. Este método crea una asociación sólida entre la imagen y la descripción completa. La descripción extendida se puede mostrar en la pantalla o se puede ocultar visualmente, pero considera mantenerla visible para ayudar a más personas.
Otra forma de agrupar descripciones alternativas cortas con una más larga es
usar los <figure> y <figcaption> elementos. Estos elementos actúan de manera similar a aria-describedby, ya que agrupan elementos semánticamente, lo que forma una asociación más sólida entre la imagen y su descripción.
Agregar ARIA role="group" garantiza la retrocompatibilidad con navegadores web
anteriores que no admiten la semántica del elemento <figure>.
Prácticas recomendadas para el texto alternativo
Por supuesto, incluir texto alternativo no es suficiente. El texto también debe ser significativo. Por ejemplo, si tu imagen trata sobre un enjambre de mariquitas que mastican las hojas de tu rosal premiado, pero tu texto alternativo dice "insectos", ¿transmitiría el mensaje y la intención completos de la imagen? Definitivamente no.
Las descripciones alternativas deben capturar la mayor cantidad posible de información visual pertinente y ser concisas. Si bien no hay un límite para la cantidad de caracteres que puede leer un lector de pantalla, por lo general, se recomienda limitar el texto alternativo a 150 caracteres o menos para evitar la fatiga del lector. Si necesitas agregar contexto adicional a la imagen, puedes usar uno de los patrones de imágenes complejas, agregar texto de leyenda o describir la imagen con más detalle en el texto principal.
Estas son algunas prácticas recomendadas adicionales para el texto alternativo:
- Evita usar palabras como "imagen de" o "foto de" en la descripción, ya que el lector de pantalla identificará estos tipos de archivos por ti.
- Cuando nombres tus imágenes, sé lo más coherente y preciso posible. Los nombres de las imágenes son un resguardo cuando falta el texto alternativo o se ignora.
- Evita usar caracteres no alfabéticos (por ejemplo, #, 9, &) y usa guiones entre palabras en lugar de guiones bajos en los nombres de las imágenes o el texto alternativo.
- Usa la puntuación adecuada siempre que sea posible. Sin ella, las descripciones de las imágenes sonarán como una oración larga, interminable y continua.
- Escribe texto alternativo como un humano y no como un robot. El uso de palabras clave de relleno no beneficia a nadie: las personas que usan lectores de pantalla se molestarán y los algoritmos de los motores de búsqueda te penalizarán.