Guías Prácticas de Comprobación de Accesibilidad:

Transcripción

1 Guías Prácticas de Comprobación de Accesibilidad: IMÁGENES Centro de Referencia en Accesibilidad y Estándares Web Marzo 2008

2 Copyright 2008 Instituto Nacional de la comunicación (INTECO) El presente documento está bajo la licencia Creative Commons Reconocimiento-No comercial-compartir Igual versión 2.5 España. Usted es libre de: - copiar, distribuir y comunicar públicamente la obra - hacer obras derivadas Bajo las condiciones siguientes: - Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra). - No comercial. No puede utilizar esta obra para fines comerciales. - Compartir bajo la misma licencia. Si altera o transforma esta obra, o genera una obra derivada, sólo puede distribuir la obra generada bajo una licencia idéntica a ésta. Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta obra. Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor Nada en esta licencia menoscaba o restringe los derechos morales del autor. Esto es un resumen legible por humanos del texto legal (la licencia completa) disponible en El presente documento cumple con las condiciones de accesibilidad del formato PDF (Portable Document Format). Se trata de un documento estructurado y etiquetado, provisto de alternativas a todo elemento no textual, marcado de idioma y orden de lectura adecuado. Para ampliar información sobre la construcción de documentos PDF accesibles puede consultar la guía disponible en la sección Accesibilidad > Formación > Manuales y Guías de la página Guías Prácticas de Comprobación de Accesibilidad - Imágenes 2

3 ÍNDICE 1. OBJETIVO DE LA GUÍA 4 2. EQUIVALENTES TEXTUALES Texto alternativo 5 Imágenes de contenido 6 Imágenes decorativas 6 Imágenes funcionales 6 Imágenes con texto 7 Imágenes dinámicas Descripción larga 8 3. VALIDACIÓN DE IMÁGENES Validación de los equivalentes textuales Existencia de texto alternativo Adecuación de las alternativas Color y Contraste Color Contraste Destellos, parpadeos y movimiento Marcadores en vez de imágenes para transmitir información VALIDACIÓN DE MAPAS DE IMAGEN CONCLUSIONES 33 Guías Prácticas de Comprobación de Accesibilidad - Imágenes 3

4 1. OBJETIVO DE LA GUÍA Entre las medidas a adoptar para la consecución de un sitio Web accesible, una de las primeras y más importantes a tener en cuenta es la de proporcionar buenos equivalentes textuales para todas las imágenes y, en general, para todo el contenido no textual. Los usuarios que no puedan acceder a la información visual (discapacitados visuales, usuarios de navegadores de texto o con capacidad gráfica limitada, etc.) pierden la información proporcionada por ese medio si no se proporcionan equivalentes textuales adecuados. El texto se considera accesible para prácticamente todos los usuarios ya que puede ser presentado visualmente así como interpretado por los productos de apoyo. Además se han de tener en cuenta otros requisitos de accesibilidad como son el color y contraste, no usar imágenes animadas ni con destellos o parpadeos y, por norma general, no usarlas para transmitir información textual que se pueda representar fácilmente mediante XHTML y CSS. El objeto de la presente guía práctica es la de proporcionar información sobre los aspectos que intervienen en la comprobación de accesibilidad del contenido Web basado en imágenes y mapas de imagen. Se pretende ofrecer una visión general de la Accesibilidad para esta tipología de contenidos así como una metodología práctica que permita comprobar la adecuación de los mismos conforme a las normativas y recomendaciones vigentes. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 4

