diff --git a/public/og-default.png b/public/og-default.png index f82feb42..05a7d6dc 100644 Binary files a/public/og-default.png and b/public/og-default.png differ diff --git a/public/og/checklist.png b/public/og/checklist.png index a033d8c2..eccb2baf 100644 Binary files a/public/og/checklist.png and b/public/og/checklist.png differ diff --git a/public/og/spec.png b/public/og/spec.png index a0f7ce13..f2db8871 100644 Binary files a/public/og/spec.png and b/public/og/spec.png differ diff --git a/public/og/spec/accessibility.png b/public/og/spec/accessibility.png index 15fda1ad..45e22d5c 100644 Binary files a/public/og/spec/accessibility.png and b/public/og/spec/accessibility.png differ diff --git a/public/og/spec/accessibility/accessible-authentication.png b/public/og/spec/accessibility/accessible-authentication.png new file mode 100644 index 00000000..665e4efc Binary files /dev/null and b/public/og/spec/accessibility/accessible-authentication.png differ diff --git a/src/content/changelog/2026-06-17-accessible-authentication.md b/src/content/changelog/2026-06-17-accessible-authentication.md new file mode 100644 index 00000000..1229b682 --- /dev/null +++ b/src/content/changelog/2026-06-17-accessible-authentication.md @@ -0,0 +1,8 @@ +--- +title: Added a page on accessible authentication +date: "2026-06-17" +type: added +relatedSlugs: [accessible-authentication] +--- + +New **Accessibility** topic on [accessible authentication](/spec/accessibility/accessible-authentication/) — WCAG 2.2 added success criteria 3.3.8 and 3.3.9, which forbid making people pass a cognitive function test (recalling a password, transcribing a code, solving a puzzle) to log in unless an accessible alternative exists. The page covers supporting password managers, allowing paste, `autocomplete="one-time-code"`, and passkeys; status: recommended. diff --git a/src/content/spec/accessibility/accessible-authentication.md b/src/content/spec/accessibility/accessible-authentication.md new file mode 100644 index 00000000..3365ef7c --- /dev/null +++ b/src/content/spec/accessibility/accessible-authentication.md @@ -0,0 +1,57 @@ +--- +title: "Accessible authentication" +slug: accessible-authentication +category: accessibility +summary: "Let people log in without solving a puzzle, transcribing a code, or memorising anything. Don't block password managers, allow paste, and offer a method that needs no cognitive function test." +status: recommended +order: 115 +appliesTo: [all] +relatedSlugs: [form-labels, form-errors, mobile-form-inputs, webauthn] +updated: "2026-06-17T00:00:00.000Z" +sources: + - title: "WCAG 3.3.8 — Accessible Authentication (Minimum) (Level AA)" + url: "https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html" + publisher: "W3C" + - title: "WCAG 3.3.9 — Accessible Authentication (Enhanced) (Level AAA)" + url: "https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-enhanced.html" + publisher: "W3C" + - title: "W3C — Web Authentication (WebAuthn)" + url: "https://www.w3.org/TR/webauthn-3/" + publisher: "W3C" + - title: "MDN — HTML autocomplete attribute" + url: "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete" + publisher: "MDN" +--- + +## What it is + +WCAG 2.2 added two success criteria, both about logging in: **3.3.8 Accessible Authentication (Minimum)**, Level AA, and **3.3.9 (Enhanced)**, Level AAA. The rule is that no step of an authentication process may rely on a **cognitive function test** — remembering a password, solving a puzzle, transcribing characters, or recognising things — unless an accessible alternative is offered. The Minimum criterion exempts object recognition (e.g. "pick the photos with a bus") and personal-content recognition; the Enhanced criterion removes even those exemptions. + +## Why it matters + +A login screen is a gate in front of everything. People with cognitive disabilities — memory loss, dyslexia, dyscalculia — are routinely locked out by the very mechanisms meant to keep accounts safe. Asking someone to memorise a password, copy a six-digit code from a text message into a field, or solve a distorted-text CAPTCHA is a cognitive function test, and for a large group of users it simply does not work. Authentication failures don't just frustrate; they exclude people from banking, healthcare, and government services entirely. + +## How to implement + +The reliable way to pass is to make the browser or device do the remembering: + +- **Support password managers.** Use proper `` fields with `autocomplete="current-password"` (or `new-password` when setting one) so managers fill and store credentials. Don't break this with custom widgets. +- **Allow paste** into every field, including password and one-time-code inputs. Blocking paste forces manual transcription — the exact thing the criterion forbids. +- **Let the platform handle OTPs.** Mark the field `autocomplete="one-time-code"` so the OS can offer the SMS code automatically instead of making the user read and retype it. +- **Offer passkeys / WebAuthn.** Biometric or device-bound credentials satisfy the criterion because they require no memorised secret and no test. +- **If you must use a CAPTCHA, don't make it the only gate.** Offer an alternative that isn't a puzzle, or use a non-interactive challenge. +- **Email or magic links** are an accessible fallback — the user clicks, no recall required. + +## Common mistakes + +- Disabling paste "for security" on password or 2FA fields. +- A reCAPTCHA-style image puzzle with no alternative path. +- "Security questions" that demand recall of obscure facts. +- Custom login fields with no `autocomplete`, so managers can't fill them. +- Asking the user to transcribe a code from an authenticator app with no copy affordance. + +## Verification + +- Log in using only a password manager — no typing. It should fill and submit. +- Confirm paste works in every credential and OTP field. +- Check each step for a puzzle, memory, or transcription demand; if one exists, confirm an accessible alternative is offered. diff --git a/src/content/spec/accessibility/form-errors.md b/src/content/spec/accessibility/form-errors.md index 8a488ba4..78643cd7 100644 --- a/src/content/spec/accessibility/form-errors.md +++ b/src/content/spec/accessibility/form-errors.md @@ -6,7 +6,7 @@ summary: "When a form submission fails, errors must be identified in text, assoc status: required order: 110 appliesTo: [all] -relatedSlugs: [form-labels, aria-usage, color-contrast, mobile-form-inputs] +relatedSlugs: [form-labels, aria-usage, color-contrast, mobile-form-inputs, accessible-authentication] updated: "2026-05-29T09:13:20.000Z" sources: - title: "WCAG 3.3.1 — Error Identification (Level A)" diff --git a/src/content/spec/accessibility/form-labels.md b/src/content/spec/accessibility/form-labels.md index 7e2de295..9c088d16 100644 --- a/src/content/spec/accessibility/form-labels.md +++ b/src/content/spec/accessibility/form-labels.md @@ -6,7 +6,7 @@ summary: "Every form control needs a programmatically associated label. A placeh status: required order: 30 appliesTo: [all] -relatedSlugs: [form-errors, aria-usage, mobile-form-inputs] +relatedSlugs: [form-errors, aria-usage, mobile-form-inputs, accessible-authentication] updated: "2026-05-29T10:57:27.000Z" sources: - title: "WCAG 3.3.2 — Labels or Instructions (Level A)" diff --git a/src/content/spec/accessibility/mobile-form-inputs.md b/src/content/spec/accessibility/mobile-form-inputs.md index f77c9a1a..17cdea53 100644 --- a/src/content/spec/accessibility/mobile-form-inputs.md +++ b/src/content/spec/accessibility/mobile-form-inputs.md @@ -6,7 +6,7 @@ summary: "On a phone, the right input type, inputmode, and enterkeyhint summon t status: recommended order: 150 appliesTo: [all] -relatedSlugs: [form-labels, form-errors, touch-target-size, meta-viewport] +relatedSlugs: [form-labels, form-errors, touch-target-size, meta-viewport, accessible-authentication] updated: "2026-06-08T00:00:00.000Z" sources: - title: "HTML Living Standard — The inputmode attribute" diff --git a/src/content/spec/well-known/webauthn.md b/src/content/spec/well-known/webauthn.md index 06e828c3..50e9021b 100644 --- a/src/content/spec/well-known/webauthn.md +++ b/src/content/spec/well-known/webauthn.md @@ -5,7 +5,7 @@ category: well-known summary: "A JSON document at /.well-known/webauthn lists the origins allowed to use passkeys scoped to a single Relying Party ID. It enables WebAuthn Related Origin Requests — one passkey shared across several domains you own. Only applicable if the site uses passkeys across more than one origin." status: optional appliesTo: [all] -relatedSlugs: [well-known-overview, change-password, https-tls] +relatedSlugs: [well-known-overview, change-password, https-tls, accessible-authentication] order: 25 updated: "2026-06-08T12:00:00.000Z" sources: