Rescue the Dead Horse

A talk about Accessibility Technical Debt

Transcript

1. Rescue the Dead Horse
   Eva Ferreira – Shift Conference, 2021
   

   View Slide

2. First trip since Feb. 2020
   

   View Slide

3. Hi!
   I’m Eva :)
   

   View Slide

4. Dead horse?
   @evaferreira92
   

   View Slide

5. Beating a
   Dead horse
   @evaferreira92
   

   View Slide

6. To waste time and effort trying to do
   something that is impossible.
   “
   ”
   Mr. Merriam-Webster
   

   View Slide

7. Tech Debt.
   

   View Slide

8. TECH DEBT.
   

   View Slide

9. Memes
   as a coping mechanism
   

   View Slide

10. @evaferreira92
    

    View Slide

11. @evaferreira92
    

    View Slide

12. @evaferreira92
    

    View Slide

13. @evaferreira92
    

    View Slide

14. @evaferreira92
    

    View Slide

15. @evaferreira92
    

    View Slide

16. @evaferreira92
    

    View Slide

17. View Slide

18. What is
    Technical Debt?
    And… what isn’t Technical Debt?
    

    View Slide

19. ¿Bad Code?
    

    View Slide

20. Bad Code = Lack
    Lack of knowledge, lack of caring, lack of quality control
    

    View Slide

21. Bad code is usually
    more harmful
    than Techical Debt
    @evaferreira92
    

    View Slide

22. ¿Tech Debt?
    

    View Slide

23. Technical Debt is a
    conscious Trade-off
    

    View Slide

24. It happens when we choose to gain something
    otherwise-unattainable immediately in return
    for paying it back (with interest) later on.
    “
    ”
    Mr. Harry Roberts
    

    View Slide

25. It happens when we choose to gain something
    otherwise-unattainable immediately in return
    for paying it back (with interest) later on.
    “
    ”
    Mr. Harry Roberts
    

    View Slide

26. The Theming Example
    

    View Slide

27. !important all the things
    

    View Slide

28. This is my garbage
    and I’m proud of it.
    @evaferreira92
    

    View Slide

29. @evaferreira92
    

    View Slide

30. @evaferreira92
    

    View Slide

31. Congrats!
    You have just created
    Technical Debt!
    Now… will you repay?
    @evaferreira92
    

    View Slide

32. View Slide

33. View Slide

34. Consequences of not repaying
    • Accumulates interests
    • Snowball effect
    • Team members are sad
    @evaferreira92
    

    View Slide

35. Repaying
    Tech Debt
    The Accessibility Part
    

    View Slide

36. An annual accessibility analysis of the top 1,000,000 home pages
    

    View Slide

37. How many passed a
    basic WCAG test?
    

    View Slide

38. WCAG includes (but not limited to)
    • Alternative texts for images
    • AA Contrast ratios
    • Labels for inputs
    • Document language attribute
    • Buttons and links with discernable texts
    @evaferreira92
    

    View Slide

39. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?
    

    View Slide

40. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?
    

    View Slide

41. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?
    

    View Slide

42. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?
    

    View Slide

43. Only 2,6% passed.
    @evaferreira92
    

    View Slide

44. Most common errors
    • Lack of alternative texts for images
    • Non-compliance color contrasts
    • Lack of labels for inputs
    • Lack of document language attribute
    • Buttons and links without discernable texts
    @evaferreira92
    

    View Slide

45. 
    

    View Slide

46. Fun facts
    “Despite being 2021, 14,501 home pages had and 341 home
    pages had blinking content ( or text-decoration: blink).”
    https://webaim.org/projects/million/
    

    View Slide

47. Why does this happen?
    Lack of accessibility is more often than not, a conscious trade-off.
    

    View Slide

48. View Slide

49. How do we
    begin repaying?
    Repaying accessibility technical debt
    

    View Slide

50. Current Tech Debt
    Improvements to current a11y bugs
    

    View Slide

51. Spare time to improve it
    • Small, well-defined tasks
     15% of sprint
    • Fix bugs
    • Rebuild broken components
    • Build new features
     Skip navigation, etc.
    @evaferreira92
    

    View Slide

52. Track and document
    @evaferreira92
    

    View Slide

53. View Slide

54. You can’t repay what
    you don’t acknowledge
    @evaferreira92
    

    View Slide

55. Avoid creating more
    (Accessibility Technical Debt)
    

    View Slide

56. Long term warning!
    The following recommendations might take soooome time
    

    View Slide

57. Cultural change
    in the company
    You need people who care.
    @evaferreira92
    

    View Slide

58. Update processes
    • Automated tests
     Built into CI
    • Manual tests
    • QA Process
    • Internal demos with Screen Reader
    @evaferreira92
    

    View Slide

59. Design Systems
    • Fix a11y here!
     Colors, contrast, font-sizes, font families
     Labels and alts
    • Whatever what Brad Frost and Jina Anne say
    @evaferreira92
    

    View Slide

60. View Slide

61. https://bradfrost.com/blog/post/enforcing-accessibility-best-practices-
    with-automatically-generated-ids/
    by Brad Frost
    

    View Slide

62. @evaferreira92
    

    View Slide

63. Hire Front-end developers
    @evaferreira92
    

    View Slide

64. Hire Front-end developers
    @evaferreira92
    

    View Slide

65. No code can fix
    bad design.
    If the design is inaccessible, so is the website.
    

    View Slide

66. Bad UX flows
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. @evaferreira92
    

    View Slide

71. Team work
    It’s not 1999 with webmasters doing the whole thing anymore
    

    View Slide

72. View Slide

73. You can’t avoid
    Tech Debt
    But you CAN avoid putting the burden on users with disabilities
    

    View Slide

74. Thank you!
    @evaferreira92
    

    View Slide