kevrea Mathieu ROMEUF · Drupal & Symfony Me contacterContact

Exemple fictif : la Boutique Ar Mor n'existe pas. Cet exemple montre la forme d'un rapport d'audit ; les constats marqués « illustratif » sont inventés pour l'exemple.

Exemple d'audit approfondi RGAA 4.1

Audit d'accessibilité de la Boutique Ar Mor

Les 106 critères du RGAA examinés sur 7 pages représentatives, avec un plan de correction par lots.

Télécharger l'audit en PDF Voir la carte des critères

Synthèse pour la direction

En l'état, une personne qui navigue au clavier ou avec un lecteur d'écran ne peut pas acheter sur la boutique : le bouton « Ajouter au panier » ne lui est pas accessible, les liens vers le panier et le compte sont muets, et les erreurs du formulaire de commande ne sont signalées que par la couleur.

La bonne nouvelle : les corrections les plus urgentes portent sur des gabarits communs (en-tête, vignette produit, formulaires). Une fois corrigés, ils améliorent toutes les pages à la fois.

Recommandation : Traiter le lot 1 en priorité, avant toute autre évolution de la boutique, puis publier une déclaration d'accessibilité honnête sur l'état du site.

30critères non respectés
20anomalies à corriger
7anomalies bloquantes (P1)
7pages examinées

MÉTHODE

Périmètre et méthode

L'audit porte sur un échantillon de pages représentatives du parcours d'un client, de l'accueil à la commande.

Échantillon de pages

PageAdresse
Accueil/
Liste de produits/marinieres
Fiche produit/marinieres/mariniere-classique
Panier/panier
Formulaire de commande/commande/livraison
Contact/contact
Mentions légales et CGV/mentions-legales

Environnement de test

La méthode combine plusieurs façons d'utiliser le site :

  • lecteur d'écran NVDA avec Firefox (Windows) ;
  • lecteur d'écran VoiceOver avec Safari (macOS et iOS) ;
  • navigation au clavier seul, zoom à 200 % et affichage à 320 px de large ;
  • tests automatiques (axe-core, jeu de règles RGAA) et inspection du code source.

Les versions exactes des logiciels sont notées dans le rapport remis.

VUE D'ENSEMBLE

Carte des 106 critères

Chaque case est un critère du RGAA 4.1. Le détail, critère par critère, figure dans la grille qui suit.

31 critères respectés · 30 non respectés · 45 non applicablesSurvolez une case pour lire le critère.
  • Conforme
  • Non conforme
  • Non applicable

STATUT PAR CRITÈRE

Grille des 106 critères

Statut de chaque critère sur l'ensemble de l'échantillon, avec le vocabulaire officiel du RGAA : un critère est non conforme dès qu'une page de l'échantillon ne le respecte pas.

  • Conforme : respecté sur toutes les pages où il s'applique.
  • Non conforme : au moins une anomalie (voir le lien A1, A2…).
  • Non applicable : aucun contenu concerné dans l'échantillon.
  • Origine : « page démo » si le constat se voit sur la page de démonstration ; « illustratif » s'il est inventé pour l'exemple.

1. Images

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ? Non conforme A4, A8 page démo
1.2 Chaque image de décoration est-elle ignorée par les technologies d'assistance ? Conforme Pictogrammes décoratifs en alt="" illustratif
1.3 L'alternative de chaque image porteuse d'information est-elle pertinente ? Non conforme A8 page démo
1.4 L'alternative d'une image CAPTCHA ou image-test permet-elle d'en identifier la nature ? Non applicable Aucun CAPTCHA dans l'échantillon illustratif
1.5 Une solution d'accès alternatif au CAPTCHA est-elle présente ? Non applicable Aucun CAPTCHA dans l'échantillon illustratif
1.6 Chaque image porteuse d'information a-t-elle, si nécessaire, une description détaillée ? Non applicable Aucune image complexe illustratif
1.7 Chaque description détaillée est-elle pertinente ? Non applicable Aucune image complexe illustratif
1.8 Les images texte porteuses d'information sont-elles remplacées par du texte stylé ? Conforme Pas d'image texte hors logo illustratif
1.9 Chaque légende d'image est-elle correctement reliée à l'image ? Non applicable Aucune légende d'image illustratif

2. Cadres

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
2.1 Chaque cadre a-t-il un titre ? Non conforme A13 page démo
2.2 Le titre de chaque cadre est-il pertinent ? Non applicable Aucun cadre n'a de titre (voir 2.1) page démo

3. Couleurs

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
3.1 L'information n'est-elle jamais donnée uniquement par la couleur ? Non conforme A6 illustratif
3.2 Le contraste entre le texte et son arrière-plan est-il suffisant ? Non conforme A5 page démo
3.3 Les composants d'interface et éléments graphiques porteurs d'information sont-ils assez contrastés ? Non conforme A5 page démo

4. Multimédia

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
4.1 Chaque média temporel pré-enregistré a-t-il une transcription ou une audiodescription ? Non applicable Aucun média dans l'échantillon illustratif
4.2 Ces transcriptions et audiodescriptions sont-elles pertinentes ? Non applicable Aucun média dans l'échantillon illustratif
4.3 Chaque média synchronisé pré-enregistré a-t-il des sous-titres synchronisés ? Non applicable Aucun média dans l'échantillon illustratif
4.4 Ces sous-titres sont-ils pertinents ? Non applicable Aucun média dans l'échantillon illustratif
4.5 Chaque média temporel pré-enregistré a-t-il une audiodescription synchronisée ? Non applicable Aucun média dans l'échantillon illustratif
4.6 Cette audiodescription est-elle pertinente ? Non applicable Aucun média dans l'échantillon illustratif
4.7 Chaque média temporel est-il clairement identifiable ? Non applicable Aucun média dans l'échantillon illustratif
4.8 Chaque média non temporel a-t-il, si nécessaire, une alternative ? Non applicable Aucun média dans l'échantillon illustratif
4.9 Cette alternative est-elle pertinente ? Non applicable Aucun média dans l'échantillon illustratif
4.10 Chaque son déclenché automatiquement est-il contrôlable ? Non applicable Aucun son automatique illustratif
4.11 Chaque média temporel est-il contrôlable au clavier et à la souris ? Non applicable Aucun média dans l'échantillon illustratif
4.12 Chaque média non temporel est-il contrôlable au clavier et à la souris ? Non applicable Aucun média dans l'échantillon illustratif
4.13 Chaque média est-il compatible avec les technologies d'assistance ? Non applicable Aucun média dans l'échantillon illustratif

