React Accessibility (a11y)

Build accessible React applications.

Semantic HTML

// Good
<button onClick={handleClick}>Click</button>

// Bad
<div onClick={handleClick}>Click</div>

ARIA Labels

<button aria-label="Close menu">
  <CloseIcon />
</button>

<nav aria-label="Main navigation">
  <ul>...</ul>
</nav>

Focus Management

function Modal({ isOpen, onClose }) {
  const closeButtonRef = useRef();

  useEffect(() => {
    if (isOpen) {
      closeButtonRef.current?.focus();
    }
  }, [isOpen]);

  return (
    <div role="dialog" aria-modal="true">
      <button ref={closeButtonRef} onClick={onClose}>
        Close
      </button>
    </div>
  );
}

Keyboard Navigation

function Menu() {
  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      closeMenu();
    }
    if (e.key === 'ArrowDown') {
      focusNextItem();
    }
  };

  return <div onKeyDown={handleKeyDown}>...</div>;
}

Testing Accessibility

npm install jest-axe

import { axe } from 'jest-axe';

test('no accessibility violations', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Remember

• Use semantic HTML
• Add ARIA when needed
• Manage focus properly
• Test with screen readers

Next: Learn internationalization!