La herramienta de accesibilidad web Wave es gratuita y de código abierto y ayuda a los desarrolladores/as a crear sitios web y aplicaciones accesibles para todos/as. La herramienta utiliza una combinación de pruebas automáticas y manuales para identificar problemas de accesibilidad, como texto no accesible, elementos que no se pueden navegar con el teclado, y contenido que no se puede ver con lectores de pantalla.
Cómo usar la herramienta de accesibilidad Wave
Para usar la herramienta de accesibilidad Wave, primero debemos descargarla e instalarla. La herramienta está disponible para Windows, macOS y Linux. Una vez que hayamos instalado la herramienta, podemos comenzar a escanear nuestro sitio web o aplicación.
A continuación, abriremos la herramienta y escribiremos la URL del sitio web o aplicación que deseamos escanear. Luego, haremos clic en el botón «Escanear».
La herramienta comenzará a escanear la web o aplicación y mostrará un informe de los problemas de accesibilidad que encuentre. El informe incluye información sobre el tipo de problema, la ubicación del problema y una sugerencia para solucionar el problema.
Problemas de accesibilidad comunes
Algunos de los problemas de accesibilidad comunes que la herramienta de accesibilidad Wave puede identificar incluyen:
- Texto no accesible: El texto no accesible es texto que no se puede leer con un lector de pantalla. Puede incluir texto que no tiene un atributo de «alt» para imágenes o texto que está en un formato que no puede ser leído por un lector de pantalla.
- Elementos que no se pueden navegar con el teclado: Los elementos que no se pueden navegar con el teclado son elementos que no se pueden seleccionar o interactuar con usando solo el teclado. Incluye botones, menús y enlaces.
- Contenido que no se puede ver con lectores de pantalla: Se trata de un contenido que no se puede representar en texto. Incluye imágenes, videos y contenido multimedia.
Cómo usar la herramienta de accesibilidad Wave
Para instalar la herramienta de accesibilidad Wave, habría que seguir estos pasos:
- Iríamos al sitio web de la herramienta de accesibilidad Wave: https://wave.webaim.org/.
- Buscaríamos la extensión del navegador desde el que queremos trabajar y al clicar nos llevaría a la web store. Yo en este caso me he dirigido a Chrome y desde aquí le daré al botón de añadir a Chrome.
- Ahora la veríamos en el apartado de extensiones y la activaríamos.
- Una vez que ya hemos instalado la herramienta, abriremos la web que queremos analizar y haremos clic en la extensión de Wave.
- Una vez finalizada la evaluación, WAVE muestra un panel detallado en la parte izquierda de la pantalla, donde recoge los problemas de accesibilidad encontrados durante el análisis. Este 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 al otro lado.
Podemos obtener información detallada de cada uno de los problemas específicos haciendo click en cada uno de ellos.
- Exploración de inconvenientes y soluciones: Después de analizar los problemas de accesibilidad señalados por WAVE y hacer clic en cada uno para obtener detalles adicionales, la herramienta suministra información acerca del tipo de problema, una descripción detallada, las normas incumplidas y sugerencias para abordarlos. Para acceder a esta información, es necesario hacer clic en el botón «reference».
- Implementar las mejoras: Esto se logra utilizando la sección «“How to fix it”» en el panel de WAVE, abordando los problemas de uno en uno y siguiendo las recomendaciones proporcionadas por la herramienta. WAVE facilita la revisión detallada de cada problema de manera individual.
En cuanto a la clasificación de los resultados de Wave podemos encontrar diferentes alertas:
- Errores: Los errores rojos son problemas que no cumplen con los estándares WCAG (Web Content Accessibility Guidelines) y puede afectar a usuarios con distintas capacidades. En este caso hay errores de bajo contraste, botones vacíos sin texto de valor o enlaces que no contienen textos.
- Errores de contraste: Se refiere al texto que no cumple con las directrices de contraste de WCAG.
- Alertas: Estos son elementos que pueden ocasionar problemas, como longitud de los textos alternativos de imágenes, problemas con los títulos, etc.
- 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.
Un atributo ARIA consiste en un conjunto adicional de información que permite mediante tecnología, proporcionar ayuda adicional como dictados por voz y guías auditivas al consultar una página web
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.
Cómo solucionar los problemas de accesibilidad
Una vez que hayas identificado los problemas de accesibilidad puedes comenzar a solucionarlos siguiendo las sugerencias que proporciona la herramienta de accesibilidad Wave.
Si no estás seguro sobre cómo solucionar un problema de accesibilidad, puedes contactar con nuestro equipo expertos en diseño web para optimizar al máximo tu sitio.
Conclusión
La herramienta de accesibilidad Wave es una herramienta útil para los desarrolladores/as que desean crear sitios web y aplicaciones accesibles para todos/as. La herramienta es gratuita y de código abierto, por lo que es una opción asequible para cualquier desarrollador/a.