5. Tableaux

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
5.1 Chaque tableau de données complexe a-t-il un résumé ? Non applicable Aucun tableau complexe page démo
5.2 Ce résumé est-il pertinent ? Non applicable Aucun tableau complexe page démo
5.3 Le contenu linéarisé des tableaux de mise en forme reste-t-il compréhensible ? Non applicable Aucun tableau de mise en forme page démo
5.4 Le titre de chaque tableau de données est-il correctement associé ? Non applicable Le tableau n'a pas de titre (voir 5.6) page démo
5.5 Le titre de chaque tableau de données est-il pertinent ? Non applicable Le tableau n'a pas de titre (voir 5.6) page démo
5.6 Les en-têtes de lignes et de colonnes sont-ils correctement déclarés ? Non conforme A11 page démo
5.7 Chaque cellule est-elle associée à ses en-têtes par la bonne technique ? Non conforme A11 page démo
5.8 Les tableaux de mise en forme évitent-ils les éléments propres aux tableaux de données ? Non applicable Aucun tableau de mise en forme page démo

6. Liens

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
6.1 Chaque lien est-il explicite ? Non conforme A16 illustratif
6.2 Chaque lien a-t-il un intitulé ? Non conforme A4 page démo

7. Scripts

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
7.1 Chaque script est-il compatible avec les technologies d'assistance ? Non conforme A1 page démo
7.2 L'alternative à chaque script est-elle pertinente ? Non applicable Aucun script avec alternative illustratif
7.3 Chaque script est-il contrôlable au clavier et à la souris ? Non conforme A1 page démo
7.4 L'utilisateur est-il averti des changements de contexte ou en a-t-il le contrôle ? Conforme Le choix du pays ne recharge pas la page page démo
7.5 Les messages de statut sont-ils restitués par les technologies d'assistance ? Non conforme A14 illustratif

8. Éléments obligatoires

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
8.1 Chaque page est-elle définie par un type de document ? Conforme page démo
8.2 Le code source généré est-il valide ? Non conforme A18 page démo
8.3 La langue par défaut est-elle présente ? Non conforme A12 page démo
8.4 Le code de langue par défaut est-il pertinent ? Non applicable Langue absente (voir 8.3) page démo
8.5 Chaque page a-t-elle un titre ? Conforme page démo
8.6 Le titre de chaque page est-il pertinent ? Non conforme A17 illustratif
8.7 Chaque changement de langue est-il indiqué ? Non applicable Aucun passage en langue étrangère illustratif
8.8 Le code de chaque changement de langue est-il valide et pertinent ? Non applicable Aucun passage en langue étrangère illustratif
8.9 Les balises sont-elles utilisées pour autre chose que la présentation ? Conforme page démo
8.10 Les changements du sens de lecture sont-ils signalés ? Non applicable Aucun changement de sens de lecture illustratif

9. Structuration de l'information

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
9.1 L'information est-elle structurée par des titres appropriés ? Non conforme A10 page démo
9.2 La structure du document est-elle cohérente ? Non conforme A9 page démo
9.3 Chaque liste est-elle correctement structurée ? Conforme illustratif
9.4 Chaque citation est-elle correctement indiquée ? Non applicable Aucune citation illustratif

10. Présentation de l'information

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
10.1 Des feuilles de styles contrôlent-elles la présentation ? Conforme page démo
10.2 Le contenu visible reste-t-il présent sans feuilles de styles ? Conforme page démo
10.3 L'information reste-t-elle compréhensible sans feuilles de styles ? Conforme page démo
10.4 Le texte reste-t-il lisible avec des caractères agrandis à 200 % ? Conforme illustratif
10.5 Les couleurs de fond et de police sont-elles déclarées correctement en CSS ? Conforme page démo
10.6 Chaque lien dont la nature n'est pas évidente est-il visible dans le texte ? Conforme illustratif
10.7 La prise de focus est-elle visible sur chaque élément ? Non conforme A7 illustratif
10.8 Les contenus cachés ont-ils vocation à être ignorés par les technologies d'assistance ? Conforme page démo
10.9 L'information n'est-elle jamais donnée uniquement par la forme, la taille ou la position ? Conforme illustratif
10.10 Cette règle est-elle implémentée de façon pertinente ? Conforme illustratif
10.11 Les contenus s'affichent-ils sans double défilement à 320 px de large ou 256 px de haut ? Non conforme A19 illustratif
10.12 L'espacement du texte peut-il être redéfini sans perte de contenu ? Conforme illustratif
10.13 Les contenus additionnels au focus ou au survol sont-ils contrôlables ? Non applicable Aucun contenu au survol illustratif
10.14 Les contenus additionnels affichés en CSS sont-ils accessibles au clavier ? Non applicable Aucun contenu affiché en CSS seul illustratif

