Instituto Nacional de Tecnologas de la Comunicacin

Guas Prcticas de Comprobacin de Accesibilidad:

HERRAMIENTAS DE EVALUACIN DE LA ACCESIBILIDAD WEB

Centro de Referencia en Accesibilidad y Estndares Web

Marzo 2008

Instituto Nacional de Tecnologas de la Comunicacin

Copyright 2008 Instituto Nacional de Tecnologas de la comunicacin (INTECO)

El presente documento est bajo la licencia Creative Commons Reconocimiento-No comercial-Compartir Igual versin 2.5 Espaa. Usted es libre de: copiar, distribuir y comunicar pblicamente la obra hacer obras derivadas Bajo las condiciones siguientes: Reconocimiento. Debe reconocer los crditos 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, slo puede distribuir la obra generada bajo una licencia idntica a sta. Al reutilizar o distribuir la obra, tiene que dejar bien claro los trminos 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 informacin sobre la construccin de documentos PDF accesibles puede consultar la gua disponible en la seccin Accesibilidad > Formacin > Manuales y Guas de la pgina http://www.inteco.es.

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

NDICE
1. 2. OBJETIVO DE LA GUA HERRAMIENTAS DE EVALUACIN DE LA ACCESIBILIDAD 2.1. Evaluacin Automtica 2.1.1. 2.1.2. 2.2. 2.2.1. 2.2.2. 2.2.3. 2.2.4. 2.2.5. 2.2.6. Herramientas de validacin de gramtica Herramientas de evaluacin de Accesibilidad Barras de Herramientas Extensiones de Firefox Herramientas de evaluacin de color y contraste Simuladores de discapacidades Navegadores Productos de Apoyo 4 5 5 5 6 7 7 8 13 16 18 19 21 21 23 23

Evaluacin Manual

ANEXO: TAW - TEST DE ACCESIBILIDAD WEB Versin online Versin descargable Taw3 en un clic

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

1.

OBJETIVO DE LA GUA

El objetivo de la presente gua es presentar las herramientas ms importantes disponibles para la evaluacin y comprobacin de la Accesibilidad Web de los diferentes tipos de contenidos. Las herramientas se presentarn indicando su nombre y URL de descarga, as como una breve descripcin de las mismas que sirva para comprender su funcionalidad. Se ha de tener en cuenta que cada una de las herramientas presentadas ayuda a comprobar diferentes tipologas de contenido, y por ello se describir en detalle su funcionalidad en cada una de las guas de comprobacin de accesibilidad especficas.

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

2.

HERRAMIENTAS DE EVALUACIN DE LA ACCESIBILIDAD

El proceso de evaluacin de la Accesibilidad de todo contenido Web consta de dos fases: 1. En primer lugar se debe realizar un anlisis automtico que detecte los problemas de accesibilidad. Las herramientas automticas han de entenderse como una ayuda en el proceso de evaluacin y no como un anlisis completo ni infalible. 2. Como complemento de la evaluacin automtica ha de realizarse una evaluacin manual para identificar todos aquellos problemas que no pueden ser comprobados en la primera fase y revisar aquellos dudosos que requieren de pruebas adicionales para su comprobacin completa. En las guas prcticas de Comprobacin de Accesibilidad se utilizarn diferentes herramientas englobadas en dos grupos: Evaluacin Automtica y Evaluacin Manual.

2.1.

EVALUACIN AUTOMTICA
2.1.1. Herramientas de validacin de gramtica

En la evaluacin automtica, el primer paso consiste en realizar una comprobacin de la gramtica de las pginas, tanto del cdigo HTML como de las hojas de estilo, para verificar que estn bien formadas y son vlidas. La validez gramatical es un requisito de accesibilidad. Es recomendable utilizar las herramientas de validacin de cdigo proporcionadas por el W3C:

Validador (X)HTML de W3C

Este validador es un servicio online gratuito de validacin de cdigo que comprueba la conformidad de los documentos (X)HTML respecto a las gramticas del W3C y otros estndares (X)HMTL. http://validator.w3.org/

Validador de CSS de W3C