5 2. EQUIVALENTES TEXTUALES La alternativa a las imágenes, aunque no parezca entrañar una excesiva dificultad, es uno de los aspectos menos comprendidos y más proclive a errores ya que no siempre resulta obvio cuál es la alternativa textual más adecuada para una imagen. Por tanto, y con el fin de tener la base necesaria para realizar una correcta validación, a continuación se recordará brevemente como se realizan equivalentes textuales adecuados. Los equivalentes textuales deben proporcionar la misma información o función (en la medida de lo posible) que la imagen original. Existen dos mecanismos para proporcionar equivalentes textuales a las imágenes: Texto alternativo (alt): el objetivo del texto alternativo es el de proporcionar un equivalente textual breve y conciso para las imágenes. Descripción larga (longdesc): si la imagen es compleja, y precisa de una descripción demasiado extensa para el texto alternativo, es necesario usar este mecanismo para proporcionar una descripción más detallada TEXTO ALTERNATIVO Toda imagen incluida en una página Web, a través del elemento IMG, debe proporcionar (mediante el atributo alt obligatorio) un texto alternativo, que aporte la misma información o función que la imagen. El texto alternativo es la información proporcionada por los agentes de usuario (navegadores y productos de apoyo) en caso de no mostrarse la imagen. Por ejemplo, los navegadores gráficos que tengan las imágenes desactivadas o no puedan mostrarlas (ruta incorrecta de la imagen), y los navegadores de texto, usarán el texto alternativo en su lugar. Por otra parte, los lectores de pantalla leerán en voz alta el texto alternativo de las imágenes. Ejemplo de código: <img src="imagen.png" alt="descripción breve" /> NOTA: En el caso de las imágenes añadidas a través del elemento OBJECT, dicha alternativa deberá incluirse en el propio cuerpo del elemento. Este método de inserción de imágenes en una página Web no tiene un soporte extendido y se recomienda emplear el elemento IMG para tal fin para garantizar la correcta interpretación del mismo. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 5

6 Ejemplo de código: <object type="image/png" data="imagen.png"> <!-- Contenido alternativo --> </object> El texto alternativo depende del tipo de imagen usada o de la función de la misma. Así, de forma general, podemos diferenciar los siguientes casos: Imágenes de contenido Se considera que una imagen es de contenido cuando proporciona información. En este tipo de imágenes, como ya se ha comentado, el texto alternativo debe proporcionar un equivalente textual breve que proporcione la misma información que la imagen original. Imágenes decorativas Se consideran imágenes decorativas aquellas usadas como recursos gráficos para el diseño de las páginas y que no proporcionan ninguna información o funcionalidad. Por ejemplo: separadores, imágenes de diseño o relleno, imágenes empleadas como viñetas de listas, etc. Este tipo de imágenes deberían incluirse mediante las hojas de estilos (CSS). Sin embargo, en caso de incluirse en el código HTML mediante el elemento IMG, el texto alternativo debe estar vacío (alt=""), o contener un espacio en blanco (alt=" ") cuando la imagen sea lo único que separe dos elementos contiguos. Imágenes funcionales Una imagen funcional es aquella que actúa de vínculo con una página Web o un archivo. Cuando se usa una imagen como enlace existen dos posibilidades para proporcionar un texto alternativo: Si, el enlace está formado por un texto descriptivo y una imagen (que no aporta información relevante), entonces puede considerarse como decorativa, dejando vacío el texto alternativo. Figura 1. Dado que en el propio texto del enlace se indica que se trata de un documento PDF la imagen no aporta información adicional del enlace. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 6

7 Ejemplo de código: <a href="norma.pdf"> <img src= logo.gif alt= />Norma UNE :2004 (PDF) </a> Si la imagen es el único elemento que funciona como enlace, entonces el texto alternativo deberá describir el destino o propósito del vínculo. Figura 2. Icono que enlaza con la página principal. Alt= Página de inicio Como norma general, la funcionalidad de una imagen prevalece a la propia imagen, y salvo casos aislados, en la alternativa no se deberá describir la imagen, sino el propósito de la misma (el destino del enlace). Si la imagen requiere ser descrita se empleará el atributo longdesc para dicho fin. Por esta razón, el texto alternativo se convierte en texto del enlace, y debe identificar adecuadamente el destino del mismo de forma clara y concisa. Imágenes con texto Por lo general, en el texto alternativo se debe proporcionar el texto íntegro que se muestre en la imagen. En la siguiente imagen el texto alternativo correcto sería INTECO Premio IMSERSO Infanta Cristina Premio I+D+i en Nuevas Tecnologías y Ayudas Técnicas. Figura 3.Ejemplo de imagen con texto. En la alternativa deberá aparecer el texto íntegro Guías Prácticas de Comprobación de Accesibilidad - Imágenes 7

