Accessibility is an important consideration when building modern web apps. React provides useful tools to make accessible, inclusive products.

Let’s look at some best practices for web accessibility with React:

Semantic HTML

Use proper HTML semantics. For example:

1
2
3
4
5

// Good
<button>Save</button>

// Avoid 
<div onclick="save">Save</div>

Semantic HTML is parsed correctly by screen readers.

alt Text

Images should have alt text describing content/purpose:

1

<img src="logo.png" alt="Company logo" />

Screen readers can’t interpret images. alt text substitutes meaning.

ARIA Roles

ARIA roles describe non-semantic elements:

1

<div role="button">Add</div>

This makes the <div> behave like a button for assistive tech.

Focus Management

Manage focus properly for keyboard/screen reader users:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function Login() {
  const [focused, setFocused] = useState(false);
  
  return (
    <>
      <input 
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)} 
      />
      <button tabIndex={focused ? -1 : 0}>Submit</button>
    </>
  );
}

This shifts focus control to the <input> when focused.

Accessible Forms

Label form fields correctly:

1
2

<label htmlFor="name">Name</label>
<input id="name" />

Associates labels with inputs via the htmlFor attribute.

Summary

  • Use proper semantic HTML
  • Provide image alt descriptions
  • Apply ARIA roles appropriately
  • Manage focus and keyboard interaction
  • Label form fields clearly

Building accessible React apps improves experience for all users.