Creating Accessible React Apps

Scott Vinkle • @svinkle

Can React apps be accessible? 🤔

Yes! 🎉

Children from Charlie Brown cartoon celebrating as baloons fall from the ceiling.

Continue on to find out how…

Agenda ✅

Notes on getting started
Setting the page title
Live announcements
Focus management
React's accessibility linter
Using React.Fragment
Writing semantic HTML
Demo!

Notes on getting started 📓

Ryan Howard from The Office, looking rather annoyed, writes in a notebook.

camelCase

Write attributes in camelCase 🐪

tabindex 👉 tabIndex
contenteditable 👉 contentEditable
maxlength 👉 maxLength

(aria-* and data-* are exempt from this.)

Reserved words

When HTML conflicts with JS 😕

for 👉 htmlFor
class 👉 className

Self closing elements require `/`

<img src="…" alt=""> 👉 <img src="…" alt="" />
<meta charset="utf-8"> 👉 <meta charset="utf-8" />
<input type="text"> 👉 <input type="text" />

Setting the page `title` 📰

Homer Simpsons's web page, featuring many animated gifs and a dancing Jesus.

The problem… 🤔

When someone using a screen reader loads a new page, the initial page announcement is always the same.

Set the page `title`! 👍

Updates the browser tab for sighted users
Helps with Search Engine Optimization
Often the first content announced by screen readers

Use `document.title`

            
              componentDidMount() {
                document.title = 'My page title';
              }

Not specific to React
More on MDN

Other existing components

react-document-title

                
                  <DocumentTitle title='My page title'>
                    <!-- content -->
                  </DocumentTitle>

react-helmet

                
                  <Helmet>
                    <meta charSet='utf-8' />
                    <title>My page title</title>
                    <link rel='stylesheet' href='css/page-specific.css' />
                  </Helmet>

Live announcements 📢

A man using a megaphone. For some reason, a hamburger is seen coming from his mouth, going through the megaphone, and out comes an even larger hamburger.

The problem… 🤔

When a Single Page App fetches data, the new content is visibly displayed.

However, screen reader users recieve no indication of the available content.

Sometimes when you're working with a single page app, it's common that you would request data from an external data source.

When the data is output to the user interface, sighted users can see that content is now available and ready for consumption.

For people who rely on assistive technology, however, they might be unaware that anything's taken place. So, it's a good idea to announce when and if the data request was successful or not, and if successful, how many items are now on displayed the screen as a result.

Can anyone think of any other situation or user experience when a live announcement would be ideal?

Loading state
Search result state
Perhaps a dyamic form submission on success/error

How do we overcome this issue?

👇

Create a Live `Announcements` component 👍

            
                import React from 'react';

                class Announcements extends React.Component {
                  render() {
                    return (
                      <div aria-live="polite" aria-atomic="true" className="visuallyhidden">
                        {this.props.message}
                      </div>
                    );
                  }
                }

                export default Announcements;

Let's create a live announcements component which will help announce new app state.

Here we have the Announcements component in its entirety.

First thing is to import React from React
Then we create the class definition with, class Announcements extends React.Component
Within the class we have a single render method with a return statement. This simply returns a div element.
The div element features the aria-live attribute with the value of "polite" which means assistive technology will wait until other messages are finished being announced and then this content will be read aloud.
The div also features the aria-atomic attribute which ensures all content, not just updated or changed content, will be announced.
Within the div is the line, this.props.message wrapped in curly braces. This will output the message text when it's passed to the Announcements component here.
Finally, we export the Announcements component so it can be used elsewhere in the app.

Now that we have the component writen and available, how do we use it?

👇

Usage, part 1

Create a state property

            
              this.state = {
                message: null
              };

Usage, part 2

Set the state property

            
              this.setState({
                message: 'Some message about the current state'
              });

Usage, part 3

Send message to <Announcements /> component

            
              <Announcements message={this.state.message} />

Other existing components

react-aria-live

                
                    <LiveAnnouncer>
                      <LiveMessage message={this.state.a11yMessage} aria-live="polite" />
                      <button onClick={() => {this.setState({ a11yMessage: 'Button Pressed' });}}>
                        Press me
                      </button>
                    </LiveAnnouncer>

react-a11y-announcer
(Literally the same thing I described earlier)

Focus management ☕️

Bill Lumber, from Office Space, standing, arm resting on an office cubicle wall, slowley sipping coffee.

The problem… 🤔

A loading screen in our app displays a message in-between fetching new data. Sighted users can read the message a wait patiently… probably.