Es una herramienta gratuita para validar las hojas de estilo CSS solas o presentes en documentos (X)HTML, comprobando de esta manera si cumplen las especificaciones del W3C. Existe una versin online y una versin descargable multiplataforma. http://jigsaw.w3.org/css-validator/

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

2.1.2.

Herramientas de evaluacin de Accesibilidad

Existen herramientas que permiten identificar de forma automtica problemas de accesibilidad. Suponen una ayuda en la evaluacin de la accesibilidad de los sitios Web, pero hay que tener en cuenta que las herramientas automticas estn lejos de ser infalibles y tienen ciertas limitaciones, pudiendo dar falsos positivos (considerar como error algo que no lo es) o no detectar algunos errores que el usuario debe revisar manualmente. Las herramientas de validacin automtica no son suficientes para asegurar que un sitio Web es 100% accesible. Algunos ejemplos:

TAW (Fundacin CTIC).

Se trata de la herramienta de evaluacin automtica de accesibilidad de habla hispana ms extendida. Para ms informacin puede consultarse el ANEXO TAW Test de Accesibilidad Web. http://www.tawdis.net

Bobby (Watchfire)
Es el validador automtico de accesibilidad ms utilizado a nivel mundial. La comprobacin de accesibilidad se basa tanto en las pautas WCAG 1.0 como en las de la seccin 508 (Estados Unidos). http://www.watchfire.com/products/webxm/bobby.aspx

HERA (Fundacin Sidar).

Herramienta online diseada para facilitar a los desarrolladores la tarea de la revisin manual de accesibilidad de las pginas Web segn las WCAG 1.0. http://www.sidar.org/hera/index.php.es

Otros
Cynthia Says: Se trata de un proyecto educacional promovido por varias organizaciones y empresas creado para divulgar la accesibilidad Web entre los desarrolladores. Se basa tanto en las pautas WCAG 1.0 como en la seccin 508. http://www.cynthiasays.com/ The Wave: Herramienta de validacin y de reparacin que se basa en las WCAG y en la seccin 508. No realiza un anlisis exhaustivo de las pginas, sino que sirve de

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

ayuda a los desarrolladores http://www.wave.webaim.org/

en

determinadas

comprobaciones.

2.2.
2.2.1.

EVALUACIN MANUAL
Barras de Herramientas

Algunas herramientas facilitan el proceso de evaluacin manual, como extensiones para diferentes navegadores Web que permiten, por ejemplo, cambiar su configuracin rpidamente o que proporcionan enlaces a varios validadores gramaticales o de accesibilidad.

Web Developer Toolbar

Web Developer es una extensin para Mozilla Firefox que aade una barra de herramientas con varias funciones de utilidad para los desarrolladores Web. Esta barra est enfocada hacia el desarrollador Web en general, aunque tambin incluye funciones tiles para la evaluacin de la accesibilidad. URL de Descarga: https://addons.mozilla.org/en-US/firefox/addon/60

Figura 1. Web Developer Toolbar

Algunas de sus funciones ms destacadas son deshabilitar javascript y hojas de estilo, reemplazar imgenes por su texto alternativo, identificar encabezados en tablas de datos, elementos estructurales desaconsejados, marcos, enlaces, celdas de las tablas y otros elementos personalizados, redimensionar el navegador, validar el cdigo HTML, las hojas de estilo, analizar la accesibilidad de la pgina, etc.

Firefox Accessibility Extension

Firefox Accessibility Extension es una extensin para Mozilla Firefox que aade una barra de herramientas que incluye opciones que facilita la navegacin por los contenidos a los usuarios con discapacidad y tambin permite realizar comprobaciones de accesibilidad. URL de Descarga: https://addons.mozilla.org/es-ES/firefox/addon/1891

Figura 2. Firefox Accessibility Extension

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

Web Accessibility Toolbar (Internet Explorer)

La barra de herramientas Web Accessibility Toolbar es un plug-in para Internet Explorer que ha sido desarrollado para facilitar la evaluacin manual de la accesibilidad de las pginas Web. URL de Descarga: http://www.visionaustralia.org.au/info.aspx?page=614 Existe disponible adems, una versin para el navegador Opera. URL de Descarga: http://www.paciellogroup.com/resources/wat-about.html

