React Accessibility: Building WCAG 2.1 AA Compliant Components

React components lack aria-label, aria-labelledby, and proper roles. Custom components don't announce their purpose to screen readers.

Dynamic content doesn't move focus when modals open. Focus trapping is broken. Users can't navigate to new content.

Custom React components respond only to clicks. Arrow keys, Tab navigation, and Enter/Space don't work. Keyboard users are locked out.

React image components render <img> tags without alt attributes. Dynamic images lack descriptions.

Form errors aren't announced. Validation messages are visual-only. Field requirements aren't programmatically indicated.

export function CloseButton() {
  return <button onClick={() => close()}>×</button>
}

export function CloseButton() {
  return <button onClick={() => close()} aria-label="Close dialog">×</button>
}

export function Modal({ isOpen, children }) {
  return isOpen && <div>{children}</div>
}

export function Modal({ isOpen, children }) {
  const dialogRef = useRef(null)
  useEffect(() => {
    if (isOpen) dialogRef.current?.focus()
  }, [isOpen])
  return isOpen && <dialog ref={dialogRef}>{children}</dialog>
}

<img src={productImage} />

<img src={productImage} alt={`${productName} - ${productColor} available in sizes S-XXL`} />

850+

Lawsuits per year

79%

Sites non-compliant

60-90 hours

Avg fix time