` element handles this automatically.\n\n### Focus visible (2.4.7)\n\n```css\n/* ❌ Never remove focus outlines */\n*:focus { outline: none; }\n\n/* ✅ Use :focus-visible for keyboard-only focus */\n:focus {\n outline: none;\n}\n\n:focus-visible {\n outline: 2px solid currentColor; /* inherits text color → already contrast-checked */\n outline-offset: 2px;\n}\n\n/* ✅ Or pick a brand color and verify ≥3:1 contrast against every background it lands on */\nbutton:focus-visible {\n box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);\n}\n```\n\n### Focus not obscured (2.4.11) — new in 2.2\n\nWhen an element receives keyboard focus, it must not be entirely hidden by other author-created content such as sticky headers, footers, or overlapping panels. At Level AAA (2.4.12), no part of the focused element may be hidden.\n\n```css\n/* ✅ Account for sticky headers when scrolling to focused elements */\n:target {\n scroll-margin-top: 80px;\n}\n\n/* ✅ Ensure focused items clear fixed/sticky bars */\n:focus {\n scroll-margin-top: 80px;\n scroll-margin-bottom: 60px;\n}\n```\n\n### Skip links (2.4.1)\n\nProvide a skip link so keyboard users can bypass repetitive navigation. See the [skip link pattern](references/A11Y-PATTERNS.md#skip-link) for full markup and styles.\n\n### Target size (2.5.8) — new in 2.2\n\nInteractive targets must be at least **24 × 24 CSS pixels** (AA). Exceptions: inline text links, elements where the browser controls the size, and targets where a 24px circle centered on the bounding box does not overlap another target.\n\n```css\n/* ✅ Minimum target size */\nbutton,\n[role=\"button\"],\ninput[type=\"checkbox\"] + label,\ninput[type=\"radio\"] + label {\n min-width: 24px;\n min-height: 24px;\n}\n\n/* ✅ Comfortable target size (recommended 44×44) */\n.touch-target {\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n### Dragging movements (2.5.7) — new in 2.2\n\nAny action that requires dragging must have a single-pointer alternative (e.g., buttons, inputs). See the [dragging movements pattern](references/A11Y-PATTERNS.md#dragging-movements) for a sortable-list example.\n\n### Timing (2.2)\n\n```javascript\n// Allow users to extend time limits\nfunction showSessionWarning() {\n const modal = createModal({\n title: 'Session Expiring',\n content: 'Your session will expire in 2 minutes.',\n actions: [\n { label: 'Extend session', action: extendSession },\n { label: 'Log out', action: logout }\n ],\n timeout: 120000\n });\n}\n```\n\n### Motion (2.3)\n\n```css\n/* Respect reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n```\n\n---\n\n## Understandable\n\n### Page language (3.1.1)\n\n```html\n\n\n\n\n\n\n\nThe French word for hello is bonjour .
\n```\n\n### Consistent navigation (3.2.3)\n\n```html\n\n\n \n \n```\n\n### Consistent help (3.2.6) — new in 2.2\n\nIf a help mechanism (contact info, chat widget, FAQ link, self-help option) is repeated across multiple pages, it must appear in the **same relative order** each time. Users who rely on consistent placement shouldn't have to hunt for help on every page.\n\n### Form labels (3.3.2)\n\nEvery input needs a programmatically associated label. See the [form labels pattern](references/A11Y-PATTERNS.md#form-labels) for explicit, implicit, and instructional examples.\n\n### Error handling (3.3.1, 3.3.3)\n\nAnnounce errors to screen readers with `role=\"alert\"` or `aria-live`, set `aria-invalid=\"true\"` on invalid fields, and focus the first error on submit. See the [error handling pattern](references/A11Y-PATTERNS.md#error-handling) for full markup and JS.\n\n### Redundant entry (3.3.7) — new in 2.2\n\nDon't force users to re-enter information they already provided in the same session. Auto-populate from earlier steps, or let users select from previously entered values. Exceptions: security re-confirmation and content that has expired.\n\n```html\n\n\n Shipping address \n \n \n \n \n```\n\n### Accessible authentication (3.3.8) — new in 2.2\n\nLogin flows must not rely on cognitive function tests (e.g., remembering a password, solving a puzzle) unless at least one of:\n- A copy-paste or autofill mechanism is available\n- An alternative method exists (e.g., passkey, SSO, email link)\n- The test uses object recognition or personal content (AA only; AAA removes this exception)\n\n```html\n\nSign in with passkey \nEmail me a login link \n```\n\n---\n\n## Robust\n\n### ARIA usage (4.1.2)\n\n**Prefer native elements:**\n```html\n\nClick me
\n\n\nClick me \n\n\nOption
\n\n\n ![\"2024](\"infographic.png\")
\n ![](\"chart.png\")
\n\n\n![\"\"](\"decorative-border.png\")
\n\n\n