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.

Código Linting

Otro nivel útil de comprobaciones que utilizamos al escribir código se realiza a través de chequeos del código. Linting nos permite ser alertados automáticamente cuando determinados fragmentos de código son totalmente inaccesibles. Usamos un subconjunto de las reglas de comprobación TypeScript de Microsoft para comprobar nuestro TypeScript. También usamos el paquete eslint-plugin-jsx-a11y para pulir nuestro JavaScript.

Un linter podría advertirme, por ejemplo, que había olvidado incluir una etiqueta alt en la siguiente imagen:

<img href="/images/cute_cat.jpg" />

Otro ejemplo podría ser una advertencia sobre la inclusión de un elemento que podría distraer a aquellos que usan lectores de pantalla:

<marquee>This is distracting content</marquee>

Linting proporciona retroalimentación instantánea que nos permite hacer cambios rápidos a medida que avanzamos para garantizar que el producto final sea lo más accesible posible.

• JavaScript
  Moderna comprobación de errores JavaScript con ESLint
  Dan Wellman

Extensiones del navegador

Utilizamos una serie de extensiones del navegador para obtener una mejor idea de cómo un usuario puede experimentar nuestro sitio a medida que lo creamos, lo que nos permite hacer ajustes a medida que avanzamos. Estas son un par de extensiones destacadas que señalamos como especialmente útiles.

Spectrum

Spectrum te permite ver tu sitio de la misma manera que lo verían aquellos con distintos tipos de daltonismo. Con esto podemos ver partes de nuestro sitio que pueden tener un contraste pobre con respecto a su fondo, o enlaces cuyos estados activos son demasiado similares a sus estados pasivos.

Dark Background and Light Text

Dark Background and Light Text te permite ver tu sitio en modo de alto contraste, un modo que a menudo utilizan aquellos que requieren altos niveles de accesibilidad. Con esto podemos comprobar si partes de nuestro sitio están demasiado desordenadas o son excesivamente pequeñas para ser realmente percibidas en este modo.

VoiceOver de Mac OSX

Este sólo está disponible para aquellos con un Mac, pero va a lo largo de la experiencia de un sitio como lo haría un usuario con baja visión. VoiceOver nos lee el texto seleccionado en el comando. Es necesario acostumbrarse un poco, pero tras haber aprendido, te resultará fácil de usar. En la web, VoiceOver tiene mejor soporte en Safari, pero se puede utilizar con todo sistema operativo Mac OSX.

Habilita VoiceOver con CMD + F5. Una vez habilitado, puedes activar algunas convenientes funciones que encontrarás a través de:

• Preferencias del sistema > Accesibilidad > Habla > Reproducir oralmente el texto seleccionado al pulsar la tecla
• Preferencias del sistema > Accesibilidad > Zoom > Reproducir el texto bajo el cursor

Conclusión

Asegurarse de que tu sitio web es accesible es absolutamente valioso. A menudo se ve como una tarea demasiado complicada, o que se ha postergado demasiado como para poder conseguirlo. Nada de esto es cierto, y ciertamente no es lo que hemos descubierto en Envato. El uso de técnicas y herramientas como las que he descrito anteriormente eliminan en gran medida las dificultades y la labor de descubrir cómo construir un sitio web más accesible, lo que nos proporcionará la confianza de que el producto final será amigable para todos nuestros usuarios.

Aprende más sobre la accesibilidad

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