` | ## Tables - `` for purpose, `` for columns, `` for row headers. - Never use tables for layout. ## Images - All `` need `alt`. Decorative: `alt=""` plus `aria-hidden="true"`. - Always set `width` and `height` to prevent layout shift. - SVG icons: `aria-hidden="true" focusable="false"` when decorative. ## Color & contrast | Text type | Minimum ratio | |---|---| | Normal text (< 18 px) | 4.5:1 | | Large text (>= 18 px bold / 24 px) | 3:1 | | UI components, borders, icons, focus rings | 3:1 | - Never use color as the sole indicator — pair with icon, text, or pattern. - Every color class needs an explicit `dark:` counterpart; both modes must independently meet contrast. - Avoid low-contrast muted grays on white (e.g. `text-neutral-400`). ## Motion All animations must respect `prefers-reduced-motion`: ```css .animate-fade-in { animation: fadeIn 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .animate-fade-in { animation: none; } } ``` - No blinking or flashing effects (WCAG 2.3.1 — max 3 flashes/sec). - Tailwind: use `motion-safe:` and `motion-reduce:` variants. - Scroll-driven animations: provide `@supports` fallback plus reduced-motion override. ## ARIA patterns ### Navigation with `aria-current` ```astro {label} ``` ### Disclosure / accordion Prefer native `

` + `

`. For custom accordions use `aria-expanded` and `aria-controls`. ### Tabs - `role="tablist"` with `aria-label` on container. - `role="tab"` + `aria-selected` on each tab; inactive tabs `tabindex="-1"`. - `role="tabpanel"` + `aria-labelledby` on each panel. - Arrow-key navigation left/right. ### Dialog Prefer native `