Accessibility is not a feature you bolt on right before launching; it is an architectural decision.

Core Tenets

  • Semantic HTML First: Always use native <button>, <nav>, and <dialog> elements when possible.
  • Focus Rings: Never use outline: none without providing a distinct focus-visible replacement.
  • Color Contrast: Verify standard 4.5:1 ratios for normal text against varying themes.
<button
  type="button"
  aria-expanded="false"
  aria-controls="menu-dropdown"
  class="focus-visible:ring-2 focus-visible:ring-offset-2"
>
  Menu Options
</button>