Usable y accesible: Mis validadores

Artículos relacionados
[11-02-08] Recursos gratuitos

Última actualización: 1 de noviembre de 2009

Introducción

Existen decenas de listas y recopilaciones de recursos, herramientas y validadores para desarrolladores web, siendo la más completa y recomendable, sin lugar a dudas, la del W3C Web Accessibility Evaluation Tools: Overview. También es muy recomendable "Herramientas para Diseñadores y Desarrolladores" de Estándares y accesibilidad.

A este post lo he llamado "mis validadores" porque en realidad es una lista que hago para mí misma, una manera de tener a mano las herramientas y validadores que utilizo yo en la práctica a la hora de validar un desarrollo.

Si de paso le sirve de referencia a más gente, ¡estupendo!

Índice

Adecuación a estándares (XHTML, CSS, Feeds, móvil, etc.)

Accesibilidad

Multinavegador
- Validar aspecto
- Validar funcionamiento

Distintos contextos
- Generales
- Resoluciones

Textos
- Complejidad de los textos
- Ortografía

Color
- Contraste de color
- Alteraciones de la visión de los colores

Animaciones

Usabilidad

Enlaces de interés

1. Adecuación a estándares

Pauta 11. Utilice las tecnologías y pautas W3C (de acuerdo con las especificaciones)

Apéndice A:

2. Valide la sintaxis (Por ejemplo, HTML, XML, etc.).
3. Valide las hojas de estilo (Por ejemplo, CSS).

Pautas de Accesibilidad al Contenido en la Web 1.0

W3C Unicorn

Herramienta online del W3C que permite en un sólo proceso validar: (X)HTML, CSS, XHTML - Appendix C y Mobile OK.

Disponible de momento sólo en inglés. Permite validar mediante URL, upload de fichero o inclusión directa de código.

W3C Markup Validation Service

Valida que el (X)HTML esté bien formado de acuerdo al doctype declarado en el documento.

Es una herramienta online, en inglés, que permite validar mediante URL, upload de fichero o inclusión directa de código.

[Alternativa, también en inglés: WDG HTML Validator]

W3C CSS Validation Service

Verifica Hojas de Estilo en Cascada (CSS) y documentos (X)HTML con hojas de estilo.

Es una herramienta online (se puede descargar versión local) disponible en español, que permite validar mediante URL, upload de fichero o inclusión directa de código.

[Alternativa, en inglés: WDG CSSCheck]

[XHTML-CSS valida online a la vez el código y la CSS (en inglés)]

Para RSS/Atom feeds

W3C Feed Validation Service

Valida la sintaxis de Atom o RSS feeds. Es una herramienta online, en inglés, que permite validar mediante URL o inclusión directa de código.

Para dispositivos móviles

TAW mobileOK Basic

Es un analizador de buenas prácticas para web móvil, en concreto comprueba la adecuación de un contenido móvil al nivel mobileOK Basic según se define en W3C mobileOK Basic Tests 1.0 que está basado en W3C Mobile Web Best Practices 1.0.

Es una herramienta online, disponible en español, que permite validar mediante URL.

[Alternativa online en inglés: W3C mobileOK Checker, permite validar mediante URL]

2. Accesibilidad

Toda metodología seria de accesibilidad incluye la revisión automática en al menos dos herramientas de validación automática.

PISTA

Desde que probé la nueva herramienta local (y gratuita) del Ministerio de Industria, Turismo y Comercio, me he pasado a ella con los ojos cerrados.

Permite analizar automáticamente varios sitios y todas sus página de vez (la gramática, las CSS y los diferentes niveles de accesibilidad), y además programar revisiones periódicas cuyos informes te son enviados por correo. Permite revisar con varias normativas (por defecto WCAG 1.0).

Para revisar de acuerdo a la Norma 139803 lee el artículo de Olga Revilla.

Para revisar de acuerdo a las WCAG 2.0 lee el artículo"Validación de accesibilidad de acuerdo a las WCAG 2.0 con PISTA".

