REACT Accessibility

Accessibility (a11y) ensures that your React applications are usable by everyone, including people with disabilities. React makes it easier to build accessible web applications with built-in support for ARIA attributes, keyboard navigation, and screen reader compatibility.

1. Semantic HTML – The Foundation of Accessibility

Using proper HTML elements makes your app more accessible by default.

❌ Bad Example (Non-Semantic Elements)

<div onClick={() => console.log("Clicked!")}>Click me</div>

• <div> is not an interactive element.
• Screen readers won’t recognize it as a button.

✅ Good Example (Using <button>)

<button onClick={() => console.log("Clicked!")}>Click me</button>

• Keyboard & screen reader friendly by default.
• No need to manually handle focus.

Tip: Use <nav>, <article>, <header>, <footer>, <section>, and <main> instead of <div> for better readability.

2. ARIA (Accessible Rich Internet Applications) Attributes

ARIA helps enhance accessibility when using non-semantic elements.

Example: ARIA for Screen Readers

<button aria-label="Close" onClick={() => console.log("Closed")}>❌</button>

• aria-label="Close" tells screen readers what the button does.

3. Managing Focus (Keyboard Navigation)

Users should be able to navigate using the keyboard (Tab, Enter, Esc).

Example: Focus on Modal Dialogs

import { useEffect, useRef } from "react";

const Modal = ({ onClose }) => {
  const modalRef = useRef(null);

  useEffect(() => {
    modalRef.current.focus(); // Auto-focus modal
  }, []);

  return (
    <div
      role="dialog"
      tabIndex="-1"
      ref={modalRef}
      onKeyDown={(e) => e.key === "Escape" && onClose()}
    >
      <p>Press ESC to close</p>
      <button onClick={onClose}>Close</button>
    </div>
  );
};

• tabIndex="-1" makes the <div> focusable.
• role="dialog" tells screen readers it’s a modal.
• onKeyDown={(e) => e.key === "Escape" && onClose()} allows closing via ESC key.

4 Handling Forms Accessibly

Forms should include labels, error messages, and ARIA attributes.

Example: Accessible Form

const LoginForm = () => {
  return (
    <form>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" aria-required="true" />

      <button type="submit">Login</button>
    </form>
  );
};

• htmlFor="email" correctly associates the label with the input field.
• aria-required="true" tells screen readers this field is mandatory.

5. Skip Links (Jump to Main Content)

For keyboard users, skip links help jump past navigation menus.

Example: Skip Navigation

<a href="#main-content" className="skip-link">Skip to main content</a>

<main id="main-content">
  <h1>Welcome to My Website</h1>
</main>

🔹 Style .skip-link to appear only when focused:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
}

.skip-link:focus {
  top: 0;
}

Helps screen reader & keyboard users navigate faster.

6. Alternative Text for Images

Screen readers rely on alt text to describe images.

Example: Accessible Images

<img src="profile.jpg" alt="John Doe's Profile Picture" />

• Meaningful alt text improves screen reader usability.
• For decorative images, use alt="" to hide them from screen readers.

7. Color Contrast & Dark Mode

Ensure text is readable for users with low vision or color blindness.

Example: High Contrast Mode

:root {
  --text-color: #333;
  --bg-color: #fff;
}

@media (prefers-contrast: high) {
  :root {
    --text-color: #000;
    --bg-color: #f5f5f5;
  }
}

Automatically adjusts for users with high-contrast settings.

8. Avoid onClick Only for Interactive Elements

Some users can’t use a mouse, so always support keyboard interactions.

❌ Bad Example (No Keyboard Support)

<div onClick={() => console.log("Clicked!")}>Click me</div>

Keyboard users can’t “click” this div!

✅ Good Example (Keyboard Accessible)

<div
  role="button"
  tabIndex="0"
  onClick={() => console.log("Clicked!")}
  onKeyDown={(e) => e.key === "Enter" && console.log("Clicked!")}
>
  Click me
</div>

• tabIndex="0" makes it focusable.
• onKeyDown enables Enter key interaction.

9. Accessible Tables

Tables should include headers and descriptions for clarity.

Example: Proper Table Markup

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

• <caption> provides a table summary.
• <th scope="col"> properly defines column headers.

10. Testing Accessibility (a11y)

Use Browser DevTools

• Chrome: Right-click → Inspect → Lighthouse → Accessibility Audit.
• Firefox: Inspect → Accessibility Panel.

Use Screen Readers

• Windows: NVDA (free)
• Mac: VoiceOver (built-in)
• Chrome: ChromeVox (extension)

Automated Testing Tools

• 🛠️ axe DevTools (Chrome extension)
• 🛠️ react-a11y (npm package)

🔹 Summary – React Accessibility Checklist

• Use semantic HTML (avoid div for buttons)
• Add ARIA attributes when necessary
• Ensure keyboard navigation (focus, ESC to close modals)
• Provide labels & error messages for forms
• Use skip links for navigation
• Add alt text for images
• Ensure high contrast for better readability
• Support keyboard & mouse interactions
• Use accessible tables for data
• Test with Lighthouse, screen readers, and a11y tools