8 Imágenes dinámicas El contenido alternativo equivalente tiene que aportar la misma información o funcionalidad que el contenido original aunque éste varíe dinámicamente. En este sentido se ha de prestar especial atención a aquellas imágenes que cambien o se modifiquen dinámicamente, ya que la alternativa también deberá actualizarse adecuadamente DESCRIPCIÓN LARGA Figura 4. Ejemplo de imagen dinámica. Contador de visitas Cuando el texto alternativo no es suficiente para transmitir adecuadamente la información, función o propósito de una imagen (por ejemplo, una gráfica de estadísticas), se deberá emplear el atributo longdesc del elemento de imagen IMG para aportar dicha información. El atributo longdesc debe contener la URL de la página donde se proporciona una descripción detallada de la imagen. La descripción puede estar situada en la misma página que la imagen, preferiblemente antes o después de la misma, de forma que dicha descripción se relacione con la imagen por el contexto, y enlazada con el atributo longdesc mediante un enlace de tipo ancla. El texto alternativo de la imagen debe tener una breve descripción que permita identificar la imagen aunque no entre en detalle. No todos los agentes de usuario interpretan el atributo longdesc adecuadamente, por ello se recomienda proporcionar además un vínculo redundante a la descripción detallada al lado de la imagen. Por ejemplo, puede proporcionarse en forma de pie de imagen que funcione al mismo tiempo como enlace a la descripción detallada. Figura 5. Ejemplo de imagen cuyo pie de imagen actúa de enlace a la descripción larga Guías Prácticas de Comprobación de Accesibilidad - Imágenes 8

9 Ejemplo de código: <img src="grafic.png" alt="superficie de los continentes" longdesc="descripcion.html"> <a href="descripcion.html" title= Enlace a la descripción detallada de la imagen >Superficie de los continentes</a> Guías Prácticas de Comprobación de Accesibilidad - Imágenes 9

10 3. VALIDACIÓN DE IMÁGENES A continuación se explicarán los métodos y herramientas necesarios para la validación de imágenes, tanto a nivel de existencia y adecuación de alternativas textuales, como a nivel de contenido para verificar el correcto uso de las mismas 3.1. VALIDACIÓN DE LOS EQUIVALENTES TEXTUALES Existencia de texto alternativo La ausencia del atributo alt es un error gramatical y por ello es detectado automáticamente por las herramientas de validación de gramática y de Accesibilidad (validador de código (x)html y herramientas automáticas como TAW). Por otra parte, las barras de herramientas usadas para la evaluación manual (barra de herramientas Web Accessibility Toolbar de Internet Explorer y Web Developer Toolbar de Mozilla Firefox) contienen opciones para detectar las imágenes que carecen de texto alternativo. URL de Descarga Web Developer Toolbar: URL de Descarga Web Accessibility Toolbar: Así, en la barra de herramientas Web Accessibility Toolbar, se pueden reemplazar las imágenes por su texto alternativo con la opción Images - Toggle Image/Alt Figura 6.Reemplazar imágenes por su alternativa en Web Accessibility Toolbar Si no existen alternativas a las imágenes de la página Web a comprobar, se mostrará un mensaje de alerta advirtiendo tal hecho. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 10

11 Figura 7. Mensaje alerta sobre imágenes sin alternativa en Web Accessibility Toolbar De similar forma, la barra de herramientas Web Developer Toolbar permite resaltar aquellas imágenes que no disponen de texto alternativo con la opción Images - Outline Images - Images Without Alt Attributes Figura 8. Resaltar imágenes sin texto alternativo en Web Developer Toolbar Guías Prácticas de Comprobación de Accesibilidad - Imágenes 11

12 Desactivación de hojas de estilo CSS Figura 9.Ejemplo de imagen resaltada sin alternativa Como caso particular de comprobación se ha de tener en cuenta que las imágenes insertadas a través de la hoja de estilos CSS no tienen el atributo alt necesario para indicar el equivalente textual. Por esta razón, las únicas imágenes susceptibles de ser insertadas desde la hoja de estilos CSS son las decorativas, salvo que se empleen técnicas accesibles de reemplazo de texto por imágenes, ya que al no transmitir información relevante no se pierde ningún contenido ni funcionalidad al carecer de ellas. El procedimiento a realizar es pues, desactivar los estilos y las imágenes de fondo para comprobar que no se pierde ninguna información relevante. Figura 10. Opción deshabilitar CSS de la barra Web Accessibility Toolbar Guías Prácticas de Comprobación de Accesibilidad - Imágenes 12