However, screen reader users do not recieve this message conveying the current app state. They might get discouraged or blame themselves when something takes a long time to load.

Focus management! 👍

Let's shift focus to the Loading message container when it gets displayed.

Selecting an element

Kind of like jQuery. 🤷‍♂️

            
              var loadingMessage = $('#loadingMessage');
              // …
              loadingMessage.focus();

The React way

Use a function ref to reference the element elsewhere in the component.

            
              <div
                ref={
                  (loadingMessage) => {
                    this.loadingMessage = loadingMessage;
                  }
                }
                tabIndex='-1'
                >
                Loading…
              </div>

In React, the concept's pretty much the same, but how we arrive there is a little different.

In order to select an element, "the react way," we create what's called a "function ref," or, ref for short.

The ref is a prop that is set on the element we want to reference elsewhere in the component. It allows us to select and reference, in React, an actual DOM node on the page.

So as an example…

What's on the screen here is a plain div element. Within the div is the phrase, "loading." This is meant to be displayed when the app is in a loading state.
The div features a prop called ref, and this ref is being assigned a regular, ES6 style function.
The function is being passed a parameter called loadingMessage. And within the function is a single assignment statement of, this.loadingMessage equals loadingMessage.
This sets the ref of the div to the class property this.loadingMessage.

Now that we have the ref setup, how do we use it?

👇

Using the `ref`…

            
              componentDidMount() {
                this.loadingMessage.focus();
              }

More focus management! 🐶

A pair of adorable pug puppies running on green grass.

The problem… 🤔

When using React Router's <Link /> component, the browser never actually reloads, leaving the user's focus state in an unknown position.

Our new friend, `ref`

            
              <div
                ref={
                  (contentContainer) => {
                    this.contentContainer = contentContainer;
                  }
                }
                tabIndex="-1"
                aria-labelledby="pageHeading"
                >
                  <Header />
                    <h1 id="pageHeading">…</h1>
                    // Content components…
                  <Footer />
              </div>

Coming back to the "ref" concept, one path we can take to resolve this is to create a ref on the outer-most container element and use that ref to shift focus to the "page."

The idea is when a new page loads into view, focus is sent to the top of the page. From there, the user can navigate forward from this point, discovering content in the same manner as if a full page reload had taken place.

So, for this example that's on the screen…

There's a wrapper div element which holds all of the page content, including the header, footer, etc.
On the div there's a ref with is function assignment. With this function we're passing in the parameter contentContainer and assigning it to the class property, this.contentContainer.
Also on the div is a tabindex attribute with its value set to -1. This ensures that the div will be able to programatically receive focus, but not be added to the natural focus order.
The other attribute on the div is aria-labelledby with its value set to the id of the page heading. This helps to give extra context of where the user curently is by announcing the page heading content when the div receives focus.

So, how do we use the "ref?"

👇

Set "page" focus via `ref`

            
              componentDidMount() {
                this.contentContainer.focus();
              }

🔥 New `ref` syntax

React 16.3 will be introducing a new, simpler way to create refs.

The `createRef()` method

            
              // 1. Create a new class property
              loading = React.createRef();

              // 2. Assign the class property to
              // the element via ref prop
              <div ref={this.loading} tabIndex="-1">
                Loading…
              </div>

              // 3. Call the focus method within componentDidMount
              this.loading.value.focus();

Coming back to the Loading component example, the snippets of code on the screen here gives a general outline of the new ref syntax.

The first part to this is to create a new class property. Displayed here is an assignment statement which reads; loading equals React.createRef. This creates a new class property called loading and creates a new ref object for use later in the component.
Now that we have our ref object created, the next step is to assign the ref to an element using the ref prop. On the screen is a div element with its ref prop being assigned, this.loading. At this point, the loading class property we created in the first step now references the div in our render method.
Finally, the last step is to actually use the loading class property. With this example of sending focus to the div when the component loads, we can add a single line of code within the Loading component's componentDidMount method. The line reads, this.loading.value.focus. And with this, focus would be send to the div when the component loads onto the screen.

So, you may have noticed the value node of that last line. This represents the actual element which has been assigned to the ref object. In this example, it represents the div element.

With this in mind you might imagine what we'd need to write in order to get the current value of an input element. It would look something like this.refName.value.value. So that may look a little odd when it's written out, but that's how its done.

👇

Using `Fragment` components 🍰

A close-up of a cupcake. Its top icing decoration is slowley being applied, one icing bag squeeze at a time with pink and blue icing.

