Accessibility

Compliance status

This site aims for conformance with WCAG 2.2 Level AA. An internal audit has been conducted covering the criteria of semantic structure, keyboard navigation, forms, colour contrasts, reduced motion and interactive components.

Measures taken

1. Semantic structure: HTML5 landmarks (header, main, nav, footer, article), consistent heading hierarchy.
2. Keyboard navigation: skip link, arrow keys / Escape in menus, focus trap in modals.
3. Forms: associated labels, error messages announced (role="alert"), visual validation (icons + colour).
4. Colour contrast: minimum 4.5:1 (AA). High-contrast mode at 7:1 (AAA) available.
5. Motion: prefers-reduced-motion respected, no non-stoppable automatic animation.
6. Language: dynamic lang attribute (fr/en).
7. Print: dedicated CSS, URLs visible after links.
8. Dark/light mode: instant toggle, remembered across sessions.
9. Text size: 85%–150% via the accessibility toolbar (rem units, compatible with browser zoom).
10. Dyslexia font: OpenDyslexic available on demand.
11. Interactive components: aria-expanded, aria-controls, role="dialog" on modals, role="menu" on dropdowns.
12. External links: screen-reader-only indication "(opens in a new tab)".

Accessibility toolbar

A fixed button in the bottom-right corner (accessibility icon) opens a panel with the following controls:

• Dark/light mode — instant toggle, remembered.
• High contrast — 7:1 ratio (WCAG AAA).
• Dyslexia font — OpenDyslexic.
• Text size — A−/A+ (85%–150%) with reset.
• Read aloud — Web Speech API synthesis.
• Print — native browser print.

Technologies

HTML5, CSS custom properties, vanilla JavaScript, ARIA 1.2, Web Speech API.

Known limitations

1. Read aloud: quality depends on the browser and operating system.
2. Some interface elements (buttons, badges) retain a fixed size when text size is changed.
3. High-contrast mode may affect the appearance of some third-party components (native audio player).