Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testeando Accesibilidad Web

Testeando Accesibilidad Web

Cuando desarrollamos una nueva web, a menudo ponemos mucho trabajo en el diseño, para que sea bonita y utilizable. En otras palabras, queremos que nuestra web sea efectiva, eficiente y satisfactoria para el usuario. Pero muchas veces no pensamos en la experiencia del usuario para las personas con discapacidades, incluidas las personas con discapacidades relacionadas con la edad.

Accesibilidad web (a11y) significa que las personas con discapacidad pueden percibir, comprender, navegar e interactuar con sitios web y herramientas, y que pueden contribuir igualmente sin barreras ”. (Fuente: W3C - Web Accessibility Initiative). Nuestro papel como desarrolladores frontend es crear interfaces claras para que las personas entiendan y se preocupen por los datos, independientemente de sus discapacidades o impedimentos, pero lo que nosotros, los desarrolladores, a menudo olvidamos es asegurarnos de que el código que escribimos siga las "Web Content Accessibility Guidelines" (WCAG), y la única forma de lograrlo es mediante test, ya sea manuales o automatizados.

Los tests automatizados de accesibilidad web pueden liberar a nuestro equipo de QA de los tests manuales de cada parte de nuestra aplicación, pero, no pueden hacer que nuestro sitio sea accesible de forma automática y mágica.

Deberíamos usar tests automatizados de accesibilidad web como un paso de un proceso de tests más grande. No olvidemos que solo se puede detectar automáticamente del 20% al 50% de todos los problemas de accesibilidad.

---
Adrián Bolonio
Web: http://adrianbolonio.com
Twitter: https://twitter.com/bolonio
GitHub: https://github.com/bolonio
Linkedin: https://www.linkedin.com/in/adrianbolonio

Adrián Bolonio

March 16, 2021
Tweet

More Decks by Adrián Bolonio

Other Decks in Programming

Transcript

  1. Accesibilidad Web (a11y) Accesibilidad Web significa que sitios web, herramientas

    y tecnologías están diseñadas y desarrolladas de tal manera que las personas con discapacidades pueden usarlas. Más concretamente, las personas pueden: percibir, comprender, navegar, interactuar, y contribuir con/a la Web. La Accesibilidad web abarca todas las discapacidades que afectan al acceso a la Web, incluyendo: auditivas, cognitivas, neurológicas, físicas, del habla, y visuales. Fuente: W3C (https://www.w3.org/WAI/fundamentals/accessibility-intro/es#what)
  2. Accesibilidad Web (a11y) Tienes que pulsar en el botón en

    la esquina superior derecha Tienes que pulsar en el icono que parece una rueda de motor
  3. A nivel mundial, se estima que aproximadamente viven con alguna

    forma de deficiencia visual. 2019 7700 millones 1300 millones de personas Fuente: https://www.who.int/es/news-room/fact-sheets/detail/blindness-and-visual-impairment Accesibilidad Web (a11y)
  4. Testeando Accesibilidad Web Fuente: https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/ Los test automatizados de accesibilidad

    web pueden liberar a nuestro equipo de QA de hacer test manuales de cada parte de nuestra aplicación, pero, no son magia!! Deberíamos considerar los test automatizados de accesibilidad web como un paso dentro de un proceso de testeo mayor. No podemos olvidar que solo el 20-50% de los problemas de accesibilidad pueden ser detectados mediante test automatizados.
  5. react-axe Instalar como dependencia Asegurate de importar la librería solo

    si no estás en producción, porque expondrías todas esas vulnerabilidades públicamente. Se asignará un nivel de gravedad para cada vulnerabilidad: • Minor • Moderate • Serious • Critical Esta herramienta ejecutará test de accesibilidad en el código de tu aplicación React utilizando la biblioteca de pruebas axe-core, y podrás ver los resultados en la consola de las herramientas de desarrollo del navegador.
  6. eslint-plugin-jsx-a11y Si utilizas eslinter, puedes incluir reglas de accesibilidad añadiendo

    eslint-plugin-jsx- a11y en el archivo .eslintrc.json Podrás ver las vulnerabilidades directamente en tu editor de código.
  7. eslint-plugin-jsx-a11y Podrás ver las vulnerabilidades también en la terminal. Si

    utilizas eslinter, puedes incluir reglas de accesibilidad añadiendo eslint-plugin-jsx- a11y en el archivo .eslintrc.json Podrás ver las vulnerabilidades directamente en tu editor de código.
  8. Usa las herramientas de desarrollo del navegador Al inspeccionar un

    elemento HTML y hacer click en el cuadro de color delante del código HEX en el inspector de CSS, aparecerá una ventana flotante con información de ese color. Verás la puntuación del ratio de contraste de ese color con el fondo donde esté colocado (texto, botón, …etc) y podrás ver si pasa los test AA y AAA de ratio de color.
  9. Usa las herramientas de desarrollo del navegador Al inspeccionar un

    elemento HTML y hacer click en el cuadro de color delante del código HEX en el inspector de CSS, aparecerá una ventana flotante con información de ese color. Verás la puntuación del ratio de contraste de ese color con el fondo donde esté colocado (texto, botón, …etc) y podrás ver si pasa los test AA y AAA de ratio de color.
  10. jest-axe Instalar como dependencia Podrás ver el resultado de los

    test en la terminal. Puedes escribir tus test unitarios usando ReactDOMServer y jest-axe para encontrar vulnerabilidades. https://github.com/nickcolley/jest-axe
  11. @axe-core/cli Puedes ejecutar el comando axe en la terminal seguido

    de la URL del sitio web que quieras testear. Instalar globalmente en tu máquina.
  12. pa11y Instalar globalmente en tu máquina. Puedes ejecutar el comando

    pa11y en la terminal seguido de la URL del sitio web que quieras testear.
  13. pa11y Puedes ejecutar el comando pa11y en la terminal para

    testear tu sitio web en localhost Puedes ejecutar el comando pa11y en la terminal seguido de la URL del sitio web que quieras testear. Instalar globalmente en tu máquina.
  14. pa11y-ci Instalar globalmente en tu máquina. Al ejecutar el comando

    pa11y-ci en la terminal, se buscará el archivo de configuración (.pa11yci.json) en el directorio raíz. Cada URL en el archivo de configuración puede ser un objeto y especificar configuraciones de pa11y.
  15. pa11y-ci Instalar globalmente en tu máquina. Al ejecutar el comando

    pa11y-ci en la terminal, se buscará el archivo de configuración (.pa11yci.json) en el directorio raíz. Cada URL en el archivo de configuración puede ser un objeto y especificar configuraciones de pa11y.
  16. Lighthouse Instalar globalmente en tu máquina. Puedes ejecutar el comando

    lighthouse en la terminal (con --view) seguido de la URL del sitio web que quieras testear. Al terminar se abrirá el informe.
  17. Testeando manualmente axe chrome extension https://www.deque.com/axe/ ARC Toolkit https://www.paciellogroup.com/toolkit/ Accessibility

    Insights WAVE https://wave.webaim.org/ NoCoffee https://accessibilityinsights.io/ https://accessgarage.wordpress.com/
  18. 1. Testea tu código mientras desarrollas 2. Usa las herramientas

    de desarrollo 3. Automatiza tus test de accesibilidad 4. Haz tests manuales y de simulación Testeando Accesibilidad Web
  19. “No se trata solo de que los usuarios discapacitados puedan

    acceder a tu sitio web, se trata de que todos puedan acceder a tu sitio web” - Trenton Moss