Cómo Tener en Cuenta Imágenes, Videos e Información No Textual｜Introducción al Diseño de Alternativas en la Era de WCAG 2.2

Cuando se habla de accesibilidad web, es fácil centrar la atención en textos, formularios y navegación con teclado. Sin embargo, en los sitios web reales se utilizan muchos tipos de información que no son texto: imágenes, gráficos, iconos, videos, audio e ilustraciones dentro de PDF. Si falta la consideración necesaria en estos elementos, la información importante puede no llegar a las personas usuarias. Por ejemplo, cuando un aviso está incluido solo dentro de una imagen, cuando el contenido de un video no se entiende sin audio, cuando no hay subtítulos para seguir una conversación o cuando el significado de un gráfico no se explica en el texto. En esos casos, la persona usuaria no solo queda en una situación de “no poder ver” o “no poder oír”, sino también de “no poder comprender el significado”. En esta sexta entrega, abordaremos la consideración hacia imágenes, videos e información no textual, y organizaremos de forma práctica cómo diseñar alternativas.

Lo que Aprenderás en Este Artículo

• Por qué la información no textual necesita alternativas
• Cómo pensar el texto alternativo según el propósito de la imagen
• Cómo diferenciar el tratamiento de gráficos, iconos e imágenes decorativas
• Cómo pensar subtítulos, transcripciones y audiodescripciones necesarias para video y audio
• Afinidad y diferencias de rol con el servicio de accesibilidad web UUU

Lo primero que conviene entender es que una alternativa no significa “explicar todas las imágenes con texto”. Lo importante es que la información o función que la persona usuaria debe recibir de ese contenido también pueda recibirse de otra forma. El tutorial de imágenes de W3C también indica que las imágenes necesitan alternativas textuales según su propósito. Es decir, si es una fotografía, debe sustituirse su significado como fotografía; si es un botón, su función como botón; si es un gráfico, la información que busca transmitir. Más que describir minuciosamente cada detalle visual, es mucho más importante pensar: “¿para qué está colocada esta imagen?”. (w3.org)

Una perspectiva útil para comprender esto es “clasificar según el propósito de la imagen”. W3C organiza las imágenes en categorías como informative images, decorative images, functional images y complex images. Por ejemplo, una foto que transmite características de un producto, un mapa o una ilustración de advertencia son imágenes con información. En cambio, un patrón de fondo o una línea decorativa son elementos decorativos. Un icono de lupa que funciona como botón de búsqueda o un icono de descarga de PDF son imágenes con función. Además, gráficos, diagramas de flujo u organigramas que no pueden explicarse suficientemente con una frase corta se consideran imágenes complejas. Solo con esta clasificación, el diseño de alternativas se vuelve mucho más fácil de organizar. (w3.org)

En las imágenes informativas, lo básico es expresar de forma breve y precisa el significado que transmite la imagen. Por ejemplo, para una foto de personas, puede bastar con “tres empleados reunidos en una sala de reuniones”, si eso es lo necesario en el contexto. Para una foto de producto, es más útil escribir algo como “paraguas plegable negro resistente al agua”, enfocándose en las características que la persona usuaria necesita saber. Un malentendido común es pensar que hay que explicar todo lo que se ve. Sin embargo, W3C destaca que en el texto alternativo de una informative image es más importante expresar el significado o contenido de la imagen que copiar verbalmente cada detalle visual. En otras palabras, basta con que llegue la información necesaria; hacer la descripción larga no es un objetivo en sí mismo. (w3.org)

Por otro lado, las imágenes decorativas requieren otro tratamiento. Si se incluyen en la lectura imágenes que no tienen significado y solo están colocadas para mejorar el aspecto visual, se aumenta innecesariamente la carga de la persona usuaria. El decision tree y los tips de W3C también indican que las imágenes decorativas deben ocultarse a las tecnologías de asistencia mediante un atributo alt vacío, es decir, alt="". Por ejemplo, una hoja decorativa junto a un encabezado, un icono usado como separador o una imagen de patrón de fondo. Si todo eso se leyera cada vez como “imagen”, sería más difícil llegar a la información realmente necesaria. En la práctica, también es importante expresar los elementos decorativos con CSS siempre que sea posible y no mezclar demasiadas imágenes sin significado en el contenido principal. (w3.org) (w3.org)

En las imágenes funcionales, es necesario transmitir no su apariencia, sino “qué ocurre”. Por ejemplo, si un icono de lupa se usa como botón de búsqueda, el texto alternativo adecuado no es “lupa”, sino “buscar”. En el caso de un icono de PDF, más que leer simplemente “PDF”, es más práctico usar expresiones como “abrir PDF de presentación de la empresa” o “descargar formulario de solicitud en PDF”, para que se entienda el resultado de la acción. Lo que la persona usuaria quiere saber no es el dibujo en sí, sino qué puede hacer con ese elemento. Cuando se usa una imagen como componente interactivo, no basta con revisar la belleza del diseño; también hay que confirmar que el nombre de la función se transmita correctamente. (w3.org)

