“YOU ARE CURRENTLY ON WEB CONTENT, to enter the web area, press Control-Option-Shift-Down Arrow.” — If that sounds foreign to you… Congratulations! You’ve got a whole new world of accessibility to discover! These issues are often invisible to product designers and developers alike, but they don’t have to be. At Slack, we made a few mistakes in the past, but have since learned to bake in accessibility early on in our development process. We’ve discovered that building a product that’s accessible for everyone has resulted in an improved experience for all. We'll share how we failed, so you don't have to. Let’s break down some of the gotchas and hiccups we faced along the way to overcome any biases we might have in building our JavaScript products. Starting from scratch? Don’t worry, we’ll cover practical steps to consider from deciding on initial component architecture to testing your final product with aXe. All with plenty of horror stories along the way.

1. How to Fail
at Accessibility
! by @chuttersnap
@feesh

2. @feesh
she / her
bit.ly/feesh-jsconfhi

3. DESIGN SYSTEM

4. @feesh

9. @feesh

10. Accessibility bugs are
broken functionality
and product blockers.
@feesh

11. @feesh

12. bit.ly/feesh-jsconfhi

13. @feesh

14. How to Fail
at Accessibility
! by @chuttersnap
notV
@feesh

15. Testing
@feesh

16. Building
@feesh

17. Process
@feesh

18. Testing
@feesh

19. W
WCAG
Web Content Accessibility Guidelines
bit.ly/feesh-jsconfhi

20. W
WCAG grades
by @zaginteractive
bit.ly/feesh-jsconfhi

21. Types of
Assistive
Technology

22. Color
contrast
Keyboard
interaction
UI
Zoom
Screenreader
support

23. Color
contrast

24. Normal text
Large text
UI element

25. bit.ly/feesh-jsconfhi

26. @feesh

27. UI
Zoom

28. @feesh

29. Keyboard
interaction

30. @feesh

31. @feesh
May 16,
2019

32. @feesh

33. Focus ring
@feesh

34. @feesh

35. Screenreader
support

36. Enable
bit.ly/feesh-jsconfhi

37. @feesh

38. @feesh

40. Building
@feesh

41. @feesh

42. @feesh

43. @feesh

44. <TextInput/>
<Menu>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</Menu>
@feesh

45. <TextInput/>
<Menu>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</Menu>
<Select>
<TextInput/>
<OptionsList/>
</Select>
@feesh

46. W
ARIA
Accessible Rich Internet Applications
bit.ly/feesh-jsconfhi

47. HTML
ARIA
Browser
AAPI
Assistive
technology
@feesh

49. @feesh

50. @feesh

51. @feesh

52. @feesh

54. Process
@feesh

55. @feesh

56. @feesh

57. @feesh

58. @feesh

59. DESIGN SYSTEM
@feesh

60. @feesh

62. DESIGN SYSTEM
@feesh

63. @feesh

64. @feesh
bit.ly/feesh-jsconfhi
accessibilitystarter
kit

66. @feesh

67. @feesh

68. @feesh

69. @feesh

70. @feesh

73. We have to design for
the extremes of human ability;
the average user is a myth.
- George Zamfir
@feesh

74. by @microsoft accessible design
@feesh

75. ! by @austinchan
@feesh

76. @feesh
bit.ly/feesh-jsconfhi