07/28/2023

Pruebas de Accesibilidad con WAVE Accessibility Evaluation Tool

COMPARTIR EN:

  • Linkedin Logo
  • Twitter Logo
  • Facebook Logo
  • Mail Logo

Las herramientas de evaluación de accesibilidad juegan un papel muy importante al proporcionar a los testers, desarrolladores y diseñadores web una forma efectiva y rápida de verificar la accesibilidad de sus aplicaciones.

Una de las herramientas más populares y utilizadas en este campo es WAVE (Web Accessibility Evaluation Tool), desarrollada y mantenida por la organización WebAIM.

web accesibility

¿Qué es una herramienta de diagnóstico de accesibilidad?

Una herramienta de diagnóstico de accesibilidad es un software diseñado específicamente para evaluar la accesibilidad de una aplicación, u otro tipo de contenido digital.

Estas herramientas de diagnóstico utilizan diferentes mecanismos  para evaluar la accesibilidad de un contenido digital. 

Algunos de los métodos más utilizados son:

1. Análisis automático: Estas herramientas realizan un análisis automatizado del contenido, un sitio web o una aplicación, para identificar problemas de accesibilidad. Utilizan algoritmos y reglas predefinidas para detectar posibles incumplimientos de estándares de accesibilidad.

2. Verificación de cumplimientos de estándares: Las herramientas de diagnóstico de accesibilidad evalúan si el contenido cumple con estándares y pautas específicas, como las Directrices de Accesibilidad para el Contenido Web (WCAG). Estas herramientas pueden realizar un análisis en busca de elementos que no cumplen con los criterios establecidos en los estándares.

3. Simulación de experiencias de usuario: Algunas herramientas pueden simular diferentes experiencias de usuario, como la navegación con un lector de pantalla, la navegación utilizando únicamente el teclado en lugar de un mouse e incluso simulación de distintas situaciones de discapacidad relacionadas con el contraste de colores y daltonismo. 

4. Pruebas manuales: Algunas herramientas también pueden incluir opciones para realizar pruebas manuales guiadas. Esto implica que los testers revisen y prueben la aplicación para identificar situaciones de accesibilidad que pueden no ser detectados automáticamente.

5. Informes y recomendaciones: Las herramientas de diagnóstico de accesibilidad generan informes que resumen los problemas encontrados y proporcionan recomendaciones sobre cómo corregirlos. Estos informes pueden incluir descripciones detalladas de los problemas, su ubicación en la página y sugerencias para solucionarlos.

¿Qué es WAVE Accessibility Evaluation Tool?

WAVE es una herramienta de evaluación de accesibilidad web desarrollada por WebAIM. Ofrece una versión gratuita que se puede utilizar, sin embargo, también hay una versión premium llamada WAVE API que requiere una suscripción de pago para acceder a funcionalidades adicionales en comparación a la versión gratuita.

¿Para qué sirve la herramienta WAVE?

WAVE es una extensión de navegador que proporciona informes detallados sobre la accesibilidad de un sitio web. 

Esta herramienta evalúa diversos aspectos de la accesibilidad web, como la estructura semántica del contenido, el contraste de color, la navegación con teclado, la disponibilidad de alternativas textuales para elementos multimedia, entre otros. Además, proporciona recomendaciones y sugerencias para corregir los problemas de accesibilidad detectados.

La herramienta puede comparar el contenido digital con las pautas de accesibilidad establecidas en la WCAG (Web Content Accessibility Guidelines). La WCAG es un conjunto de estándares y recomendaciones internacionales desarrollados por el World Wide Web Consortium (W3C) para garantizar la accesibilidad web.

La WCAG se divide en diferentes niveles de conformidad: A (el nivel más básico), AA (nivel intermedio) y AAA (nivel más alto). Estas pautas establecen una serie de criterios y recomendaciones específicas para que el contenido digital sea accesible para una amplia gama de usuarios, incluyendo situaciones de discapacidad visuales, auditivas, cognitivas, motoras, entre otras. 

Actualmente WAVE es compatible con las pautas de accesibilidad web WCAG 2.1. Esta pauta se basa en la versión WCAG 2.0 y amplía sus criterios de accesibilidad para abordar más casos y situaciones. 

WAVE identifica una variedad de problemas e inconvenientes de accesibilidad dentro de una aplicación o sitio web. Estos pueden ser , por ejemplo, falta de textos alternativos en imágenes, contraste deficiente entre color de texto y fondo, etiquetas ausentes en elementos interactivos, estructura de encabezados incorrecta, enlaces ambiguos o poco descriptivos. A su vez, los informes de WAVE proporcionan todo el detalle específico sobre cada problema, su importancia e impacto en la accesibilidad y sugerencias de cómo corregirlos.

Pasos básicos para utilizar WAVE

1. Instalación: WAVE está disponible como una extensión para varios navegadores, como Google Chrome y Mozilla Firefox. Para su descarga, se encuentra en la tienda de extensiones de los navegadores correspondientes, es suficiente con hacer click en “Agregar” o “Instalar” para agregar la extensión al navegador.

wave evaluation tool

2. Acceso a WAVE: Una vez instalada la extensión, aparecerá un nuevo icono en la barra de herramientas del navegador.

3. Evaluación de accesibilidad: Se debe ingresar a la página que se desea analizar y hacer click derecho sobre la misma. Luego, hacer click en el botón “WAVE this page” para que WAVE inicie el proceso de evaluación de accesibilidad.

accessibility wave tool

