What is Web Accessibility (a11y)?

Web accessibility (often abbreviated as a11y—"a" followed by 11 letters, then "y") is the practice of ensuring that your websites and applications are designed and developed so that people with disabilities can use them. This includes people with:

• Visual impairments (blindness, low vision, color blindness)
• Auditory impairments (deafness, hard of hearing)
• Motor impairments (inability to use a mouse)
• Cognitive impairments (learning disabilities)

Building accessible apps is not just a "nice-to-have"; it's a crucial part of creating an inclusive and ethical web. It also often improves the experience for all users (e.g., clear keyboard navigation benefits power users).

The Foundation: Semantic HTML

The single most important thing you can do for accessibility is to use the correct HTML element for the job. This is called semantic HTML.

Screen readers and other assistive technologies use the HTML markup to understand the structure and meaning of your page.

Bad (Non-Semantic) Practice 👎: Using divs for everything and styling them to look like other elements.

JavaScript

// A screen reader just announces "Click me, group". Not helpful!
<div className="button-style" onClick={handleClick}>
  Click me
</div>

Good (Semantic) Practice 👍: Using the native element that has the desired meaning and behavior built-in.

JavaScript

// A screen reader announces "Click me, button". The user knows it's interactive.
// Also gets keyboard focus (Tab key) and activation (Enter/Space) for free!
<button onClick={handleClick}>
  Click me
</button>

Key Semantic Elements to Use:

• <nav> for main navigation blocks.
• <main> for the primary content of the page.
• <header>, <footer>, <section>, <article> for structuring content.
• <button> for actions.
• <a> for navigation links.
• <h1> through <h6> for hierarchical headings.

ARIA Attributes: Filling the Gaps

Sometimes, native HTML isn't enough, especially when building complex custom components like modals, tabs, or accordions. ARIA (Accessible Rich Internet Applications) attributes help bridge this gap. They provide extra information to assistive technologies about a component's role and state.

• role: Defines what an element is (e.g., role="dialog" for a modal container).
• aria-label: Provides an accessible name when one isn't visible on screen (e.g., <button aria-label="Close">X</button>).
• aria-labelledby: Links an element to the text that labels it.
• aria-hidden: Hides an element from screen readers.
• aria-expanded: Indicates whether a collapsible element is currently expanded or collapsed.

Use ARIA sparingly. The first rule of ARIA is: don't use ARIA if a native HTML element already provides the necessary semantics.

Managing Focus

Keyboard navigation is essential. Users should be able to navigate through all interactive elements on a page using the Tab key in a logical order.

When you build components that appear and disappear, like modals, you must manage focus programmatically. When a modal opens, focus should move inside it. When it closes, focus should return to the element that opened it.

Here's how you can do that with useRef and useEffect:

JavaScript

import { useRef, useEffect } from 'react';

function Modal({ onClose }) {
  const modalRef = useRef(null);
  const triggerRef = useRef(null); // To store the element that opened the modal

  useEffect(() => {
    // Store the currently focused element when the modal mounts
    triggerRef.current = document.activeElement;

    // Move focus into the modal
    modalRef.current.focus();

    // Return focus when the modal unmounts
    return () => {
      triggerRef.current?.focus();
    };
  }, []);

  return (
    // We need tabIndex="-1" to make a non-interactive element like a div focusable
    <div role="dialog" aria-modal="true" ref={modalRef} tabIndex="-1">
      <h2>Modal Title</h2>
      <p>This is the modal content.</p>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

Tools for Accessibility

You don't have to find issues on your own!

• eslint-plugin-jsx-a11y: A static analysis tool that will catch many common accessibility issues directly in your editor.
• Axe DevTools: A browser extension that can audit your rendered page for accessibility violations and provide guidance on how to fix them.
• Keyboard Navigation: Simply try to use your site with only the Tab, Shift+Tab, Enter, and Space keys. Can you reach and operate everything?