Figura 3. Web Accessibility Toolbar

Entre sus funciones destacan: redimensionar el tamao del navegador, activar/ desactivar las hojas de estilo, localizar caractersticas desaconsejadas, analizar la pgina con los validadores HTML o CSS, listar o resaltar las imgenes presentes o sustituirlas por su texto alternativo, hacer pruebas de color, identificar y resaltar los elementos estructurales o semnticos de la pgina Web (encabezados, listas, tablas de datos, frames...), etc.

Internet Explorer Developer Toolbar

La barra de herramientas Internet Explorer Developer Toolbar es un plug-in para Internet Explorer que ha sido desarrollado para facilitar la labor de los desarrolladores Web. URL de Descarga: http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964672d-4511-bb3e-2d5e1db91038&displaylang=en

Figura 4. Internet Explorer Developer Toolbar

Entre sus funciones permite explorar y modificar el rbol DOM de una pgina, localizar y seleccionar elementos especficos de una pgina Web, deshabilitar selectivamente opciones del IE, mostrar informacin de imgenes, tablas y tamaos, comprobar el cdigo HTML, CSS, RSS, etc.

2.2.2.

Extensiones de Firefox

Adems de las barras de herramientas para Firefox, anteriormente citadas, existen otras extensiones que facilitan la revisin manual.

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

Firebug
Esta extensin permite a los desarrolladores modificar directamente el cdigo fuente HTML, CSS, JavaScript, etc. contenido en la pgina Web. Tambin permite ver el cdigo del documento de forma dinmica, segn es generado o modificado por los scripts. URL de Descarga: https://addons.mozilla.org/es-ES/firefox/addon/1843

Figura 5. Firebug

Document Map
Esta extensin permite desplegar la estructura de encabezados de cada pgina Web. URL de Descarga: https://addons.mozilla.org/es-ES/firefox/addon/475

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

Instituto Nacional de Tecnologas de la Comunicacin

Figura 6. Acceso a Document Map en Firefox

Figura 7. Ejemplo de estructura de encabezados con Document Map

Fangs
Esta extensin muestra el contenido de la pgina emulando un lector de pantalla. La pgina Web se convierte en una pgina solo texto en la que se detalla tanto el contenido del documento como los mensajes propios de los lectores de pantalla (identificando enlaces, imgenes, encabezados, listas, tablas, etc.).

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

10

Instituto Nacional de Tecnologas de la Comunicacin

Figura 8. Ejemplo de FANGS

HMTL Validator Tidy

Es una extensin para Mozilla que agrega un validador HTML dentro de Firefox. Muestra el nmero de errores de cualquier pgina HTML en la barra de estado mientras se navega, adems muestra los errores de cdigo al seleccionar la opcin Ver cdigo fuente. URL de Descarga: https://addons.mozilla.org/en-US/firefox/addon/249

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

11

Instituto Nacional de Tecnologas de la Comunicacin

Figura 9.Posible resultados de la evaluacin de cdigo

Metatags
Esta extensin muestra los metadatos de una Web con cmodo acceso a los vnculos como ficheros CSS y los datos relevantes como el MIME type, Content-type, keywords, strict-mode, etc. URL de Descarga: https://addons.mozilla.org/en-US/firefox/addon/1668

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

12

Instituto Nacional de Tecnologas de la Comunicacin

Figura 10.Captura de la extensin Metatags

2.2.3.

Herramientas de evaluacin de color y contraste

Colour Contrast Analyser

Para comprobar las combinaciones de color de primer plano y color de fondo (contraste) se puede utilizar la herramienta Colour Contrast Analyser. URL de Descarga: http://www.visionaustralia.org.au/info.aspx?page=628

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

13

Instituto Nacional de Tecnologas de la Comunicacin

Figura 11. Aplicacin Colour Contrast Analyser

La aplicacin 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 ya que el algoritmo de luminosidad an se encuentra en fase experimental. Se considerar como vlida la combinacin de color de primer plano y fondo siempre y cuando supere los umbrales mnimos (125 para el diferencial de brillo y 500 para el diferencial de color).

