Building Accessible Components

Originally presented at React Boston on September 24, 2017

Transcript

1. Building Accessible Components Ari Rizzitano, edX React Boston September 24, 2017
2. Hello Ari Rizzitano @arizzitano frontend team lead High quality education for all We’re hiring!
4. Accessibility 101 React Best Practices Developer Toolkit
5. Accessibility 101
6. The degree to which a product, device, or environment is available to a person.
7. Why?
8. The web
9. The web NOT ALWAYS ACCESSIBLE
10. Assistive technology helps bridge the gap
11. Input
12. Input
13. Output
14. Output text
15. Keyboard in, text out. But how?
16. Web standards Let’s follow them as closely as we follow new ECMAScript proposals
17. Web Content Accessibility Guidelines (WCAG) 2.0 is our accessibility rulebook.
18. WAI-ARIA Authoring Practices is our cookbook.
19. For every generic component you build, check the WAI-ARIA authoring practices. Chances are, there’s a section there for your use case.
20. Get familiar with aria attrs
21. Learn about roles and what they mean for document semantics.
22. Keyboard events: which keys should do what and where?
23. Master tab nav & tabIndex
24. Color contrast Color contrast Color contrast Color contrast Color contrast Color contrast Color contrast Color contrast
25. 1. Keyboard in 2. Text out 3. Follow standards 4. Profit.
26. React Best Practices
27. Genericize as much accessible functionality as possible. A component library is a great way to do this.
28. Best practice for focus is best practice for perf
29. An example Todos Learn about WCAG Your text here…
30. Change the state Todos Learn about WCAG Profile this app
31. Entire List Rerenders Todos Learn about WCAG Profile this app Your text here…
32. Focus Lost! Todos Learn about WCAG Profile this app Your text here…
33. Only render what you need Todos Learn about WCAG Profile this app Your text here…
34. For programmatic focus management, 1. use refs 2. use componentDidUpdate
35. Trap focus when appropriate
36. On route changes, inform users of a change of context. react-document-title works well here
37. Enforce best practices
38. Full Name Enter your name… Enter your full legal name as it appears on your government ID. This field is required. Required Props
39. Enforce best practices
40. Use HOCs to reuse behavior & markup e.g. for different input types
41. Developer Toolkit
42. audits code review manual acceptance testing unit tests linting Accessibility Testing
43. Accessibility linting
44. eslint-plugin-jsx-a11y
45. Solid unit tests (this one is just common sense)
46. Immediate linter feedback helps devs internalize best practices
47. Dogfood! Test and interact with your app the way people with disabilities might use it.
48. Navigate using only the keyboard
49. Side benefit: keyboard nav is faster than mouse (also you feel like a hacker)
50. Use a screen reader! It’s as easy as ⌘-F5 On a Mac. On Windows, use NVDA or JAWS. On Linux, use Orca.
51. Browser extensions Explore the accessibility tree, check color contrast, audit your code while working on it
52. Accessibility audit automation
53. Recommendations: react-axe or Google Lighthouse (but there are plenty of other good ones out there)
54. React’s toolchain facilitates building accessible applications.
55. Accessibility is easy to implement up front, but harder to retrofit. Kind of like tests.
56. Web accessibility is built on best practices that benefit everyone
57. Thank you. @arizzitano