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

Transcript

1. Testeando Accesibilidad Web @bolonio Adrián Bolonio Encontrando vulnerabilidades de accesibilidad en tu sitio web
2. Madrid (España) Adrián Bolonio Engineering Team Lead & Frontend Developer @bolonio #a11y Advocate
3. Accesibilidad (a11y)
4. Accesibilidad (a11y) 11 a y
5. Accesibilidad (a11y) ccessibilit 11 10 9 8 7 6 5 4 3 2 1 a y
6. Accesibilidad (a11y)
7. Accesibilidad (a11y)
8. Accesibilidad Web (a11y)
9. 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)
10. 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
11. 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)
12. Desarrollando sitios webs accesibles
13. Desarrollando sitios webs accesibles https://www.youtube.com/watch?v=GyXkH5ZmSfk
14. Testeando Accesibilidad Web
15. 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.
16. Testea tu código mientras desarrollas
17. He creado una aplicación en React con 3 componentes y muchos errores de accesibilidad.
18. He creado una aplicación en React con 3 componentes y muchos errores de accesibilidad.
19. Testea tu código mientras desarrollas react-axe https://github.com/dequelabs/react-axe eslint-plugin-jsx-a11y https://github.com/evcohen/eslint-plugin-jsx-a11y
20. 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.
21. 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.
22. 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.
23. www.adrianbolonio.com/es/accesibilidad-con-storybook
24. Usa las herramientas de desarrollo del navegador
25. 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.
26. 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.
27. Escribe tus propios test unitarios
28. 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
29. Automatiza tus test de accesibilidad
30. Test automatizados @axe-core/cli https://github.com/dequelabs/axe-core-npm/tree/develop/packages/cli pa11y http://pa11y.org/ Lighthouse https://developers.google.com/web/tools/lighthouse/
31. @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.
32. 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.
33. 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.
34. 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.
35. 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.
36. 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.
37. Automatizando los test de accesibilidad de tu código fuente con GitHub Actions
38. GitHub Actions
39. GitHub Actions
40. GitHub Actions
41. GitHub Actions
42. www.adrianbolonio.com/es/accesibilidad-github-actions
43. Haz tests manuales y de simulación
44. 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/
45. axe chrome extension https://www.deque.com/axe/
46. ARC Toolkit https://www.paciellogroup.com/toolkit/
47. Accessibility Insights https://accessibilityinsights.io/
48. WAVE (web accessibility evaluation tool) https://wave.webaim.org/
49. NoCoffee - Vision Simulator https://accessgarage.wordpress.com/
50. 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
51. https://github.com/bolonio/testing-web-a11y
52. https://speakerdeck.com/bolonio
53. www.adrianbolonio.com
54. https://www.edx.org/course/web-accessibility-introduction Introduction to Web Accessibility
55. “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
56. La Accesibilidad Web NO es una “funcionalidad”
57. Gracias @bolonio www.adrianbolonio.com