11. Formulaires

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
11.1 Chaque champ de formulaire a-t-il une étiquette ? Non conforme A2 page démo
11.2 Chaque étiquette est-elle pertinente ? Conforme Formulaire de commande illustratif
11.3 Les étiquettes des champs de même fonction sont-elles cohérentes ? Conforme illustratif
11.4 Chaque étiquette et son champ sont-ils accolés ? Conforme illustratif
11.5 Les champs de même nature sont-ils regroupés ? Non conforme A15 illustratif
11.6 Chaque regroupement de champs a-t-il une légende ? Non conforme A15 illustratif
11.7 Chaque légende de regroupement est-elle pertinente ? Non applicable Aucune légende (voir 11.6) illustratif
11.8 Les choix de même nature d'une liste sont-ils regroupés de manière pertinente ? Conforme page démo
11.9 L'intitulé de chaque bouton est-il pertinent ? Non conforme A3 page démo
11.10 Le contrôle de saisie est-il utilisé de manière pertinente ? Non conforme A6 illustratif
11.11 Le contrôle de saisie propose-t-il des suggestions de correction ? Non conforme A6 illustratif
11.12 Les données d'un formulaire à conséquences financières peuvent-elles être vérifiées et modifiées ? Conforme Récapitulatif modifiable avant paiement illustratif
11.13 La finalité des champs permet-elle le remplissage automatique ? Non conforme A2 page démo

12. Navigation

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
12.1 Chaque ensemble de pages a-t-il au moins deux systèmes de navigation ? Conforme Menu et moteur de recherche illustratif
12.2 Le menu et les barres de navigation sont-ils toujours à la même place ? Conforme illustratif
12.3 La page « plan du site » est-elle pertinente ? Non applicable Pas de plan du site illustratif
12.4 Le plan du site est-il accessible de manière identique ? Non applicable Pas de plan du site illustratif
12.5 Le moteur de recherche est-il atteignable de manière identique ? Conforme illustratif
12.6 Les zones de regroupement (en-tête, navigation, contenu, pied de page) peuvent-elles être atteintes ou évitées ? Non conforme A9 page démo
12.7 Un lien d'évitement vers le contenu principal est-il présent ? Non conforme A9 page démo
12.8 L'ordre de tabulation est-il cohérent ? Conforme page démo
12.9 La navigation est-elle sans piège au clavier ? Conforme illustratif
12.10 Les raccourcis clavier à une seule touche sont-ils contrôlables ? Non applicable Aucun raccourci clavier illustratif
12.11 Les contenus additionnels au survol ou au focus sont-ils atteignables au clavier ? Non applicable Aucun contenu additionnel illustratif

13. Consultation

CritèreIntitulé (abrégé)StatutAnomalie ou remarqueOrigine du constat
13.1 L'utilisateur contrôle-t-il chaque limite de temps ? Non applicable Aucune limite de temps illustratif
13.2 L'ouverture d'une nouvelle fenêtre est-elle toujours déclenchée par l'utilisateur ? Conforme illustratif
13.3 Chaque document à télécharger a-t-il, si nécessaire, une version accessible ? Non conforme A20 illustratif
13.4 Cette version accessible offre-t-elle la même information ? Non applicable Pas de version accessible (voir 13.3) illustratif
13.5 Chaque contenu cryptique a-t-il une alternative ? Non applicable Aucun contenu cryptique illustratif
13.6 Cette alternative est-elle pertinente ? Non applicable Aucun contenu cryptique illustratif
13.7 Les changements brusques de luminosité et les flashs sont-ils correctement utilisés ? Non applicable Aucun flash illustratif
13.8 Chaque contenu en mouvement ou clignotant est-il contrôlable ? Non applicable Aucun contenu en mouvement page démo
13.9 Le contenu est-il consultable en portrait comme en paysage ? Conforme illustratif
13.10 Les gestes complexes ont-ils une alternative par geste simple ? Conforme Le carrousel photo propose aussi des flèches illustratif
13.11 Les actions au pointeur sur un point unique peuvent-elles être annulées ? Conforme illustratif
13.12 Les fonctions déclenchées par un mouvement de l'appareil ont-elles une alternative ? Non applicable Aucune fonction liée au mouvement illustratif

ANOMALIES

Anomalies et corrections

Chaque anomalie indique les pages concernées, ce qui se passe pour les utilisateurs et la correction à apporter, avec un exemple de code. Priorités : P1 bloque le parcours d'achat, P2 gêne fortement, P3 est à planifier.

Priorité 1 : bloquant

7.1 A1 · P1, BLOQUANT · RGAA 7.1, 7.3« Ajouter au panier » n'est pas un bouton 3pages concernées

Description

Le bouton « Ajouter au panier » est un élément span rendu cliquable par un script. Il n'est pas atteignable avec la touche Tab et n'est pas annoncé comme bouton.

Impact pour les utilisateurs

Impossible d'ajouter un produit au panier au clavier ou avec un lecteur d'écran : l'achat s'arrête là.

Préconisation

Utiliser un élément button, nativement utilisable au clavier et annoncé comme bouton.

Pages concernées

Accueil, Liste de produits, Fiche produit

Avant

<span class="btn" onclick="ajouter()">Ajouter au panier</span>

Après

<button type="button" class="btn" onclick="ajouter()">Ajouter au panier</button>
11.1 A2 · P1, BLOQUANT · RGAA 11.1, 11.13Champs sans étiquette 2pages concernées

Description

Le champ e-mail n'a qu'un texte indicatif (« Votre e-mail »), qui disparaît à la saisie ; la liste des pays n'a aucune étiquette. Le champ e-mail n'indique pas sa finalité pour le remplissage automatique.

Impact pour les utilisateurs

