Herramienta de ayuda para realizar una consultoría de accesibilidad web de acuerdo a las WCAG 1.0

Comparto con vosotros una herramienta personal que he creado para ayudar a realizar el informe resultante de una consultoría de accesibilidad web de acuerdo a las WCAG 1.0 y la Norma UNE 139803. Al final del artículo tenéis la descarga.

¿Validas de acuerdo a las WCAG 2.0 o las WCAG 2.1: Audit Tool WCAG 2.1

Qué es y qué no es

NO es una herramienta para realizar una revisión automática de la accesibilidad web de un portal.

Es una herramienta que permite ir recogiendo los datos obtenidos durante la revisión automática y manual del sitio de acuerdo a la Norme UNE 139803, que es un poco más exigente que las WCAG 1.0 (ver diferencia entre las WCAG 1.0 y la Norma UNE 139803), y que te genera información de utilidad para realizar el informe.

Cuando redactas el informe que refleja los resultados de la consultoría hay dos apartados claves:

• el análisis detallado donde incluyes por cada punto de verificación y página de la muestra qué se pretende evaluar y cómo se ha evaluado, qué errores se han cometido, cómo solucionarlos técnicamente y cómo evitarlos en el resto del portal. Este apartado debe estar orientado a los desarrolladores que van a realizar los cambios.
• el resumen de la evaluación, que está destinado a las personas que han contratado la consultoría y que no tienen por qué tener conocimientos técnicos. En este resumen se indica de manera concisa y clara, sin entrar en aspectos técnicos, cuáles son los principales problemas en base a su criticidad y recurrencia, el nivel de adecuación alcanzado por la muestra y por cada una de sus páginas, etc.

Los datos que genera la herramienta que comparto son especialmente útiles para ese resumen de la evaluación. Genera un resumen del nivel de adecuación A y AA (tanto de la muestra en general como de cada una de sus páginas) datos estadísticos y gráficas que permiten resumir y presentar de forma concisa y muy gráfica los resultados. También nos ayuda a nosotros a identificar con rapidez cuáles son los puntos de verificación y las páginas que presentan más problemas.

Descripción de la herramienta

Está en formato Excel. Todos los campos están protegidos salvo aquellos que se deben ir rellenando. Es una herramienta de uso personal que he decidido compartir, así que su funcionamiento y organización están basados en mi manera habitual de trabajar.

La Excel está dividida en cuatro pestañas:

Pestaña 1: General

En esta pestaña se rellenan los datos generales sobre la web a analizar:

• Fecha: rango de fechas entre las que se realiza la evaluación
• Web: URL de la web que se analiza
• Cliente: cliente para el que se realiza la consultoría
• Evaluador: persona que lleva a cabo la evaluación
• Nº de páginas de la muestra: nº de páginas que componen la muestra a evaluar. Está pensada para un máximo de 15.
• Datos de las páginas de la muestra: alias por el cual haremos referencia a esa página y su URL. El alias que demos a cada página de la muestra será el que automáticamente se adjudique en el resto de la Excel para identificar a esa página.

Pestaña 2: A

La labor que debe hacer el evaluador en esta pestaña es indicar por cada una de las páginas de la muestra y por cada uno de los puntos de verificación de nivel A si dicha página cumple, no cumple o no se aplica el correspondiente punto de verificación que está analizando.

Por tanto por cada punto de verificación de nivel A y cada página de la muestra encontramos las siguientes columnas:

• el punto de verificación a evaluar
• el nivel de dicho punto. Se indica si es A, si es A sólo según la Norma UNE 139803, o si sólo es A en determinado contexto
• un listado con las páginas de la muestra. El nombre que aparecerá será el alias que se le ha dado a cada página en la primera pestaña.
• un  desplegable por cada página para indicar si dicha página cumple con el punto de verificación. Es lo que debe rellenar el evaluador a medida que avanza en el análisis de accesibilidad de las páginas. Los valores disponibles son:
  
  
  • Sí: la evaluación manual (o automática cuando sea posible) determina que cumple dicho punto de verificación.
  • No: la evaluación manual (o automática cuando sea posible) determina que no cumple dicho punto de verificación.
  • No se aplica: cuando el punto de verificación no es aplicable a la página porque no es posible una respuesta "sí" o "no". Por ejemplo, el punto de verificación 1.2 dice “Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor”, si la página analizada no tiene mapas de imagen de servidor, no puedes indicar que se han proporcionado vínculos para cada zona activa ni que no se han proporcionado, simplemente no se aplica porque no se utilizan mapas de imagen de servidor.
