How to be an a11y - Creating Accessible React Apps

By Neha Nivedita

What is accessibility

  • Everyone can access services or products equally
  • Usability regardless of disability
  • Commonly abbreviated as "a11y" or "AX"

ARIA: accessible rich internet applications

ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML.

<button aria-label="Close Window">

<a href="/card-design-woes"
    Card design woes

<span class="cta" aria-hidden="true">
    I am hidden from screen readers

Why should you care?

  • 15% of population has some form of disability - that's 1 billion people
  • 8% of population has some form of colorblindness
  • AX isn't a feature, its a necessity
  • Ignoring AX is akin to discrimination

Sources of a11y issues 

  • Devs often write non-semantic HTML
  • Screen readers cannot parse the content meaningfully
  • Apps become inaccessible
  Click Me

Making React apps accessible

Low hanging fruit

  • Supports aria natively
  • Get low hanging fruit out of the way first
    • Use alt attributes
    • Use semantic elements
  alt="Woman carrying an umbrella"

<button class="btn">
  Hey, I'm actually a button!

Update page titles

Page title is the thing screen readers usually read out loud

componentDidMount() {
  document.title = 'Page title';
import React from 'react';
import { Helmet } from 'react-helmet';

const PageMeta = (props) => (
  <title>Eric's Website: {props.pageTitle}</title>

Heading semantics

Use heading tags <h1>, <h2>, ... etc the way they are intended to, not just to make the text big.

<h1>Page Title</h1>

Unique Ids

Useful for setting focus and label/input association

const FirstName = () => (
    <label htmlFor="first-name">First name:</label>
    <input id="first-name" />

Don't rely on placeholder's as a label

Announce changes

  • When something changes, users to be aware of it

  • Use aria-live attribute

const HomePage = (props) => (

Manage focus

  • Ensure when routes update, window focus is set in an appropriate locaiton

  • When react router changes, the change is silent

  • Use refs to set focus and set tabIndex="-1"

class Page extends React.Component {
 focalPoint = React.createRef();

 componentDidMount() {

 render() {
  return (
    <section ref={this.focalPoint} tabIndex="-1">
      {/* ... */}

How to be an a11y - Creating Accessible React Apps

By Eric Masiello

How to be an a11y - Creating Accessible React Apps

  • 195