Tiene una herramienta de reparación que, para ciertos errores, te crea una copia de la página con el problema resuelto (previo asistente).

Se puede integrar con la Plataforma Web, también gratuita, para que envíe los informes, que se pueden anotar, y así hacer un seguimiento del estado de las incidencias. Para más detalle se pueden consultar sus manuales.

TAW

Valida automáticamente la accesibilidad de la página, señalando qué puntos revisar manualmente. Se puede seleccionar nivel A, AA, AAA.

Está disponible en español, en versión online, local o extensión para Firefox (que añade la opción de "Validar con TAW" al menú de Herramientas).

Es de momento la única herramienta de validación automática que permite validar de acuerdo a las WCAG 2.0

TAW Monitor

Herramienta online que permite el seguimiento de la accesibilidad de un portal mediante informes periódicos.

Más información en la entrada "TAW Monitor"

HERA

Herramienta online, disponible en español , que valida automáticamente la accesibilidad de la página, señalando qué puntos revisar manualmente.

Todas ellas permiten descargar el informe en RDF (informe EARL), de manera que podemos incluirlo en nuestras páginas como propone Emmanuelle Gutiérrez y Restrepo en "Navegación Semántica o Meta Navegación":

<link rel="accesibility" href="accesibilidad.rdf" type="application/rdf+xml" title="Accesibilidad. " />

[Más información en Plantilla Base XHTML]

OTROS

Otro validador muy conocido era Bobby, muy utilizado en EEUU porque validaba según la sección 508, pero desde que compró IBM la compañía ya no está disponible.

Hay muchos más validadores, puedes consultar la lista: Test Me: 25 Freebie Website Accessibility Checkers. Uno que no incluyen es Web Accessibility Inspector, que valida de acuerdo a las WCAG 1.0 y a las Fujitsu Web Accessibility Guidelines.

Otro validador interesante es Truwex Online 2.0 que permite validar de acuerdo a la sección 508 y las WCAG. No sólo valida la accesibilidad sino también la privacidad y calidad del sitio, detecta si hay pop-ups o se abren ventanas nuevas, los enlaces rotos, etc.

También está Wave, que además de señalar los errores permite ver la estructura de la página o visualizarla en formato texto; o Functional Accessibility Evaluator que evalúa: la navegación y orientación; textos alternativos; scripting; estilo y estándares.

eXaminator tiene como novedad que otorga una puntuación a la página y te indica en qué posición de su ranking de páginas analizadas se encuentra.

Si utilizas Eclipse existe ACTF Webelo, una colección de plugins que permite a los desarrolladores validar la accesibilidad de sus aplicaciones.

3. Multinavegador

Apéndice A:

4. Utilice un navegador sólo-texto o un emulador.

5. Utilice varios navegadores gráficos [...]

6. Utilice varios navegadores, antiguos y nuevos.

7. Utilice un navegador por voz, un lector de pantalla, un software de magnificación, un visualizador pequeño, etc.

Pautas de Accesibilidad al Contenido en la Web 1.0

3.1 Validar aspecto

El aspecto de una web en distintos navegadores se puede comprobar mediante una serie de herramientas que te muestran el resultado en un pantallazo.

Total validator (Advanced)

Te muestra pantallazos de tus páginas en distintos navegadores (Explorer de 5 a 7, Firefox de 1.0 a 2.0, Opera de 7 a 9, Mozilla, Netscape, Lynx, ect.), sistemas operativos (Linux, Mac, Windows) y resoluciones de 640x480 a 1280x1024.

Además revisa la ortografía, los enlaces rotos y problemas de accesibilidad.

Es una herramienta online, en inglés, aunque se puede descargar una versión local.

Web Page Backward Compatibility Viewer