13 Figura 11. Opción Deshabilitar estilos de la barra Web Developer Toolbar Figura 12. Opción Ocultar imágenes de fondo de la barra Web Developer Toolbar Sin embargo, es importante recordar que no sólo se debe comprobar la existencia de alternativas textuales, sino también la adecuación de las mismas Adecuación de las alternativas Para comprobar la adecuación de las alternativas a las imágenes deberá realizarse un proceso manual apoyado en las barras de herramientas y revisión de código. Un posible método de evaluación es acceder a la página a través de un navegador solo texto o con un lector de pantalla. En todos estos casos, se comprobará que no se pierde Guías Prácticas de Comprobación de Accesibilidad - Imágenes 13

14 ninguna funcionalidad ni contenido al prescindir de imágenes, evaluando las alternativas ofrecidas a las mismas. Para facilitar esta tarea se puede hacer uso de algunas herramientas que nos permiten evaluar las alternativas más cómodamente sin necesidad de usar navegadores de texto o lectores de pantalla. Figura 13. Reemplazar imágenes con su alternativa en Web Accessibility Toolbar El menú Images de la barra de herramientas Web Developer Toolbar para Mozilla Firefox, contiene opciones para comprobar la adecuación de las alternativas, siendo la más útil Display Alt Attributes (Mostrar atributos alt). Figura 14.Opciones del menú Imágenes Web Developer Toolbar La opción Display Alt Attributes muestra al mismo tiempo la imagen y el texto alternativo. De este modo se podrá comprobar más fácilmente la adecuación de la alternativa comparando ambas y viendo si realmente son equivalentes. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 14

15 Figura 15. Imágenes con la opción Display Alt Attributes activada La opción View Image Information (Ver información de imagen) abre una nueva página con la información relativa a todas las imágenes contenidas en el documento Web. Figura 16. Ejemplo de la información mostrada La opción Replace Images with Alt Attributes (reemplazar imágenes con sus alternativas) actúa de igual modo que la opción Toggle Image/Alt (intercambiar imagen con alt) de Web Accessibility Toolbar. En el caso de que exista alguna imagen que requiera de una descripción larga, porque el texto alternativo resulte insuficiente, se puede comprobar si se está proporcionando dicha descripción con la extensión Longdesc para el navegador Firefox. Esta extensión muestra una opción nueva en el menú contextual de aquellas imágenes que contengan longdesc para acceder al documento enlazado en el que se proporciona la descripción. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 15

16 3.2. COLOR Y CONTRASTE Figura 17. View Image Longdesc Firefox Color La información ofrecida mediante imágenes, no debe transmitirse utilizando como único medio el color, ya que ésta podría no ser percibida por usuarios de pantallas monocromáticas o con deficiencias en la percepción del color. Como ejemplo de dependencia de color se observa cómo en la Figura 18, en escala de grises (Figura 19), no es posible diferenciar entre las comunidades en alerta y las comunidades sin riesgo. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 16

17 Figura 18. Mapa con dependencia de color Figura 19. Mapa en escala de grises Para corregir este problema de dependencia de color se pueden emplear diferentes técnicas: 1. Elección de colores con el suficiente contraste de forma que permitan diferenciarse entre si en escala de grises. (Ver apartado siguiente Contraste). 2. Emplear tramas para diferenciar las áreas dependientes de color. 3. Situar la leyenda encima de cada región del mapa. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 17

18 Figura 20. Ejemplo de empleo de trama para diferenciar las áreas Figura 21. Ejemplo de empleo de trama en escala de grises Para comprobar que no existe dependencia única de color en las imágenes se pueden utilizar diferentes métodos de evaluación: Imprimir la página en blanco y negro y comprobar que no se pierde ninguna información. Navegar en escala de grises emulando una pantalla monocromática. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 18

