Good intentions gone bad

JSHeroes 2024

Transcript

1. Good Intentions, Gone Bad Eva Ferreira – JS Heroes, 2024
2. Not another “This is how you do a11y” talk Good intentions gone bad. @evaferreira92
3. @evaferreira92 YOU DON’T HAVE TO LEARN FROM YOUR MISTAKES IF YOU CAN LEARN FROM MINE
4. WARNING This is a work in progress. I will, most definitely, keep on messing up. @evaferreira92
5. 5 lessons 1. Accessibility personas 2. Simplest things first 3. People mean well 4. Test, test, test! 5. Accessibility ownership
6. Lesson 1
7. A11y personas Understanding disabilities and assistive technologies
8. What is a disability? “Accessibility is for blind people”
9. Disability: A failed interaction between the environment and a person with a medical condition.
10. Diverse group of people, a wide range of needs. @evaferreira92
11. 16% of world’s population. has a permanent disability.
14. Assistive Technologies * Also known as AT
15. The most common assistive technology is…
16. Keyboard Visual and motor impairments
17. Lesson 2
18. Simplest things tend to have the biggest impact. I went ALL IN into aria and screen readers
19. I wrongly prioritized screen readers over keyboard navigation Begin your a11y journey with simple and impactful changes. @evaferreira92
20. Simple, impactful • Color contrast • Semantics • Keyboard navigation  Outlines  Skip navigation links @evaferreira92
21. Outlines
23. @evaferreira92
24. But they are ugly! Yes, they are!
25. https://www.sarasoueidan.com Use outlines on your focusable elements
26. https://mabl.com
27. Skip navigation links
28. https://www.sarasoueidan.com
29. Skip navigation links
31. Lots impact, Low code.
32. Sometimes simple is not that simple “Code debt just called; it wants your happiness back.” @evaferreira92
33. Prioritize Impact and easy to solve @evaferreira92
34. Prioritize 1. Big impact, easy to solve 2. Mix with small impact, easy to solve Ideal for Fridays 3. Big impact, hard to solve 4. Small impact, hard to solve @evaferreira92
35. Lesson 3
36. People mean well … Most of the time.
37. Story time! Story Number 1
38. Aria-label all the things! The Infobae & the React Testing Library stories @evaferreira92
39. @evaferreira92
40. Code
41. Non Screen Reader users
42. Screen Reader users
43. aria-label overrides values
44. Screen Reader users
45. Why?
46. @evaferreira92 https://webaim.org/blog/aria-cause-solution https://webaim.org/blog/aria-cause-solution
47. Story time! Story Number 2
48. “Every image should have an alt text!” @evaferreira92
49. 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
50. https://www.w3.org/WAI/tutorials/images/decision-tree
51. The SEO in the room And the story of how every image had the same alt text. @evaferreira92
52. Lesson 4
53. Testing correctly Having 98/100 on Lighthouse won’t save you.
56. Manual tests @evaferreira92
57. Manual tests • Keyboard navigation • Screen readers @evaferreira92
58. What do we test? We test users’ stories. @evaferreira92
59. Can a user with [assistive technology] do [action]? @evaferreira92
60. 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
61. Test for people. @evaferreira92
62. Automated tests WCAG
64. 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
65. Of course, always aim for no errors. @evaferreira92
66. Automated tools • Axe-core by Deque • Lighthouse • Mabl • Storybook add-on @evaferreira92
67. Automated tools • Add these to your pipelines • CI/CD should fail when requirements are not met. @evaferreira92
68. How many websites do you think pass with no errors? 5%? 20%? 40%?
69. 4.1% WebAIM Million, 2024 https://webaim.org/projects/million
71. @evaferreira92
72. “It’s just too hard.” @evaferreira92
73. @evaferreira92
74. Lesson 5
75. A11y ownership Team effort
78. You cannot out-code bad design. Accessibility is a team effort.
79. So, You made a mistake. What happens when you mess up.
80. You try again! * Easier said than done @evaferreira92
82. Mistakes are: • Temporal • Localized • Changeable
83. You don’t need to be always right. Aim for making new mistakes instead of repeating old ones. @evaferreira92
84. You need to try, you need to care. @evaferreira92
85. Thanks! @evaferreira92