🔵 RGAA (Accessibility)

[ebouchut]

Epic tracking the accessibility of learn-dev against the RGAA (Referentiel general d'amelioration de l'accessibilite), the French application of WCAG 2.1 AA used as the accessibility yardstick for the DWWM certification.

What the DWWM expects: not a full 106-criteria audit, but demonstrated integration of the accessibility essentials in the produced interfaces and the ability to verify them with tools. The criteria map below tracks what the frontend implements and where; the companion document docs/rgaa.md explains each criterion in depth.

Criteria map (implemented)

• 1.2 Decorative content ignored by assistive tech: aria-hidden on the home code card and feature emoji
• 3.1 Information not conveyed by color alone: form errors (border + bold text + aria-invalid), current nav item (bold + underline + aria-current)
• 3.2 Text contrast >= 4.5:1: every token pair computed in docs/design/theme-exploration.md (worst pair 4.73:1)
• 6.1 Explicit links: all link texts meaningful out of context
• 8.3 / 8.4 Page language present and relevant: lang="en" on pages, lang="fr" on the privacy policy
• 8.5 / 8.6 Relevant page titles: unique, patterned <title> per page
• 8.7 Language changes indicated: the English chrome is marked lang="en" inside the French privacy page
• 9.1 Heading structure: one h1 per page describing the page, ordered h2/h3
• 9.2 Coherent document structure: header/nav/main/footer landmarks via the layout fragments
• 9.3 Correctly structured lists: nav and feature lists as ul/li
• 10.4 Text resizable: all sizes in rem/em, unitless line-height
• 10.7 Visible focus: global :focus-visible outline, never removed
• 10.11 Reflow / responsive: rem breakpoints, auto-fit grids, internal overflow (verified at 375, 768, 1440 px)
• 11.1 Field labels: label for on every input
• 11.10 Relevant input control: type="email", required, server-side Bean Validation
• 11.11 Errors identified with suggestions: role="alert" summary plus per-field message wired with aria-describedby
• 11.13 Input purpose: autocomplete="username" / "email" / "new-password" / "current-password"
• 12.7 Skip link to the main content on every page
• 13.8 No uncontrolled motion: CSS animations disabled under prefers-reduced-motion

Remaining work

• Manual keyboard walkthrough on the running app (tab order, focus trap check)
• Lighthouse / axe pass on every page, fix findings
• Screen reader smoke test (VoiceOver: landmarks, form error announcement)
• Re-run the contrast script after any palette change
• Extend the map when new pages arrive (course catalog, lessons)