Accessibility is a Marathon Not a Sprint React Conf 2019 Brittany Feenstra - Developer at Formidable

What we're discussing

React Conf 2019 @brittanyirl

What We’re Discussing

React Conf 2019 @brittanyirl

Our Goal

React Conf 2019 @brittanyirl

Accessibility Starting Points

React Conf 2019 @brittanyirl

What’s the problem?

React Conf 2019 @brittanyirl

Why we “save” accessibility for later

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.

You know what else is intimidating?

So a11y & marathons?

How do we train?

1. We learn to run

Breaking down the process

Semantic HTML > Aria > Patterning, Navigation, Focus Traps

Best Practices

HTML Semantics

Which one is easier to read?

Which one is easier to read?

<h3>Heading Structures</h3>

Using our headings better

DEMO with heading outline

BUTTONS PSA

Divs as Buttons

Better Divs as Buttons

Just Use Buttons!

Button guidelines to remember

  1. Buttons are action items in your app
  2. Use anchors not buttons when clicking/entering sends the user to a new view
  3. Let <button> do your heavy lifting for you!
  4. Give your clickable elements meaningful text to display

Writing Legible Forms

Writing Legible Forms

Bad Form demo

A good form demo

A good form demo

Forms

Aria 101

Aria 101

Aria State

Aria State

Aria Properties

Aria Properties

When you use Aria, ask yourself why

Next steps

  1. Reference patterns
  2. Navigation regions
  3. Focus Traps
  4. Best Practices

2. We get better nutritional habits

Nutritional habits

If you use one tool here, use Axe

HeadingsMap for strong html outlines

What great outlines look like

What OK outlines look like

What a sad outline looks like

Tools to look at your UI in different ways

Look at your app differently

Look at your app differently

Lint and Test

3. Cross-train and Stretch

3. Cross-train and Stretch

Testing out our earlier forms Bad form vs good form

(video)

We’re ready!

Thanks!

Resources used in this slidedeck

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

Accessibility Resources & References

● 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