En las imágenes complejas, es importante no intentar explicarlo todo solo con un alt corto. Gráficos, tablas comparativas, organigramas, diagramas de procedimiento, mapas y esquemas estructurales suelen perder información si se explican solo con una frase breve. W3C también recomienda que, para imágenes complejas, se proporcione un texto alternativo conciso junto con una explicación suficiente en el cuerpo del texto o en texto cercano. Por ejemplo, para un gráfico de barras, se puede indicar brevemente “gráfico de barras que muestra la evolución de ventas del año fiscal 2025” y luego explicar en el texto: “aumenta de abril a agosto, disminuye temporalmente en septiembre y vuelve a subir después”. En un mapa de rutas, conviene describir también por escrito las rutas principales y condiciones de transbordo. Esto ayuda no solo a quienes no pueden ver la imagen, sino también a quienes tienen dificultades para ampliarla o desean comprender rápidamente el contenido. La guía de la Agencia Digital de Japón también presenta la idea de reflejar sin omisiones la información necesaria de gráficos y tablas mediante texto alternativo o texto del cuerpo. (w3.org) (digital.go.jp)

Aquí conviene prestar especial atención al “texto dentro de imágenes”. Si en un banner o ilustración se incrustan como imagen avisos importantes, condiciones de campaña, números de teléfono, fechas o lugares, esa información puede perderse si no existe una alternativa. Además, convertir texto en imagen suele generar problemas como dificultad para ampliarlo, traducirlo o leerlo según el entorno de visualización. Salvo casos inevitables por razones expresivas, como un logotipo, es preferible publicar la información textual importante como texto HTML. Incluso si se incluye texto dentro de una imagen, debe ser posible obtener esa información mediante el texto alternativo o el contenido del cuerpo. Las imágenes son convenientes, pero no deben convertirse demasiado en el medio principal de la información. (w3.org) (digital.go.jp)

Cuando pasamos a video y audio, el diseño de alternativas se amplía un poco más. La guía 1.2 de WCAG 2.2 exige proporcionar alternativas para medios dependientes del tiempo. Los materiales de W3C sobre accesibilidad multimedia organizan que, para videos, son importantes al menos los subtítulos y, según sea necesario, transcripciones y audiodescripciones que complementen la información visual. Los subtítulos no ayudan solo a personas que tienen dificultad para oír, sino también a quienes ven videos sin sonido, a quienes quieren seguir el japonés también por escrito o a quienes desean confirmar términos técnicos. Además, las transcripciones ofrecen ventajas en búsqueda y reutilización. No debemos pensar que publicar un video completa automáticamente la entrega de información; es importante permitir que el contenido se reciba también por otra vía. (waic.jp) (w3.org)

Sobre los subtítulos, a menudo se piensa que basta con convertir en texto lo que se dice, pero en realidad eso no siempre es suficiente. W3C indica que los captions deben incluir no solo el habla, sino también información sonora no verbal necesaria para comprender el contenido. Por ejemplo, risas, aplausos, alarmas, tonos de llamada o efectos sonoros importantes para entender un cambio de escena. Incluso en videos centrados en conversación, puede ser difícil entender si no se sabe quién habla; en videos explicativos, también es importante la correspondencia con el texto y las acciones mostradas en pantalla. Los subtítulos no son simplemente “convertir un guion en texto”, sino sustituir adecuadamente en palabras la información que se recibe por el sonido. (w3.org)

Además, cuando hay información importante en la imagen, también conviene considerar audiodescripciones o transcripciones descriptivas. Por ejemplo, un video instructivo en el que se dice “haga clic aquí” sin explicar dónde se hace clic; una entrevista en la que el cargo de la persona solo aparece en pantalla; o un video promocional con muchos cambios de escena sin explicación. En estos casos, el audio por sí solo no transmite suficiente información. W3C, en su sección sobre description of visual information, presenta la idea de complementar información visual necesaria para la comprensión, como acciones, cambios de escena, texto en pantalla, expresiones faciales o relaciones espaciales. No todos los videos necesitan una audiodescripción compleja, pero comprobar una vez si “el contenido puede seguirse solo con el audio” es muy útil en la práctica de producción audiovisual. (w3.org)