What are `Fragment`s?

Fragments let you group a list of elements/child components without adding extra nodes to the DOM.

Wrapping your content with a `div`…

            
              render() {
                return (
                  <div>
                    <td>Hello</td>
                    <td>World</td>
                  </div>
                );
              }

…may lead to invalid HTML 😱

            
              <table>
                <tr>
                  <div>
                    <td>Hello</td>
                    <td>World</td>
                  </div>
                </tr>
              </table>

Our new friend `React.Fragment`

            
              render() {
                return (
                  <React.Fragment>
                    <td>Hello</td>
                    <td>World</td>
                  </React.Fragment>
                );
              }

The result 👍

            
              <table>
                <tr>
                  <td>Hello</td>
                  <td>World</td>
                </tr>
              </table>

React's accessibility linter 🛀

A smiling man opens a door to greet a guest. While doing so the man uses a lint roller to remove lint from his neck tie.

`eslint-plugin-jsx-a11y`

Outputs errors to the browser console automatically.

            
              <img src="images/chrome-console.png" />

Screen capture of Chrome's developer tools console. A warning message states, 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.'

Code editor a11y linting? 🤔

Let's output errors directly in the editor, too.

Screen capture of Atom text editor. A warning message appears overtop of some code with the following message, 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.'

1. Install ESLint Plugin

Atom: linter-eslint
Sublime Text: SublimeLinter-contrib-eslint
VS Code: ESLint

2. Install ESLint && `eslint-plugin-jsx-a11y`

            
              npm install eslint eslint-plugin-jsx-a11y --save-dev

3. Update the `.eslintrc` file

Add to the "plugins" section:

            
              "plugins": [
                "jsx-a11y"
              ]

Add to the "extends" section:

            
              "extends": [
                "plugin:jsx-a11y/recommended"
              ]

Writing semantic HTML in React ⌨️

Kermit the Frog aggressively types on an old type writer.

Screen capture of Twitter. A tweet from Heydon Pickering (@heydonworks) reads, 'React code doesn't have to be inaccessible any more than hip-hop has to be misogynist.' Opens in a new window.

React Components are ES6 Classes

Since React uses ES6 classes and standard HTML markup to generate its components, it’s up to you to continue to write good, clean, semantic HTML.

In other words…

If there are accessibility issues, it's your fault . This is a good thing! 👍

Demo! 📺

Check out the demo app, TV-Db 👉.

Demo Highlights 📱

The page title being updated
The message, "loading" was announced
Number of items avaialble was announced
Keyboard focus started from the top of the page
There was a visible blue outline on each focusable element

Creating Accessible React Apps

Can React apps be accessible? 🤔

Yes! 🎉

Agenda ✅

Notes on getting started 📓

camelCase

Reserved words

Self closing elements require /

Setting the page title 📰

The problem… 🤔

Set the page title! 👍

Use document.title

Other existing components

Live announcements 📢

The problem… 🤔

Create a Live Announcements component 👍

Usage, part 1

Usage, part 2

Usage, part 3

Other existing components

Focus management ☕️

The problem… 🤔

Focus management! 👍

Selecting an element

The React way

Using the ref…

More focus management! 🐶

The problem… 🤔

Our new friend, ref

Set "page" focus via ref

🔥 New ref syntax

The createRef() method

Using Fragment components 🍰

What are Fragments?

Wrapping your content with a div…

…may lead to invalid HTML 😱

Our new friend React.Fragment

The result 👍

React's accessibility linter 🛀

eslint-plugin-jsx-a11y

Code editor a11y linting? 🤔

1. Install ESLint Plugin

2. Install ESLint && eslint-plugin-jsx-a11y

3. Update the .eslintrc file

Writing semantic HTML in React ⌨️

React Components are ES6 Classes

In other words…

Demo! 📺

Demo Highlights 📱

Bonus! 💥

Thanks! 🙂

Self closing elements require `/`

Setting the page `title` 📰

Set the page `title`! 👍

Use `document.title`

Create a Live `Announcements` component 👍

Using the `ref`…

Our new friend, `ref`

Set "page" focus via `ref`

🔥 New `ref` syntax

The `createRef()` method

Using `Fragment` components 🍰

What are `Fragment`s?

Wrapping your content with a `div`…

Our new friend `React.Fragment`

`eslint-plugin-jsx-a11y`

2. Install ESLint && `eslint-plugin-jsx-a11y`

3. Update the `.eslintrc` file