La accesibilidad de todos los días - HackAcademy

Transcript

1. La Accesibilidad de
   todos los días
   Eva Ferreira – HackAcademy, 2022
   

   View Slide

2. ¡Hola, soy Eva!
   • Front-end engineer
   • Google Developer Expert
   • Creadora de una capa de
   invisibilidad con JavaScript
   

   View Slide

3. Itinerario de hoy
   • Accesibilidad y sus usuarios
   • Tecnología asistida
   • Tests manuales y automáticos
   • Cómo arreglar errores de accesibilidad
   @evaferreira92
   

   View Slide

4. Accessibility
   =
   A11y
   

   View Slide

5. ¿Qué es la
   accesibilidad?
   ¿Qué es una discapacidad?
   @evaferreira92
   

   View Slide

6. Discapacidad:
   Interacción fallida entre
   el ambiente y una persona
   con una condición médica.
   OMS
   

   View Slide

7. ¿Por qué trabajar
   en accesibilidad?
   Porque es parte íntegra de nuestro trabajo.
   @evaferreira92
   

   View Slide

8. Usuarios de
   accesibilidad
   

   View Slide

9. Usuarios de accesibilidad
   • Impedimentos visuales
   • Impedimentos del habla
   • Impedimentos auditivos
   • Impedimentos de mobilidad
   • Condiciones de salud mental
   @evaferreira92
   

   View Slide

10. Grises…
    y otros colores
    +90% de las personas legalmente
    ciegas tienen todavía algo de visión.
    @evaferreira92
    

    View Slide

11. 15%
    de personas en el mundo tienen
    algún tipo de discapacidad.
    

    View Slide

12. 15%
    discapacidades permanentes
    

    View Slide

13. Discapacidades
    temporales y situacionales
    

    View Slide

14. View Slide

15. View Slide

16. Nosotros, en el futuro
    

    View Slide

17. Tecnología asistida
    Mix de hardware y software
    

    View Slide

18. Auditivo
    Hearing aids Captions
    

    View Slide

19. Mobilidad
    Switches
    

    View Slide

20. Mobilidad
    Sip-and-puff Eye tracking
    

    View Slide

21. Mobilidad
    Preferencia de teclado sobre mouse
    

    View Slide

22. Visual
    

    View Slide

23. Visual
    Preferencia de teclado sobre mouse
    

    View Slide

24. Visual
    Lectores de pantalla:
    • JAWS
    • NVDA
    • Narrator
    • VoiceOver
    • Orca
    

    View Slide

25. Testing A11y
    ¿Qué testeamos?
    

    View Slide

26. User stories
    Puede un usuario con [tecnología asistida] realizar [acción]?
    

    View Slide

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
    

    View Slide

28. Tus usuarios son
    humanos, no robots.
    

    View Slide

29. ¡Comencemos!
    

    View Slide

30. Testeando accesibilidad
    • Un sitio bien hecho 💅
    • Uno mal hecho 😿
    @evaferreira92
    

    View Slide

31. Testeando accesibilidad
    • Un sitio bien hecho 💅
     https://developer.mozilla.org
    • Uno mal hecho 😿
     https://www.infobae.com
    @evaferreira92
    

    View Slide

32. Navegación
    por teclado
    Impacto en discapacidades visuales, motrices y en power users.
    @evaferreira92
    

    View Slide

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
    

    View Slide

34. Tab &
    Shift+Tab
    @evaferreira92
    

    View Slide

35. ¿Qué aprendimos?
    • Focus style
    • Skip navigation
    @evaferreira92
    

    View Slide

36. WAVE &
    Axe, by Deque
    Un poco más de automatización
    @evaferreira92
    

    View Slide

37. ¿Qué aprendimos?
    • Algunos falsos positivos
    • La importancia de la semántica
    • Como podemos romper todo con ARIA
    @evaferreira92
    

    View Slide

38. https://webaim.org/blog/aria-cause-solution
    

    View Slide

39. ¿Y qué hago con esto?
    Lo arreglamos.
    

    View Slide

40. Listar y priorizar
    Categorizar por impacto y nivel de dificultad
    @evaferreira92
    

    View Slide

41. Impacto
    ¿Qué tan grave es el issue? ¿Qué tan beneficioso el cambio?
    @evaferreira92
    

    View Slide

42. Nivel de dificultad
    ¯\_(ツ)_/¯
    @evaferreira92
    

    View Slide

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
    

    View Slide

44. A11y es parte
    del día a día
    

    View Slide

45. ¡Gracias!
    @evaferreira92
    

    View Slide