• un desplegable para indicar si la muestra en su conjunto cumple el punto de verificación. Los valores disponibles son los mismos que en el caso anterior. El evaluador deberá especificarlo en base a:
  
  
  • si alguna de las páginas no cumple el punto de verificación, la muestra en su conjunto no lo cumple
  • si el punto de verificación no se aplica a todas las páginas, dicho punto no se aplica a la muestra en su conjunto
  • sí ninguna de las páginas no cumple el punto el punto de verificación (es decir, sólo hay páginas que lo cumplen o en las que no se aplica), la muestra en su conjunto cumple el punto de verificación

Para hacerlo más visual y localizar con más facilidad el tipo de datos insertados, en función del valor especificado se estable un código de color:

¿Que información nos genera esta pestaña?

En la imagen anterior se ve que por cada punto de verificación nos incluye un resumen del número de páginas de la muestra que cumple, no cumplen o en las que no se aplica dicho punto de verificación.

El grueso de la información generada la encontramos a la derecha de las columnas especificadas anteriormente:

Los datos que proporciona son:

• una tabla resumen del cumplimiento de nivel A de la muestra en general. El nº de puntos que se cumplen, no se cumplen o no se aplican y qué porcentaje suponen respecto al número de puntos que hay que cumplir. Se ofrece el porcentaje de cumplimiento y no cumplimiento tanto teniendo en cuenta los puntos no aplicables como sin tenerlos en cuenta.
  
• gráfico que refleja también el resultado del porcentaje de cumplimiento y no cumplimiento del nivel A de la muestra. Para la realización del gráfico no se tienen en cuenta los puntos no aplicables, es decir, a la hora de hacer la estadística se restan del número de puntos que hay que cumplir.





• una tabla resumen por cada una de las páginas de la muestra. Por cada página podemos ver el número de puntos de nivel A que cumple, no cumple o no se aplican, y el porcentaje que suponen respecto al número de puntos que se han de cumplir. Se ofrece el porcentaje de cumplimiento y no cumplimiento tanto teniendo en cuenta los puntos no aplicables como sin tenerlos en cuenta.





• gráfico de barras que refleja también el porcentaje de cumplimiento y no cumplimiento del nivel A de cada página de la muestra. Para la realización del gráfico no se tienen en cuenta los puntos no aplicables, es decir, a la hora de hacer la estadística se restan del número de puntos que hay que cumplir.

Esta información nos permite conocer el nivel de adecuación de la muestra y de cada página. Nos permite además localizar de forma visual las páginas que más problemas tienen.

Pestaña 3: AA

El funcionamiento y los datos que genera son equivalentes a la pestaña A pero para los puntos de verificación de nivel AA.

Los datos se generan para los puntos de verificación AA y para los puntos de verificación A+AA.

Los primeros son sólo a modo informativo y sirven también de base para calcular los realmente importantes, los datos A+AA.

Para alcanzar el nivel de adecuación AA es necesario cumplir con los puntos de verificación A y AA, por tanto los gráficos y  estadísticas que nos informan del nivel de adecuación AA de la muestra son los datos A+AA.

Pestaña 4: Por puntos de verificación

Esta pestaña nos da una perspectiva global de los puntos de verificación que más problemas están generando. Por cada uno de ellos, en una tabla, agrupados por nivel A o AA, se indica el nº de páginas de la muestra que lo cumplen, no lo cumplen o en las que no se aplica.

Se generan una serie de gráficas que permiten identificar cuáles son los más o lo menos problemáticos.

Descarga de la herramienta

La descarga es gratuita.

Descarga de la herramienta de ayuda para realizar una consultoría de accesibilidad web de acuerdo a las WCAG 1.0/Norma UNE 139803. Archivo excel .XLSX de 85.6 KB

Descarga de la herramienta de ayuda para realizar una consultoría de accesibilidad web de acuerdo a las WCAG 2.0 (versión 3.0, 14/07/2015). Archivo excel .XLSX de 158 KB

Esta prohibido su uso comercial y su distribución sin permiso del autor.

Servicio relacionado: Consultoría de accesibilidad web

Artículos relacionados:

• Audit Tool WCAG 2.0
• WCAG 2.0
• Metodología de Evaluación de Conformidad con la Accesibilidad en sitios Web (WCAG-EM)
• Descarga la herramienta para realizar evaluaciones heurísticas basadas Sirius
• Textos alternativos, imágenes accesibles. Herramientas de ayuda: mapa de decisión y wizard online

Consejos avanzados de accesibilidad web

Última actualización: 16/04/2012

Artículo relacionado: Respuesta a 25 dudas habituales sobre accesibilidad web

Los hashtag de Twitter son efímeros, por ello recopilo en este artículo los consejos de accesibilidad que publico en Twitter bajo el hashtag #tipAA. Algunos están ampliados con más de 140 caracteres, tal y como los publiqué en Google + o Facebook, otros los he reescrito para este artículo.

1. En un formulario web se debe asociar explícitamente cada etiqueta con su control, pero ¿cómo realizar asociaciones complejas? Ejemplo de asociación compleja de radios y labels de forma accesible.
2. Al validar un formulario web ten en cuenta que: identificar los campos erróneos únicamente resaltándolos en rojo es transmitir información solo con el color, y por tanto incumple el punto de verificación 2.1 de las WCAG 1.0 (prioridad 1) y con el criterio de conformidad 1.4.1 de las WCAG 2.0 (nivel A)
3. Las WCAG 2.0 indican que puedes borrar el contenido de un input cuando este coge el foco, puesto que es un cambio de contenido pero no de contexto (criterio de éxito 3.2.2). Sin embargo no es correcto implementar que el foco salte al siguiente campo una vez que el actual se ha rellenado (como por ejemplo es habitual al rellenar los campos de una cuenta bancaria) pues en este caso sí se trata de un cambio de contexto. Más información en la técnica G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
4. Las WCAG 2.0 admite el uso de target="_blank" con (X)HTML Transitional si indicas que el enlace se abre en otra ventana mediante un texto incluido dentro del enlace: <a href="ayuda.html" target="_blank">Ayuda (se abre en ventana nueva) </a> (nivel AAA) Más información en “¿Mi página es inaccesible si utiliza ventanas emergentes?” 
5. En una página web, los enlaces o los campos de un formulario pueden coger el foco, sin embargo un DIV, por ejemplo, no. Aquellos elementos que vayan a cambiar dinámicamente tienen que poder coger el foco para que sean accesibles a los lectores de pantalla. Para que un elemento que no coge el foco pueda cogerlo deberá tener
   tabindex="0" Más detalles en el artículo “AJAX accesible”