4. Resultados de la evaluación: Una vez completada la evaluación, WAVE genera un panel detallado en la parte izquierda de la pantalla, donde muestra los problemas de accesibilidad encontrados durante el análisis. Dicho panel, se presenta en una vista dividida, donde el sitio web se muestra del lado derecho y los problemas de accesibilidad se resaltan y enumeran del otro lado.

accessibility

Para obtener más información sobre los problemas específicos basta con hacer click en ellos.

screenshot wave
5. Explorar problemas y soluciones: Una vez examinados los problemas de accesibilidad identificados por WAVE y luego de hacer click en cada uno de ellos para obtener más información, la herramienta proporciona información sobre el tipo de problema, una descripción del mismo, qué normas incumple y recomendaciones sobre cómo solucionarlo. Para esto, se debe hacer click en el botón “reference”.

screenshot wave accessibility

6. Aplicar las mejoras: Para esto, se puede usar la sección del panel “How to fix it” de WAVE, abordando los problemas uno por uno, siguiendo las recomendaciones proporcionadas por WAVE. Esta herramienta permite revisar cada problema individualmente.

Pautas para interpretar los resultados de WAVE

A continuación se nombran algunas pautas para interpretar los resultados del análisis:

  • Iconos de errores y advertencias: WAVE utiliza iconos visuales para representar los errores y advertencias encontrados en el contenido. Los errores se representan con un círculo rojo y las advertencias con un triángulo amarrillo. Estos iconos indican los problemas que necesitan atención.
  • Descripciones y mensajes de error: Al hacer click en los iconos de error o advertencia, se mostrarán descripciones y mensajes detallados sobre el problema específico encontrado. Estos mensajes brindan información sobre el error, su impacto en la accesibilidad y posibles soluciones.
  • Elementos resaltados: WAVE resalta los elementos problemáticos en el contenido al agregar un subrayado o un borde de color alrededor de ellos. Esto te permite identificar rápidamente los elementos que necesitan atención y corregirlos.
  • Paneles de resultados: WAVE muestra los resultados en paneles desplegables, donde se proporciona información más detallada sobre los errores y advertencias encontradas. Estos paneles incluyen una descripción del problema, una lista de elementos afectados y enlaces a recursos adicionales para obtener más información.
  • Opciones de filtrado: Utilizar las opciones de filtrado de WAVE para mostrar solo los errores, solo las advertencias o ambos tipos de problemas. Esto permite enfocarse en un tipo específico de problema o ver todos los problemas juntos.
  • Navegación por el informe: WAVE presenta los resultados en un informe estructurado, lo que permite navegar fácilmente a través de los problemas encontrados. 

Clasificación de los resultados de WAVE

A continuación se presenta la clasificación de los resultados obtenidos por la herramienta luego de evaluar la página.

accessibility

  • Errores: Los errores rojos son problemas que no cumplen con los estándares WCAG y puede afectar a usuarios con distintas capacidades.
  • Errores de contraste: Se refiere al texto que no cumple con los estándares de contraste de WCAG.
  • Alertas: Estos son elementos que pueden ocasionar problemas, y es necesario interpretarlos y determinar si su impacto es relevante o no.
  • Características: Son elementos que, si se utilizan correctamente, pueden mejorar la accesibilidad. Es importante verificar que se estén utilizando de manera adecuada.
  • Elementos estructurales: Se utilizan para identificar los componentes estructurales de una página. Observar estas estructuras puede ayudar a identificar problemas que pueden afectar la accesibilidad, como un pie de página ubicado incorrectamente o la omisión de encabezados.
  • ARIA: Se utiliza para identificar el uso de atributos de ARIA. Es importante tener en cuenta que, cuando se utilizan correctamente, los atributos ARIA mejoran la accesibilidad. Sin embargo, cuando se utilizan de manera incorrecta, pueden disminuir la accesibilidad de una página.

Conclusiones

La accesibilidad web es de vital importancia en la actualidad para que todas las personas, independientemente de sus capacidades, puedan acceder y utilizar el contenido en línea de manera efectiva.

Las herramientas de evaluación de accesibilidad como WAVE, desempeñan un papel crucial al proporcionar una forma rápida y eficiente de verificar la accesibilidad de los sitios y las aplicaciones web.

La capacidad de verificar la accesibilidad rápidamente es fundamental para los desarrolladores, diseñadores web y testers, ya que les permite identificar y corregir problemas de accesibilidad de manera oportuna. WAVE realiza un análisis exhaustivo de las páginas web y genera un reporte detallado con los problemas encontrados, lo que permite abordar los errores de manera rápida y eficiente.

Una de las razones por las que WAVE es una buena herramienta para evaluar la accesibilidad es su amplio alcance. No solo verifica el cumplimiento de las pautas de accesibilidad web establecidas por el W3C, si no que también identifica una variedad de problemas comunes, como imágenes sin texto alternativo, etiquetas de formulario incorrectas, estructura de encabezados inadecuada, contraste deficiente, entre otras. 

Esto garantiza una evaluación integral de la accesibilidad y ayuda a abordar una amplia gama de problemas. Además, la capacidad de WAVE para resaltar visualmente los elementos problemáticos directamente en la página facilita la identificación y la corrección de errores.

En resumen, WAVE es una herramienta valiosa y efectiva para evaluar la accesibilidad web. Al utilizar herramientas como esta, podemos trabajar hacia un entorno más inclusivo, donde todos los usuarios puedan disfrutar del contenido de manera equitativa y sin barreras.