Accessibility is a marathon, not a sprint

Slide 1

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

Slide 2

What we're discussing

React Conf 2019 @brittanyirl

Slide 3

What We’re Discussing

React Conf 2019 @brittanyirl

Slide 4

Our Goal

React Conf 2019 @brittanyirl

Slide 5

Accessibility Starting Points

React Conf 2019 @brittanyirl

Slide 6

What’s the problem?

React Conf 2019 @brittanyirl

Slide 7

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

Slide 8

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.

Slide 9

You know what else is intimidating?

Slide 10

So a11y & marathons?

Slide 11

How do we train?

Slide 12

1. We learn to run

Slide 13

Breaking down the process

Semantic HTML > Aria > Patterning, Navigation, Focus Traps

Best Practices

Slide 14

HTML Semantics

Slide 15

Which one is easier to read?

Slide 16

Which one is easier to read?

Slide 17

<h3>Heading Structures</h3>

Slide 18

Using our headings better

DEMO with heading outline

Slide 19

BUTTONS PSA

Slide 20

Divs as Buttons

Slide 21

Better Divs as Buttons

Slide 22

Just Use Buttons!

Slide 23

Button guidelines to remember

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

Slide 24

Writing Legible Forms

Slide 25

Writing Legible Forms

Slide 26

Bad Form demo

Slide 27

A good form demo

Slide 28

A good form demo

Slide 29

Forms

Slide 30

Aria 101

Slide 31

Aria 101

Slide 32

Aria State

Slide 33

Aria State

Slide 34

Aria Properties

Slide 35

Aria Properties

Slide 36

When you use Aria, ask yourself why

Slide 37

Next steps

Reference patterns
Navigation regions
Focus Traps
Best Practices

Slide 38

2. We get better nutritional habits

Slide 39

Nutritional habits

Slide 40

If you use one tool here, use Axe

Slide 41

HeadingsMap for strong html outlines

Slide 42

What great outlines look like

Slide 43

What OK outlines look like

Slide 44

What a sad outline looks like

Slide 45

Tools to look at your UI in different ways

Slide 46

Look at your app differently

Slide 47

Look at your app differently

Slide 48

Lint and Test

Slide 49

3. Cross-train and Stretch

Slide 50

3. Cross-train and Stretch

Slide 51

Testing out our earlier forms Bad form vs good form

(video)

Slide 52

We’re ready!

Slide 53

Thanks!

Slide 54

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

Slide 55

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 oﬃcial 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