--- name: eaa-understandable description: EAA / EN 301 549 / WCAG 2.2 AA — Understandable (POUR axis 3). Language, readable copy, predictable UI, input assistance, error identification. Triggers on "lang attribute", "error message", "form validation", "input assistance", "autocomplete", "consistent nav", "predictable", "WCAG 3.", "EAA understandable", "accessible authentication". allowed-tools: Read, Glob, Grep, Edit --- # EAA Understandable — POUR Axis 3 Covers **WCAG Principle 3 / EN 301 549 §9.3**. Content readable, UI predictable, input errors recoverable. Always load `rules/accessibility.md` first. ## Success Criteria Checklist (AA) | SC | Name | What must be true | |---|---|---| | 3.1.1 (A) | Language of page | `` (or whatever). Correct BCP-47 code. | | 3.1.2 (AA) | Language of parts | Foreign-language phrases wrapped `bonjour`. | | 3.2.1 (A) | On focus | Focus alone never triggers context change (navigation, form submit, new window). | | 3.2.2 (A) | On input | Changing a select/checkbox doesn't auto-submit or navigate unless warned. | | 3.2.3 (AA) | Consistent navigation | Main nav in the same relative order across pages. | | 3.2.4 (AA) | Consistent identification | Same icon / label for the same function everywhere. | | 3.2.6 (A, 2.2) | Consistent help | Help link (contact, chat, FAQ) in the same relative location across pages where it appears. | | 3.3.1 (A) | Error identification | Errors identified in text — not just a red border. | | 3.3.2 (A) | Labels or instructions | Every input has a label or instruction, visible by default. | | 3.3.3 (AA) | Error suggestion | Suggest a fix when possible ("Did you mean @gmail.com?"). | | 3.3.4 (AA) | Error prevention (legal/financial/data) | Reversible, checkable, or confirmable submissions for legal/finance/data actions. | | 3.3.7 (A, 2.2) | Redundant entry | Don't force re-entry of info already provided in the same session (use `autocomplete`, prefill). | | 3.3.8 (AA, 2.2) | Accessible authentication (minimum) | Auth steps must not require a cognitive function test (remembering chars, puzzle CAPTCHA) without an alternative. | ## Common Problems - `` with no `lang` (or worse, `lang=""`). - Quotes in French / Spanish inline with no `lang` wrapper — screen reader reads in wrong accent. - `

We'll never share your address.

{error && ( )} ``` **Radio group:** ```tsx {/* a11y [WCAG 1.3.1 / 3.3.2]:
/ names the whole group */}
Delivery speed
``` **Accessible authentication (passkey first, no cognitive test):** ```tsx {/* a11y [WCAG 3.3.8 / EAA §9.3.3.8]: passkey + magic-link avoid cognitive function test */} ``` **No focus-triggered navigation:** ```tsx {/* a11y [WCAG 3.2.1]: navigation requires explicit Enter / click, not focus */} ``` **Redundant entry avoidance:** ```tsx {/* a11y [WCAG 3.3.7]: prefill shipping with billing unless user opts out */} ``` ## Reporting ``` ## Understandable fixes - src/layouts/Base.astro:1 — WCAG 3.1.1 — added lang="en-GB" to - src/components/LoginForm.tsx:22 — WCAG 3.3.8 — added passkey option; puzzle CAPTCHA now optional fallback - src/components/Checkout.tsx:88 — WCAG 3.3.7 — "same as billing" checkbox prefills shipping fields ```