Tales of Accessibility Failures

Transcript

1. Tales of
   Accessibility Failures
   Eva Ferreira – SmashingConf, 2022
   

   View Slide

2. Hi, I’m Eva!
   Front-end Engineer at mabl
   Google Developer Expert & CSSConf Argentina organizer
   @evaferreira92
   

   View Slide

3. Not another
   “This is how you do a11y”
   talk
   Good intentions gone bad.
   @evaferreira92
   

   View Slide

4. @evaferreira92
   YOU DON’T HAVE
   TO LEARN FROM
   YOUR MISTAKES
   IF YOU CAN
   LEARN FROM MINE
   

   View Slide

5. ⚠️WARNING⚠️
   This is a work in progress. I will, most definitely, keep on messing up.
   @evaferreira92
   

   View Slide

6. Lesson 1
   

   View Slide

7. A11y personas
   Understanding disabilities and assistive technologies
   

   View Slide

8. What is a disability?
   “Accessibility is for blind people”
   

   View Slide

9. Disability:
   A failed interaction between
   the environment and a person
   with a medical condition.
   

   View Slide

10. Diverse group of people,
    a wide range of needs.
    @evaferreira92
    

    View Slide

11. 15%
    of world’s population.
    has a permanent disability.
    

    View Slide

12. View Slide

13. View Slide

14. Assistive
    Technologies
    * Also known as AT
    

    View Slide

15. Hearing
    Hearing aids Captions
    

    View Slide

16. Visual
    Preference of keyboard over mouse
    

    View Slide

17. Screen readers
    • JAWS
    • NVDA
    • Narrator
    • VoiceOver
    • Orca
    

    View Slide

18. Mobility
    Preference of keyboard over mouse
    

    View Slide

19. Mobility
    Sip-and-puff Eye tracking
    

    View Slide

20. Mobility
    Sip-and-puff Eye tracking
    💸
    

    View Slide

21. Mobility
    Switches
    

    View Slide

22. View Slide

23. Lesson 2
    

    View Slide

24. Simplest things
    tend to have the
    biggest impact.
    I went ALL IN into aria and screen readers
    

    View Slide

25. I wrongly prioritized
    screen readers over
    keyboard navigation
    Begin your a11y journey with simple and impactful changes.
    @evaferreira92
    

    View Slide

26. Simple, impactful
    • Color contrast
    • Semantics
    • Keyboard navigation
     Outlines 💅
     Skip navigation links
    @evaferreira92
    

    View Slide

27. Outlines
    

    View Slide

28. View Slide

29. @evaferreira92
    

    View Slide

30. But they are ugly!
    Yes, they are!
    

    View Slide

31. https://www.sarasoueidan.com
    Use outlines on your focusable elements
    

    View Slide

32. https://mabl.com
    

    View Slide

33. Skip navigation links
    

    View Slide

34. https://www.sarasoueidan.com
    

    View Slide

35. View Slide

36. Skip navigation links
    

    View Slide

37. View Slide

38. Lots impact,
    Low code.
    

    View Slide

39. Sometimes simple
    is not that simple
    “Code debt just called; it wants your happiness back.”
    @evaferreira92
    

    View Slide

40. Prioritize
    Impact and easy to solve
    @evaferreira92
    

    View Slide

41. Prioritize
    • Big impact, easy to solve
    • Mix with small impact, easy to solve
     Ideal for Fridays 💃
    • Big impact, hard to solve
    • Small impact, hard to solve
    @evaferreira92
    

    View Slide

42. Lesson 3
    

    View Slide

43. People mean well
    … Most of the time.
    

    View Slide

44. Aria-label
    all the things!
    The Infobae & the React Testing Library stories
    @evaferreira92
    

    View Slide

45. @evaferreira92
    

    View Slide

46. @evaferreira92
    

    View Slide

47. @evaferreira92
    

    View Slide

48. @evaferreira92
    

    View Slide

49. Why?
    

    View Slide

50. @evaferreira92
    https://webaim.org/blog/aria-cause-solution
    

    View Slide

51. “Every image should
    have an alt text!”
    @evaferreira92
    

    View Slide

52. Rules for alternative texts
    • The alt attribute is compulsory
    • It can be empty if the image is decorative (alt=“”)
    • Do not be redundant
    • If it has an action, describe the action, not the image
    @evaferreira92
    

    View Slide

53. https://www.w3.org/WAI/tutorials/images/decision-tree
    

    View Slide

54. The SEO
    in the room
    And the story of how every image had the same alt text.
    @evaferreira92
    

    View Slide

55. Lesson 4
    

    View Slide

56. Testing correctly
    Having 98/100 on Lighthouse won’t save you.
    

    View Slide

57. View Slide

58. View Slide

59. Manual tests
    @evaferreira92
    

    View Slide

60. Manual tests
    • Axe Developer tools
    • WAVE
    • Keyboard navigation
    • Screen readers
    @evaferreira92
    

    View Slide

61. What do we test?
    We test users’ stories.
    @evaferreira92
    

    View Slide

62. Can a user with
    [assistive technology]
    do [action]?
    @evaferreira92
    

    View Slide

63. Test users’ stories
    • Can a user with keyboard navigation - create an account?
    • Can a user with a screen reader - add a product to the cart?
    • Can a user watch this video - using captions?
    @evaferreira92
    

    View Slide

64. Test for people.
    @evaferreira92
    

    View Slide

65. Automated tests
    WCAG
    

    View Slide

66. View Slide

67. WCAG
    • Set of rules created by W3C a long time ago.
    • Standard in the industry
    • What gives the foundation for a11y laws all around
    the globe
    • Different success criteria depending on target
    audience, target country, type of company, etc.
    @evaferreira92
    

    View Slide

68. Of course,
    always
    aim for no errors.
    @evaferreira92
    

    View Slide

69. How many websites
    do you think pass
    with no errors?
    5%? 20%? 40%?
    

    View Slide

70. 3.2%
    WebAIM Million, 2022
    https://webaim.org/projects/million
    

    View Slide

71. Automated tools
    • Axe-core by Deque
    • Lighthouse
    • Mabl
    • Storybook add-on
    @evaferreira92
    

    View Slide

72. Automated tools
    • Add these to your pipelines
    • CI/CD should fail when requirements are not met.
    @evaferreira92
    

    View Slide

73. Lesson 5
    

    View Slide

74. The community
    &
    A11y ownership
    Team effort and gate-keeping
    

    View Slide

75. View Slide

76. View Slide

77. You cannot
    out-code bad design.
    Accessibility is a team effort.
    

    View Slide

78. No
    gate-keeping
    allowed.
    @evaferreira92
    

    View Slide

79. So,
    You made a mistake.
    What happens when you mess up.
    

    View Slide

80. You try again!
    * Easier said than done
    @evaferreira92
    

    View Slide

81. View Slide

82. Mistakes are:
    • Temporal
    • Localized
    • Changeable
    @evaferreira92
    

    View Slide

83. You don’t need
    to be always right.
    Aim for making new mistakes instead of repeating old ones.
    @evaferreira92
    

    View Slide

84. You need to try,
    you need to care.
    @evaferreira92
    

    View Slide

85. Thanks!
    @evaferreira92
    

    View Slide