Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Accessibilité : focus, contraste et mouvements réduits | SovranCode

Contenu du coursCSS — Accessibilité · 26 leçons

Les bases de CSS

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités CSS — Couleurs CSS — Fonctions CSS — Variables

Boîtes et mise en page

CSS — Modèle de boîte CSS — Display CSS — Positionnement CSS — Z-index et empilement CSS — Flexbox CSS — Grid

Couleurs et typographie

CSS — Arrière-plans CSS — Bordures et ombres CSS — Typographie

Un CSS adaptable et durable

CSS — Media queries CSS — Container queries CSS — Architecture CSS — Accessibilité

États et mouvements

CSS — Pseudo-classes CSS — Pseudo-éléments CSS — Transformations CSS — Transitions CSS — Animations CSS — Débordements

CSS63 min

CSS — Accessibilité

Gardez le focus visible, un contraste lisible et le contenu disponible lorsque les mouvements sont réduits. Faites comprendre les états de l’interface autrement que par la couleur ou l’animation seules.

CSS peut faciliter l’accès à une interface ou le gêner. Le focus clavier doit rester visible, l’information ne doit pas dépendre uniquement de la couleur et les mouvements doivent respecter les préférences de la personne. Un texte masqué visuellement pour des raisons de présentation doit rester accessible aux technologies d’assistance lorsqu’il leur est destiné.

Examiner le focus et les mouvements réduits

Repérez le contour de focus et la condition prefers-reduced-motion. Cet exemple présente une règle globale de désactivation des animations ; dans l’atelier, observez comment cibler les propriétés du composant. Avant d’appliquer une règle globale à un projet, vérifiez aussi les scripts ou composants qui attendent des événements d’animation.

:focus-visible {
  outline: 3px solid #718817;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
  }
}

Les bons réflexes

Testez chaque élément interactif avec le clavier.
Gardez un indicateur de focus visible sur tous les fonds qu’il peut rencontrer.
Prévoyez une variante à mouvements réduits qui conserve les changements d’état utiles.

ATELIER CSS · ENVIRON 35 MIN

Terminer un mini-projet CSS utilisable par tous

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Concevoir les états pour plusieurs modes d’interaction

Le survol n’est qu’une façon d’interagir. Au clavier, il faut voir où se trouve le focus ; sur écran tactile, un effet de survol peut ne jamais être disponible de manière utile. :focus-visible laisse le navigateur appliquer le style de focus selon ses critères. Gardez le contour par défaut tant qu’un remplacement efficace n’est pas en place. Testez-le sur les fonds adjacents et vérifiez qu’aucun ancêtre ne le découpe avec overflow. Utilisez de véritables liens et boutons afin que CSS complète leur fonctionnement natif.

Respecter les préférences en conservant l’information

La préférence de mouvements réduits demande de limiter les déplacements inutiles, tout en gardant le résultat de l’action. Nommez les propriétés des transitions et ciblez les transformations ou animations décoratives dans une règle dédiée. Évitez les astuces globales de durées minuscules quand vous pouvez désactiver directement le mouvement concerné : des scripts peuvent dépendre des événements d’animation, ce qui demande des essais. Les erreurs, les sélections et les confirmations doivent comporter du texte ou un autre repère clair, au-delà de la couleur seule. Vérifiez aussi les couleurs forcées et la visibilité des contrôles lorsque le système remplace votre palette.

Naviguez avec Tab, puis activez l’émulation de mouvements réduits dans les outils de rendu du navigateur. Comparez le déplacement au survol en gardant le libellé et le focus visibles. Aucun envoi n’est réalisé par cet aperçu. Le bac à sable intégré bloque les soumissions : pour tester la validation native du formulaire, téléchargez le fichier et ouvrez-le dans un navigateur.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 2rem; color: #172b40; }
form { display: grid; gap: .75rem; max-width: 30rem; }
input, button { font: inherit; padding: .75rem; border: 2px solid #172b40; }
button { background: #173c88; color: white; transition: transform 150ms ease; }
button:hover { transform: translateY(-2px); }
:focus-visible { outline: 3px solid #b04c00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:hover { transform: none; } }
</style>
</head>
<body>
<main><h1>Inscription à l’atelier</h1><p>Entraînez-vous à parcourir ce petit formulaire au clavier.</p><form><label for="email">Adresse e-mail</label><input id="email" type="email" required><button type="submit">Vérifier le format de l’adresse</button></form><p>Cet aperçu n’envoie aucune inscription. La validation du navigateur ne suffit pas à elle seule pour un véritable formulaire.</p></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 2rem; color: #172b40; }
form { display: grid; gap: .75rem; max-width: 30rem; }
input, button { font: inherit; padding: .75rem; border: 2px solid #172b40; }
button { background: #173c88; color: white; transition: transform 150ms ease; }
button:hover { transform: translateY(-2px); }
:focus-visible { outline: 3px solid #b04c00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:hover { transform: none; } }
</style>
</head>
<body>
<main><h1>Inscription à l’atelier</h1><p>Entraînez-vous à parcourir ce petit formulaire au clavier.</p><form><label for="email">Adresse e-mail</label><input id="email" type="email" required><button type="submit">Vérifier le format de l’adresse</button></form><p>Cet aperçu n’envoie aucune inscription. La validation du navigateur ne suffit pas à elle seule pour un véritable formulaire.</p></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

button:focus { outline: none; }
button:hover { transform: scale(1.2); transition: all 1s; }

Voir la correction et son explication

button:focus-visible { outline: 3px solid #b04c00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { button:hover { transform: none; transition: none; } }

Conservez un indicateur de focus visible et prévoyez une variante à mouvements réduits. Un effet de survol ne remplace pas le retour visuel nécessaire au clavier. Lors de la correction, retirez aussi la règle button:focus qui supprimait le contour.

À VOUS DE JOUER

Créer sans recopier l’exemple

Réunissez les acquis du cours dans une page d’atelier adaptable : texte d’article lisible, collection de cartes Grid, barre d’outils Flexbox avec retour à la ligne et formulaire muni de libellés. Vérifiez-la au clavier et avec des mouvements réduits.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Terminer un mini-projet CSS utilisable par tous — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Terminer un mini-projet CSS utilisable par tous</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Terminer un mini-projet CSS utilisable par tous — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Terminer un mini-projet CSS utilisable par tous</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Tous les contrôles ont des libellés compréhensibles et un focus clavier visible, sans découpage.La page se réorganise à 320px et avec un zoom à 200% sans perte de contenu.Une variante à mouvements réduits est prévue et les états ne reposent pas sur la couleur seule.Vous savez expliquer les choix de cascade, de dimensions et de disposition de votre feuille de style.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Dans quel cas peut-on retirer le contour de focus par défaut ?L’interface paraît plus épuréeUn indicateur de focus au moins aussi visible le remplaceLa page propose des effets de survol à la souris

2. Que faut-il adapter lorsque les mouvements doivent être réduits ?Masquer tous les contrôlesSupprimer tous les retours d’étatRéduire les mouvements inutiles en conservant l’information

Chargement du travail enregistré…

Vos choix de confidentialité

Les bases de CSS

Boîtes et mise en page

Couleurs et typographie

Un CSS adaptable et durable

États et mouvements

CSS — Accessibilité

Examiner le focus et les mouvements réduits

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point sur le cours

Terminer un mini-projet CSS utilisable par tous

Concevoir les états pour plusieurs modes d’interaction

Respecter les préférences en conservant l’information

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris