Accessibilité avec CSS
Vous livrez déjà des layouts, du mouvement et des astuces modernes. L’accessibilité en CSS est la couche que les gens ressentent : voit-on où est le focus clavier ? Le texte est-il lisible ? Une animation qui tourne rend-elle quelqu’un malade ? Cette session n’est pas un inventaire HTML (landmarks, alt, ARIA). Ce sont les habitudes de style qui gardent le focus, le contraste et le mouvement utilisables.
Le focus doit rester visible
Les utilisateurs clavier parcourent liens et contrôles avec Tab. Si l’anneau de focus disparaît, ils sont perdus. Préférez :focus-visible : les clics souris restent discrets, le focus clavier reste franc :
:root {
--focus-ring: #2563eb;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}
.text-link:focus:not(:focus-visible) {
outline: none;
}
:focus-visible cible les cas où un anneau aide vraiment (souvent le clavier). Associez-le à un anneau à fort contraste et un peu d’outline-offset pour qu’il ne se confonde pas avec les bordures.
Jamais outline: none sans remplacement
Supprimer l’outline par défaut est acceptable seulement si vous fournissez un style de focus personnalisé plus clair. Un bare *:focus { outline: none; } est le piège classique :
/* Bad: keyboard users lose the only cue */
.bad-button:focus {
outline: none;
}
/* Good: custom ring that still shows focus */
.good-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f766e;
}
Si vous coupez l’outline du navigateur, autre chose doit marquer le contrôle focalisé — box-shadow, couleur de bordure, ou un fond qui reste évident sur chaque thème.
Le contraste est un choix CSS
Les couleurs de marque brillent sur une planche et s’effacent sur un téléphone en plein soleil. Traitez les paires premier plan / arrière-plan comme des décisions d’accessibilité, pas comme de la simple déco :
:root {
--surface: #0f172a;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-text: #0c4a6e;
}
.hero {
background: var(--surface);
color: var(--text);
}
.hero .lede {
color: var(--muted);
}
.hero .cta {
background: var(--accent);
color: var(--accent-text);
font-weight: 700;
}
Visez un contraste fort pour le texte courant et les boutons. Les gris décoratifs peuvent rester plus doux sur des libellés secondaires, mais le contenu principal et les contrôles doivent rester lisibles. Vérifiez les paires avec un outil de contraste avant de publier une palette.
Respecter le mouvement réduit
Animations et grands transforms peuvent provoquer un inconfort. Encadrez le mouvement non essentiel dans prefers-reduced-motion :
.banner {
transition: transform 0.4s ease, opacity 0.4s ease;
}
.banner.is-shown {
transform: translateY(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.banner,
.banner.is-shown {
transition: none;
transform: none;
}
.spinner {
animation: none;
}
}
Ceux qui demandent au système de réduire le mouvement doivent quand même voir l’état final de l’UI — simplement sans le trajet. Gardez les changements d’opacité ou de layout essentiels ; retirez les spins en boucle et les grands slides.
Contraste élevé et forced-colors
Certains environnements écrasent votre palette (High Contrast Windows / forced-colors). Adoucissez les décorations fragiles et gardez de vraies bordures :
.card {
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
@media (forced-colors: active) {
.card {
border: 1px solid CanvasText;
background: Canvas;
box-shadow: none;
color: CanvasText;
}
.card a {
color: LinkText;
}
}
Les mots-clés de couleur système comme Canvas, CanvasText et LinkText aident les contrôles à rester visibles quand c’est l’utilisateur — pas votre guide de marque — qui choisit les couleurs.
Habitudes côté CSS
📊 CSS accessibility habits
| Practice | CSS habit | Avoid |
|---|---|---|
| Keep focus findable | :focus-visible + strong ring / shadow |
outline: none with no replacement |
| Readable type | High-contrast text/background tokens | Light grey on white for body copy |
| Kind motion | @media (prefers-reduced-motion: reduce) |
Endless spins for everyone |
| Survive high contrast | Real borders; forced-colors tweaks |
Shadow-only “edges” |
| Reachable controls | Comfortable padding / hit area | Tiny icon-only targets with no focus style |
HTML reste propriétaire des landmarks, des libellés et du texte alt. CSS décide si, une fois stylés, ces contrôles restent perceptibles.
Liens d’évitement et focus-within
Un skip link saute le chrome répété. Stylez-le pour qu’il apparaisse au focus. :focus-within peut aussi mettre en évidence tout un groupe quand un enfant est focalisé :
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
padding: 0.5rem 0.75rem;
background: #111827;
color: #fff;
border-radius: 0.375rem;
z-index: 20;
}
.skip-link:focus-visible {
top: 1rem;
outline: 3px solid #fbbf24;
outline-offset: 2px;
}
.nav:focus-within {
box-shadow: inset 0 0 0 2px #2563eb;
}
Le skip link reste hors écran jusqu’au focus, puis devient évident. L’anneau de nav aide quand Tab atterrit sur un lien enfant dans la barre.
À vous de jouer
- Ajoutez un anneau
:focus-visibleaux liens et boutons ; parcourez la page avec Tab et confirmez que le focus reste toujours visible. - Prenez une paire à faible contraste et corrigez-la avec un texte plus foncé ou une surface plus profonde.
- Encadrez une transition ou une animation dans
prefers-reduced-motion: reduceet basculez le réglage OS (ou l’émulation DevTools). - Sous émulation forced-colors, vérifiez que les cartes gardent une vraie bordure.
- Stylez un skip link qui n’apparaît qu’au focus clavier.
Erreurs fréquentes
outline: none(ououtline: 0) global sans style de focus personnalisé- Couleurs de marque jolies qui échouent au contraste sur le texte courant et les boutons principaux
- Grosses animations pour tout le monde sans porte
prefers-reduced-motion - Masquer un contrôle focalisable avec
opacity: 0seul alors qu’il reçoit encore Tab - Traiter cette leçon CSS comme un substitut complet au HTML sémantique et à ARIA
Résumé
- Gardez le focus clavier visible — préférez
:focus-visibleet n’effacez jamais l’outline sans un signal plus fort - Traitez le contraste des couleurs comme une exigence pour le texte et les contrôles
- Honorez
prefers-reduced-motionet renforcez les styles pourforced-colors - Stylez les skip links et utilisez
:focus-withinquand un groupe a besoin d’un signal partagé - Suite : Résumé CSS et prochaines étapes (
summary) — boucler le cours avant le mini-projet
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut