Descripción detallada de la imagen
Usable y accesible. Olga Carreras
Mapa de decisión para proporcionar textos alternativos adecuados a las imágenes de tu web (1)
También disponible en herramienta online a modo de wizard. Las páginas de resultado incluyen ejemplos y recursos.
Autora: Olga Carreras Montoto. Consultora freelance de accesibilidad web y PDF, experiencia de usuario, usabilidad y arquitectura de información.
Contacto:
¿La imagen es o forma parte de un enlace o botón?
Si la respuesta es Sí se realiza la pregunta ¿La imagen es el único elemento dentro del enlace o es un mapa de imagen o un botón de tipo imagen?
Si la respuesta es No se realiza la pregunta ¿La imagen es decorativa, invisible o no proporciona información adicional?
¿La imagen es el único elemento dentro del enlace o es un mapa de imagen o un botón de tipo imagen?
Sí, la imagen es el único elemento dentro del enlace o es un mapa de imagen o un botón de tipo imagen:
- Si la imagen es un logo, o es un icono, imagen o botón de tipo imagen en el que la imagen no tiene texto (por ejemplo un icono de una lupa) se debe añadir a la imagen o al botón de imagen el atributo ALT, en el cual se indique la función de la imagen. Por ejemplo:
alt="Buscar"(para el icono de una lupa) oalt="Página principal de la web de Olga Carreras 'Usable y accesible'(para el logotipo de dicha web) - Si es un icono, imagen o botón de tipo imagen en el que la imagen tiene texto (como por ejemplo una imagen, o un botón de tipo imagen, con un sobre y el texto "Enviar"), se debe añadir a la imagen (o al botón de tipo imagen) el atributo ALT, en el cual se indique la función de la imagen que normalmente será su texto (por ejemplo:
alt="Enviar") - Si es un mapa de imagen (por ejemplo un mapa de España), a la imagen se debe añadir un atributo ALT que identifique el contenido y su función (por ejemplo
alt="Mapa de España. Seleccione una Comunidad Autónoma para acceder a su información turística") y a las áreas del mapa se les debe añadir el atributo ALT identificando cada área (por ejemplo,alt="Galicia")
No, la imagen no es el único elemento dentro del enlace, ni es un mapa de imagen ni un botón de tipo imagen:
- Si la imagen aporta información adicional al texto del enlace, y por tanto complementa la información del texto del enlace (por ejemplo un enlace que incluye el texto "Memoria 2014" seguido de un icono de fichero PDF), se debe incluir a la imagen un atributo ALT con la información adicional que transmite la imagen (por ejemplo
alt="en formato PDF"). - Si la imagen no aporta información adicional, es solo decorativa (por ejemplo el icono de una casa delante del enlace "Home") tendrá el atributo ALT vacío (y no debe incluirse el atributo TITLE, a menos que también esté vacío), o bien la imagen se definirá en la CSS, por ejemplo con
background-image.Ir a la página de detalle del caso "La imagen forma parte de un enlace pero es meramente decorativa"
¿La imagen es decorativa, invisible o no proporciona información adicional? (y no es un enlace)
Si, la imagen es decorativa, invisible y no aporta información adicional.
Por ejemplo un icono de advertencia que va seguido de un texto que ya comienza por "¡Advertencia!". La imagen deberá tener el atributo ALT vacío (y no debe incluirse el atributo TITLE, a menos que también esté vacío) o bien se deberá definir la imagen en la CSS, por ejemplo mediante background-image
Ir a la página de detalle del caso "La imagen no forma parte de un enlace y es decorativa"
No, la imagen aporta información y apoya al contenido
En ese caso se realiza la pregunta ¿Es un cuadro u otra expresión artística cuya función principal es crear una experiencia sensorial que las palabras no pueden igualar?
¿La imagen es un cuadro u otra expresión artística cuya función principal es crear una experiencia sensorial que las palabras no pueden igualar? (y no es un enlace)
Sí, es un cuadro u otra expresión artística
Se incluirá el atributo ALT indicando el nombre de la obra comúnmente aceptado (si lo tiene, por ejemplo alt="La Gioconda de Leonardo Da Vinci") o una breve descripción que identifique el contenido (por ejemplo, en el caso de una escultura de arena, alt="Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano. ") Si es posible o útil se puede incluir un texto descriptivo adicional, por ejemplo si existe alguna razón especial por la que se ha incluido dicho contenido en la página (ver cómo incluir descripciones extensas por si fuera necesario)
No, no es un cuadro u otra expresión artística
En ese caso se realiza la siguiente pregunta ¿La imagen es parte de una prueba o test que queda invalidado si se describe la imagen?
¿La imagen es parte de una prueba o test que queda invalidado si se describe la imagen? (y no es un enlace)
- Si es una prueba o test visual (por ejemplo un test lógico de formas o un test de daltonimo) se incluirá a la imagen el atributo ALT con una breve descripción que identifique el contenido (por ejemplo
alt="Test lógico de formas"oalt="Test visual de daltonismo") - Si se trata de un CAPTCHA, una prueba para comprobar si el usuario es una persona o una máquina, se incluirá a la imagen un atributo ALT que indique el propósito del CAPTCHA (por ejemplo
alt="Introduce este texto en el campo 'Captcha'. Si no puedes ver la imagen pulsa el botón 'Audio' disponible tras la imagen. ") y también es necesario ofrecer otro CAPTCHA alternativo en una modalidad sensorial diferente, por ejemplo auditiva. - Si la imagen no es un CAPTCHA ni forma parte de una prueba o test visual, se realiza la siguiente pregunta ¿La imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta?
¿La imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta?
Sí, la imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta
La primera imagen del grupo debe incluir el atributo ALT con la descripción de la información que transmite el grupo, y el resto de imágenes deben incluir el atributo ALT vacío. Por ejemplo, en una puntuación de 5 estrellas, formada con cinco imágenes de estrellas contiguas, tres en amarillo y dos en blanco, el ALT de la primera imagen será: alt="Puntuación: tres estrellas de cinco", y el resto de las imágenes tendrán alt="".
No, la imagen no forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta
En ese caso se realiza la siguiente pregunta ¿Se puede describir la información que proporciona la imagen con una descripción breve de menos de 100-150 caracteres (consultar 2)?
La imagen no es un enlace ni es decorativa, ¿se puede describir la información que proporciona la imagen con una descripción breve de menos de 100-150 caracteres (2)?
No, la imagen es compleja como un diagrama o una infografía y necesita una descripción extensa
La imagen tendrá un atributo ALT que identifique el contenido o que proporcione una breve descripción del mismo. Además deberá tener una descripción larga que puede proporcionarse por medio de diferentes técnicas:
- En otra página: se debe incluir el enlace a esta página adyacente a la imagen, inmediatamente antes o después de la misma.
- En la misma página, a continuación de la imagen: incluir en el ALT una referencia a la ubicación de la descripción larga.
- En la misma página, lejos de la imagen: se debe incluir un enlace (un ancla) a la zona de la descripción. Este enlace debe estar inmediatamente antes o después de la imagen.
- Mediante el atributo LONGDESC: su soporte no es generalizado, por ello es recomendable combinarlo con un enlace según se ha descrito en las opciones anteriores.
Sí, la imagen puede describirse brevemente en menos de 100-150 caracteres (2)
- Si la imagen solo tienen texto se incluirá el atributo ALT con el texto de la imagen (por ejemplo, para una imagen con el texto "5 años de garantía" se incluirá
alt="5 años de garantía") Es preferible usar texto con el estilo deseado definido en la CSS en vez de una imagen de texto. - Si la imagen incluye texto no decorativo (por ejemplo la imagen de un gráfico con el texto de la leyenda y el título incluidos como parte de la imagen, o una imagen de una teleoperadora con el teléfono de atención al cliente añadido en la imagen), se incluirá el atributo ALT con la información que transmite la imagen y que debe incluir el texto. Por ejemplo,
alt="Figure 1. Distribution of Articles by Journal Category. Pie chart: Language=68%, Education=14% and Science=18%", o por ejemploalt="Servicio de Atención al Cliente. Teléfono 902 180 074". Como recomendación, usa texto y no imágenes de texto siempre que sea posible. - Si la imagen no contiene texto, incluye un atributo ALT con la información que transmite la imagen. Por ejemplo, un icono de advertencia, seguido de un párrafo de texto "Tu sesión está a punto de expirar" tendrá como texto alternativo
alt="¡Advertencia!". O por ejemplo, una imagen de dos políticos dándose un apretón de manos tendrá como texto alternativoalt="El secretario de estado estadounidense John Kerry y el viceprimer ministro chino Wang Yang se dan un apretón de manos"
Notas
Nota 1
El mapa está basado en el documento Understanding 1.1.1 Text Alternatives (WCAG 2.0)
No se incluyen alternativas de WAI-ARIA o HTML5, pero las aquí recomendadas son compatibles y bien soportadas.
- Alternativas ARIA y HTML5 para descripciones largas: LONGDESC. Soporte y alternativas (WCAG 2.0, ARIA: "aria-describedby" y "aria-describedat", HTML5: <figure> y <picture>)
- Para consultar otras técnicas posibles en HTML5 (
figure,figcaption, etc.): HTML5: Techniques for providing useful text alternatives (W3C) - Para consultar otras técnicas alternativas de WAI-ARIA (
aria-label,aria-labelledby,aria-describedby,role="presentation", etc.): ARIA Techniques for WCAG 2.0 (W3C) que explico en mi artículo Nuevas técnicas ARIA de las WCAG 2.0
Volver a la llamada de la nota 1
Nota 2
El documento Techniques For Accessibility Evaluation And Repair Tools indica 150 caracteres como longitud máxima de la descripción incluida el atributo ALT. Otras fuentes (HTML5: Techniques for providing useful text alternatives (W3C)) aconsejan no sobrepasar los 100 caracteres.
Si el texto alternativo tiene una longitud entre 100-150 caracteres pregúntate, ¿puedo reducirlo? ¿sería mejor una descripción extensa?
Volver a la llamada de la nota 2
Datos de publicación
Año de publicación 2014.
Autor Olga Carreras .Ir al blog Usable y accesible de Olga Carreras