Accessibility in React Applications

React Zurich Meetup – April 2019

João Figueiredo
@lucalanca
Why should we care about a11y?
1 It affects more people than you think.
1.3 billion people with disabilities.
1 It affects more people than you think.
1.3 billion people with disabilities.

2 It will become mandatory.

In some countries or fields, it already is.
1 It affects more people than you think.
1.3 billion people with disabilities.

2 It will become mandatory.

In some countries or fields, it already is.

3 It’s not as hard as you think.

Web Technologies and Tools are getting better.
The current state of the web.
The WebAIM Million
An automated accessibility analysis of the top 1,000,000 home pages.
The WebAIM Million
An automated accessibility analysis of the top 1,000,000 home pages.

30% can be verified with automation.

The WebAIM Million
An automated accessibility analysis of the top 1,000,000 home pages.

30% can be verified with automation.

97.8% pages with accessibility failures.

The WebAIM Million
An automated accessibility analysis of the top 1,000,000 home pages.

30% can be verified with automation.

97.8% pages with accessibility failures.

+10.1% errors in React websites.

We are preventing people
from using our websites.
We need to do way better.
What’s in for today

1 Structure Patterns

2 Interaction Patterns

3 Application Patterns
Structural
Patterns

1
 DEMO TIME

Landmarks
They guide screen readers through the website.
HTML5 Role
 HTML5 Role

<header /> banner *

* Does not apply if descendant of article, aside, main, or section.

 HTML5 Role

<header /> banner *

<main /> main

* Does not apply if descendant of article, aside, main, or section.

** Requires labelling (more on that later).
 HTML5 Role

<header /> banner *

<main /> main

<footer /> contentinfo

* Does not apply if descendant of article, aside, main, or section.

 HTML5 Role

<header /> banner *

<main /> main

<footer /> contentinfo

<nav /> navigation

* Does not apply if descendant of article, aside, main, or section.

 HTML5 Role

<header /> banner *

<main /> main

<footer /> contentinfo

<nav /> navigation

<section /> region **

* Does not apply if descendant of article, aside, main, or section.

** Requires labelling (more on that later).
 HTML5 Role

<header /> banner *

<main /> main

<footer /> contentinfo

<nav /> navigation

<section /> region **

<form /> form

* Does not apply if descendant of article, aside, main, or section.

** Requires labelling (more on that later).
 HTML5 Role

<header /> banner *

<main /> main

<footer /> contentinfo

<nav /> navigation

<section /> region **

<form /> form

<aside /> complementary

* Does not apply if descendant of article, aside, main, or section.

** Requires labelling (more on that later).
 HTML5 Role

<header /> banner *

<main /> main

<footer /> contentinfo

<nav /> navigation

<section /> region **

<form /> form

<aside /> complementary

search

* Does not apply if descendant of article, aside, main, or section.

** Requires labelling (more on that later).
HTML5 is a good starting point.
header, main and footer roles
are automatically inferred.
Override when the tag is not
enough.
 Label nav when there is more
than one in a page.

* using “Secondary Navigation” is redundant.

Visually, a search field doesn’t have
a label but we still need to add it.
You can use other elements as labels,
when they are also visible on the page.
Forms
The thing everyone hates.

Some tips on how to make them better

for visually-impaired users.
1. Always be labelling those inputs.
1. Always be labelling those inputs.

You can label an input by wrapping it in a

label with text.
1. Always be labelling those inputs.

An alternative is to explicitly connect a label via htmlFor

and id attributes.
1. Always be labelling those inputs.
Even if your designer didn’t put it there.

Your username
Even if your designer didn’t put it there.

Your username
Even if your designer didn’t put it there.

Your username
2. Don’t forget to also label forms.
Decorative link icons

See all Attendees

Decorative link icons

See all Attendees

Icon-only links

FOLLOW US ON
Icon-only links

FOLLOW US ON
Interaction
Patterns

2
Form Validation
Form Validation

Formik is a package to handle form validation.

1. Associate inputs with their error elements.
2. Show errors as the user types.
3. OR, show errors when the user finishes.

Emphasize the importance of the message and causes screen readers

to interrupt their current tasks to read aloud this message.
Icon Toggles
Icon Toggles
Icon Toggles
Icon Toggles
Icon Toggles
Application
Patterns

3
Routing
DEMO TIME
Routing Focus Management
When the new page mounts, focus on its outer container.
Routing Focus Management
When the new page mounts, focus on its outer container.
Routing Focus Management
When the new page mounts, focus on its outer container.
Routing Focus Management
When the new page mounts, focus on its outer container.
Routing Focus Management
When the new page mounts, focus on its outer container.
Notifications
Notifications

https://cdn.dribbble.com/users/115601/screenshots/4825044/shopping-bag.g

new content will be announced without user interaction.

Flash Messages
Your information was updated.

https://cdn.dribbble.com/users/115601/screenshots/4825044/shopping-bag.g
Flash Messages
Your information was updated.

Have a region of the website for these messages.

Flash Messages
Your information was updated.

Mark icon as decorative.

Flash Messages
Your information was updated.

Provide text alternative.

Flash Messages
Your information was updated.

Only announce newly added content.

That’s all we got time for today.
aditus.io
I’ll be sharing accessibility tips over the next months.