Accessibility is a marathon, not a sprint

A presentation at React Conf in in Henderson, NV, USA by Brittany Feenstra

What we're discussing

What we're discussing

What We’re Discussing

What We’re Discussing

Our Goal

Our Goal

Accessibility Starting Points

Accessibility Starting Points

What’s the problem?

What’s the problem?

Why we “save” accessibility for later

Why we “save” accessibility for later

You know what else is intimidating?

You know what else is intimidating?

So a11y & marathons?

So a11y & marathons?

How do we train?

How do we train?

1. We learn to run

1. We learn to run

Breaking down the process

Breaking down the process

HTML Semantics

HTML Semantics

Which one is easier to read?

Which one is easier to read?

Which one is easier to read?

Which one is easier to read?

<h3>Heading Structures</h3>

<h3>Heading Structures</h3>

Using our headings better

Using our headings better

BUTTONS PSA

BUTTONS PSA

Divs as Buttons

Divs as Buttons

Better Divs as Buttons

Better Divs as Buttons

Just Use Buttons!

Just Use Buttons!

Button guidelines to remember

Button guidelines to remember

Writing Legible Forms

Writing Legible Forms

Writing Legible Forms

Writing Legible Forms

Bad Form demo

Bad Form demo

A good form demo

A good form demo

A good form demo

A good form demo

Forms

Forms

Aria 101

Aria 101

Aria 101

Aria 101

Aria State

Aria State

Aria State

Aria State

Aria Properties

Aria Properties

Aria Properties

Aria Properties

When you use Aria, ask yourself why

When you use Aria, ask yourself why

Next steps

Next steps

2. We get better nutritional habits

2. We get better nutritional habits

Nutritional habits

Nutritional habits

If you use one tool here, use Axe

If you use one tool here, use Axe

HeadingsMap for strong html outlines

HeadingsMap for strong html outlines

What great outlines look like

What great outlines look like

What OK outlines look like

What OK outlines look like

What a sad outline looks like

What a sad outline looks like

Tools to look at your UI in different ways

Tools to look at your UI in different ways

Look at your app differently

Look at your app differently

Look at your app differently

Look at your app differently

Lint and Test

Lint and Test

3. Cross-train and Stretch

3. Cross-train and Stretch

3. Cross-train and Stretch

3. Cross-train and Stretch

Testing out our earlier forms Bad form vs good form

Testing out our earlier forms Bad form vs good form

We’re ready!

We’re ready!

Thanks!

Thanks!

Resources used in this slidedeck

Resources used in this slidedeck

Accessibility Resources &amp; References

Accessibility Resources & References

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.

Resources

The following resources were mentioned during the presentation or are useful additional information.