Built in from commit one,
or almost impossible to retrofit.

<!-- Skip link — lets keyboard users jump past the nav -->
<a href="#main" class="skip-link">Skip to main content</a>

<style>
  .skip-link {
    position: absolute; top: -40px; left: 0;
    background: var(--blue); color: white;
    padding: 8px 16px; z-index: 200;
    transition: top 0.2s;
  }
  .skip-link:focus { top: 0; }
</style>

<!-- Modal dialog with focus trap and ARIA -->
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <h2 id="dialog-title">Delete account</h2>
  <p id="dialog-desc">This will permanently remove your data.</p>
  <button autofocus>Cancel</button>
  <button>Delete</button>
</div>

/* Focus trap — keep Tab cycling inside the modal */
function trapFocus(dialog) {
  const focusable = dialog.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  dialog.addEventListener('keydown', (e) => {
    if (e.key !== 'Tab') return;
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault(); last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault(); first.focus();
    }
  });
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus indicator — don't remove outline, style it */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 2px;
}