import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";

function MainContent({ children }) {
  const contentRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    if (contentRef.current) {
      contentRef.current.focus();
    }
  }, [location.pathname]);

  return (
    

      {children}
    

  );
}

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

function RouteAnnouncer() {
  const [announcement, setAnnouncement] = useState("");
  const location = useLocation();

  useEffect(() => {
    const pageTitle = document.title;
    setAnnouncement(pageTitle);
  }, [location.pathname]);

  return (
    
      role="status"
      aria-live="polite"
      aria-atomic="true"
      style={{
        position: "absolute",
        width: "1px",
        height: "1px",
        overflow: "hidden",
        clip: "rect(0, 0, 0, 0)",
        whiteSpace: "nowrap",
      }}
    >
      {announcement}
    

Place this component once at the root of your application. Every time the route changes, it updates with the current page title, and screen readers announce the text through the aria-live="polite" region. This gives the user the same context they would receive from a traditional page load announcement.

Note that some frameworks handle this for you. Next.js has built-in route announcements as of recent versions. If you are using Next.js, verify that the built-in announcer is working before adding your own  Ehaving two live region updates on each navigation will cause duplicate announcements.

Updating the Document Title

Every route in your application should set a descriptive document.title. This is the value that screen readers announce on page load in traditional sites, and it is what your route announcer will broadcast. A common pattern is to set the title inside each page component or via a custom hook.

import { useEffect } from "react";

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = ${title} | Your App Name;
  }, [title]);
}

// Usage in a page component
function ProductsPage() {
  useDocumentTitle("Products");

  return (
    

      
Products

      {/ Page content /}
    

  );
}

Titles should be specific and unique for each route. "Dashboard" is better than "Home." "Order #4521 Details" is better than "Order." The title is often the first piece of information a screen reader user receives about the page, so it needs to orient them immediately.

Accessible Forms in React

Forms are where React accessibility problems concentrate most heavily. The controlled component pattern that React encourages is actually a good foundation for accessibility  Eit gives you precise control over field values, validation state, and error messaging  Ebut only if you wire up the ARIA attributes and announcement patterns correctly.

Labeling Form Controls

Every form input must have a programmatically associated label. In React, the htmlFor attribute on elements connects the label to the input's id.

function EmailField() {
  const [email, setEmail] = useState("");

  return (
    

      Email address
      
        id="email-input"
        type="email"
        value={email}
 => setEmail(e.target.value)}
        aria-required="true"
      />
    

  );
}

Do not rely on placeholder text as a substitute for labels. Placeholder text disappears as soon as the user types, leaving no visible label to confirm what the field expects. Screen readers may or may not read placeholder text depending on the browser and AT combination.

For fields where a visible label is genuinely not appropriate  Ea search input with a search button next to it, for example  Euse aria-label to provide an accessible name.

  type="search"

  aria-label="Search products"
  value={query}
 => setQuery(e.target.value)}
/>

Error Handling and Validation Messages

When a user submits a form with validation errors, three things need to happen for screen reader users to understand the problem: the error must be announced, the error must be associated with the relevant field, and focus must move to the first field with an error.

function RegistrationForm() {
  const [errors, setErrors] = useState({});
  const [formData, setFormData] = useState({
    name: "",
    email: "",
  });
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const fieldRefs = { name: nameRef, email: emailRef };

  function validate() {
    const newErrors = {};
    if (!formData.name.trim()) {
      newErrors.name = "Name is required.";
    }
    if (!formData.email.includes("@")) {
      newErrors.email = "Enter a valid email address.";
    }
    return newErrors;
  }

  function handleSubmit(e) {
    e.preventDefault();
    const newErrors = validate();
    setErrors(newErrors);

    const firstErrorField = Object.keys(newErrors)[0];
    if (firstErrorField && fieldRefs[firstErrorField]?.current) {
      fieldRefs[firstErrorField].current.focus();
    }
  }

  return (
    
      

        Full name
        
          id="reg-name"
          ref={nameRef}
          type="text"
          value={formData.name}
 =>
            setFormData({ ...formData, name: e.target.value })
          }
          aria-invalid={!!errors.name}
          aria-describedby={errors.name ? "name-error" : undefined}
          aria-required="true"
        />
        {errors.name && (
          

            {errors.name}
          

        )}
      


      

        Email address
        
          id="reg-email"
          ref={emailRef}
          type="email"
          value={formData.email}
 =>
            setFormData({ ...formData, email: e.target.value })
          }
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? "email-error" : undefined}
          aria-required="true"
        />
        {errors.email && (
          

            {errors.email}
          

        )}
      


      Create account
    
  );
}

Key points in this pattern:

• aria-invalid is set to true when the field has a validation error. Screen readers announce this state when the field receives focus.
• aria-describedby links the input to its error message element. When the user focuses the input, the screen reader reads the label first and then the error description.
• role="alert" on the error message element causes screen readers to announce the error immediately when it appears in the DOM. This is critical for users who are not currently focused on the field with the error.
• Focus moves to the first invalid field after submission. Without this, the user has no way to locate which field needs correction.

Live Regions for Asynchronous Feedback

