<!-- Page structure -->
<header>
  <nav aria-label="Primary navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main id="main-content" tabindex="-1">
  <h1>Page Title</h1>
  <article>
    <h2>Article heading</h2>
    <p>Content...</p>
  </article>
  <aside aria-label="Related links">...</aside>
</main>

<footer>
  <nav aria-label="Footer navigation">...</nav>
</footer>

<!-- Skip link - must be first focusable element -->
<a href="#main-content" class="skip-link">Skip to main content</a>

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #005fcc;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;
}

function Toolbar({ items }: { items: { id: string; label: string }[] }) {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);

  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
    let next = index;
    if (e.key === 'ArrowRight') next = (index + 1) % items.length;
    else if (e.key === 'ArrowLeft') next = (index - 1 + items.length) % items.length;
    else if (e.key === 'Home') next = 0;
    else if (e.key === 'End') next = items.length - 1;
    else return;

    e.preventDefault();
    setActiveIndex(next);
    refs.current[next]?.focus();
  };

  return (
    <div role="toolbar" aria-label="Text formatting">
      {items.map((item, i) => (
        <button
          key={item.id}
          ref={(el) => { refs.current[i] = el; }}
          tabIndex={i === activeIndex ? 0 : -1}
          onKeyDown={(e) => handleKeyDown(e, i)}
          onClick={() => setActiveIndex(i)}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}

function Dialog({
  open, onClose, title, description, children
}: {
  open: boolean; onClose: () => void;
  title: string; description?: string; children: React.ReactNode;
}) {
  const dialogRef = React.useRef<HTMLDivElement>(null);
  const previousFocusRef = React.useRef<HTMLElement | null>(null);

  React.useEffect(() => {
    if (open) {
      previousFocusRef.current = document.activeElement as HTMLElement;
      // Focus first focusable element inside dialog
      const focusable = dialogRef.current?.querySelector<HTMLElement>(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      focusable?.focus();
    } else {
      previousFocusRef.current?.focus();
    }
  }, [open]);

  // Trap focus inside dialog
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') { onClose(); return; }
    if (e.key !== 'Tab') return;
    const focusable = Array.from(
      dialogRef.current?.querySelectorAll<HTMLElement>(
        'button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])'
      ) ?? []
    );
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault(); last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault(); first.focus();
    }
  };

  if (!open) return null;

  return (
    <div role="dialog" aria-modal="true"
      aria-labelledby="dialog-title"
      aria-describedby={description ? 'dialog-desc' : undefined}
      ref={dialogRef} onKeyDown={handleKeyDown}
    >
      <h2 id="dialog-title">{title}</h2>
      {description && <p id="dialog-desc">{description}</p>}
      {children}
      <button onClick={onClose}>Close</button>
    </div>
  );
}

function Tabs({ tabs }: { tabs: { id: string; label: string; content: React.ReactNode }[] }) {
  const [selected, setSelected] = React.useState(0);
  const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]);

  const handleKeyDown = (e: React.KeyboardEvent, i: number) => {
    let next = i;
    if (e.key === 'ArrowRight') next = (i + 1) % tabs.length;
    else if (e.key === 'ArrowLeft') next = (i - 1 + tabs.length) % tabs.length;
    else if (e.key === 'Home') next = 0;
    else if (e.key === 'End') next = tabs.length - 1;
    else return;
    e.preventDefault();
    setSelected(next);
    tabRefs.current[next]?.focus();
  };

  return (
    <>
      <div role="tablist" aria-label="Content sections">
        {tabs.map((tab, i) => (
          <button
            key={tab.id}
            role="tab"
            id={`tab-${tab.id}`}
            aria-selected={i === selected}
            aria-controls={`panel-${tab.id}`}
            tabIndex={i === selected ? 0 : -1}
            ref={(el) => { tabRefs.current[i] = el; }}
            onKeyDown={(e) => handleKeyDown(e, i)}
            onClick={() => setSelected(i)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      {tabs.map((tab, i) => (
        <div
          key={tab.id}
          role="tabpanel"
          id={`panel-${tab.id}`}
          aria-labelledby={`tab-${tab.id}`}
          hidden={i !== selected}
        >
          {tab.content}
        </div>
      ))}
    </>
  );
}

/* Focus ring - must meet 3:1 against neighboring colors */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Never convey information by color alone */
.field-error {
  color: #c0392b; /* red - supplementary only */
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* The icon + text label carry the meaning; color is an enhancement */
.field-error::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url('error-icon.svg') no-repeat center;
}

// SPA route change - announce and move focus
function useRouteAccessibility() {
  const location = useLocation();
  const headingRef = React.useRef<HTMLHeadingElement>(null);

  React.useEffect(() => {
    // Update document title
    document.title = `${getPageTitle(location.pathname)} - My App`;

    // Move focus to h1 so keyboard users know where they are
    headingRef.current?.focus();

    // Optional: announce via live region
    const announcer = document.getElementById('route-announcer');
    if (announcer) announcer.textContent = `Navigated to ${getPageTitle(location.pathname)}`;
  }, [location.pathname]);

  return headingRef;
}

// In your page component:
function Page({ title }: { title: string }) {
  const headingRef = useRouteAccessibility();
  return (
    <>
      {/* Persistent live region - created once, reused */}
      <div id="route-announcer" aria-live="polite" aria-atomic="true"
        className="sr-only" />
      <h1 tabIndex={-1} ref={headingRef}>{title}</h1>
    </>
  );
}

/* Visually hidden but available to screen readers */
.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;
}

<!-- Informative image: describe purpose, not appearance -->
<img src="revenue-chart.png"
     alt="Q4 revenue: grew from $2M in October to $3.5M in December">

<!-- Decorative image: empty alt, screen reader skips it -->
<img src="decorative-wave.svg" alt="">

<!-- Functional image (inside link or button): describe the action -->
<a href="/home"><img src="logo.svg" alt="Acme Corp - Go to homepage"></a>
<button><img src="search-icon.svg" alt="Search"></button>

<!-- Complex image: short alt + long description -->
<figure>
  <img src="architecture-diagram.png"
       alt="System architecture overview"
       aria-describedby="arch-desc">
  <figcaption id="arch-desc">
    The frontend (React) calls an API gateway which routes to three microservices:
    auth, products, and orders. All services write to PostgreSQL.
  </figcaption>
</figure>

<!-- Form labels: explicit association is most robust -->
<label for="email">Email address <span aria-hidden="true">*</span></label>
<input type="email" id="email" name="email" required
       aria-describedby="email-hint email-error">
<span id="email-hint" class="hint">We'll never share your email.</span>
<span id="email-error" role="alert" hidden>
  Please enter a valid email address.
</span>

undefined

```js
// axe-core in Jest / Vitest with Testing Library
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Modal has no accessibility violations', async () => {
  const { container } = render(
    <Dialog open title="Confirm" onClose={() => {}}>
      <p>Are you sure?</p>
      <button>Cancel</button>
      <button>Confirm</button>
    </Dialog>
  );
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

// axe-core standalone audit (browser console or Playwright)
import axe from 'axe-core';
const results = await axe.run(document.body);
results.violations.forEach(v => {
  console.error(`[${v.impact}] ${v.description}`);
  v.nodes.forEach(n => console.error('  ', n.html));
});