liquid-theme-a11y

Every interactive component must work with keyboard only, screen readers, and reduced-motion preferences. Start with semantic HTML — add ARIA only when native semantics are insufficient. See focus and keyboard patterns for full FocusTrap implementation. Rules: Rules: Rules: Same as modal pattern but with additional: Rules: Native / provides keyboard and screen reader support automatically. Use for screen-reader-only content like labels and descriptions. Never rely solely on color to convey information — always pair with text, icons, or patterns. - Single , , per page - Multiple elements must have distinct aria-label - All content must live inside a landmark - One per page, never skip levels (h1 → h3) - Use real heading elements, not styled divs - Template: is typically the page/product title - Minimum 3:1 contrast ratio for focus indicators - Use :focus-visible (not :focus ) to avoid showing on click - Never outline: none without a visible replacement - Trap focus inside modals, drawers, and dialogs - Return focus to trigger element on close - First focusable element gets focus on open - Query all focusable elements: a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"]) - Single tab stop per card (the main link) - tabindex="-1" on mouse-only shortcuts (quick add) - aria-labelledby on pointing to the title - Descriptive alt...