L'accessibilité : les 4 points de la grille (WCAG AA)¶
L'essentiel en 3 points
- Un site accessible s'utilise sans souris, sans voir les images et sans une vue parfaite. La norme de référence s'appelle WCAG; votre grille exige le niveau AA.
- La grille nomme 4 points : la sémantique HTML5, les attributs
alt, le contraste et la navigation au clavier. Chacun se teste en quelques minutes. - Les outils (WAVE, Lighthouse) trouvent une partie des problèmes. Le test au clavier, fait par un humain, trouve le reste.
Pour qui? Une personne aveugle qui utilise un lecteur d'écran, une personne qui ne peut pas utiliser de souris, une personne âgée qui voit moins bien les contrastes, quelqu'un qui consulte votre site en plein soleil sur son téléphone... et le recruteur pressé qui navigue avec Tab. L'accessibilité améliore le site pour tout le monde.
- 1. Sémantique
Le bon élément HTML pour le bon rôle.
- 2. Les
alt
Remplacer l'image pour qui ne la voit pas.
- 3. Le contraste
4,5:1 pour le texte courant, 3:1 pour le gros texte.
- 4. Le clavier
Tout faire sans souris, en voyant toujours le focus.
Retour aux consignes QA du portfolio
WAVE en ligne (aucune installation)¶
Allez sur wave.webaim.org , collez l'adresse de votre site en ligne (GitHub Pages), puis Entrée. Ça fonctionne dans tous les navigateurs, même sur un téléphone. Votre page s'affiche avec des icônes de couleur. Repérez-les par leur couleur : chaque catégorie a la sienne.
| Couleur | Catégorie | Ce que ça signale | Quoi faire |
|---|---|---|---|
| 🔴 | Errors (erreurs) | Un vrai problème : image sans alt, lien ou bouton vide, lang manquant |
Corriger |
| 🔴 | Contrast Errors (erreurs de contraste) | Texte sous le ratio AA (4,5:1 ou 3:1) | Corriger |
| 🟡 | Alerts (avertissements) | À juger : titre sauté, alt douteux, lien redondant |
Vérifier |
| 🟢 | Features (bonnes pratiques) | Ce qui est déjà bien fait : alt présent, <label> relié |
Rien à faire |
| 🔵 | Structural Elements (structure) | Vos titres et vos régions (header, nav, main...) |
Vérifier l'ordre |
| 🟣 | ARIA | Attributs aria-* détectés (ex. aria-label) |
Vérifier le sens |
L'onglet Structure du panneau de gauche montre le plan de vos titres et de vos régions.
Ce que WAVE ne voit pas
WAVE analyse la page telle qu'elle se charge. Une modale fermée ou un menu replié n'est pas analysé : le test au clavier (point 4) s'en charge. En multipages, collez aussi l'adresse d'un détail de projet (ex. .../project.html?id=biome).
Lexique WAVE : anglais → français
Le panneau de gauche
| WAVE | En français | Quoi faire |
|---|---|---|
| Errors | Erreurs | À corriger, sans exception |
| Contrast Errors | Erreurs de contraste | À corriger |
| Alerts | Avertissements | À vérifier : pas toujours un problème |
| Features | Éléments d'accessibilité présents | Rien : c'est positif (ex. un alt présent) |
| Structural Elements | Éléments de structure | Vos titres et vos régions |
| Details / Structure / Contrast | Onglets : détail, plan, contraste |
Les erreurs les plus fréquentes
| WAVE | En français |
|---|---|
| Missing alternative text | Image sans alt |
| Linked image missing alternative text | Image dans un lien, sans alt |
| Empty link | Lien sans texte (souvent une icône seule) |
| Empty button | Bouton sans texte (ex. le menu hamburger) |
| Empty heading | Titre vide |
| Missing form label | Champ de formulaire sans <label> |
| Language missing or invalid | lang absent ou invalide sur <html> |
| Very low contrast | Contraste insuffisant |
Les avertissements les plus fréquents
| WAVE | En français |
|---|---|
| Skipped heading level | Niveau de titre sauté (ex. h2 → h4) |
| Missing first level heading | Aucun h1 dans la page |
| Redundant alternative text | Le alt répète le texte voisin |
| Suspicious alternative text | alt douteux (ex. « image », « photo ») |
| Redundant link | Deux liens côte à côte vers la même adresse |
Pour le détail d'une erreur : cliquez sur son icône dans la page, puis sur Reference (en anglais, mais avec un exemple de code).
1. La sémantique HTML5¶
Le bon élément pour le bon rôle. Un lecteur d'écran s'en sert pour annoncer la page et permettre de sauter d'une région ou d'un titre à l'autre.
| À vérifier | Correct | À éviter |
|---|---|---|
| Les régions de la page | <header>, <nav>, <main> (un seul), <footer> |
Que des <div> |
| Les titres | Un seul <h1> par page, puis <h2>, <h3> dans l'ordre |
Choisir <h4> parce qu'il est plus petit : c'est le CSS qui gère la taille |
| Ce qui se clique pour aller ailleurs | <a href="..."> |
<div onclick> |
| Ce qui se clique pour faire une action (ouvrir le menu, la modale) | <button> |
<div> ou <span> cliquable : impossible à atteindre au clavier |
| La langue de la page | <html lang="fr"> |
lang="en" laissé par le gabarit de VS Code |
Le bouton du menu mobile (hamburger)
Un bouton qui ne contient qu'une icône n'a pas de nom pour un lecteur d'écran. Donnez-lui-en un :
<button class="menu-toggle"
aria-label="Ouvrir le menu"
aria-expanded="false">
<svg aria-hidden="true">...</svg>
</button>
aria-expanded passe à "true" quand le menu est ouvert : c'est une ligne de plus dans votre JS.
Tester : WAVE, onglet Structure. Vos titres doivent former un plan logique, sans trou.
2. Les attributs alt¶
Le alt remplace l'image pour ceux qui ne la voient pas (et quand elle ne charge pas). La question à se poser : qu'est-ce que l'image apporte?
| Type d'image | alt |
Exemple |
|---|---|---|
| Informative : elle montre quelque chose d'utile | Ce qu'elle montre, en une phrase | alt="Interface mobile de l'application Biome : carte des sentiers" |
| Décorative : elle ne fait qu'embellir | Vide, mais présent | alt="" |
| Dans un lien : elle est le seul contenu du lien | Où mène le lien | alt="Voir le projet Biome" |
Pas de « image de... »
Le lecteur d'écran annonce déjà « image ». alt="Image de mon projet" ne dit rien d'utile; alt="Affiche du festival Écho, typographie rouge sur fond noir" dit tout.
Vos cartes générées en JavaScript : le alt vient de vos données. Utilisez le titre du projet, ou ajoutez une propriété alt à votre source de données.
`<img src="${project.image}" alt="${project.title}">`
Tester : WAVE signale les alt manquants (Error). Un alt présent mais inutile (alt="img1", alt="photo"), seul un humain peut le voir : survolez les icônes alt dans WAVE pour les lire.
3. Le contraste¶
| Texte | Ratio minimum (AA) |
|---|---|
| Texte courant | 4,5:1 |
| Gros texte : 24 px et plus, ou 18,5 px et plus en gras | 3:1 |
| Bordures de champs, icônes utiles, indicateur de focus | 3:1 |
Les pièges fréquents dans les portfolios : le texte gris pâle « élégant », le texte blanc sur une image, la couleur d'accent utilisée pour du texte, le texte des boutons au survol.
Testez une paire de couleurs
Pièges fréquents
Gros titre
Texte courant d'une carte de projet, en 16 px.
Tester sur votre site :
- Inspecteur → sélectionnez le texte → onglet Styles.
- Cliquez sur le petit carré de couleur à côté de
color. - La fenêtre affiche le Contrast ratio, avec un crochet ✔️ ou un ✖️ pour AA. Elle propose même une couleur corrigée (les deux lignes dans le dégradé).
- Inspecteur → onglet Accessibilité.
- Menu Vérifier les problèmes → Contraste.
- Chaque texte au contraste insuffisant est listé, avec son ratio. Cliquez sur une ligne pour le retrouver dans la page.
WAVE liste aussi les erreurs de contraste, mais il ne peut pas mesurer un texte posé sur une image : celui-là, vérifiez-le à l'œil et à l'inspecteur.
4. La navigation au clavier¶
Mettez la souris de côté, hors de portée de la main, et ne la touchez plus. Cliquez une dernière fois dans la barre d'adresse, puis appuyez sur Tab pour entrer dans la page. Sur votre site :
| Touche | Ce qu'elle doit faire |
|---|---|
| Tab / Shift+Tab | Passer à l'élément interactif suivant / précédent, dans un ordre logique |
| Enter | Suivre un lien, activer un bouton |
| Space | Activer un bouton |
| Esc | Fermer une modale ou un menu ouvert |
Ce qu'on vérifie :
- Tout ce qui se clique est atteignable avec Tab (liens, boutons, cartes, menu).
- On voit toujours où est le focus.
- L'ordre suit la lecture de la page.
- Une modale ouverte garde le focus à l'intérieur, et Échap la ferme.
Le focus visible¶
Le contour du focus est souvent retiré parce qu'on le trouve laid. C'est l'erreur la plus fréquente :
/* ✖️ À ne jamais faire seul : le focus devient invisible */
button:focus { outline: none; }
/* ✔️ Un focus visible, à vos couleurs,
seulement pour la navigation au clavier */
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
:focus-visible s'affiche au clavier, mais pas au clic de la souris : le meilleur des deux mondes.
Essayez au clavier
Cliquez sur Départ, puis appuyez sur Tab plusieurs fois. Décochez la case et recommencez.
La modale : utilisez <dialog>¶
Si votre détail de projet est une modale, l'élément <dialog> ouvert avec showModal() fait le travail difficile à votre place : le focus entre dans la modale, le reste de la page devient inactif, Échap la ferme, et les navigateurs récents redonnent le focus au bouton qui l'a ouverte.
const dialog = document.querySelector('.project-dialog');
dialog.showModal(); // et non dialog.show(), qui n'est pas modal
Prévoyez quand même un <button> de fermeture visible.
Selon votre navigateur¶
Rien à régler : Tab parcourt les liens et les boutons.
Rien à régler. En bonus, l'inspecteur peut afficher l'ordre de tabulation : onglet Accessibilité → cochez Afficher l'ordre de tabulation. Chaque élément atteignable reçoit un numéro, directement sur la page.
Par défaut, Safari ne fait pas passer Tab sur les liens. Activez Safari → Réglages → Avancés → « Appuyer sur Tab pour mettre en évidence chaque élément », ou utilisez Option+Tab.
Bonus : le mouvement¶
Vos animations au défilement respectent-elles prefers-reduced-motion? C'est vu dans la page Animations pilotées par le défilement.
Lighthouse : un point de départ¶
Inspecteur → onglet Lighthouse → cochez Accessibility → Analyze page load.
Firefox n'a pas Lighthouse, mais son inspecteur a un onglet Accessibilité → Vérifier les problèmes (contraste, clavier, libellés).
Utile pour un premier ménage, mais rappelez-vous : un score de 100 ne veut pas dire que votre site est accessible. Le test au clavier et la lecture des alt restent indispensables.