Herramienta online, en inglés, que permite revisar en muchos más navegadores (muy antiguos, móviles, etc. indicando el "id"" del navegador desde una lista). Necesita un fichero "delorie.htm" en el raíz de la web a comprobar para verificar que eres administrador del sitio.

BrowserCam

Es una herramienta online que permite visualizar tu web desde distintos navegadores y versiones (Explorer, Mozilla, Firefox, Safari, Konqueror, Opera, AOL, Camino, Chrome), desde diferentes dispositivos móviles (BlackBerry, Windows Mobile) o probarla por VNC en distintos sistemas operativos (distintos Windows, OSX, Linux).

Es una herramienta de pago pero que tiene una versión demo de 24 horas (no disponibles todas las opciones).

Me llama la atención la opción que permite superponer dos pantallazos diferentes para comprobar cómo se descuadran las maquetaciones en diferentes navegadores.

Otra alternativa online, con múltiples navegadores disponibles es Check Browser Compatibility, Cross Platform Browser Test

Browsrcamp

Es una herramienta online, en inglés, que muestra un pantallazo de la web en Safari para MAC.

Browsera
Herramienta online que permite de forma automática identificar problemas de visualización de una página en: firefox (2, 3, 3.5), Explorer (6, 7, 8) y Safari (3.2, 4)

iPhone
iBBDemo

Aplicación local para Windows que simula la visualización en el iPhone.

iPhone Tester

Simulador web que permite comprobar cómo se visualiza una página web de manera similar a cómo lo hará un usuario de iPhone. Para que el resultado sea lo más aproximado posible se debe utilizar la última versión de Safari.

IPhoney

Aplicación local sólo disponible para MAC. Contrario a lo que pueda parecer, no es un emulador, sino un entorno de navegación web que simula la ejecución o renderización de utilidades y páginas de 320 por 480 (o 480 por 320) en un iPhone.

También puede ser de utilidad la opción de Opera 9 "Ver>Simular pantalla pequeña":

Google visto con la opción Simular pantalla pequeña de Opera

3.2 Validar funcionamiento

IETester

IETester es un navegador web gratuito que permite interpretar las páginas web con los motores de: IE8 beta 2, IE7, IE6, IE5.5

También utilizo VMWare, en donde cargo distintas máquinas virtuales con distintos sistemas operativos y navegadores (distintas versiones de Explorer, Firefox, Opera, etc).

También se debe comprobar en una PDA, un kiosco de información (en Zaragoza, en la vía pública, se encuentran en 8 emplazamientos), en un iPhone, en un MAC, desde la televisión (por ejemplo desde la Wii o con un usuario que tenga Imagenio), con un lector de pantalla como JAWS (descargar demo gratuita de Jaw 9.0) o FireVox (lector de pantalla que se instala como extensión de Firefox).

Hay varios emuladores online que también son de utilidad:

ready.mobi
Disponible para Nokia N70, Samsung z105, Sony Ericsson k750i, Motorola v3i, Sharp GX-10. Además calcula el tiempo de carga según conexión (WIFI, 3G, GPRS) y el coste estimado según el continente. También valida la sintaxis.

Como alternativa está Emulador móvil. Es una herramienta online que permite validar una web en un Sony K750 y un Nokia N70. La URL a validar se incluye en una caja de texto en la web del emulador. Para Opera Mini existe Opera Mini Simulator.

MSN TV Viewer
Herramienta local gratuita que emula WebTV. Para más información "Mi web en la televisión (3 de 3)"

Emulador Lynx Viewer
Emula el navegador de sólo texto Lynx. Está disponible también cómo extensión de Firefox y cómo herramienta de Explorer. Yo prefiero instalar el navegador Lynx, el original, puesto que es gratuito. Está disponible en versiones Unix, VMS, Windows y OS2, y viene instalado por defecto en los sistemas Linux y Unix.

4. Distintos contextos

Apéndice A

5. Utilice varios navegadores gráficos con:

Sonidos y gráficos cargados.

Gráficos no cargados.

Sonidos no cargados.

Sin ratón.

Marcos, scripts, hojas de estilo y applets no cargados.

Pautas de Accesibilidad al Contenido en la Web 1.0

4.1 Generales

Firefox Accessibility Extensión

Extensión de Firefox que permite ver un listado con las abreviaciones de la página, visualizar sin imágenes, sin imágenes de fondo, deshabilitar scripts, deshabilitar eventos de ratón, de ventana o de formulario, deshabilitar nuevas ventanas o deshabilitar CSS.

Para Explorer y Opera existe como alternativa la Web Accessibility Toolbar. Si ya tienes instalada esta herramienta te recomiendo que compruebes que es la última versión, pues esta incluye nuevas opciones interesantes como: poner a inline los display:none, visibles los visibility:hidden, o mostrar el contenido posicionado fuera de pantalla; incluye también un botón pata abrir la página con Firefox y con Opera, o un informe de velocidad de la página.

aDesigner

Es una herramienta local gratuita que permite simular cómo "ve" una página dos tipos de usuarios diferentes: una persona ciega con un lector de pantalla o una persona con visión reducida. Además permite evaluar la accesibilidad de documentos ODF, animaciones Flash o de una aplicación de escritorio.

4.2 Resoluciones

Screen Size Tester

Herramienta online en inglés que permite revisar una web a distintas resoluciones .

Tiene más opciones que Total Validator. Otra alternativa es la extensión para Firefox Browser Window Resizer o la Web Accessibility Toolbar para Internet Explorer y Opera.

5. Textos

Pauta 14. Asegúrese de que los documentos sean claros y simples.

Apéndice A:

8. Utilice verificadores de ortografía y gramática. Quien lea la página con un sintetizador de voz puede no ser capaz de descifrar lo que reproduce el sintetizador por un error ortográfico. Eliminando problemas gramaticales se incrementa la comprensión

9. Revise el documento para obtener claridad y simplicidad. Las estadísticas de legibilidad, tales como las generadas por algunos procesadores de textos, pueden ser útiles indicadores de claridad y simplicidad.

Pautas de Accesibilidad al Contenido en la Web 1.0

5.1 Complejidad de los textos

TxReadability

Evalúa la complejidad de los textos de una página. Es un herramienta online, disponible en español, que permite verificar mediante URL o inclusión directa de texto.

Como alternativa (también online, mediante la inclusión de URL) está Readability Test

Tests Document Readability And Improve It tiene la ventaja de poder subir un fichero de texto plano, y Readability index calculator la ventaja de poder seleccionar diferentes idiomas.

5.2 Ortografía

Stilus

Revisor online mediante URL, upload de fichero (PDF, DOC, etc.) o inclusión directa de texto. Detecta cuatro tipo de errores: ortografía, gramática, tipología y estilo.

Da un informe visual de la página resaltando los errores ortográfico e incluyendo una descripción. Es gratuito pero hay que registrarse para acceder a todas las opciones.

Total validator y Orangoo también revisan la ortografía mediante URL pero sólo si la página está en inglés, de lo contrario sólo revisan inclusión directa de texto.

Hay otros muchos revisores de ortografía, disponibles en muchos idiomas, pero todos son mediante inclusión directa de texto, por ejemplo, Corrector ortográfico.com o Revisor

Otros recursos lingüísticos (traductores, diccionarios, etc.)

6. Color

6.1 Contraste de color

Pauta 2: No se base sólo en el color.

2.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para texto].

