Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Accessible Components
Search
Ari Rizzitano
September 24, 2017
Programming
1
450
Building Accessible Components
Originally presented at React Boston on September 24, 2017
Ari Rizzitano
September 24, 2017
Tweet
Share
More Decks by Ari Rizzitano
See All by Ari Rizzitano
The Future of Frontend Development in Open edX
arizzitano
1
220
What the -dux?
arizzitano
0
210
Rock 'em Socket.IO Bots
arizzitano
1
680
Other Decks in Programming
See All in Programming
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
430
Git Rebase
bkuhlmann
11
1.6k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
310
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
470
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
420
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.7k
Goのエラースタックトレースの歴史と今後
sonatard
9
1.7k
Fragment Composition of GraphQL
quramy
13
1.4k
Deep Dive into React Stream/Serialize
mugi_uno
3
430
Site Reliability Engineering for GMO
pyama86
8
1.1k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Atom: Resistance is Futile
akmur
260
25k
Statistics for Hackers
jakevdp
790
220k
The Language of Interfaces
destraynor
151
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Web Components: a chance to create the future
zenorocha
306
41k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Design by the Numbers
sachag
274
18k
Transcript
Building Accessible Components Ari Rizzitano, edX React Boston September 24,
2017
Hello Ari Rizzitano @arizzitano frontend team lead High quality education
for all We’re hiring!
None
Accessibility 101 React Best Practices Developer Toolkit
Accessibility 101
The degree to which a product, device, or environment is
available to a person.
Why?
The web
The web NOT ALWAYS ACCESSIBLE
Assistive technology helps bridge the gap
Input
Input
Output
Output text
Keyboard in, text out. But how?
Web standards Let’s follow them as closely as we follow
new ECMAScript proposals
Web Content Accessibility Guidelines (WCAG) 2.0 is our accessibility rulebook.
WAI-ARIA Authoring Practices is our cookbook.
For every generic component you build, check the WAI-ARIA authoring
practices. Chances are, there’s a section there for your use case.
Get familiar with aria attrs
Learn about roles and what they mean for document semantics.
Keyboard events: which keys should do what and where?
Master tab nav & tabIndex
Color contrast Color contrast Color contrast Color contrast Color contrast
Color contrast Color contrast Color contrast
1. Keyboard in 2. Text out 3. Follow standards 4.
Profit.
React Best Practices
Genericize as much accessible functionality as possible. A component library
is a great way to do this.
Best practice for focus is best practice for perf
An example Todos Learn about WCAG Your text here…
Change the state Todos Learn about WCAG Profile this app
Entire List Rerenders Todos Learn about WCAG Profile this app
Your text here…
Focus Lost! Todos Learn about WCAG Profile this app Your
text here…
Only render what you need Todos Learn about WCAG Profile
this app Your text here…
For programmatic focus management, 1. use refs 2. use componentDidUpdate
Trap focus when appropriate
On route changes, inform users of a change of context.
react-document-title works well here
Enforce best practices
Full Name Enter your name… Enter your full legal name
as it appears on your government ID. This field is required. Required Props
Enforce best practices
Use HOCs to reuse behavior & markup e.g. for different
input types
Developer Toolkit
audits code review manual acceptance testing unit tests linting Accessibility
Testing
Accessibility linting
eslint-plugin-jsx-a11y
Solid unit tests (this one is just common sense)
Immediate linter feedback helps devs internalize best practices
Dogfood! Test and interact with your app the way people
with disabilities might use it.
Navigate using only the keyboard
Side benefit: keyboard nav is faster than mouse (also you
feel like a hacker)
Use a screen reader! It’s as easy as ⌘-F5 On
a Mac. On Windows, use NVDA or JAWS. On Linux, use Orca.
Browser extensions Explore the accessibility tree, check color contrast, audit
your code while working on it
Accessibility audit automation
Recommendations: react-axe or Google Lighthouse (but there are plenty of
other good ones out there)
React’s toolchain facilitates building accessible applications.
Accessibility is easy to implement up front, but harder to
retrofit. Kind of like tests.
Web accessibility is built on best practices that benefit everyone
Thank you. @arizzitano