03 comprobacion de_la_accesibilidad_imagenes (1)

Instituto Nacionalde Tecnologías de la Comunicación

Guías Prácticas de Comprobación de

Accesibilidad:

IMÁGENES

Centro de Referencia en Accesibilidad y Estándares Web

Marzo 2008


Copyright © 2008 Instituto Nacional de Tecnologías 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 http://creativecommons.org/licenses/by-nc-sa/2.5/es/

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 http://www.inteco.es.

Guías Prácticas de Comprobación de Accesibilidad - Imágenes 2

http://creativecommons.org/licenses/by-nc-sa/2.5/es/

http://www.inteco.es/Accesibilidad/Formacion_6/Manuales_y_Guias

http://www.inteco.es/


ÍNDICE

1. OBJETIVO DE LA GUÍA 4

2. EQUIVALENTES TEXTUALES 5

2.1. 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 8

2.2. Descripción larga 8

3. VALIDACIÓN DE IMÁGENES 10

3.1. Validación de los equivalentes textuales 10 3.1.1. Existencia de texto alternativo 10 3.1.2. Adecuación de las alternativas 13

3.2. Color y Contraste 16 3.2.1. Color 16 3.2.2. Contraste 22

3.3. Destellos, parpadeos y movimiento 27

3.4. Marcadores en vez de imágenes para transmitir información 28

4. VALIDACIÓN DE MAPAS DE IMAGEN 30

5. CONCLUSIONES 33



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.



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.

2.1. 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.


Ejemplo de código:

<object type="image/png" data="imagen.png">  </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.


Ejemplo de código:

<a href="norma.pdf"> <img src=”logo.gif” alt=”” />Norma UNE 139803: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” 2007. 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



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.

Figura 4. Ejemplo de imagen dinámica. Contador de visitas

2.2. DESCRIPCIÓN LARGA

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



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>



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

3.1.1. 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: https://addons.mozilla.org/en-US/firefox/addon/60

URL de Descarga Web Accessibility Toolbar: http://www.visionaustralia.org.au/info.aspx?page=614

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.


https://addons.mozilla.org/en-US/firefox/addon/60�

http://www.visionaustralia.org.au/info.aspx?page=614�

https://addons.mozilla.org/en-US/firefox/addon/60

http://www.visionaustralia.org.au/info.aspx?page=614


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



Figura 9.Ejemplo de imagen resaltada sin alternativa

Desactivación de hojas de estilo CSS 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



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.

3.1.2. 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



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.



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.



Figura 17. View Image Longdesc Firefox

3.2. COLOR Y CONTRASTE

3.2.1. 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.



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.



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.



Figura 22.Escala de grises en Web Accessibility Toolbar

• Emular los diferentes tipos de daltonismo: deuteranopia, protanopia, tritanopia, etc.

─ Vischeck Colour blindness simulation (www.vischeck.com ).

Figura 23.Vischeck colour blindness simulation de la barra Web Accessibility Toolbar

Figura 24. Captura de la ventana de simulación

─ Fujitsu ColorDoctor (http://www.fujitsu.com/global/accessibility/assistance/cd/)


http://www.vischeck.com/

http://www.fujitsu.com/global/accessibility/assistance/cd/


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 (http://www.cita.uiuc.edu/software/vis/downld.php)


http://www.cita.uiuc.edu/software/vis/downld.php


Figura 26. Captura Visual Impairment Simulator

Figura 27. Simulación de Glaucoma

Figura 28. Simulación de Degeneración macular



3.2.2. 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



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.



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.



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: http://www.visionaustralia.org.au/info.aspx?page=628

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.


http://www.visionaustralia.org.au/info.aspx?page=628�

http://www.visionaustralia.org.au/info.aspx?page=628


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: http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php

Figura 35.Juicy Studio Contrast Analyser Firefox


http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php�

http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php

http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php


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.



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:



• 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.



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.



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.



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.



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).


03 comprobacion de_la_accesibilidad_imagenes (1)

Documents