Web Accessibility in React: Best Practices For Developers

Is your React app easy for everyone to use?

Many users rely on screen readers, keyboard navigation, or other assistive tools to browse the web. If a site is not built with accessibility in mind, these users may struggle to interact with it.

Web accessibility in React helps make applications usable for all, including those with disabilities. Developers can improve accessibility by using semantic HTML, ARIA attributes, and proper keyboard focus management. Testing is also key to finding and fixing issues.

This article shares best practices to build React apps that work for everyone.

Why Web Accessibility Matters in a React App

A React app must be accessible to all users, regardless of their abilities. Poorly implemented accessibility features create barriers for screen reader users and those who rely on assistive technologies. Common accessibility issues in web applications include:

• Lack of semantic HTML elements

• Insufficient keyboard navigation support

• Incorrect use of ARIA attributes

• Poor focus management in dynamic content

• Low color contrast affecting readability

Addressing these problems improves the user experience and ensures compliance with accessibility standards such as WCAG (Web Content Accessibility Guidelines).

Common Accessibility Barriers in Web Applications

Using Semantic HTML Elements for Better Accessibility

Semantic HTML improves accessibility in React applications by providing meaningful structure to a web page. Using semantic elements instead of generic <div> and <span> makes it easier for screen readers to interpret content.

Correct Usage of Semantic HTML

1function Article() {
2  return (
3    <article>
4      <h2>Understanding Web Accessibility</h2>
5      <p>Web accessibility ensures that digital content is usable by everyone, including people with disabilities.</p>
6    </article>
7  );
8}

​

Avoiding Non-Semantic Elements

1function BadExample() {
2  return (
3    <div>
4      <div className="heading">Understanding Web Accessibility</div>
5      <div>Web accessibility ensures that digital content is usable by everyone.</div>
6    </div>
7  );
8}

​

Using semantic HTML elements such as <header>, <nav>, <article>, and <footer> helps assistive technologies interpret page structure.

ARIA Attributes: Enhancing Accessibility in Dynamic Content

ARIA attributes provide additional information to assistive technologies when semantic HTML alone is insufficient. A modal window or a custom component that lacks native semantics requires ARIA roles and attributes.

Example: ARIA Attributes in a Modal Window

1function Modal({ isOpen, onClose }) {
2  return (
3    isOpen && (
4      <div
5        role="dialog"
6        aria-labelledby="modal-title"
7        aria-modal="true"
8        tabIndex={-1}
9      >
10        <h2 id="modal-title">Accessibility in React</h2>
11        <p>Ensuring accessibility in React applications improves user experience.</p>
12        <button onClick={onClose} aria-label="Close modal">Close</button>
13      </div>
14    )
15  );
16}

​

Using aria-modal="true" helps screen reader software recognize the modal as an active dialogue. The aria-labelledby attribute associates a label with the modal.

Managing Keyboard Focus in a React App

Proper focus management ensures that users can navigate interactive elements with the keyboard. A common issue in React applications is losing focus when components update dynamically.

Handling Keyboard Focus in a Modal Window

1import { useEffect, useRef } from "react";
2
3function Modal({ isOpen, onClose }) {
4  const modalRef = useRef(null);
5
6  useEffect(() => {
7    if (isOpen && modalRef.current) {
8      modalRef.current.focus();
9    }
10  }, [isOpen]);
11
12  return (
13    isOpen && (
14      <div
15        ref={modalRef}
16        role="dialog"
17        tabIndex={-1}
18        aria-labelledby="modal-title"
19        aria-modal="true"
20      >
21        <h2 id="modal-title">React Accessibility</h2>
22        <button onClick={onClose} aria-label="Close modal">Close</button>
23      </div>
24    )
25  );
26}

​

This approach ensures that the modal receives focus when opened, improving accessibility for keyboard navigation.

Keyboard Navigation and Interactive Elements

Keyboard navigation is a fundamental part of web accessibility. Users should be able to navigate through interactive elements such as buttons, links, and form fields using the Tab key.

Handling Keyboard Events in a Custom Button

1function AccessibleButton({ onClick, label }) {
2  return (
3    <div
4      role="button"
5      tabIndex={0}
6      onClick={onClick}
7      onKeyDown={(e) => e.key === "Enter" && onClick()}
8    >
9      {label}
10    </div>
11  );
12}

​

This ensures that users who rely on keyboard input can activate the button using the Enter key.

Accessible Forms in React Applications

Forms should be accessible to all users, including those using screen readers. Proper labeling of inputs using label elements or aria-label attributes is necessary.

Example: Creating an Accessible Form

1function ContactForm() {
2  return (
3    <form>
4      <label htmlFor="name">Name</label>
5      <input id="name" type="text" aria-required="true" />
6
7      <label htmlFor="email">Email</label>
8      <input id="email" type="email" aria-required="true" />
9
10      <button type="submit">Submit</button>
11    </form>
12  );
13}

​

Using aria-required="true" helps assistive technologies announce that the field is mandatory.

Testing Accessibility in a React Project

Testing accessibility is a crucial step in development. Automated and manual testing techniques help identify accessibility issues.

Automated Testing Tools

1. axe DevTools (Browser Extension) – Scans a web page for accessibility issues.

2. Lighthouse – Evaluates web accessibility within Chrome DevTools.

3. react-a11y – Provides real-time accessibility warnings in a React project.

Manual Testing with Screen Readers

Testing accessibility manually using screen reader software such as NVDA or VoiceOver helps identify usability concerns.

Ensuring Sufficient Color Contrast

Low contrast between text and background colors affects readability. Developers can use accessibility tools such as Contrast Checker to test contrast levels.

Example of Sufficient Color Contrast

1.button {
2  background-color: #007BFF;
3  color: white;
4}

​

WCAG recommends a contrast ratio of at least 4.5:1 for normal text.

Implementing Accessibility Guidelines in React Applications

Following accessibility rules improves usability for all users. Developers should:

• Use semantic HTML instead of generic <div> and <span>.

• Apply ARIA attributes where needed.

• Support keyboard navigation in interactive elements.

• Implement focus management for dynamic content.

• Perform accessibility tests using automated tools and manual testing.

Making React Apps More Accessible

Web accessibility in React helps create better experiences for all users. Using semantic HTML, ARIA attributes, and proper keyboard navigation makes applications easier to use.

Testing with automated tools and manual checks helps catch issues early. Small improvements can make a big difference for users who rely on assistive technologies.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.