For feedback that occurs without a page reload  Ea successful form submission, an item added to a cart, a save confirmation  Euse aria-live regions to announce the change.

function SaveButton({ onSave }) {
  const [status, setStatus] = useState("");

  async function handleSave() {
    setStatus("Saving...");
    try {
      await onSave();
      setStatus("Changes saved successfully.");
    } catch {
      setStatus("Save failed. Please try again.");
    }
  }

  return (
    <>
      
      

        {status}
      

    
  );
}

The aria-live="polite" attribute tells screen readers to announce the content when there is a natural pause in speech, avoiding interruption of whatever the user is currently doing. Use aria-live="assertive" only for urgent messages that require immediate attention, such as session timeout warnings or data loss alerts.

A critical implementation detail: the live region element must already be present in the DOM before its content changes. If you conditionally render the

// Inaccessible - do not use
  Submit

// Accessible
  Submit

// Incomplete - only works with mouse
 setActiveTab(index)}>

  {tab.label}


// Complete - works with mouse and keyboard

  role="tab"
  tabIndex={0}
 => setActiveTab(index)}
 => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      setActiveTab(index);
    }
  }}
  aria-selected={activeTab === index}
>
  {tab.label}

function SkipLink() {
  return (
    
      href="#main-content"
      className="skip-link"
    >
      Skip to main content
    
  );
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: #000;
  z-index: 9999;
  font-size: 1rem;
  text-decoration: underline;
}

import { useEffect, useRef } from "react";

function Modal({ isOpen, onClose, title, children }) {
  const modalRef = useRef(null);
  const previousFocusRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      previousFocusRef.current = document.activeElement;
      modalRef.current?.focus();
    }
    return () => {
      if (previousFocusRef.current) {
        previousFocusRef.current.focus();
      }
    };
  }, [isOpen]);

  useEffect(() => {
    function handleKeyDown(e) {
      if (e.key === "Escape") {
        onClose();
      }
      if (e.key === "Tab" && modalRef.current) {
        const focusableElements = modalRef.current.querySelectorAll(
          'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
        );
        const firstElement = focusableElements[0];
        const lastElement =
          focusableElements[focusableElements.length - 1];

        if (e.shiftKey && document.activeElement === firstElement) {
          e.preventDefault();
          lastElement.focus();
        } else if (
          !e.shiftKey &&
          document.activeElement === lastElement
        ) {
          e.preventDefault();
          firstElement.focus();
        }
      }
    }

    if (isOpen) {
      document.addEventListener("keydown", handleKeyDown);
      return () =>
        document.removeEventListener("keydown", handleKeyDown);
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    
      
        ref={modalRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        tabIndex={-1}
 => e.stopPropagation()}
      >
        
{title}

        {children}
              

    

function Tabs({ tabs }) {
  const [activeIndex, setActiveIndex] = useState(0);

  function handleKeyDown(e, index) {
    let newIndex;
    if (e.key === "ArrowRight") {
      newIndex = (index + 1) % tabs.length;
    } else if (e.key === "ArrowLeft") {
      newIndex = (index - 1 + tabs.length) % tabs.length;
    } else if (e.key === "Home") {
      newIndex = 0;
    } else if (e.key === "End") {
      newIndex = tabs.length - 1;
    }

    if (newIndex !== undefined) {
      e.preventDefault();
      setActiveIndex(newIndex);
    }
  }

  return (
    

      

        {tabs.map((tab, index) => (
          
            key={tab.id}
            role="tab"
            id={tab-${tab.id}}
            aria-selected={activeIndex === index}
            aria-controls={panel-${tab.id}}
            tabIndex={activeIndex === index ? 0 : -1}
 => setActiveIndex(index)}
 => handleKeyDown(e, index)}
          >
            {tab.label}
          
        ))}
      

      {tabs.map((tab, index) => (
        
          key={tab.id}
          role="tabpanel"
          id={panel-${tab.id}}
          aria-labelledby={tab-${tab.id}}
          hidden={activeIndex !== index}
          tabIndex={0}
        >
          {tab.content}
        

      ))}
    

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

{
  "plugins": ["jsx-a11y"],
  "extends": ["plugin:jsx-a11y/recommended"]
}

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { RegistrationForm } from "./RegistrationForm";

test("displays validation errors and moves focus to first invalid field", async () => {
  const user = userEvent.setup();
  render();

  // Query by role  Econfirms the button has the right accessible name
  const submitButton = screen.getByRole("button", {
    name: /create account/i,
  });
  await user.click(submitButton);

  // Query by role with name  Econfirms error alerts are announced
  const nameError = await screen.findByRole("alert");
  expect(nameError).toHaveTextContent("Name is required");

  // Check that focus moved to the first invalid field
  const nameInput = screen.getByLabelText(/full name/i);
  expect(nameInput).toHaveFocus();
  expect(nameInput).toHaveAttribute("aria-invalid", "true");
});

import { render } from "@testing-library/react";
import { axe, toHaveNoViolations } from "jest-axe";
import { ContactForm } from "./ContactForm";

expect.extend(toHaveNoViolations);

test("ContactForm has no accessibility violations", async () => {
  const { container } = render();
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});