1.
Accessibility: A Practical
Getting-Started Guide
Josh Justice
ReactATL July 21, 2020
1 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

2.
Accessibility (A11y)
…the practice of making your websites usable by as many people as
possible. We traditionally think of this as being about people with
disabilities, but the practice of making sites accessible also benefits
other groups such as those using mobile devices, or those with slow
network connections.
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/
What_is_accessibility
2 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

3.
3 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

4.
A11y:
A lot to learn.
Hard to know how to
get started.
4 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

5.
Purpose:
To give you what you need to
get started improving the
a11y of your app.
5 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

6.
About Me
Josh Justice
Twitter: @CodingItWrong
Email: jjustice@bignerdranch.com
6 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

7.
7 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

8.
Outside-In Frontend
Development
https://outsidein.dev
8 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21,
2020 - @codingitwrong

9.
Caveat: I'm an a11y
beginner.
9 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

10.
A11y: Three Steps
1. Read background information.
2. Run automated tools.
3. Manually test.
10 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

11.
A11y: Three Steps
1. Read background information.
2. Run automated tools.
3. Manually test.
11 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

12.
https://reactjs.org/docs/accessibility.html
12 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

13.
• Start with docs if you like to read the instructions, or want the big
picture.
• Start with automated tools if you like to dive right in, and learn just-
in-time.
13 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

14.
A11y: Three Steps
1. Read background information.
2. Run automated tools.
3. Manually test.
14 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

15.
2. Run automated a11y
tools.
• eslint-react-jsx-a11y
• react-axe
• Siteimprove Accessibility Checker
15 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

16.
2. Run automated a11y
tools.
• eslint-react-jsx-a11y
• react-axe
• Siteimprove Accessibility Checker
16 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

17.
eslint-react-jsx-a11y
https://www.npmjs.com/package/eslint-plugin-jsx-a11y
• Runs as part of your ESLint setup
• Some rules enabled by default in Create React App apps
• Warnings in editor
• A lot it can't catch
17 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

18.
eslint-react-jsx-a11y
DEMO
18 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

19.
2. Run automated a11y
tools.
• eslint-react-jsx-a11y
• react-axe
• Siteimprove Accessibility Checker
19 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

20.
react-axe
https://www.npmjs.com/package/react-axe
• axe is general accessibility tools
• react-axe hooks in to React (dev environment only)
• Warnings in browser web console
20 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

21.
react-axe
DEMO
21 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

22.
2. Run automated a11y
tools.
• eslint-react-jsx-a11y
• react-axe
• Siteimprove Accessibility Checker
22 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

23.
Siteimprove Accessibility
Checker
https://bit.ly/siteimprove-ext
• Chrome extension
• Run it on-request on a page
23 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

24.
Siteimprove Accessibility
Checker
DEMO
24 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

25.
2. Run automated a11y
tools.
• eslint-react-jsx-a11y
• react-axe
• Siteimprove Accessibility Checker
25 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

26.
A11y: Three Steps
1. Read background information.
2. Run automated tools.
3. Manually test.
26 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

27.
3. Manually test.
• Keyboard-only usage
• VoiceOver
27 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

28.
3. Manually test.
• Keyboard-only usage
• VoiceOver
28 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

29.
Keyboard-Only Usage
• Visible focus indicators
• Tab order
29 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

30.
Keyboard-Only Usage
DEMO
30 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

31.
3. Manually test.
• Keyboard-only usage
• VoiceOver
31 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

32.
VoiceOver
• A macOS and iOS screen reader technology.
• Shows you how non-sighted users experience your app.
32 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

33.
33 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

34.
34 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

35.
35 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

36.
VoiceOver
DEMO
36 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

37.
VoiceOver
https://www.apple.com/voiceover/info/guide/_1121.html
37 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

38.
3. Manually test.
• Keyboard-only usage
• VoiceOver
38 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

39.
A11y: Three Steps
1. Read background information.
2. Run automated tools.
3. Manually test.
39 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

40.
40 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

41.
Questions?
41 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong

42.
Thanks!
@codingitwrong
me@codingitwrong.com
Links:
- React Accessibility
- eslint-react-jsx-a11y
- react-axe
- SiteImprove Accessibility Checker
- VoiceOver
42 Accessibility: A Practical Getting-Started Guide - Josh Justice - ReactATL July 21, 2020 - @codingitwrong