Rescue the Dead Horse

A talk about Accessibility Technical Debt

1. Rescue the Dead Horse Eva Ferreira – Shift Conference, 2021
2. First trip since Feb. 2020
3. Hi! I’m Eva :)
4. Dead horse? @evaferreira92
5. Beating a Dead horse @evaferreira92
6. To waste time and effort trying to do something that is impossible. “ ” Mr. Merriam-Webster
7. Tech Debt.
8. TECH DEBT.
9. Memes as a coping mechanism
10. @evaferreira92
11. @evaferreira92
12. @evaferreira92
13. @evaferreira92
14. @evaferreira92
15. @evaferreira92
16. @evaferreira92
18. What is Technical Debt? And… what isn’t Technical Debt?
19. ¿Bad Code?
20. Bad Code = Lack Lack of knowledge, lack of caring, lack of quality control
21. Bad code is usually more harmful than Techical Debt @evaferreira92
22. ¿Tech Debt?
23. Technical Debt is a conscious Trade-off
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
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
26. The Theming Example
27. !important all the things
28. This is my garbage and I’m proud of it. @evaferreira92
29. @evaferreira92
30. @evaferreira92
31. Congrats! You have just created Technical Debt! Now… will you repay? @evaferreira92
34. Consequences of not repaying • Accumulates interests • Snowball effect • Team members are sad @evaferreira92
35. Repaying Tech Debt The Accessibility Part
36. An annual accessibility analysis of the top 1,000,000 home pages
37. How many passed a basic WCAG test?
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
39. At least 20%? @evaferreira92 At least 10%? At least05%?
40. At least 20%? @evaferreira92 At least 10%? At least05%?
41. At least 20%? @evaferreira92 At least 10%? At least05%?
42. At least 20%? @evaferreira92 At least 10%? At least05%?
43. Only 2,6% passed. @evaferreira92
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
45. <html lang="es">
46. Fun facts “Despite being 2021, 14,501 home pages had <marquee> and 341 home pages had blinking content (<blink> or text-decoration: blink).” https://webaim.org/projects/million/
47. Why does this happen? Lack of accessibility is more often than not, a conscious trade-off.
49. How do we begin repaying? Repaying accessibility technical debt
50. Current Tech Debt Improvements to current a11y bugs
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
52. Track and document @evaferreira92
54. You can’t repay what you don’t acknowledge @evaferreira92
55. Avoid creating more (Accessibility Technical Debt)
56. Long term warning! The following recommendations might take soooome time
57. Cultural change in the company You need people who care. @evaferreira92
58. Update processes • Automated tests  Built into CI • Manual tests • QA Process • Internal demos with Screen Reader @evaferreira92
59. Design Systems • Fix a11y here!  Colors, contrast, font-sizes, font families  Labels and alts • Whatever what Brad Frost and Jina Anne say @evaferreira92
61. https://bradfrost.com/blog/post/enforcing-accessibility-best-practices- with-automatically-generated-ids/ by Brad Frost
62. @evaferreira92
63. Hire Front-end developers @evaferreira92
64. Hire Front-end developers @evaferreira92
65. No code can fix bad design. If the design is inaccessible, so is the website.
66. Bad UX flows
70. @evaferreira92
71. Team work It’s not 1999 with webmasters doing the whole thing anymore
73. You can’t avoid Tech Debt But you CAN avoid putting the burden on users with disabilities
74. Thank you! @evaferreira92