Aller au contenu
Célian Guiziou Accessibilité numérique (retour à l’accueil) Réserver un appel (Cal.com, site externe)

Démonstration : une fiche produit avant et après correction

Pour vous montrer concrètement ce que change une mise en accessibilité, j’ai créé une boutique fictive, « Boutique Exemple », et une de ses fiches produit en deux versions.

Les deux versions

Testez vous-même en deux minutes

  1. Appuyez plusieurs fois sur la touche Tab : dans la version avant, vous ne voyez pas où vous êtes, et certains boutons restent hors d’atteinte.
  2. Cherchez si le produit est en stock : dans la version avant, seule une pastille de couleur l’indique.
  3. Avec un lecteur d’écran (NVDA, VoiceOver), écoutez comment les images et les boutons sont annoncés.

Tableau d’audit

Chaque ligne décrit une erreur de la version avant, le critère du RGAA 4.1.2 concerné, ce qu’elle change pour les visiteurs et la correction appliquée dans la version après. Sur petit écran, le tableau défile horizontalement.

Non-conformités de la version avant et corrections appliquées dans la version après (RGAA 4.1.2)
Erreur Critère RGAA Impact pour les utilisateurs Correction appliquée (code avant / après)
1. Images sans texte alternatif Une personne aveugle entend « image » ou le nom du fichier : elle ne sait pas à quoi ressemble le produit.

Ajout d’un attribut alt qui décrit ce que montre chaque image.

Code avant

<img src="sac-face.svg">

Code après

<img src="sac-face.svg"
  alt="Sac à dos Randonnée coloris sable,
  vu de face : rabat fermé par deux sangles
  à boucle et poche avant zippée.">
2. Textes peu contrastés Les personnes malvoyantes ou âgées, et toute personne qui consulte son téléphone en plein soleil, lisent difficilement la description, le prix, le texte d’exemple des champs et le texte du bouton.

Couleurs remplacées par des teintes qui atteignent au moins 4,5:1.

Code avant

.av-texte { color: #a6a6a6; }  /* 2,43:1 */
.av-prix { color: #f4a68c; }   /* 1,96:1 */
.av-bouton {
  color: #fff;
  background: #f0a07f;          /* 2,09:1 */
}

Code après

.ap-texte { color: #5e554d; }  /* 7,28:1 */
.ap-prix { color: #2b2622; }   /* 14,96:1 */
.ap-bouton {
  color: #fff;
  background: #a63d1e;          /* 6,34:1 */
}
3. Champs et pastilles de coloris peu visibles La bordure des champs se confond avec le fond : on ne voit pas où saisir la quantité. La pastille « sable » et le contour orangé du coloris sélectionné se distinguent à peine du fond blanc.

Bordure des champs plus foncée, qui atteint au moins 3:1 ; les coloris deviennent des boutons radio natifs, avec leur nom écrit à côté.

Code avant

.av-champ {
  border: 1px solid #e4e4e4;  /* 1,27:1 */
}
.av-selection {
  border-color: #f0a07f;      /* 2,09:1 */
}

Code après

.ap-champ input {
  border: 2px solid #7a706a;  /* 4,82:1 */
}
4. Champs sans étiquette Le lecteur d’écran annonce « modifier, texte » sans dire quoi saisir. Le texte d’exemple disparaît dès qu’on tape, ce qui gêne aussi les personnes qui ont des troubles de la mémoire ou de l’attention.

Chaque champ reçoit une étiquette visible, reliée au champ par les attributs for et id.

Code avant

<input type="text" placeholder="Qté">

Code après

<label for="quantite">Quantité</label>
<input id="quantite" name="quantite"
  type="number" min="1" value="1">
5. Focus invisible Une personne qui navigue au clavier ne voit pas où elle se trouve dans la page.

Indicateur de focus à deux couleurs, visible sur tous les fonds.

Code avant

.boutique--avant :focus-visible {
  outline: none;
  box-shadow: none;
}

Code après

:focus-visible {
  outline: 3px solid #152036;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffd166;
}
6. Bouton et choix de coloris construits avec des <div> Le « bouton » ne peut pas être atteint avec la touche Tab et le lecteur d’écran ne l’annonce pas comme un bouton. Dans une vraie boutique, un script le rendrait cliquable à la souris seulement : sans souris, impossible d’acheter.

Vrai élément <button> et vrais boutons radio : utilisables au clavier et correctement annoncés, sans aucun script.

Code avant

<div class="av-bouton">
  Ajouter au panier
</div>

Code après

<button type="submit">
  Ajouter au panier
</button>
7. Carrousel automatique sans pause Les images changent seules toutes les 5 secondes : impossible de les regarder à son rythme, gênant pour se concentrer, et source de vertiges pour les personnes sensibles aux mouvements.

Carrousel remplacé par une galerie fixe : toutes les images sont visibles et rien ne bouge sans action de l’utilisateur.

Code avant

.av-diapo {
  animation: defilement 15s infinite;
}

Code après

<ul class="ap-galerie">
  <li><img src="sac-face.svg" alt="…"></li>
  <li><img src="sac-dos.svg" alt="…"></li>
  <li><img src="sac-interieur.svg" alt="…"></li>
</ul>
8. Faux titres Les personnes qui utilisent un lecteur d’écran naviguent de titre en titre. Sans vrais titres, elles doivent tout écouter pour trouver la description ou la garantie.

Balises de titre h2 et h3, dans l’ordre de la structure de la page.

Code avant

<div class="av-titre">
  Sac à dos Randonnée 20 L
</div>
<div class="av-sous-titre">
  Description
</div>

Code après

<h2>Sac à dos Randonnée 20 L</h2>
<h3>Description</h3>
9. Information donnée par la couleur seule Une personne daltonienne ou aveugle ne sait ni si le produit est en stock (pastille verte), ni quel coloris est sélectionné (contour orangé).

Disponibilité écrite en toutes lettres ; coloris nommés dans des boutons radio.

Code avant

<span class="av-pastille-verte"></span>

Code après

<p>
  <svg aria-hidden="true" …></svg>
  En stock, expédié sous 48 h
</p>
10. Lien « En savoir plus » Hors de son contexte, par exemple dans la liste des liens proposée par un lecteur d’écran, « En savoir plus » ne dit pas où mène le lien.

Intitulé explicite, qui se comprend seul.

Code avant

<a href="#av-garantie">En savoir plus</a>

Code après

<a href="#garantie">
  Lire les conditions de garantie
  et de retour
</a>

Les numéros de critères renvoient à la méthode officielle du RGAA sur accessibilite.numerique.gouv.fr.

Ce que voient les outils automatiques

Testée avec Pa11y 9 (moteurs axe-core 4.11 et HTML_CodeSniffer), la version avant ne révèle que 3 types d’erreurs sur 10 : les images sans texte alternatif, les textes peu contrastés et les champs sans étiquette.

Les 7 autres (champs et pastilles peu visibles, focus invisible, faux boutons, carrousel sans pause, faux titres, information par la couleur seule, lien ambigu) n’apparaissent qu’avec des tests manuels : au clavier, au lecteur d’écran et à l’œil.

Parlons de votre site

En 20 minutes, nous faisons le point : êtes-vous concerné, où en est votre site, par quoi commencer.

Réserver un appel découverte (Cal.com, site externe)

La réservation se fait sur Cal.com, un site externe. Vous préférez écrire ? contact@celian-guiziou.com