Tales of Accessibility Failures

Shift Conference, Croatia / September 2022

Transcript

1. Tales of
   Accessibility Failures
   Eva Ferreira – Shift Conference, 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
   Accessibility mistakes, failed assumptions and myths I mistakenly believed in.
   @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. A11y personas
   Understanding disabilities and assistive technologies
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 15%
    of world’s population.
    has a permanent disability.
    @evaferreira92
    

    View Slide

11. View Slide

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

    View Slide

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

    View Slide

14. Simple, impactful
    • Color contrast
    • Semantics
    • Labels on forms
    • Keyboard navigation
     Outlines 💅
     Skip navigation links
    @evaferreira92
    

    View Slide

15. Outlines
    

    View Slide

16. @evaferreira92
    

    View Slide

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

    View Slide

18. https://developer.mozilla.org
    

    View Slide

19. Skip navigation links
    

    View Slide

20. View Slide

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

    View Slide

22. Prioritize
    Impact and easy to solve
    @evaferreira92
    

    View Slide

23. Impact,
    use common sense
    @evaferreira92
    

    View Slide

24. Easy to solve,
    depends on the codebase
    @evaferreira92
    

    View Slide

25. 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

26. People mean well
    … Most of the time.
    

    View Slide

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

    View Slide

28. @evaferreira92
    

    View Slide

29. @evaferreira92
    

    View Slide

30. @evaferreira92
    

    View Slide

31. @evaferreira92
    

    View Slide

32. Why?
    

    View Slide

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

    View Slide

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

    View Slide

35. 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

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

    View Slide

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

    View Slide

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

    View Slide

39. View Slide

40. View Slide

41. Manual tests
    @evaferreira92
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. 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

46. Test for people.
    @evaferreira92
    

    View Slide

47. Automated tests
    @evaferreira92
    

    View Slide

48. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. No
    gate-keeping
    allowed.
    @evaferreira92
    

    View Slide

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

    View Slide

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

    View Slide

57. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. Thanks!
    @evaferreira92
    

    View Slide