A presentation at React Conf in in Henderson, NV, USA by Brittany Feenstra
Accessibility is a Marathon Not a Sprint React Conf 2019 Brittany Feenstra - Developer at Formidable
React Conf 2019 @brittanyirl
React Conf 2019 @brittanyirl
React Conf 2019 @brittanyirl
React Conf 2019 @brittanyirl
React Conf 2019 @brittanyirl
React Conf 2019 @brittanyirl
There’s no time Our designs are limited or evolving Users don’t need it The documentation is a doozy
html suxxx and styling is the worst. I’m a REACT developer, I have component libraries I can use. I don’t want to admit weakness.
Semantic HTML > Aria > Patterning, Navigation, Focus Traps
Best Practices
DEMO with heading outline
<button> do your heavy lifting for you!(video)
Axe by Deque Lighthouse (used by chrome in dev tools) This heading maps outliner for chrome This make your browser color blind This allows you to experience different visual impairments on screen Color contrast analyzer NPM link to eslint-plugin-jsx-a11y Writing Automated Tests for Accessibility (Marcy Sutton) My demo code sandbox
● A11y Project: great blog about accessibility, helps easily communicate concepts ● React’s docs on accessiblity have lots of links ● Checklist for making your UI accessible ● Stripe’s blog for choosing colors ● HTML semantics explained by internetingishard ● Web semantics by MDN ● Reakit library of accessible react components ● WCAG - the official accessibility standards ● Any course by Marcy Sutton on A11y you can find! ● How to use voice over for safari ● A11y podcasts ● Twitter accounts I follow for a11y content (no particular order): @knitcodemonkey, @standardista, @marcysutton, @dboudreau, @thebillygregory, @karlgroves, @heydonworks, @aspittel, @resource11
Accessibility standards are often first on the chopping block in the face of deadlines. We’ve all been on projects where we write that dreaded TODO comment leaving an accessibility audit for later. Let’s unpack why that is and start changing it! We’ll look at common tools, patterns and starter-tips that can help us shed light on accessibility in a new, less daunting way. In this talk we’ll discuss how to get started with accessibility—the metaphorical salad and power walking of a11y that can prepare us to run an accessibility marathon, if you will.
The following resources were mentioned during the presentation or are useful additional information.
Outline your headings
Alter your browser view to be various ways people see color
Experience various visual impairments in browser
To make sure your color contrast meets standards
Amazing blog post by Marcy Sutton
great blog about accessibility, helps easily communicate concepts
@knitcodemonkey, @standardista, @marcysutton, @dboudreau, @thebillygregory, @karlgroves, @heydonworks, @aspittel, @resource11
for free. You
can too.