Pautas de Accesibilidad al Contenido en la Web 1.0

Locales
Colour Contrast Analyser 2.0

Herramienta local que evalúa si hay suficiente contraste entre un color de fondo y un color de primer plano. Se basa en el algoritmo Contrast Ratio propuesto por el World Wide Web Consortium (W3C).

Una alternativa, también local y gratuita, es Color Selector, que está disponible para Windows y para MAC.

Extensiones Firefox
WCAG Contrast checker. Es una extensión para Firefox que puede comprobar si la combinación de colores (fuente+fondo) es la apropiada para la percepción visual basada en los requerimientos de WCAG 1 y WCAG 2.

Colour Contrast Analyser Firefox Extension. Esta extensión de Firefox genera un informe sobre el contraste de los colores de fondo y los colores del texto de una página.

Online

Accesibilility Color Wheel, que permite seleccionar un color de fondo y un color de texto para analizar si el contraste es el recomendado por las WCAG, pudiendo elegir el algoritmo de las WCAG 1.0 o el de las WCAG 2.0 (para ampliar información sobre esta diferencia leer el artículo de Accesibilidad Web y Alan "Analizador de Contraste de Color para WCAG 2.0").

AccessColor - Online Tool for Colour Contrast que genera un informe sobre el contraste de los colores de fondo y texto de la página indicada.

