Web interface guidelines for design and accessibility compliance. Based on Vercel's web interface guidelines. Use as a final quality pass for any web-facing artifact including HTML slides, landing pages, and components.
Review and apply these rules to all web-facing artifacts (HTML slides, pages, components).
aria-label<label> or aria-labelonKeyDown/onKeyUp)<button> for actions, <a>/<Link> for navigation (not <div onClick>)alt (or alt="" if decorative)aria-hidden="true"<button>, <a>, <label>, <table>) before ARIA<h1>–<h6>:focus-visible with outlineoutline-noneoutline: none:focus-visible over :focus (avoid focus ring on click)prefers-reduced-motion (provide reduced variant or disable)transform/opacity only (compositor-friendly)transition: all — list properties explicitlytransform-origin… not ..." " not straight "font-variant-numeric: tabular-nums for number columns/comparisonstext-wrap: balance or text-pretty on headings (prevents widows)truncate, line-clamp-*, or break-wordscolor-scheme: dark on <html> for dark themes (fixes scrollbar, inputs)<meta name="theme-color"> matches page backgroundhover: state (visual feedback)user-scalable=no or maximum-scale=1 disabling zoomtransition: alloutline-none without focus-visible replacementonClick navigation without <a>aria-label