La accesibilidad de todos los días - HackAcademy

Transcript

1. La Accesibilidad de todos los días Eva Ferreira – HackAcademy, 2022
2. ¡Hola, soy Eva! • Front-end engineer • Google Developer Expert • Creadora de una capa de invisibilidad con JavaScript
3. Itinerario de hoy • Accesibilidad y sus usuarios • Tecnología asistida • Tests manuales y automáticos • Cómo arreglar errores de accesibilidad @evaferreira92
4. Accessibility = A11y
5. ¿Qué es la accesibilidad? ¿Qué es una discapacidad? @evaferreira92
6. Discapacidad: Interacción fallida entre el ambiente y una persona con una condición médica. OMS
7. ¿Por qué trabajar en accesibilidad? Porque es parte íntegra de nuestro trabajo. @evaferreira92
8. Usuarios de accesibilidad
9. Usuarios de accesibilidad • Impedimentos visuales • Impedimentos del habla • Impedimentos auditivos • Impedimentos de mobilidad • Condiciones de salud mental @evaferreira92
10. Grises… y otros colores +90% de las personas legalmente ciegas tienen todavía algo de visión. @evaferreira92
11. 15% de personas en el mundo tienen algún tipo de discapacidad.
12. 15% discapacidades permanentes
13. Discapacidades temporales y situacionales
16. Nosotros, en el futuro
17. Tecnología asistida Mix de hardware y software
18. Auditivo Hearing aids Captions
19. Mobilidad Switches
20. Mobilidad Sip-and-puff Eye tracking
21. Mobilidad Preferencia de teclado sobre mouse
22. Visual
23. Visual Preferencia de teclado sobre mouse
24. Visual Lectores de pantalla: • JAWS • NVDA • Narrator • VoiceOver • Orca
25. Testing A11y ¿Qué testeamos?
26. User stories Puede un usuario con [tecnología asistida] realizar [acción]?
27. User stories • Puede un usuario con navegación por teclado realizar crearse una cuenta? • Puede un usuario con un lector de pantalla realizar agregar un producto al carrito? • Puede un usuario ver este vídeo usando captions? @evaferreira92
28. Tus usuarios son humanos, no robots.
29. ¡Comencemos!
30. Testeando accesibilidad • Un sitio bien hecho 💅 • Uno mal hecho 😿 @evaferreira92
31. Testeando accesibilidad • Un sitio bien hecho 💅  https://developer.mozilla.org • Uno mal hecho 😿  https://www.infobae.com @evaferreira92
32. Navegación por teclado Impacto en discapacidades visuales, motrices y en power users. @evaferreira92
33. Objetivos • MDN:  El usuario debe poder navegar por teclado hasta el buscador y buscar el término “JavaScript” • Infobae:  El usuario debe poder navegar por teclado e ingresar a la segunda noticia
34. Tab & Shift+Tab @evaferreira92
35. ¿Qué aprendimos? • Focus style • Skip navigation @evaferreira92
36. WAVE & Axe, by Deque Un poco más de automatización @evaferreira92
37. ¿Qué aprendimos? • Algunos falsos positivos • La importancia de la semántica • Como podemos romper todo con ARIA @evaferreira92
38. https://webaim.org/blog/aria-cause-solution
39. ¿Y qué hago con esto? Lo arreglamos.
40. Listar y priorizar Categorizar por impacto y nivel de dificultad @evaferreira92
41. Impacto ¿Qué tan grave es el issue? ¿Qué tan beneficioso el cambio? @evaferreira92
42. Nivel de dificultad ¯\_(ツ)_/¯ @evaferreira92
43. Priorizar • Mayor impacto, menor trabajo  Priorizar • Menor impacto, menor trabajo  Ideal para viernes de flojera • Mayor impacto, mayor trabajo  Requiere planificación adecuada • Menor impacto, mayor trabajo  Meh
44. A11y es parte del día a día
45. ¡Gracias! @evaferreira92