Web Accessibility (WCAG) Cheat Sheet

<!-- Use native elements first; ARIA is a last resort --><button aria-label="Close dialog" onclick="closeDialog()">×</button><div role="alert" aria-live="assertive">  Form submitted successfully.</div><input  type="text"  aria-describedby="email-hint"  aria-invalid="true"  aria-required="true"/><span id="email-hint">We'll never share your email.</span><button aria-expanded="false" aria-controls="menu">Menu</button><ul id="menu" hidden>...</ul>

<!-- Ensure custom interactive elements are keyboard-operable --><div  role="button"  tabindex="0"  onkeydown="if(event.key==='Enter'||event.key===' ')activate()"  onclick="activate()">  Custom Button</div>

/* Never remove focus outlines without a visible replacement */:focus-visible {  outline: 2px solid #2684ff;  outline-offset: 2px;}/* Skip link lets keyboard users bypass repeated navigation */.skip-link {  position: absolute;  left: -9999px;}.skip-link:focus {  left: 0;}

<!-- Precedence (highest wins): aria-labelledby > aria-label > native label/legend > placeholder/title --><label for="qty">Quantity</label><input id="qty" aria-label="Item quantity" placeholder="1" /><!-- announced name: "Item quantity" (aria-label beats the <label>) --><h2 id="billing-h">Billing Address</h2><section aria-labelledby="billing-h">  <!-- section's accessible name comes from the referenced heading --></section><!-- aria-labelledby can concatenate multiple ids, in DOM order given --><span id="lbl-a">Ship to</span><span id="lbl-b">Home</span><div role="group" aria-labelledby="lbl-a lbl-b">...</div><!-- accessible name: "Ship to Home" -->

function trapFocus(dialog) {  const focusable = dialog.querySelectorAll(    'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'  );  const first = focusable[0];  const last = focusable[focusable.length - 1];  const previouslyFocused = document.activeElement;  dialog.addEventListener('keydown', (e) => {    if (e.key === 'Escape') return closeDialog();    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();    }  });  first.focus();  return () => previouslyFocused.focus(); // call on close to restore focus}// Prefer the native <dialog> element when possible: showModal()// already traps focus and Escape-to-close for free.const dialog = document.querySelector('dialog');dialog.showModal();

<!-- polite: waits for the user to pause; assertive: interrupts immediately --><div aria-live="polite" aria-atomic="true" aria-relevant="additions text">  <span id="count">3</span> items in cart</div><!-- aria-atomic="true" re-reads the whole region, not just the changed node --><!-- role="status" is shorthand for aria-live="polite" + aria-atomic="true" --><div role="status">Saved.</div><!-- role="alert" is shorthand for aria-live="assertive" + aria-atomic="true" --><div role="alert">Payment failed: card declined.</div><!-- Gotcha: content injected into a region that ISN'T yet in the DOM at     page load may not be announced - the live region itself must already     exist before you mutate its contents. -->

@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;  }}/* Windows High Contrast / forced-colors mode strips custom colors -   use system color keywords so borders/icons stay visible */@media (forced-colors: active) {  .card {    border: 1px solid CanvasText;    forced-color-adjust: none;  }  .icon-only-button {    outline: 1px solid ButtonText;  }}