Front-end · 6 mondes · 18 étapes
HTML & CSS
Structurer et styliser une page web, directement dans le navigateur.
Progression
0 %
0/18 étapes terminées
Intermédiaire · 10 min de lecture
Responsive et accessibilité
Une page qui marche pour tout le monde, partout
1Définition
Une page responsive s'adapte à la largeur de l'écran ; une page accessible reste utilisable quelle que soit la façon dont on la consulte — clavier, lecteur d'écran, zoom, soleil. Les deux reposent sur la même discipline : une structure saine, et des règles pensées du plus contraint au plus confortable.
2Principes fondamentaux
01
Mobile d'abord
Le style de base sert le petit écran ; les @media (min-width: …) n'ajoutent que ce dont les grands écrans ont besoin.
02
La balise viewport
Sans elle, un téléphone simule un écran de 980 px et dézoome tout. Elle est obligatoire.
03
Le clavier d'abord
Tout ce qui se clique doit s'atteindre au Tab, avec un focus visible.
04
Étiqueter, décrire, contraster
Chaque champ a son label, chaque image son alt, chaque texte un contraste suffisant.
3Exemples pratiques
Mobile d'abord
1.mur { display: grid; grid-template-columns: 1fr; gap: 16px; }2 3@media (min-width: 700px) {4 .mur { grid-template-columns: repeat(3, 1fr); }5}Une colonne sans condition, trois au-delà de 700 px. L'ordre inverse — tout écrire pour grand écran puis tout défaire — produit deux fois plus de CSS.
Un champ bien étiqueté
1<label for="email">Adresse e-mail</label>2<input id="email" type="email" autocomplete="email" />Le lien for / id fait lire l'étiquette par les lecteurs d'écran, et un clic sur le texte place le curseur dans le champ.
4Erreurs courantes
Supprimer le focus
À éviter
button:focus { outline: none; }À faire
button:focus-visible { outline: 3px solid #00a4a9; }Pourquoi : La navigation au clavier devient impossible. On remplace le contour, on ne le supprime pas.
Le placeholder comme étiquette
À éviter
<input placeholder="E-mail" />À faire
<label for="e">E-mail</label><input id="e" />Pourquoi : Le texte indicatif disparaît à la saisie et n'est pas toujours annoncé.
Oublier les images
À éviter
img { width: 800px; }À faire
img { max-width: 100%; height: auto; }Pourquoi : Une image fixe plus large que l'écran crée un défilement horizontal sur tous les téléphones.
5Subtilités à connaître
- ◆
prefers-reduced-motionpermet de couper les animations pour les personnes que le mouvement incommode :@media (prefers-reduced-motion: reduce) { * { transition: none; } }. - ◆Le zoom à 200 % doit rester utilisable : des unités relatives (
rem) pour les textes y contribuent directement. - ◆Tester au clavier seul, puis avec le lecteur d'écran du système (VoiceOver, NVDA), révèle en dix minutes ce qu'aucun outil automatique ne voit.
6Vérifie ta compréhension
Question 1/3
Score 0
Mobile d'abord signifie…
Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.