Images

Las imágenes accesibles pueden parecer un tema simple a primera vista: agrega algo de "alt text" a una imagen y listo. Pero el tema tiene más matices de lo que piensan algunas personas. En esta sección, revisaremos lo siguiente:

• Cómo actualizar el código para hacer que las imágenes sean accesibles
• Qué información se debe compartir con los usuarios y dónde hacerlo.
• Otras formas 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, debes pensar en el punto de la imagen y cómo se la utilizará. Hacerte preguntas sobre el y el contexto de la imagen pueden ayudarte a determinar la mejor manera de transmitir información a una persona que usa tecnología de asistencia (AT) como los lectores de pantalla.

Podrías preguntarte lo siguiente:

• ¿Es esencial la imagen para comprender el contexto de la función o de la página?
• ¿Qué tipo de información intenta transmitir la imagen?
• ¿La imagen es simple o compleja?
• ¿La imagen provoca emoción o incita al usuario a actuar?
• ¿O la imagen es solo un "dulce para la vista" sin ningún 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 en tu sitio o app web con una extensión del navegador o con otros métodos. Luego, pregúntate: “¿Comprendo el contenido restante?”. Si la respuesta es sí, lo más probable es que se trate de una imagen decorativa. De lo contrario, la imagen es informativo de alguna manera y es contextualmente necesaria. Una vez que determinar el propósito de la imagen, puedes determinar la forma más precisa de codificar para ello.

Imágenes decorativas

Una imagen decorativa es una elemento visual que no agrega contexto o información adicional que permita para que el usuario comprenda mejor el contexto. Las imágenes decorativas son complementarias y pueden proporcionar estilo en lugar de contenido.

Si decides que una imagen es decorativa, debe ocultarse de manera programática. de las AT. Cuando se programa una imagen para que se oculte, le indica a la AT que la no se necesita para comprender el contenido, el contexto o la acción de la página. Hay existen muchas formas de ocultar imágenes, como usar una alternativa de texto vacío o nulo, aplicar ARIA agregar la imagen como fondo CSS. A continuación, se muestran algunos ejemplos de cómo ocultar un decorativa de los usuarios.

alt vacío o nulo

Un atributo de texto alternativo vacío o nulo difiere de una alternativa faltante text. Si falta el atributo de texto alternativo, es posible que la AT diga lo siguiente: el nombre del archivo o el contenido que lo rodea para brindar más información al usuario sobre la imagen.

Se estableció la función en presentation o none

Una función configurada como presentation o none quita la semántica de un elemento de la exposición a la accesibilidad de imágenes. Mientras tanto, aria-hidden= "true" quitará todo el elemento (y todos sus elementos secundarios) del API de Accessibility.

<!-- 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 que no quieres ocultar.

Imágenes en CSS

Cuando agregas una imagen de fondo con CSS, el lector de pantalla no detectará la de imagen. Asegúrate de 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 simples. Los tipos de imágenes informativas incluyen fotos de objetos reales, íconos esenciales, imágenes de texto y dibujos simples.

Si la imagen es informativa, debes incluir texto alternativo programático que describa el propósito de la imagen. Las descripciones de imágenes alternativas, a menudo abreviadas como "alt text", ofrecen 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.

Descripciones alternativas sencillas con Elementos <img> se logra incluyendo el atributo alt, independientemente del tipo de archivo que apunta, 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 de forma semántica, AT los omitirá de forma predeterminada. Si tienes una imagen decorativa, esto no es un problema; la AT ignorará tal como está previsto. Sin embargo, si tienes una imagen informativa, un role="img" de ARIA debe agregarse al patrón para que la AT lo 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 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 es conectadas a una acción. Un ejemplo de una imagen funcional es un logotipo que vincula a la página de inicio, a una lupa utilizada como botón de búsqueda o a una red social que te dirija a otro sitio web o app.

Al igual que las imágenes informativas, las imágenes funcionales deben incluir una alternativa descripción 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 el aspectos visuales.

En el ejemplo del logotipo, la imagen es informativa y procesable, ya que es tanto 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 de seguridad.

Una forma de agregar descripciones alternativas a las imágenes es con la ocultación visual texto. Si utilizas este método, los lectores de pantalla leerán el texto porque está en el DOM, pero está oculto visualmente con la ayuda de CSS personalizadas.

En el fragmento de código, puedes ver que "Navegar a la página principal" es el en 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, se oye tanto el código visual y la acción transmitida 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 un mensaje decorativo, informativo o con una imagen funcional. Requiere una alternativa corta y una larga descripción para transmitir el mensaje completo. Las imágenes complejas incluyen infografías, mapas, gráficos, ilustraciones complejas y gráficos. Al igual que con los otros tipos de imagen, existen métodos diferentes que puedes usar para agregar alternativas descripciones 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 explicaciones adicionales a una imagen es vincular a un recurso o proporcione un vínculo de acceso directo a una explicación más detallada más adelante en la página. Este método es una buena opción, no solo para los usuarios de AT, sino que también ayuda a las personas con discapacidades, como cognitivas, de aprendizaje y de lectura discapacidades, que podrían beneficiarse de tener esta imagen adicional información disponible en la pantalla, en lugar de estar oculta en el código.

Otro método es agregar el atributo aria-describedby al elemento <img>. Puedes vincular de forma programática la imagen a un ID que contenga un 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 el pantalla u oculta visualmente, pero considera mantenerla visible para respaldar incluso más personas.

Otra forma de agrupar descripciones alternativas breves con una más larga es usar los elementos <figure> y <figcaption> de HTML5. Estos elementos actúan de manera similar a aria-describedby, ya que los agrupa semánticamente para formar una asociación más fuerte entre la imagen y su descripción. Agregar role="group" de ARIA garantiza la retrocompatibilidad con navegadores web más antiguos que no admiten la semántica nativa 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 la imagen es sobre un enjambre de mariquitas que mastican hojas de un arbusto de rosas, pero el texto alternativo dice "insectos", haría que transmitan el mensaje y la intención completos de la imagen? Definitivamente no.

Las descripciones alternativas deben capturar tanta información visual relevante como posible y ser breve. Si bien no hay límite para la cantidad de caracteres que que el lector de pantalla pueda leer, por lo general, se recomienda limitar el texto alternativo a 150 caracteres o menos para evitar la fatiga de los lectores Si necesitas agregar contextual a la imagen, puedes usar uno de los patrones de imagen complejos, el texto del subtítulo o una descripción más detallada de la imagen en la copia principal.

Algunos textos alternativos adicionales son prácticas recomendadas incluyen lo siguiente:

• 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 asignes nombres a tus imágenes, sé lo más coherente y preciso posible. Imagen los nombres son un resguardo cuando el texto alternativo falta o se ignora.
• Evita usar caracteres que no sean alfanuméricos (por ejemplo, #, 9 o &) y usa guiones. entre las palabras en lugar de guiones bajos en los nombres de las imágenes o en el texto alternativo.
• Usa la puntuación adecuada siempre que sea posible. Sin ella, las descripciones de las imágenes sonará como una oración larga e interminable.
• Escribe texto alternativo como un ser humano y no un robot. El uso de palabras clave de relleno no beneficiaría a nadie: las personas que utilizan lectores de pantalla se molestarán y los algoritmos de los motores de búsqueda te penalizarán.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre ARIA y HTML