Cómo comprobamos la accesibilidad en Envato (herramientas y consejos)

Abordar el desafío de crear un sitio web accesible, o hacer accesible un sitio web preexistente, a veces puede ser una tarea complicada. Puede resultar engorroso entender exactamente cómo un usuario con dificultades visuales, por ejemplo, podría usar un sitio web. Naturalmente, puede ser difícil para nosotros llegar a estar completamente satisfechos respecto a la accesibilidad de nuestros sitios.

En este artículo te demostraré que comprobar la accesibilidad no tiene porque ser una tarea enrevesada. Te guiaré a través de las herramientas y los procesos que utilizamos en Envato para mantener nuestras plataformas usables por todos aquellos con cualquier nivel de discapacidad y para garantizar que la accesibilidad esté presente en nuestra mente como algo prioritario cuando ofrecemos nuevas características.

Google Lighthouse

Una de las herramientas más importantes que utilizamos a la hora de valorar nuestra accesibilidad es Google Lighthouse. Lighthouse es una herramienta de evaluación que nos indica hasta qué punto un sitio web cumple con las mejores prácticas del sector, ya sea para mejorar el rendimiento, el SEO, o en nuestro caso, accesibilidad.

Lighthouse se puede ejecutar a través de la interfaz online o a través de las herramientas de desarrollo de Chrome. Una ventaja significativa de usar Lighthouse es que nos permite saber exactamente en qué se basa Google a la hora de decidir qué nivel de accesibilidad cree que posee nuestro sitio.

Para acceder a Lighthouse a través de las herramientas para desarrolladores de Chrome:

1. Abre Chrome.
2. Presiona CMD + Mayús + C para abrir las herramientas de desarrollo.
3. Haz clic en la pestaña Audits.
4. Asegúrate de que la casilla Accessibility esté seleccionada.
5. Pulsa Run audits.

Una vez ejecutado, obtenemos un desglose que señala dónde podría mejorar nuestro sitio para ser más accesible. Por ejemplo, los resultados de la página de búsqueda de ThemeForest se ven así:

Lighthouse nos proporciona un listado de áreas donde nuestra página no se considera accesible, así como una listado de comprobaciones manuales que podemos realizar para garantizar que la accesibilidad sea la mejor posible. Si una comprobación en particular no se entiende con claridad, Lighthouse proporciona enlaces online para leer más sobre lo que se deberíamos hacer.

Conforme al informe anterior deduzco que deberíamos intentar mejorar nuestro contraste de color para atender mejor a las personas con problemas de visión. También veo que debería ser capaz de tabular a través de la página de una manera que tenga sentido en su contexto, además de otras distintas mejoras.

Pa11y

Otra herramienta fantástica que utilizamos en Envato es pa11y (denominada así por la abreviatura comúnmente dada a la accesibilidad, «a11y»). Pa11y nos permite establecer un nivel de especificación de accesibilidad predefinido, Sección 508, WCAG 2.0 A, AA o AAA, y comprobar una página web en base a esas especificaciones.

Cuando se ejecuta, pa11y nos proporciona una lista de las especificaciones de accesibilidad que cumplimos y las que aún no cumplimos, así como una recomendación sobre cómo lograr el cumplimiento de cada estándar. La ventaja de usar pa11y es que nos permite estar absolutamente seguros del cumplimiento de las especificaciones WCAG, y al mismo tiempo nos indica pasos concretos para aumentar nuestra conformidad.

En Envato ejecutamos pa11y automáticamente antes de implementar cualquier nuevo fragmento de código en nuestras plataformas usando pa11y-ci. Sin embargo, pa11y también se puede ejecutar utilizando la aplicación de escritorio Koa11y.

Herramientas para desarrolladores de Firefox

Un área en la que las herramientas para desarrolladores de Firefox sobresalen es en la inspección del nivel de accesibilidad del contenido de nuestro sitio. Esto nos permite no tener que hacer conjeturas si no entendemos cómo un lector de pantalla interpreta nuestro contenido a un usuario.

Para activar el inspector de accesibilidad en Firefox:

1. Abre Firefox.
2. Presiona CMD + Mayús + C para abrir las herramientas de desarrollo.
3. Haz clic en los tres puntos de la esquina superior derecha de la consola para desarrolladores.
4. Selecciona la casilla Accessibility.

Una vez habilitada, tendremos disponible una pestaña de accesibilidad. Esto nos permitirá ver cómo leería en voz alta un lector de pantalla nuestro sitio.

aria-role aparece listado a la izquierda, en este caso, ya se section, link o graphic. No todos los elementos deben tener un nombre, pero el atributo es una buena forma de indicarle algo a un usuario: podemos incluir un nombre asegurándonos de que el contenido textual, una etiqueta de imagen alt o un atributo aria-label estén presentes. También podemos pasar el cursor sobre el rol y hacer que Firefox resalte el elemento correspondiente en el código.

Navegar por este árbol es útil en sí mismo para obtener una comprensión de cómo se ve nuestro sitio web sin nada que nos distraiga del contenido. También es una excelente manera de entender cómo podría aparecer una nueva característica para nuestros usuarios.

Aprende más sobre la accesibilidad

• Guía de accesibilidad web para principiantes John Hartley
• Conceptos básicos de accesibilidad: Diseñar teniendo en cuenta la discapacidad visual Graeme Fulton
• Consejos de accesibilidad para los desarrolladores de temas para WordPress Sami Keijonen
• Guía sobre la accesibilidad en el correo electrónico para principiantes (Lista de verificación + Recursos) Stig Morten Myre