6. El interlineado recomendado por las WCAG 2.0 es que el espacio entre líneas (interlineado) sea de, al menos, un espacio y medio dentro de los párrafos y el espacio entre párrafos sea, al menos, 1.5 veces mayor que el espacio entre líneas. Consultar criterio de conformidad 1.4.8 (nivel AAA)
7. No utilices elementos desaconsejados por el W3C. Consulta la Cheat Sheet HTML 4.01, HTML 5, XHTML Elements
8. Incluye un menú de navegación semántica en el HEAD de las páginas. WCAG 1.0: punto de verificación 13.2 AA, 13.9 AAA; WCAG 2.0: Técnica H59: “Using the link element and navigation tools” 
9. Si quieres ocultar contenido visualmente pero que sea accesible para usuarios de lectores de pantalla NO uses display:none. Consulta el artículo “Ocultar contenido sin comprometer la accesibilidad ni el posicionamiento de la página”
10. Identificar el idioma principal del documento, proporcionar resumen a las tablas y asegurar un orden lógico de tabulación: estos son los 3 puntos que pasan de ser nivel AAA en las WCAG 1.0 a A o AA en la Norma UNE 139803. Consultar “Diferencias de prioridad entre los requisitos UNE 139803:2004 y los puntos de control de las WCAG 1.0”
11. Se debe incluir el atributo SUMMARY solo en las tablas que no se utilizan para maquetar (AA: Norma UNE 139803; AAA: WCAG 1.0)
12. Si tu web tiene contenido Flash consulta la “Checklist para validar contenido Flash de acuerdo con las WCAG 2.0”
13. ¿Un formulario con varios botones que no dependa de javascript y sea accesible? Mi post más leído con 25.000 visitas: “Formulario con varios botones. Implementación usable y accesible”
14. Los enlaces y campos de formulario no solo deben coger el foco, sino que este debe ser visible. No usar :focus {outline:0;} o peor aun onfocus="blur()" Consultar Common Failures F55 y Common Failures F78
15. No es necesario que H1 aparezca en el código antes que H2, lo importante es que H1 sea de primer nivel y H2 de segundo nivel. Consultar “¿Es correcto que aparezca en el código HTML un H2 antes que un H1?”
16. El ancho de un párrafo no debe ser mayor de 80 caracteres: criterio de conformidad 1.4.8 (AAA) de las WCAG 2.0
17. Solo un sonido que dura más de 3 segundos debe tener la opción de pausarlo o detenerlo: criterio de conformidad 1.4.2 (nivel A) de las WCAG 2.0
18. Distinguir los enlaces dentro de un texto solo por el color (sin subrayar) es transmitir información solo con el color, y por tanto incumple el punto de verificación 2.1 de las WCAG 1.0 (prioridad 1) y con el criterio de conformidad 1.4.1 de las WCAG 2.0 (nivel A)
19. Checklist para validar formularios de acuerdo con las WCAG 2.0 (excel, 85 kb)
20. No es necesario marcar el cambio de idioma de nombres propios, términos técnicos y palabras extranjeras que se pronuncian igual en el idioma de tu página. Consultar “¿Debo indicar el cambio de idioma en cualquier tipo de palabra?”
21. No justifiques el texto u ofrece un mecanismo para evitarlo. Consulta “¿Cómo debo presentar el texto: justificado o alineado a la izquierda?”
22. Conoce las "Correspondencia entre los requisitos de la Norma UNE 139803, los puntos de control de las WCAG 1.0 y los criterios de éxito de las WCAG 2.0" (excel gratuita de correspondencias)
23. En una página de nivel de adecuación AA según las WCAG 2.0 los vídeos (grabados) deben incluir subtítulos sincronizados, transcripción de la banda sonora con descripción de la pista visual y audiodescripción.
24. Una imagen que funciona como enlace no puede considerarse nunca decorativa. Se incluirá en la página con IMG con un ALT significativo.
25. Caso en el que una imagen que actúa como enlace puede tener alt=””:
    <a href=”enlace.html”><img src=”icono.gif” alt=””>Texto del enlace</a>
    Es decir, una imagen junto a un texto, siendo que el enlace los engloba a los dos.
26. El ALT (texto alternativo) de una imagen debe tener siempre en cuenta el contexto en el que se inserta la imagen. Ejemplo "Accessibility: Images in Context" (vídeo de Youtube con subtítulos, con posibilidad de traducción al español)
27. Si tienes campos de formulario que se borran al coger el foco, revisa los problemas que les puede provocar a los usuarios con lectores de pantalla. En "Accessibility Testing: Correction Scenarios" Derek Featherstone nos explica casos concretos.
28. En (X)HTML podemos usar el manejador de evento "onclick" sin necesidad de duplicarlo con "onkeypress". Puesto que los navegadores (X)HTML lo interpretan como el manejador de evento de acción por defecto de enlaces y botones y se activa tanto con el ratón como por el teclado
29. Un elemento que no sea enlace o botón (por ejemplo: div, img, td, etc.) y tenga un evento "onclick" sí necesita que se duplique con "onkeypress" para ser accesible por teclado. Además se debe incluir el atributo tabindex="0" para que el elemento pueda coger el foco y por tanto ser efectivamente accesible por teclado.
30. Debe existir contenido textual entre encabezados consecutivos (H1-6) del mismo nivel, entre encabezados consecutivos (H1-6) cuando el segundo sea de mayor nivel que el primero; y entre el último encabezado y el final de página
31. ¿Cómo incluir la descripción larga de una imagen de forma que sea accesible para los lectores de pantalla y se visualice por defecto cuando no se han cargado las imágenes? Descripción extensa de una imagen: accesible con lector de pantalla y visible sin imágenes activas
32. Las WCAG recomiendan usar accesskey para alcanzar el nivel AAA (en las WCAG 1.0) o como técnica adicional del criterio 2.4.1 (en las WCAG 2.0) ¿Pero cuáles utilizar? Qué teclas de acceso rápido (accesskey) utilizar
33. Que un párrafo esté incluido en un DIV no le exime de que obligatoriamente también deba estar incluido en un P
34. Para comprobar en un audio si el sonido de fondo es 20 dB más bajo que la voces para cumplir con el criterio 1.4.7, puedes usar WCAG 2.0 Audio Contrast Analysis Tool incluida en Audacity

Artículo relacionado: Respuesta a 25 dudas habituales sobre accesibilidad web