6.2 Alteraciones de la visión de los colores

Pauta 2: No se base sólo en el color.

2.1 Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores

Pautas de Accesibilidad al Contenido en la Web 1.0

Vischeck

Validador online mediante URL que nos permite comprobar que la información no está basada en el color y que una persona con problemas de visión podrá interactuar correctamente con la página.

Nos muestra una página tal y como la verían distintos tipos de daltónicos: deuteranope (es ciego al verde, ve mal el rojo y bien el azul), un tritanope (no ve el azul y sí el rojo y el verde) o un protanope (es ciego al rojo, ve mal el verde y conserva bien la visión del azul.)

Se puede descargar un plugin para Photoshop para tenerlo ya en cuenta en la etapa de diseño.

Para verla en blanco y negro podemos usar la Firefox Accessibility Extensión (Firefox) o la Web Accessibility Toolbar (Internet Explorer y Opera); o bien la herramienta online GrayBit

ColorDoctor

Es una herramienta local gratuita para Windows que simula la visión en blanco y negro y los distintos tipos de ceguera cromática. El resultado se puede guardar en distintos formatos de imagen. También se puede usar para comprobar presentaciones, animaciones Flash, etc.

[Como alternativa está Alternativa Analizador de Contraste de Color 1.0, herramienta local que permite mostrar resultados de contraste para la ceguera cromática; o Color Oracle, disponible para Linux, Mac y Windows.]

7. Animaciones

Punto de verificación 7.1 Hasta que no se le permita al usuario controlar el parpadeo, evite hacer que la pantalla parpadee. [Prioridad 1]

Nota. Personas con epilepsia fotosensitiva podrían padecer malestares causados por un parpadeo que se encuentre entre el rango de los 4 a 59 flashes por segundo (Hertz) con un pico sensible en 20 flashes por segundo así como por cambios bruscos de oscuridad a claridad (como las luces strobber).

Pautas de Accesibilidad al Contenido en la Web 1.0

[Ver artículo "Cómo evitar causar ataques fotosensitivos de epilepsia. Herramientas de validación."]

Epilepsia de Parpadeo y Fotosensitividad

Herramienta online, disponible en español, que valida GIF animados, bien indicando la URL para que verifique todos sus GIF o bien indicando la url del GIF.

Photosensitive Epilepsy Analysis Tool (PEAT)

Herramienta gratuita local que valida ".avi".

Pantalla de Photosensitive Epilepsy Analysis Tool (PEAT)

Si se quiere validar una animación Flash se puede exportar a gif animado o a ".avi" para probarla con cualquiera de las dos herramientas.

8. Usabilidad

8.1 Peso y velocidad de carga

Pingdom Tools

Herramienta online, disponible en inglés, que informa del número total de objetos de una página, su peso y velocidad de carga.

Doctor Watson

Herramienta online, en inglés, que informa del tiempo de carga de la página y de descarga de los ficheros según el tipo de conexión.

[Una alternativa en inglés es Web Page Analyzer Online.]

Extensiones de Firefox

Firebug (YSlow)
Informa del tamaño de la página cacheada y sin cachear.

Load Time Analyzer
Te muestra gráficamente el tiempo de carga de cada elemento.

8.2 Buscadores

Se debe comprobar siempre cómo muestra Google nuestra página (título, descripción, etc.), que es lo mismo que hace AnyBrowser.

También es recomendable utilizar Google Webmaster Tools.