Un lecteur d'écran annonce « zone d'édition » et « liste déroulante » sans dire ce qu'il faut saisir ; le remplissage automatique ne fonctionne pas.

Préconisation

Associer une étiquette visible à chaque champ et indiquer sa finalité avec autocomplete.

Pages concernées

Accueil, Formulaire de commande

Avant

<input type="email" placeholder="Votre e-mail">
<select><option>France</option><option>Belgique</option></select>

Après

<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="pays">Pays</label>
<select id="pays" name="pays" autocomplete="country-name">…</select>
11.9 A3 · P1, BLOQUANT · RGAA 11.9Bouton de formulaire sans intitulé 1page concernée

Description

Le bouton du formulaire d'inscription est vide.

Impact pour les utilisateurs

Le bouton est annoncé « bouton » sans dire ce qu'il fait ; à l'écran, il n'affiche rien.

Préconisation

Donner au bouton un texte qui décrit l'action.

Pages concernées

Accueil

Avant

<button></button>

Après

<button type="submit">S'inscrire</button>
6.2 A4 · P1, BLOQUANT · RGAA 6.2, 1.1Liens « Panier » et « Compte » sans intitulé Toutesles pages

Description

Dans l'en-tête, présent sur toutes les pages, le lien vers le panier ne contient qu'une image sans alternative et le lien vers le compte est vide.

Impact pour les utilisateurs

Les utilisateurs de lecteur d'écran ou de commande vocale ne trouvent ni le panier ni leur compte.

Préconisation

Donner une alternative à l'icône et un texte au lien du compte (visible, ou masqué visuellement si le design l'impose).

Pages concernées

Toutes les pages de l'échantillon

Avant

<a href="/panier"><img src="panier.svg"></a>
<a href="/compte"></a>

Après