19 Figura 22.Escala de grises en Web Accessibility Toolbar Emular los diferentes tipos de daltonismo: deuteranopia, protanopia, tritanopia, etc. Vischeck Colour blindness simulation ( ). Figura 23.Vischeck colour blindness simulation de la barra Web Accessibility Toolbar Figura 24. Captura de la ventana de simulación Fujitsu ColorDoctor ( Guías Prácticas de Comprobación de Accesibilidad - Imágenes 19

20 Figura 25. Fujitsu Color Doctor con ejemplo de Deuteranopia Simular diferentes tipos de deficiencias visuales. Por ejemplo a través de la aplicación Visual Impairment Simulator ( Guías Prácticas de Comprobación de Accesibilidad - Imágenes 20

21 Figura 26. Captura Visual Impairment Simulator Figura 27. Simulación de Glaucoma Figura 28. Simulación de Degeneración macular Guías Prácticas de Comprobación de Accesibilidad - Imágenes 21

22 Contraste Debe existir un contraste suficiente entre el color de primer plano y el color de fondo, en especial en las imágenes que transmiten información textual. Figura 29. Ejemplo de elección de un contraste insuficiente Para comprobar las combinaciones de color de primer plano y color de fondo (contraste) se puede utilizar la herramienta Colour Contrast Analyser. En la opción Colour de la barra Web Accessibility Toolbar, existe un acceso directo a dicha herramienta. Figura 30. Colour Contrast Analyser - Web Accessibility Toolbar Guías Prácticas de Comprobación de Accesibilidad - Imágenes 22

23 Figura 31. Aplicación Colour Contrast Analyser La aplicación Colour Contrast Analyser trabaja con dos algoritmos: el de diferencia de brillo y color y el de luminosidad, siendo el primero el que se debe usar actualmente ya que el algoritmo de luminosidad aún se encuentra en fase experimental. Mediante un selector de color (cuentagotas) se escoge el color de fondo y el color de primer plano que se desean evaluar, considerándose que la combinación es válida cuando supere ciertos umbrales mínimos Los valores mínimos son 125 para el diferencial de brillo y 500 para el diferencial de color. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 23

24 Figura 32. Ejemplo de un mal contraste Colour Contrast Analyser permite, además, evaluar la diferencia de brillo y color también para diferentes discapacidades en la percepción del color y se deben superar los umbrales mínimos en cada una de ellas. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 24

25 Figura 33. Umbrales mínimos para las diferentes discapacidades en la percepción del color Esta herramienta puede utilizarse de forma independiente a través de una aplicación de escritorio: URL de Descarga: Por otro lado, existe la posibilidad de listar todas las combinaciones de colores de la página con sus correspondientes resultados al aplicar cada uno de los algoritmos citados a través de la aplicación Juicy Studio Colour Contrast Analyser Para acceder a esta lista se ha de seleccionar la opción Contrast Analyser all tests de la opción Juicy Studio Contrast Analyser del menú Colour de la barra Web Accessibility Toolbar. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 25

26 Figura 34. Contrast Analyser - all tests O bien a través de la extensión correspondiente de Firefox Juicy Studio Contrast Analyser: URL de Descarga: Figura 35.Juicy Studio Contrast Analyser Firefox Guías Prácticas de Comprobación de Accesibilidad - Imágenes 26

27 Figura 36. Ejemplo de contrastes 3.3. DESTELLOS, PARPADEOS Y MOVIMIENTO Una pantalla parpadeante o con destello puede provocar ataques en usuarios con epilepsia foto sensitiva; por eso, los desarrolladores deben evitar causar destello de la pantalla. Esta premisa es extensible al las imágenes animadas teniendo en cuenta los siguientes puntos a revisar: No deben contener destellos. La frecuencia de parpadeo no debe oscilar entre 4 y los 59 destellos por segundo (hertzios) y debe poseer un nivel máximo a los 20 destellos por segundo. Aunque no se supere dicha frecuencia, el parpadeo debe parar automáticamente al cabo de un tiempo determinado o permitir que los usuarios puedan detenerlo. Si existe movimiento, el bucle de reproducción debe ser finito y no muy extenso y además si contiene información, ésta debe presentarse de forma íntegra al detener el movimiento Para la evaluación de la frecuencia de parpadeo para imágenes GIF animadas se puede utilizar la opción GIF Flicker Test del menú Images de la barra Web Accessibility Toolbar. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 27

28 Esta herramienta mide la frecuencia de cambio de las imágenes animadas. Hay que tener en cuenta los umbrales de parpadeo y no considerar que todas las imágenes animadas son parpadeantes o con destellos Figura 37. GIF Flicker Test Figura 38. Leyenda GIF Flicker Test 3.4. MARCADORES EN VEZ DE IMÁGENES PARA TRANSMITIR INFORMACIÓN No se deben utilizar imágenes para transmitir información cuando ésta se puede representar mediante (X)HTML+CSS. El uso de etiquetas (y hojas de estilo) donde sea posible, mejor que imágenes, promueve la accesibilidad por las siguientes razones: Guías Prácticas de Comprobación de Accesibilidad - Imágenes 28

29 El texto se puede redimensionar y es interpretado por los productos de apoyo como los lectores de pantalla. Los mecanismos de búsqueda pueden usar la información del texto. Es habitual el uso de imágenes para proporcionar información textual que se debería transmitir mediante texto, como por ejemplo en encabezados, tablas de datos o menús de navegación. En ocasiones se emplean imágenes incluso para parte del propio contenido textual de los documentos. Este uso de las imágenes debe evitarse, con las siguientes excepciones: Logotipos e imágenes promocionales. Encabezados que requieran usar tipografías no reproducibles mediante (X)HTML y CSS. La evaluación de este punto es totalmente manual, no existiendo herramientas que realicen o faciliten esta tarea. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 29

30 4. VALIDACIÓN DE MAPAS DE IMAGEN Un mapa de imagen es una imagen en la que determinadas zonas (áreas) son enlaces. Existen dos tipos de mapas de imágenes: Los mapas de imagen de cliente: toda la información necesaria está contenida en la página y por tanto el navegador es capaz de realizar la acción. Los mapas de imágenes de servidor: en ellos, el navegador envía la posición del ratón al servidor y es el servidor el que evalúa y realiza la acción. Como todo elemento no textual, para todo mapa de imagen se debe proporcionar una alternativa equivalente al mismo tal y como se describió en el apartado "Equivalentes textuales". Además, si se trata de un mapa de imagen de cliente, debe llevar un texto alternativo para cada región activa del mismo (atributo alt del elemento AREA) que describa el destino de los enlaces. Ejemplo de código mapa de cliente: <map id="mapa" name="mapa"> <area alt="descripción del enlace del Área 1" href="pagina.html" shape="rect" coords="0,10,5,25" /> <area alt="descripción del enlace del Área 2" href="pagina2.html" shape="poly" coords=" " /> [ ] </map> <img src="../imagenes/mapaccaa.gif" alt="mapa de imagen XXXX usemap="#mapa" /> En un mapa de imagen de servidor, el usuario no sabe cual es el destino de cada área del mismo, por lo tanto deben replicarse los enlaces en formato texto de cada zona activa. Éstos deben aparecer lo más cerca posible del mapa. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 30

31 Figura 39. Ejemplo de Mapa de imagen Debido a la imposibilidad de hacer directamente accesible un mapa de imagen de servidor, deberá ser sustituido, en la medida de lo posible, por un mapa de cliente, excepto cuándo las zonas sensibles (áreas) no puedan ser definidas con una forma geométrica. Para comprobar la accesibilidad en los mapas de imagen se ha de seguir los mismos criterios para las imágenes desde el punto de vista de las alternativas. En la barra Web Accessibility Toolbar existe una opción en el menú de Images que detalla los mapas de imagen contenidos en la página. Figura 40. Show Image Maps de la barra Web Accessibility Toolbar Al acceder a dicha opción se mostrará una página que contendrá una lista de los mapas de imagen empleados agrupados por tipología (servidor/cliente) con una imagen estática de cada uno de ellos y el código de los mismos a continuación. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 31

32 Figura 41. Ejemplo de la información mostrada de la opción Show Image Maps de la barra Web Accessibility Toolbar En el detalle del código se puede ver cuál es el texto alternativo empleado para cada zona activa de los mapas de imagen de cliente y, por tanto, comprobar la adecuación de los mismos. Guías Prácticas de Comprobación de Accesibilidad - Imágenes 32

33 5. CONCLUSIONES Para comprobar la accesibilidad del contenido Web basado en imágenes y mapas de imagen se han de seguir las siguientes pautas generales: Revisar la existencia de textos alternativos con herramientas automáticas o manuales. Revisar la adecuación de las alternativas con las opciones que nos proporcionan herramientas como Web Accessibility Toolbar y Web Developer Toolbar. Comprobar que no se está empleando el color como medio único de transmisión de la información y que el contraste es el adecuado. Comprobar que las imágenes animadas no contienen destellos y que se proporciona un mecanismo de detención del movimiento o que el bucle de repetición es finito. Comprobar que al utilizar una imagen en una página Web no existe un marcador más apropiado para la tarea. Seleccionar en la medida de lo posible un mapa de imagen de cliente en vez de servidor y revisar la adecuación de las alternativas a las áreas del mismo (en un mapa de servidor, comprobar que se proporcionan enlaces redundantes). Guías Prácticas de Comprobación de Accesibilidad - Imágenes 33