Accessibilité : la checklist WCAG 2.2 que nous appliquons à chaque template

Un site accessible est un site que tout le monde peut utiliser : personnes malvoyantes avec un lecteur d'écran, personnes qui naviguent au clavier, personnes âgées, mais aussi quelqu'un qui consulte votre page en plein soleil ou d'une seule main dans le métro.

Les règles de référence sont les WCAG 2.2 (Web Content Accessibility Guidelines), publiées par le W3C en octobre 2023. En France, le RGAA les décline pour les services publics et les grandes entreprises. Depuis le 28 juin 2025, l'Acte européen sur l'accessibilité étend des obligations à de nombreux services de commerce en ligne ; les microentreprises de services en sont exemptées, mais leurs clients, eux, ne le sont pas de leurs difficultés.

Voici la liste que nous appliquons à chaque template avant publication. Elle couvre le niveau AA, celui que visent les obligations légales.

Contrastes

• Texte courant : 4,5:1 minimum entre le texte et son fond (critère 1.4.3).
• Grands textes : 3:1 (24 px, ou environ 18,7 px en gras).
• Éléments d'interface : 3:1 pour les bordures de champs, les icônes porteuses de sens et l'indicateur de focus (critère 1.4.11).

Comment vérifier : l'inspecteur de Chrome et de Firefox affiche le ratio de contraste d'un texte sélectionné. Testez aussi le mode sombre s'il existe.

Clavier et focus

• Tout ce qui se fait à la souris se fait au clavier (2.1.1).
• Le focus est toujours visible (2.4.7) et jamais masqué par un bandeau collant ou une bannière de cookies (2.4.11, nouveau en 2.2).
• L'ordre de tabulation suit l'ordre de lecture.
• Un lien d'évitement « Aller au contenu » permet de sauter le menu.

Comment vérifier : débranchez la souris et parcourez la page avec Tab, Maj+Tab, Entrée, Espace et Échap.

Cibles tactiles

Le critère 2.5.8, nouveau en WCAG 2.2, impose des cibles d'au moins 24 × 24 pixels CSS, ou un espacement suffisant autour des petites cibles. Nous visons 44 pixels pour les boutons principaux : c'est plus confortable et ça ne coûte rien.

Structure

• Un seul h1 par page, des titres dans l'ordre, sans sauter de niveau pour des raisons visuelles.
• Des zones repérables : header, nav, main, footer.
• Une langue déclarée (lang="fr") pour que les lecteurs d'écran prononcent correctement.
• Des liens qui ont du sens hors contexte : « Voir nos tarifs » plutôt que « Cliquez ici ».

Images

• Chaque image informative a un texte alternatif qui dit ce qu'elle apporte, pas ce qu'elle représente pixel par pixel.
• Les images décoratives ont un alt vide, pour être ignorées.
• Aucun texte important n'est incrusté dans une image.

Formulaires

• Chaque champ a une étiquette visible et associée (label for). Un texte indicatif dans le champ ne suffit pas : il disparaît dès qu'on tape.
• Les erreurs sont annoncées en texte, près du champ, et expliquent comment corriger.
• Les champs courants déclarent leur type (autocomplete="email", tel) pour permettre le remplissage automatique.
• Pas de test cognitif pour se connecter (3.3.8, nouveau en 2.2) : le collage du mot de passe et les gestionnaires de mots de passe doivent fonctionner.

Mouvement

• Les animations respectent le réglage système « réduire les animations » (prefers-reduced-motion).
• Rien ne clignote plus de trois fois par seconde.
• Un carrousel automatique a un bouton pause, ou mieux, n'est pas automatique.

Mise en page

• La page reste utilisable à 320 pixels de large sans défilement horizontal (1.4.10), ce qui correspond aussi à un zoom à 400 %.
• Le texte peut être agrandi à 200 % sans être coupé.

Les outils

Les outils automatiques comme axe ou Lighthouse détectent environ un tiers des problèmes : contrastes, attributs manquants, structure. Ils sont indispensables mais insuffisants. Le reste se vérifie à la main : au clavier, avec un lecteur d'écran (NVDA sous Windows, VoiceOver sur Mac et iPhone, TalkBack sur Android), et en relisant les textes alternatifs.

Chaque template Forge passe un audit axe sans erreur et un parcours clavier complet avant d'être publié. Si vous trouvez un défaut, écrivez-nous : nous corrigeons le template, et la version corrigée est téléchargeable depuis votre compte.