Las transcripciones también tienen valor porque permiten reutilizar el contenido de video y audio como texto. La explicación de W3C sobre transcripts señala que, además de convertir el audio en texto, una descriptive transcript que incluya información visual cuando sea necesario puede ser importante para ciertos usuarios. Por ejemplo, si se transcribe un seminario en video, luego es más fácil buscar dentro del contenido. En el caso de un pódcast, los puntos principales pueden reeditarse como artículo. Las transcripciones son útiles para personas que tienen dificultades para ver videos o que comprenden mejor leyendo. Es decir, las alternativas no son “añadidos obligados”, sino una forma de aumentar el valor de los activos de información. (w3.org)

En la práctica, una duda frecuente es “hasta dónde explicar”. Aquí resulta útil partir del propósito. Por ejemplo, en una foto de producto, priorizar las características necesarias para decidir la compra. En una foto de empleados en una página de contratación, puede bastar con transmitir la atmósfera. En un gráfico, conviene reformular en el texto la conclusión o tendencia. En un video instructivo, comprobar si los pasos de la pantalla pueden seguirse solo con el audio. En un video de registro de evento, revisar que los nombres de ponentes y títulos de materiales no aparezcan solo como texto en pantalla. En resumen, lo importante es mantener esta pregunta: “Si una persona no puede ver u oír este contenido, ¿puede aun así obtener la información necesaria?”. No hace falta copiar toda la expresión, pero sí evitar perder el significado.

También conviene organizar aquí la afinidad con el servicio de accesibilidad web UUU. Un servicio como UUU, que ofrece funciones de cambio de tamaño de texto, ajuste de contraste, lectura en voz alta, traducción y furigana, tiene afinidad en el sentido de que ayuda a comprender explicaciones de texto, subtítulos e información alrededor de textos alternativos. Por ejemplo, puede ayudar cuando la explicación colocada cerca de una imagen se vuelve más fácil de leer, cuando mejora la legibilidad de los subtítulos o cuando es más sencillo comprender textos complementarios. También puede reducir la carga de leer información alrededor de un video.

Sin embargo, las alternativas en sí deben prepararse en el diseño original del contenido. Añadir un alt adecuado a una imagen, excluir imágenes decorativas de la lectura, colocar explicaciones de gráficos en el cuerpo del texto, preparar subtítulos o transcripciones para videos y complementar información visual necesaria mediante audio o texto no se resuelve automáticamente solo con herramientas de apoyo a la navegación. Es decir, servicios como UUU tienen alta afinidad para “hacer que la información alternativa sea más fácil de recibir”, pero no desempeñan el papel de “diseñar la información alternativa en sí”. Comprender esta diferencia evita esperar demasiado de la herramienta y facilita realizar correctamente las acciones necesarias desde la etapa de producción.

Este tema es especialmente útil para quienes trabajan en comunicación, edición, diseño y producción de video. Una persona de relaciones públicas puede evitar encerrar información importante en imágenes al crear avisos o banners centrados en lo visual. Un diseñador puede organizar el rol de iconos y gráficos, y diseñar explicaciones coordinadas con el texto. Una persona encargada de video puede incorporar subtítulos, transcripciones y explicaciones visuales en el proceso de producción. Un ingeniero puede ajustar la implementación HTML y la configuración de medios incrustados para que las alternativas estén disponibles correctamente. La accesibilidad de la información no textual no debería dejarse como una tarea posterior de una sola persona; cuanto antes se considere desde la planificación, más fácil resulta implementarla sin dificultad.

Este es el resumen de la sexta entrega. En la consideración de imágenes, videos e información no textual, lo importante no es describir toda la apariencia, sino permitir que la información y las funciones que la persona usuaria debe recibir estén disponibles también por otros medios. Para las imágenes, conviene pensar según su propósito: textos alternativos significativos para imágenes informativas, tratamiento para evitar lecturas innecesarias en imágenes decorativas y explicaciones suficientes en el cuerpo del texto para gráficos complejos. En video y audio, es importante aumentar las puertas de entrada a la comprensión mediante subtítulos, transcripciones y audiodescripciones cuando sean necesarias. Y aunque medidas de apoyo como el servicio de accesibilidad web UUU tienen afinidad para hacer que esta información alternativa sea más fácil de leer y recibir, el diseño de las alternativas sigue siendo responsabilidad de quienes crean el contenido. En la próxima entrega veremos cómo crear pruebas, mejoras y sistemas de operación para no terminar el trabajo simplemente con la publicación.

Enlaces de Referencia

• W3C WAI: Images Tutorial
• W3C WAI: An alt Decision Tree
• W3C WAI: Informative Images
• W3C WAI: Tips and Tricks for Images
• W3C WAI: Making Audio and Video Media Accessible
• W3C WAI: Description of Visual Information
• W3C WAI: Transcripts
• WAIC: Web Content Accessibility Guidelines (WCAG) 2.2 Japanese Translation
• Digital Agency: Web Accessibility Introduction Guidebook
• Digital Agency: Web Accessibility Guidebook for Public Relations