Accessibility

<!-- Bad -->
<div onclick="submit()">Submit</div>

<!-- Good -->
<button type="submit">Submit</button>

<!-- Bad -->
<div class="header">Title</div>

<!-- Good -->
<header>Title</header>

/* Always visible focus indicator */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure sufficient contrast */
.text-primary {
  color: #1a1a2e; /* Dark on light - passes AA */
}

.text-warning {
  color: #f59e0b; /* Must have dark background */
  background: #1a1a2e;
}

<!-- Icon-only button needs label -->
<button aria-label="Close menu">
  <svg>...</svg>
</button>

<!-- Form inputs need labels -->
<label for="email">Email</label>
<input id="email" type="email" />

<!-- Status updates need aria-live -->
<div aria-live="polite" aria-atomic="true">
  {syncStatus}
</div>

// Screen reader users browse normally
// SW caches content, but it's just "content on the page"
// No special ARIA needed for SW itself

// What DOES need attention:
function updateUIForOffline() {
  // Announce to screen reader
  const status = document.getElementById('status');
  status.setAttribute('aria-live', 'polite');
  status.textContent = 'You are now offline. Changes will sync when reconnected.';
}

function OfflineBanner() {
  const isOnline = useNetworkStatus();

  return (
    <div
      role="status"
      aria-live="polite"
      aria-atomic="true"
      className={isOnline ? 'hidden' : 'visible'}
    >
      <span className="sr-only">Notice: </span>
      You are offline. Your changes will be saved and synced when you reconnect.
    </div>
  );
}

function SyncIndicator() {
  const { pendingCount } = useMutationQueue();

  if (pendingCount === 0) return null;

  return (
    <div
      role="status"
      aria-live="polite"
      aria-label={`${pendingCount} changes pending synchronization`}
    >
      <span aria-hidden="true">🔄</span>
      <span className="sr-only">{pendingCount} changes pending</span>
    </div>
  );
}

// Add sr-only CSS class
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

function OfflineTodoApp() {
  // All interactions must be keyboard accessible
  return (
    <div>
      {/* Buttons work with Enter/Space */}
      <button onClick={addTodo}>Add task</button>

      {/* Forms work with Tab and Enter */}
      <form onSubmit={handleSubmit}>
        <input />
        <button type="submit">Save</button>
      </form>

      {/* Dialogs manage focus correctly */}
      {showDialog && (
        <Dialog onClose={close}>
          {/* Focus trapped in dialog */}
          <button onClick={close}>Close</button>
        </Dialog>
      )}
    </div>
  );
}

function App() {
  const mainRef = useRef(null);

  useEffect(() => {
    // On route change, move focus to main content
    mainRef.current?.focus();
  }, [location]);

  return (
    <main ref={mainRef} tabIndex={-1}>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/app" element={<App />} />
        </Routes>
      </Router>
    </main>
  );
}

@media (prefers-reduced-motion: reduce) {
  /* Disable SW progress animations */
  .sw-progress-bar {
    transition: none;
    animation: none;
  }

  /* Disable cache transition animations */
  .cache-updated {
    transition: none;
  }
}

function InstallPrompt({ onAccept, onDismiss }) {
  return (
    <dialog open>
      <div role="alertdialog" aria-labelledby="install-title" aria-describedby="install-desc">
        <h2 id="install-title">Install App</h2>
        <p id="install-desc">Install this app for offline access and better performance.</p>
        <button onClick={onAccept}>Install</button>
        <button onClick={onDismiss} aria-label="Dismiss">Not now</button>
      </div>
    </dialog>
  );
}

/* Buttons and interactive elements */
button,
a,
input[type="checkbox"] {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

# Install axe-core
npm install @axe-core/react

// In test
import { axe } from "jest-axe";

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