Images

Las imágenes accesibles pueden parecer un tema simple a primera vista: solo debes agregar "texto alternativo" a una imagen y listo. Pero el tema tiene más matices 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 compartirla.
• Otras formas de mejorar tus imágenes para ayudar a las personas con discapacidades.

Propósito de la imagen y contexto

Antes de escribir una sola línea de código, primero debes pensar en el punto de la imagen y en cómo se usará. Hacerte preguntas sobre el propósito y el contexto de la imagen puede ayudarte a determinar la mejor manera de transmitir la información a una persona mediante la tecnología de asistencia (AT), como los lectores de pantalla.

Puedes preguntarte lo siguiente:

• ¿La imagen es fundamental para comprender el contexto de la función o página?
• ¿Qué tipo de información intenta transmitir la imagen?
• ¿La imagen es simple o compleja?
• ¿La imagen provoca emociones o motiva al usuario a realizar una acción?
• ¿O la imagen es solo un regalo visual sin un propósito real?

Un diagrama de flujo visual, como un árbol de decisión 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 otros métodos. Luego, pregúntate: “¿entiendo el contenido que queda?”. Si la respuesta es sí, lo más probable es que sea una imagen decorativa. Si no es así, la imagen es informativa de alguna manera y es contextualmente necesaria. Una vez que determines el propósito de la imagen, puedes determinar la forma más precisa de codificar.

Imágenes decorativas

Una imagen decorativa es un elemento visual que no agrega contexto ni información adicional que permita 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, se debe ocultar de manera programática de las AT. Cuando programas una imagen para que esté oculta, le indica a la AT que la imagen 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ío o nulo, aplicar ARIA o agregar la imagen como un fondo de CSS. A continuación, se muestran 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 AT podría leer el nombre del archivo o el contenido que lo rodea para brindarle al usuario más información sobre la imagen.

Se estableció la función en presentation o none

Una función establecida como presentation o none quita la semántica de un elemento de la exposición al árbol de accesibilidad. Mientras tanto, aria-hidden= "true" quitará 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 deseas ocultar.

Imágenes en CSS

Cuando agregues una imagen de fondo con CSS, un lector de pantalla no detectará el archivo de imagen. Asegúrate de que deseas que la imagen esté oculta 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 simple. Entre los tipos de imágenes informativas se incluyen fotos de objetos del mundo real, íconos esenciales, imágenes de texto y dibujos simples.

Si tu imagen es informativa, debes incluir un texto programático alternativo que describa su propósito. Las descripciones de imágenes alternativas, a menudo abreviadas como "texto alternativo", brindan a los usuarios de AT más contexto sobre una imagen y los ayudan a comprender mejor el mensaje o la intención de una imagen.

Para obtener descripciones alternativas simples que usan elementos <img>, se incluye 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.

En primer lugar, dado que los SVG están codificados semánticamente, AT los omitirá de forma predeterminada. Si tienes una imagen decorativa, esto no es un problema: el AT la ignorará según lo previsto. Sin embargo, si tienes una imagen informativa, se debe agregar una role="img" de ARIA al patrón para que AT la reconozca como imagen.

En segundo lugar, los elementos <svg> no usan el atributo alt, por lo que se deben usar diferentes métodos de codificación en su lugar 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 una imagen funcional es un logotipo que se 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 un sitio web o app diferentes.

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 práctica, ya 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 visualmente oculto. Cuando uses este método, los lectores de pantalla leerán el texto porque se encuentra en el DOM, pero está visualmente oculto con la ayuda de CSS personalizado.

En el fragmento de código, puedes ver que "Navigate to the home" es el título del wrapper, y el texto alternativo de la imagen es "Lovely Ladybugs for your Césped". Cuando escuchas el código del logotipo con un lector de pantalla, escuchas el elemento visual y la acción que se transmiten en una imagen.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

Imágenes complejas

Una imagen compleja a menudo requiere más explicación que una imagen decorativa, informativa o funcional. Requiere una descripción alternativa breve y otra larga para transmitir el mensaje completo. Las imágenes complejas incluyen infografías, mapas, gráficos/gráficos e ilustraciones complejas. Al igual que con los otros tipos de imágenes, hay métodos diferentes 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 vincular a un recurso o proporcionar un vínculo 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 usuarios de AT, sino que también ayuda a las personas con discapacidades, como cognitivas, de aprendizaje y de lectura, que podrían beneficiarse de tener esta información de imagen adicional disponible en la pantalla en lugar de ocultarla en el código.

Otro método que puedes usar es agregar el atributo aria-describedby al elemento <img>. Puedes vincular la imagen de manera programática a un ID que contenga una descripción más larga. Este método crea una asociación fuerte entre la imagen y la descripción completa. La descripción extendida se puede mostrar en la pantalla o se puede ocultar visualmente, pero procura mantenerla visible para incluir a más personas.

Otra forma de agrupar las descripciones alternativas cortas con una más larga es usar los elementos HTML5 <figure> y <figcaption>. Estos elementos actúan de manera similar a aria-describedby, ya que los agrupa de forma semántica, 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 más antiguos que no admiten la semántica nativa del elemento <figure>.

Prácticas recomendadas para el uso de texto alternativo

Por supuesto, incluir texto alternativo no es suficiente. El texto también debe ser significativo. Por ejemplo, si tu imagen es sobre una enjambre de mariquitas que mastican las hojas de tu rosal, pero el texto alternativo dice "errores", ¿transmites el mensaje y la intención completos de la imagen? Definitivamente no.

Las descripciones alternativas deben capturar la mayor cantidad de información visual relevante posible y ser breves. Si bien no hay un límite para la cantidad de caracteres que un lector de pantalla puede leer, 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 imagen complejos, agregar texto de leyenda o describir la imagen en la copia 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 archivo por ti.
• Cuando les asignes nombres a 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 que no sean alfa (por ejemplo, #, 9 y &) y usa guiones entre las 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 él, las descripciones de imágenes sonarán como una oración larga, continua y continua.
• Escribe textos alternativos como los de una persona y no un robot. El uso de palabras clave de relleno no beneficia a nadie, ya que las personas que usan lectores de pantalla se molestarán y los algoritmos del motor de búsqueda te penalizarán.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre ARIA y HTML