<a href="/panier"><img src="panier.svg" alt="Panier"></a>
<a href="/compte">Mon compte</a>
3.2 A5 · P1, BLOQUANT · RGAA 3.2, 3.3Contrastes insuffisants (bouton d'achat et promotion) 3pages concernées

Description

Le texte blanc du bouton « Ajouter au panier » sur fond jaune a un contraste de 1,7:1 ; le texte gris de la promotion a un contraste de 2,81:1 (4,5:1 exigé). Le fond jaune du bouton se distingue mal du fond blanc de la page.

Impact pour les utilisateurs

Les personnes malvoyantes lisent mal, ou pas du tout, le bouton d'achat et l'offre en cours.

Préconisation

Foncer les textes et donner au bouton une bordure contrastée.

Pages concernées

Accueil, Liste de produits, Fiche produit

Avant

.promo { color: #9a9a9a; background: #ffffff; }
.btn { background: #f0c040; color: #ffffff; }

Après

.promo { color: #595959; background: #ffffff; }   /* 7:1 */
.btn { background: #f0c040; color: #1a1a1a;     /* 10:1 */
       border: 2px solid #1a1a1a; }
11.10 A6 · P1, BLOQUANT · RGAA 11.10, 11.11, 3.1Erreurs de saisie signalées par la seule couleur 1page concernée

Description

Sur le formulaire de commande, un champ en erreur est seulement entouré de rouge ; les champs obligatoires sont marqués d'un astérisque jamais expliqué ; aucun message n'indique le format attendu.

Impact pour les utilisateurs

La personne ne sait ni quel champ corriger ni comment : la commande ne peut pas être validée.

Préconisation

Expliquer l'astérisque, signaler l'erreur par un texte relié au champ et donner un exemple du format attendu.

Pages concernées

Formulaire de commande (constat illustratif)

Avant

<label for="cp">Code postal *</label>
<input id="cp" class="erreur">

Après

<p>Les champs marqués d'un astérisque (*) sont obligatoires.</p>
<label for="cp">Code postal *</label>
<input id="cp" name="cp" autocomplete="postal-code" required
       aria-invalid="true" aria-describedby="cp-erreur">
<p id="cp-erreur">Code postal : saisissez 5 chiffres, par exemple 29000.</p>
10.7 A7 · P1, BLOQUANT · RGAA 10.7Focus invisible Toutesles pages

Description

La feuille de styles supprime le contour de focus des liens et des boutons.

Impact pour les utilisateurs

En naviguant au clavier, on ne voit plus où l'on se trouve : impossible de suivre le parcours d'achat.

Préconisation

Rétablir un indicateur de focus visible et contrasté.

Pages concernées

Toutes les pages de l'échantillon (constat illustratif)

Avant

a:focus, button:focus { outline: none; }

Après

a:focus-visible, button:focus-visible {
  outline: 3px solid #1a1a1a; outline-offset: 2px;
}

Priorité 2 : important

1.1 A8 · P2, IMPORTANT · RGAA 1.1, 1.3Logo sans alternative, photo produit décrite par son nom de fichier 2pages concernées

Description

Le logo n'a pas d'attribut alt ; la photo de la marinière a pour alternative « mariniere.jpg ».

Impact pour les utilisateurs

Le nom de la boutique n'est pas annoncé ; la photo du produit n'est pas décrite.

Préconisation

Donner au logo le nom de la boutique et décrire ce que montre la photo (texte à rédiger à partir du visuel réel).

Pages concernées

Accueil, Liste de produits

Avant

<img src="logo.png">
<img src="mariniere.jpg" alt="mariniere.jpg">

Après

<img src="logo.png" alt="Boutique Ar Mor">
<img src="mariniere.jpg" alt="[ce que montre la photo]">
9.2 A9 · P2, IMPORTANT · RGAA 9.2, 12.6, 12.7Pas de zones identifiées ni de lien d'évitement Toutesles pages

Description

Les pages n'utilisent ni header, ni nav, ni main, ni footer, et ne proposent pas de lien « Aller au contenu ».

Impact pour les utilisateurs

Les utilisateurs de lecteur d'écran et de clavier doivent parcourir tout l'en-tête à chaque page.

Préconisation

Baliser les zones de la page et ajouter un lien d'évitement en tout début de page.

Pages concernées

Toutes les pages de l'échantillon

Avant

<div class="header">…</div>
<h1>Bienvenue</h1>…

Après

<a class="skip" href="#contenu">Aller au contenu</a>
<header>…<nav aria-label="Menu principal">…</nav></header>
<main id="contenu"><h1>…</h1>…</main>
<footer>…</footer>
9.1 A10 · P2, IMPORTANT · RGAA 9.1Hiérarchie de titres incohérente 1page concernée

Description

Le titre principal est « Bienvenue », puis la page passe directement à un titre de niveau 4 (« Nos nouveautés »).

Impact pour les utilisateurs

La liste des titres, qui sert de sommaire aux utilisateurs de lecteur d'écran, ne reflète pas le contenu.

Préconisation

Un titre principal qui décrit la page, puis des niveaux qui se suivent ; la taille se règle en CSS.

Pages concernées

Accueil

Avant

<h1>Bienvenue</h1>
<h4>Nos nouveautés</h4>

Après

<h1>Boutique Ar Mor</h1>
<h2>Nos nouveautés</h2>
5.6 A11 · P2, IMPORTANT · RGAA 5.6, 5.7Guide des tailles sans en-têtes 2pages concernées

Description

Le tableau des tailles n'a aucune cellule d'en-tête.

Impact pour les utilisateurs

Un lecteur d'écran lit « M, 96 cm » sans dire qu'il s'agit d'une taille et d'un tour de poitrine.

Préconisation

Déclarer les en-têtes de colonnes et donner un titre au tableau.

Pages concernées

Accueil, Fiche produit

Avant

<table>
  <tr><td>Taille</td><td>Tour de poitrine</td></tr>
  <tr><td>M</td><td>96 cm</td></tr>
</table>

Après

<table>
  <caption>Guide des tailles</caption>
  <tr><th scope="col">Taille</th><th scope="col">Tour de poitrine</th></tr>
  <tr><td>M</td><td>96 cm</td></tr>
</table>
8.3 A12 · P2, IMPORTANT · RGAA 8.3Langue de la page non déclarée Toutesles pages

Description

L'élément html n'a pas d'attribut lang.

Impact pour les utilisateurs

Selon leur réglage, les lecteurs d'écran peuvent lire le français avec une prononciation étrangère.

Préconisation

Déclarer le français comme langue principale.

Pages concernées

Toutes les pages de l'échantillon

Avant

<html>

Après

<html lang="fr">
2.1 A13 · P2, IMPORTANT · RGAA 2.1Cadre sans titre 1page concernée

Description

La page d'accueil contient un cadre (iframe) vide et sans titre.

Impact pour les utilisateurs

Le cadre est annoncé sans description : on ne sait pas s'il contient quelque chose d'utile.

Préconisation

Supprimer le cadre s'il est inutile ; sinon, lui donner un titre qui décrit son contenu.

Pages concernées

Accueil

Avant

<iframe src="about:blank"></iframe>

Après

<!-- à supprimer, ou : -->
<iframe src="…" title="[contenu du cadre]"></iframe>
7.5 A14 · P2, IMPORTANT · RGAA 7.5Ajout au panier non annoncé 1page concernée

Description

Après l'ajout d'un produit, le message « Produit ajouté au panier » apparaît à l'écran mais n'est pas restitué.

Impact pour les utilisateurs

Un utilisateur de lecteur d'écran ne sait pas si son action a fonctionné et ajoute parfois le produit plusieurs fois.

Préconisation

Afficher le message dans une zone de statut présente dès le chargement de la page.

Pages concernées

Fiche produit (constat illustratif)

Avant

<div class="toast">Produit ajouté au panier</div>  <!-- inséré par script -->

Après

<p class="toast" role="status"></p>  <!-- présent au chargement, rempli par script -->
11.5 A15 · P2, IMPORTANT · RGAA 11.5, 11.6Adresses de livraison et de facturation non regroupées 1page concernée

Description

Les deux adresses ont des champs identiques (« Nom », « Adresse », « Code postal ») sans regroupement ni légende.

Impact pour les utilisateurs

Un utilisateur de lecteur d'écran ne sait pas s'il remplit l'adresse de livraison ou celle de facturation.

Préconisation

Regrouper chaque adresse dans un fieldset avec une legend.

Pages concernées

Formulaire de commande (constat illustratif)

Avant

<h3>Livraison</h3>
<label for="nom1">Nom</label><input id="nom1">…

Après

<fieldset>
  <legend>Adresse de livraison</legend>
  <label for="nom1">Nom</label><input id="nom1" autocomplete="shipping name">…
</fieldset>

Priorité 3 : à planifier

6.1 A16 · P3, À PLANIFIER · RGAA 6.1Liens « En savoir plus » répétés 1page concernée

Description

Sur la liste de produits, chaque vignette se termine par un lien « En savoir plus » identique.

Impact pour les utilisateurs

Dans la liste des liens d'un lecteur d'écran, une dizaine de « En savoir plus » impossibles à distinguer.

Préconisation

Inclure le nom du produit dans l'intitulé du lien.

Pages concernées

Liste de produits (constat illustratif)

Avant

<a href="/marinieres/mariniere-classique">En savoir plus</a>

Après

<a href="/marinieres/mariniere-classique">En savoir plus<span class="visually-hidden"> sur la marinière classique</span></a>
8.6 A17 · P3, À PLANIFIER · RGAA 8.6Titres de page identiques 4pages concernées

Description

Toutes les pages reprennent le titre de l'accueil dans l'onglet du navigateur.

Impact pour les utilisateurs

Les onglets et l'historique ne permettent pas de savoir sur quelle page on se trouve.

Préconisation

Un titre propre à chaque page, du plus précis au plus général.

Pages concernées

Liste de produits, Fiche produit, Panier, Formulaire de commande (constat illustratif)

Avant

<title>Boutique Ar Mor</title>

Après

<title>Panier (2 articles) - Boutique Ar Mor</title>
8.2 A18 · P3, À PLANIFIER · RGAA 8.2Identifiants en double 1page concernée

Description

Deux éléments portent le même identifiant id="dup".

Impact pour les utilisateurs

Les liens entre étiquettes, champs et messages qui reposent sur ces identifiants peuvent cibler le mauvais élément.

Préconisation

Rendre chaque identifiant unique dans la page.

Pages concernées

Accueil

Avant

<div id="dup">a</div><div id="dup">b</div>

Après

<div id="bloc-a">a</div><div id="bloc-b">b</div>
10.11 A19 · P3, À PLANIFIER · RGAA 10.11Guide des tailles qui déborde sur mobile 1page concernée

Description

À 320 px de large, le tableau des tailles impose un défilement horizontal de toute la page.

Impact pour les utilisateurs

Sur un petit écran ou avec un fort zoom, il faut faire défiler la page dans les deux sens pour lire.

Préconisation

Limiter le défilement au seul tableau, dans une zone qui reste utilisable au clavier.

Pages concernées

Fiche produit (constat illustratif)

Avant

<table class="tailles">…</table>

Après

<div class="defilement" role="region" aria-label="Guide des tailles" tabindex="0">
  <table class="tailles">…</table>
</div>
/* .defilement { overflow-x: auto; } */
13.3 A20 · P3, À PLANIFIER · RGAA 13.3Conditions générales de vente en PDF non accessible 1page concernée

Description

Les CGV ne sont proposées qu'en PDF scanné, sans texte sélectionnable.

Impact pour les utilisateurs

Le document est illisible pour un lecteur d'écran et ne peut pas être agrandi proprement.

Préconisation

Publier les CGV en page HTML (le PDF peut rester en complément).

Pages concernées

Mentions légales et CGV (constat illustratif)

Avant

<a href="/cgv.pdf">CGV</a>

Après

<a href="/conditions-generales-de-vente">Conditions générales de vente</a>
(<a href="/cgv.pdf">version PDF, 240 Ko</a>)

PLAN CORRECTIF

Quoi faire, dans quel ordre

Les actions sont classées par priorité, puis par étendue : ce qui touche le plus de pages passe d'abord. Pour chacune : qui s'en charge, et comment contrôler le résultat.

  • Commencer par ce qui est partagéUn défaut présent sur toutes les pages (en-tête, menu, formulaire type, vignette produit) se corrige une seule fois et améliore tout le site : ces actions passent en premier dans chaque priorité.
  • Contrôler après chaque prioritéChaque action indique comment vérifier le résultat. Contrôlez à la fin de la priorité, avant de passer à la suivante : un correctif mal appliqué se voit tout de suite.
  • Terminer par la déclarationQuand les actions prioritaires sont faites, mettez à jour la déclaration d'accessibilité du site : elle doit décrire l'état réel, y compris ce qui reste à corriger.

Priorité 1 : bloquant

  1. 1

    Liens « Panier » et « Compte » sans intitulé Partagé par plusieurs pages

    Donner une alternative à l'icône et un texte au lien du compte (visible, ou masqué visuellement si le design l'impose).

    Où
    Toutes les pages de l'échantillon
    Qui
    Contribution éditoriale (intitulés de liens) · Intégration
    Comment contrôler
    Affichez la liste des liens de la page avec un lecteur d'écran : chaque intitulé doit se comprendre seul, sans le texte autour (évitez « cliquez ici »). Désactivez l'affichage des images, ou parcourez la page avec un lecteur d'écran : chaque image qui porte une information doit être remplacée par un texte qui dit la même chose, et chaque image décorative doit être ignorée.
  2. 2

    Focus invisible Partagé par plusieurs pages

    Rétablir un indicateur de focus visible et contrasté.

    Où
    Toutes les pages de l'échantillon
    Qui
    Design graphique · Intégration
    Comment contrôler
    Parcourez la page au clavier : l'élément actif doit toujours être bien visible. Puis agrandissez-la à 200 % et affichez-la sur un écran de 320 pixels de large : rien ne doit être coupé ni se chevaucher.
  3. 3

    « Ajouter au panier » n'est pas un bouton

    Utiliser un élément button, nativement utilisable au clavier et annoncé comme bouton.

    Où
    Accueil, Liste de produits, Fiche produit
    Qui
    Développement
    Comment contrôler
    Utilisez la page au clavier seul, puis avec un lecteur d'écran : tout ce qu'un script ajoute ou modifie (menu, fenêtre, message) doit être atteignable et annoncé.
  4. 4

    Contrastes insuffisants (bouton d'achat et promotion)

    Foncer les textes et donner au bouton une bordure contrastée.

    Où
    Accueil, Liste de produits, Fiche produit
    Qui
    Design graphique · Intégration
    Comment contrôler
    Mesurez le contraste des textes et des éléments d'interface avec un outil de contraste (4,5 pour 1 pour le texte courant, 3 pour 1 pour les grands textes), et vérifiez qu'aucune information ne repose sur la seule couleur.
  5. 5

    Champs sans étiquette

    Associer une étiquette visible à chaque champ et indiquer sa finalité avec autocomplete.

    Où
    Accueil, Formulaire de commande
    Qui
    Développement · Intégration
    Comment contrôler
    Remplissez le formulaire au clavier seul, puis avec un lecteur d'écran : chaque champ doit annoncer son étiquette, et les erreurs doivent être décrites et reliées au champ concerné.
  6. 6

    Bouton de formulaire sans intitulé

    Donner au bouton un texte qui décrit l'action.

    Où
    Accueil
    Qui
    Développement · Intégration
    Comment contrôler
    Remplissez le formulaire au clavier seul, puis avec un lecteur d'écran : chaque champ doit annoncer son étiquette, et les erreurs doivent être décrites et reliées au champ concerné.
  7. 7

    Erreurs de saisie signalées par la seule couleur

    Expliquer l'astérisque, signaler l'erreur par un texte relié au champ et donner un exemple du format attendu.

    Où
    Formulaire de commande
    Qui
    Développement · Intégration · Design graphique
    Comment contrôler
    Remplissez le formulaire au clavier seul, puis avec un lecteur d'écran : chaque champ doit annoncer son étiquette, et les erreurs doivent être décrites et reliées au champ concerné. Mesurez le contraste des textes et des éléments d'interface avec un outil de contraste (4,5 pour 1 pour le texte courant, 3 pour 1 pour les grands textes), et vérifiez qu'aucune information ne repose sur la seule couleur.

Priorité 2 : important

  1. 8

    Langue de la page non déclarée Partagé par plusieurs pages

    Déclarer le français comme langue principale.

    Où
    Toutes les pages de l'échantillon
    Qui
    Intégration
    Comment contrôler
    Contrôlez le code de la page avec un validateur : langue du document, titre de page, balisage valide et sans doublon d'identifiant.
  2. 9

    Pas de zones identifiées ni de lien d'évitement Partagé par plusieurs pages

    Baliser les zones de la page et ajouter un lien d'évitement en tout début de page.

    Où
    Toutes les pages de l'échantillon
    Qui
    Intégration · Contribution éditoriale (titres, listes) · Design graphique
    Comment contrôler
    Affichez le plan des titres de la page (extension navigateur ou lecteur d'écran) : un seul titre principal, des niveaux qui se suivent, et les listes balisées comme des listes. Parcourez la page avec la touche Tab : l'ordre doit suivre la lecture, un lien d'évitement doit mener au contenu, et deux moyens de navigation au moins doivent exister sur le site.
  3. 10

    Guide des tailles sans en-têtes

    Déclarer les en-têtes de colonnes et donner un titre au tableau.

    Où
    Accueil, Fiche produit
    Qui
    Intégration
    Comment contrôler
    Parcourez le tableau avec un lecteur d'écran : en se déplaçant de cellule en cellule, les en-têtes de ligne et de colonne doivent être annoncés.
  4. 11

    Logo sans alternative, photo produit décrite par son nom de fichier

    Donner au logo le nom de la boutique et décrire ce que montre la photo (texte à rédiger à partir du visuel réel).

    Où
    Accueil, Liste de produits
    Qui
    Contribution éditoriale (textes alternatifs) · Intégration
    Comment contrôler
    Désactivez l'affichage des images, ou parcourez la page avec un lecteur d'écran : chaque image qui porte une information doit être remplacée par un texte qui dit la même chose, et chaque image décorative doit être ignorée.
  5. 12

    Hiérarchie de titres incohérente

    Un titre principal qui décrit la page, puis des niveaux qui se suivent ; la taille se règle en CSS.

    Où
    Accueil
    Qui
    Intégration · Contribution éditoriale (titres, listes)
    Comment contrôler
    Affichez le plan des titres de la page (extension navigateur ou lecteur d'écran) : un seul titre principal, des niveaux qui se suivent, et les listes balisées comme des listes.
  6. 13

    Cadre sans titre

    Supprimer le cadre s'il est inutile ; sinon, lui donner un titre qui décrit son contenu.

    Où
    Accueil
    Qui
    Intégration
    Comment contrôler
    Parcourez la page avec un lecteur d'écran : chaque cadre intégré (vidéo, carte, formulaire externe) doit être annoncé avec un titre qui dit ce qu'il contient.
  7. 14

    Ajout au panier non annoncé

    Afficher le message dans une zone de statut présente dès le chargement de la page.

    Où
    Fiche produit
    Qui
    Développement
    Comment contrôler
    Utilisez la page au clavier seul, puis avec un lecteur d'écran : tout ce qu'un script ajoute ou modifie (menu, fenêtre, message) doit être atteignable et annoncé.
  8. 15

    Adresses de livraison et de facturation non regroupées

    Regrouper chaque adresse dans un fieldset avec une legend.

    Où
    Formulaire de commande
    Qui
    Développement · Intégration
    Comment contrôler
    Remplissez le formulaire au clavier seul, puis avec un lecteur d'écran : chaque champ doit annoncer son étiquette, et les erreurs doivent être décrites et reliées au champ concerné.

Priorité 3 : à planifier

  1. 16

    Titres de page identiques

    Un titre propre à chaque page, du plus précis au plus général.

    Où
    Liste de produits, Fiche produit, Panier, Formulaire de commande
    Qui
    Intégration
    Comment contrôler
    Contrôlez le code de la page avec un validateur : langue du document, titre de page, balisage valide et sans doublon d'identifiant.
  2. 17

    Liens « En savoir plus » répétés

    Inclure le nom du produit dans l'intitulé du lien.

    Où
    Liste de produits
    Qui
    Contribution éditoriale (intitulés de liens) · Intégration
    Comment contrôler
    Affichez la liste des liens de la page avec un lecteur d'écran : chaque intitulé doit se comprendre seul, sans le texte autour (évitez « cliquez ici »).
  3. 18

    Identifiants en double

    Rendre chaque identifiant unique dans la page.

    Où
    Accueil
    Qui
    Intégration
    Comment contrôler
    Contrôlez le code de la page avec un validateur : langue du document, titre de page, balisage valide et sans doublon d'identifiant.
  4. 19

    Guide des tailles qui déborde sur mobile

    Limiter le défilement au seul tableau, dans une zone qui reste utilisable au clavier.

    Où
    Fiche produit
    Qui
    Design graphique · Intégration
    Comment contrôler
    Parcourez la page au clavier : l'élément actif doit toujours être bien visible. Puis agrandissez-la à 200 % et affichez-la sur un écran de 320 pixels de large : rien ne doit être coupé ni se chevaucher.
  5. 20

    Conditions générales de vente en PDF non accessible

    Publier les CGV en page HTML (le PDF peut rester en complément).

    Où
    Mentions légales et CGV
    Qui
    Contribution éditoriale · Développement
    Comment contrôler
    Vérifiez les contenus qui bougent, s'ouvrent ou se minutent (carrousel, fenêtre, session) : la personne doit pouvoir les contrôler, et les documents à télécharger doivent être accessibles à leur tour.

PLAN D'ACTION

Plan d'action par lots

Les lots se suivent par ordre d'urgence. Chacun se termine par une vérification avant mise en production.

  1. Lot 1 : bloquants du parcours d'achat

    Bouton d'ajout au panier, champs et boutons de formulaire, liens de l'en-tête, contrastes, erreurs de saisie, focus visible.

    AnomaliesA1, A2, A3, A4, A5, A6, A7

  2. Lot 2 : structure et compréhension

    Zones de la page et lien d'évitement, titres, images, tableau des tailles, langue, cadre, messages de statut, regroupements de champs.

    AnomaliesA8, A9, A10, A11, A12, A13, A14, A15

  3. Lot 3 : finitions et documents

    Liens explicites, titres de pages, code valide, affichage sur petit écran, CGV en HTML.

    AnomaliesA16, A17, A18, A19, A20

  4. Contre-vérification

    Nouveau passage sur les critères concernés, mise à jour de la grille et de la déclaration d'accessibilité.

    LivrableGrille mise à jour

Trame de déclaration d'accessibilité

Trame à compléter et à faire relire, sur le modèle prévu par le RGAA. Les passages entre crochets sont à remplir.

[Nom de l'entreprise] s'engage à rendre son site internet accessible, conformément à [texte applicable à votre situation, à vérifier : article 47 de la loi n° 2005-102 du 11 février 2005 ou dispositions issues de l'European Accessibility Act].

Cette déclaration d'accessibilité s'applique au site [adresse du site].

État de conformité

[À compléter d'après les résultats de l'audit, avec la mention prévue par le RGAA.]

Contenus non accessibles

  • [Liste des anomalies restantes après corrections, rédigée pour un visiteur.]
  • [Dérogations pour charge disproportionnée, le cas échéant, avec leur justification.]
  • [Contenus non soumis à l'obligation, le cas échéant.]

Établissement de cette déclaration

Déclaration établie le [date]. Technologies utilisées : [HTML, CSS, JavaScript]. Environnement de test : [combinaisons navigateur et lecteur d'écran]. Pages vérifiées : [liste de l'échantillon].

Retour d'information et contact

Si vous n'arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter [responsable, moyen de contact] pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.

Voies de recours

[Voies de recours prévues par le modèle, dont le Défenseur des droits.]

SUIVI

Contre-vérification après corrections

Après chaque lot, chaque anomalie est vérifiée à nouveau, avec le même environnement de test. La grille et la déclaration sont mises à jour en conséquence.

AnomalieIntituléCritèresLotAprès corrections
A1« Ajouter au panier » n'est pas un bouton7.1, 7.3Lot 1À contre-vérifier
A2Champs sans étiquette11.1, 11.13Lot 1À contre-vérifier
A3Bouton de formulaire sans intitulé11.9Lot 1À contre-vérifier
A4Liens « Panier » et « Compte » sans intitulé6.2, 1.1Lot 1À contre-vérifier
A5Contrastes insuffisants (bouton d'achat et promotion)3.2, 3.3Lot 1À contre-vérifier
A6Erreurs de saisie signalées par la seule couleur11.10, 11.11, 3.1Lot 1À contre-vérifier
A7Focus invisible10.7Lot 1À contre-vérifier
A8Logo sans alternative, photo produit décrite par son nom de fichier1.1, 1.3Lot 2À contre-vérifier
A9Pas de zones identifiées ni de lien d'évitement9.2, 12.6, 12.7Lot 2À contre-vérifier
A10Hiérarchie de titres incohérente9.1Lot 2À contre-vérifier
A11Guide des tailles sans en-têtes5.6, 5.7Lot 2À contre-vérifier
A12Langue de la page non déclarée8.3Lot 2À contre-vérifier
A13Cadre sans titre2.1Lot 2À contre-vérifier
A14Ajout au panier non annoncé7.5Lot 2À contre-vérifier
A15Adresses de livraison et de facturation non regroupées11.5, 11.6Lot 2À contre-vérifier
A16Liens « En savoir plus » répétés6.1Lot 3À contre-vérifier
A17Titres de page identiques8.6Lot 3À contre-vérifier
A18Identifiants en double8.2Lot 3À contre-vérifier
A19Guide des tailles qui déborde sur mobile10.11Lot 3À contre-vérifier
A20Conditions générales de vente en PDF non accessible13.3Lot 3À contre-vérifier

Un audit de ce type pour votre site ?

Échantillon adapté à votre site, grille complète, plan de correction et contre-vérification. Devis ferme après un premier échange.

Demander un audit