Press "Enter" to skip to content

¿Cómo evaluar la accesibilidad de un sitio web con la herramienta WAVE?

En esta ocasión compartimos un post elaborado por Charles Rodríguez (Software Tester en Abstracta) donde nos explica el uso de la herramienta WAVE para la evaluación automática del estado de accesibilidad en sitios web.

Muchísimas gracias Charles por animarte a colaborar con la comunidad #uxanda11ytesting!!

Evaluando la accesibilidad web con WAVE 

Al momento de diseñar, desarrollar o realizar testing, es un factor común que no se cuente con los recursos para dedicar el tiempo necesario a evaluar la accesibilidad web, porque al momento, aún no toma la relevancia que merece en la mayoría de las ocasiones y no se define como una prioridad en los proyectos.

Como forma de reducir tiempos y costos, siempre se puede pensar en herramientas que nos pueden resultar útiles para relevar datos de una forma sencilla y rápida, pero dado que la accesibilidad web aún se la deja de lado en muchos casos, no se cuenta con una gran oferta de información y herramientas disponibles tanto gratuitas como comerciales.

Es bien conocido que el testing manual no puede ser reemplazado y mucho más cuando hablamos de accesibilidad, ya que puede resultar esencial realizar pruebas con usuarios finales en situación de discapacidad. No obstante, el apoyo en herramientas automáticas nos dan la flexibilidad de ganar tiempo y obtener información de calidad. Como ejemplo de ello, en este caso hablaremos de la herramienta de evaluación automática WAVE (Web Accessibility Evaluation Tool).

Explorando WAVE

WAVE es una herramienta web que permite realizar evaluaciones automáticas de accesibilidad, desarrollado por la Utah State University, que ayuda a identificar errores y potenciales incidencias según las pautas del contenido web por la WCAG, facilitando también la evaluación manual.

Esta herramienta, se puede ingresar desde su página donde permite comenzar insertando una URL para generar un reporte de forma gratuita, contando también con extensiones para Firefox y Chrome que resultan útiles para verificar páginas protegidas con contraseña, almacenadas localmente o altamente dinámicas. Además, tiene un servicio pago WAVE Runner y una API independiente para recopilar fácilmente datos en muchas páginas.

Trabajando con WAVE

Si nos dirigimos a la página de WAVE vamos a ver un campo en la parte superior para ingresar nuestra URL a evaluar. 

Luego de ingresar la URL, presionamos la tecla “enter” o hacemos click en la “flecha” del campo y de esta manera nos redirige a un reporte automático que nos identificará los errores y sugerencias encontradas de forma visual, ordenada y detallada. Por ejemplo, a la izquierda dispondremos de un sumario de lo encontrado, contando con 5 solapas:

  • Summary (Sumario)
  • Details (Detalles)
  • Reference (Referencia)
  • Structure (Estructura)
  • Contrast (Contraste)

En la primer solapa “Summary”, encontraremos las incidencias agrupadas en seis categorías:

  • Errors (Errores generales)
  • Contrast Errors (Errores de Contraste)
  • Alerts (Alertas)
  • Features (Características)
  • Structural Elements (Orden y estructura de los elementos)
  • ARIA (Especificación del W3C)

Profundizando, podremos visualizar los errores en detalle, incluyendo una previsualización de la página con cada una de las recomendaciones en pantalla, identificando con imágenes e íconos cada incidencia de manera que pueda ser utilizado por usuarios con dificultades de acceso. En la pestaña “Details” del sumario podremos obtener también mayor información de las mismas. 

Adicionalmente, podemos encontrar en cada elemento, una descripción como se visualiza a continuación de un error de bajo contraste (Very Low Contrast).

Bajo la descripción, podremos encontrar dos enlaces “REFERENCE” y “CODE”, desde los cuales se podrá acceder a más información que nos ayude a identificar los errores.

En este ejemplo, ingresando a “REFERENCE” podremos ver un apartado en el sumario que detalla la información referente al error de Very Low Contrast, indicando la descripción general y técnica, el estándar que se aplica, el por qué y cómo actuar ante esta incidencia.

Si vamos al enlace “CODE”, podremos visualizar la ubicación del elemento en el DOM en una consola dentro de la herramienta:

Por encima del “Sumario”(Summary) a la izquierda, encontraremos un botón para desactivar los estilos y así visualizar la página en forma simplificada y ordenada, con los errores correspondientes a cada sección del HTML.

En la solapa “Structure” se encuentra una lista ordenada de las regiones y encabezados HTML, que puede utilizarse también para navegar por la página.

Por último, en la solapa “Contrast” nos brinda información de contraste del elemento seleccionado, así como también la posibilidad de modificar los estilos en tiempo real del texto, realizando una aproximación al contraste recomendado indicado para los niveles de adecuación de la WCAG.

Cerrando

En general WAVE, se presenta de una forma práctica y usable de cara al usuario, pero no es dato menor, que es necesario tener conocimientos de inglés para sacarle máximo provecho, teniendo en cuenta que por el momento no permite configuración de idiomas.

Por otro lado, también puede considerarse que no es posible adaptar el tamaño, letra y ubicación de los diferentes componentes, no siendo una aplicación completamente accesible a usuarios en situación de discapacidad, más allá de la ayuda que presenta en las características y con íconos diferenciados para cada tipo de incidencia.

Una de las ventajas más importantes que tiene esta herramienta, es la información que brinda tanto de ayuda para el tester como puede ser para un desarrollador, contando con funcionalidades que disponen de una gama de posibilidades de personalización, así como también con contenido de calidad y relevante para el análisis.

El uso de la aplicación resulta intuitivo y la interacción con los diferentes componentes se hace sencilla, además que se puede disponer de un informe muy completo e interactivo en cuestión de segundos ajustado a la WCAG, por lo que puede convertirse en un muy buen apoyo para el tester o desarrollador.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close Bitnami banner
Bitnami