Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Web Design
  2. Accessibility

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

by
Length:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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.
Running Lighthouse via the Chrome developer tools
Ejecutar Lighthouse a través de las herramientas para desarrolladores de Chrome.

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 results for ThemeForest search page
Los resultados de Lighthouse para la página de búsqueda de ThemeForest.

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.

Pa11y results page
página de resultados pa11y.

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.

Koa11y interface
Interfaz de 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.
Enabling the accessibility panel in Firefox developer tools
Habilitar el panel de accesibilidad en las herramientas para desarrolladores de Firefox.

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.

Firefox accessibility inspector
Inspector de accesibilidad de Firefox

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:

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:

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.

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.

ThemeForest home page as seen by someone with Achromatopsia
Página de inicio de ThemeForest vista por alguien con monocromatismo.

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.

ThemeForest homepage seen in inverse color
Página de inicio de ThemeForest vista con los colores invertidos.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.