Fujitsu ColorDoctor
Es una aplicacin que emula los diferentes tipos de daltonismo: deuteranopia, protanopia y tritanopia. Adems convierte a escala de grises la pgina Web. URL de Descarga: http://www.fujitsu.com/global/accessibility/assistance/cd/

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

14

Instituto Nacional de Tecnologas de la Comunicacin

Figura 12. ColorDoctor

Fujitsu ColorSelector
Es una herramienta que permite determinar la combinacin de color de primer plano y color de fondo ms accesible. URL de Descarga:http://www.fujitsu.com/global/accessibility/assistance/cs/

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

15

Instituto Nacional de Tecnologas de la Comunicacin

Figura 13. Fujitsu ColorSelector

2.2.4.

Simuladores de discapacidades

Vischeck colour blindness Simulator

Herramienta online que permite emular los diferentes tipos de daltonismo. URL de Descarga: http://www.vischeck.com/vischeck/vischeckURL.php

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

16

Instituto Nacional de Tecnologas de la Comunicacin

Figura 14. Vischeck

Visual Impairment Simulator

Es una herramienta que simula diferentes tipos de deficiencias visuales (glaucoma, degeneracin macular, hyperopia, etc) URL de Descarga: http://www.cita.uiuc.edu/software/vis/downld.php

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

17

Instituto Nacional de Tecnologas de la Comunicacin

Figura 15. Captura Visual Impairment Simulator

2.2.5.

Navegadores

El nico modo de conocer si una pgina se visualizar correctamente y sin errores es probarla en distintos navegadores y en diferentes versiones. Los navegadores grficos principales son: Internet Explorer Mozilla Firefox Opera Netscape Galeon Konqueror Safari

Resulta til emplear un navegador de texto para comprobar la estructura y correcto orden de lectura de cada pgina Web. Como mnimo debera probarse sobre las versiones ms usadas de cada navegador y, si es posible, en varios sistemas operativos. Para facilitar esta labor existen servicios, como

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

18

Instituto Nacional de Tecnologas de la Comunicacin

