Concevoir un site responsive et accessible
Fiche de révision · Développement web · 3e
L'essentiel du cours
Chapitre 1 : Qu’est-ce qu’un site responsive et accessible ?
Responsive = s’adapter à l’écran ; accessible = utilisable par tous.
Chapitre 2 : Rendre le contenu compréhensible et utilisable
Un contenu accessible est lisible, compréhensible et utilisable avec différents moyens.
Chapitre 3 : HTML solide et CSS adaptable
Un HTML clair et des media queries permettent d’adapter sans casser le contenu.
Chapitre 4 : Vérifier sur plusieurs écrans et situations
Tester régulièrement évite les mauvaises surprises sur les appareils réels.
Teste-toi · 8 questions
1.Que signifie « responsive » pour un site web ?
Voir la réponseMasquer la réponse
Réponse : Il s’adapte à la taille de l’écran
Un site responsive adapte sa mise en page à l’écran utilisé : ordinateur, tablette ou téléphone.
2.Pourquoi mettre un texte alternatif sur une image informative ?
Voir la réponseMasquer la réponse
Réponse : Pour décrire l’image aux lecteurs d’écran
Le texte alternatif transmet l’information de l’image aux personnes qui ne peuvent pas la voir.
3.Quels éléments aident à structurer les titres d’une page ?
Voir la réponseMasquer la réponse
Réponse : Les balises h1, h2, etc.
Les titres h1, h2, etc. donnent une structure logique au contenu et aident les lecteurs d’écran.
4.À quoi sert une media query en CSS ?
Voir la réponseMasquer la réponse
Réponse : À appliquer des styles selon la taille de l’écran
Une media query permet d’adapter la mise en page à différentes largeurs d’écran.
5.Quel contraste est préférable pour lire confortablement ?
Voir la réponseMasquer la réponse
Réponse : Texte noir sur fond blanc
Un contraste suffisant entre le texte et le fond améliore la lisibilité pour tous.
6.Comment rendre un menu accessible au clavier ?
Voir la réponseMasquer la réponse
Réponse : Permettre le focus et l’activation avec Tab et Entrée
Les personnes qui ne peuvent pas utiliser une souris doivent pouvoir naviguer avec le clavier.
7.Que faire d’une image purement décorative ?
Voir la réponseMasquer la réponse
Réponse : Lui donner alt=""
Une image décorative n’apporte pas d’information : un attribut alt vide évite de gêner les lecteurs d’écran.
8.Quelle méthode est souvent conseillée pour concevoir un site responsive ?
Voir la réponseMasquer la réponse
Réponse : Mobile-first
La méthode mobile-first consiste à concevoir d’abord pour petit écran, puis à adapter pour les écrans plus larges.