BrowserCam (http://www.browsercam.com/Default2.aspx), que permiten comprobar cmo se visualizaran las pginas en diferentes navegadores y sistemas operativos.

Navegador de texto: LYNX

Con los navegadores de texto se puede observar si el contenido de la pgina est bien estructurado y en su correcto orden de lectura. De esta forma se comprueba que toda la informacin ofrecida en un navegador visual tambin est disponible en uno de texto. LYNX es gratuito y est disponible para diversos sistemas operativos como VMS, Windows, Linux o Unix. Este navegador puede instalarse en una mquina local o utilizar algn servicio online de emulacin como Delorie Lynx Viewer o Lynx-me URL de Descarga: http://lynx.browser.org/

2.2.6.

Productos de Apoyo

Al revisar la accesibilidad de un sitio Web se deben emplear productos de apoyo para comprobar que, en un caso de uso real, no existen problemas de acceso a los contenidos. Los lectores de pantalla permiten a las personas con discapacidad visual la navegacin y la interaccin con el sistema operativo y sus aplicaciones, incluyendo los navegadores Web. Los navegadores de voz slo proporcionan acceso a Internet. Ambos transforman el texto en voz.

Estas herramientas son de utilidad para comprobar si toda la informacin disponible en una pgina tambin est disponible para los usuarios con discapacidades visuales. Se comprueba, entre otras cosas, que no se pierde ninguna informacin ni funcionalidad, que los rdenes de lectura y tabulacin son los adecuados o que la navegacin e interaccin es independiente del dispositivo empleado. Tambin permiten comprobar el correcto funcionamiento de la pgina con estos productos de apoyos, ya que hay veces que un pequeo error o problema puede interrumpir su ejecucin.

JAWS for Windows (Freedom Scientific):

Es uno de los lectores de pantalla ms conocidos. Esta herramienta permite a los usuarios con discapacidad visual usar su ordenador, el sistema operativo y todas las aplicaciones, as como acceder a Internet. URL de Descarga: http://www.freedomscientific.com/fs_products/software_jaws.asp

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

19

Instituto Nacional de Tecnologas de la Comunicacin

Figura 16. JAWS versin 6.20

Entre las principales desventajas de JAWS (si se va a usar para la evaluacin de pginas Web) destaca que su uso es complicado y requiere de un periodo de aprendizaje para conocer todas sus funcionalidades.

Window-Eyes (GW Micro):

Es posiblemente el segundo lector de pantalla ms usado, despus de JAWS. URL de Descarga: http://www.gwmicro.com/Window-Eyes/

Home Page Reader (IBM):

Esta herramienta es un navegador de voz para personas invidentes o con otras discapacidades visuales. URL de Descarga: http://www-03.ibm.com/able/solution_offerings/hprtrial3.html Nota: Actualmente el IBM Home Page Reader est en desuso e IBM ya no proporciona soporte, pero resulta interesante como ejemplo de navegador de voz

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

20

Instituto Nacional de Tecnologas de la Comunicacin

ANEXO: TAW - TEST DE ACCESIBILIDAD WEB

TAW (Test de Accesibilidad Web), desarrollado por la Fundacin CTIC es la herramienta de evaluacin automtica de accesibilidad de habla hispana ms extendida. Dispone de una versin online y de otra descargable que permite trabajar sin conexin a Internet, siendo ambas versiones gratuitas. Adems existe una extensin para Firefox: TAW3 en un clic (https://addons.mozilla.org/esES/firefox/addon/1158 )

VERSIN ONLINE
URL: http://www.tawdis.net/ En la versin online se introduce una direccin URL, la aplicacin analiza la pgina (basndose en las pautas de accesibilidad WCAG 1.0) y genera un informe HTML basado en la pgina original con informacin sobre el resultado del anlisis. El informe se divide en varias partes: Cabecera: muestra el logotipo, versin del TAW y versin de las normas WAI utilizadas para el anlisis. Pgina analizada: se muestra la pgina analizada en la que se incluyen iconos indicando los problemas de accesibilidad encontrados. Informe resumen: se muestra un listado con los problemas de accesibilidad encontrados, organizados por prioridad. El TAW diferencia entre dos tipos de problemas: Automticos: Aquellos en los que la herramienta tiene la certeza de que incumplen las pautas (por ejemplo, una imagen sin texto alternativo). Manuales: La aplicacin no los comprueba automticamente y necesitan una revisin manual por parte del desarrollador (por ejemplo, la necesidad del uso de "longdesc" en las imgenes). A continuacin se describen los iconos utilizados por esta herramienta.

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

21

Instituto Nacional de Tecnologas de la Comunicacin

Prioridad 1 de tipo automtico Prioridad 1 de tipo manual Prioridad 2 de tipo automtico Prioridad 2 de tipo manual Prioridad 3 de tipo automtico Prioridad 3 de tipo manual

En el resumen el TAW muestra: Un listado con los problemas de accesibilidad encontrados (ordenados por prioridad) y su descripcin. El nmero de lnea de la pgina en la que se produce el error. La etiqueta HTML que genera problemas de accesibilidad. .

Figura 17. Ejemplo TAW online

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

22

Instituto Nacional de Tecnologas de la Comunicacin

VERSIN DESCARGABLE
URL de Descarga: http://www.tawdis.net/taw3/cms/es/herramientas/desktop.html La versin descargable del TAW es una aplicacin de escritorio para al anlisis automtico de sitios Web basndose en las Pautas de Accesibilidad al Contenido Web 1.0. TAW sigue los enlaces de los documentos HTML de forma que permite analizar desde una nica pgina hasta sitios Web completos. Para el anlisis de las pginas, TAW permite la seleccin de los puntos de verificacin a comprobar as como la creacin de nuevas reglas personalizadas. Finalmente, genera diferentes tipos de informes sobre el resultado del anlisis. Es multiplataforma y dispone de instaladores para varios sistemas operativos: Windows, Mac OS, Unix y familiares (Linux, Solaris, etc.)

TAW3 EN UN CLIC
Para utilizar la extensin TAW3 en un clic, basta con acceder a la pgina que se desee evaluar y seleccionar el icono de TAW3.

Figura 18. Icono TAW3 en un clic

Se mostrar la pgina con los problemas de accesibilidad detectados como en la versin online de la herramienta.

Guas Prcticas de Comprobacin de Accesibilidad - Herramientas

23