Historique des conversations
Chargement...
Chapitre 12 : Accessibilité et bonnes pratiques HTML
Chapitre 12 : Accessibilité web et bonnes pratiques
Qu’est-ce que l’accessibilité web ?
L’accessibilité vise à rendre les sites utilisables par tous, y compris les personnes en situation de handicap (visuel, moteur, cognitif...).
Bonnes pratiques d’accessibilité
- Utiliser les balises HTML sémantiques (
<header>,<nav>, etc.) - Ajouter l’attribut
altaux images - Associer les
<label>aux<input> - Ne pas dépendre uniquement des couleurs pour transmettre une information
- Utiliser un contraste suffisant entre texte et fond
- Permettre la navigation au clavier (sans souris)
Exemple : formulaire accessible
<form>
<label for="email">Adresse e-mail :</label>
<input type="email" id="email" name="email" required>
</form>Accessibilité des images
Le texte alternatif alt doit décrire l’image pour les lecteurs d’écran.
<img src="logo.png" alt="Logo de l'entreprise">Utilisation des rôles ARIA (avancé)
ARIA (Accessible Rich Internet Applications) aide à décrire des éléments dynamiques ou complexes.
<div role="alert">Erreur lors de la soumission du formulaire.</div>Conclusion
Un site accessible est un site plus universel, plus inclusif, et souvent mieux référencé. L’accessibilité est une responsabilité, pas une option.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 12
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Texte alternatif
Atelier #1Pourquoi l'attribut alt est-il crucial pour les images ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!-- Il décrit l'image pour les lecteurs d'écran et si l'image ne charge pas. -->
<img src="img.jpg" alt="Description précise">
#2 — Label explicite
Atelier #2Associe correctement un label à son champ input (via id/for).
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<label for="email">Votre email :</label>
<input type="email" id="email" name="email">
#3 — Rôles ARIA
Atelier #3Comment signaler qu'un div fonctionne comme un bouton ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<div role="button" tabindex="0">Cliquez</div>
#4 — Hiérarchie des titres
Atelier #4Peut-on sauter du h2 au h4 ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!-- Non, il faut respecter l'ordre hiérarchique pour la navigation. -->
<h2>Titre 2</h2>
<h3>Titre 3</h3>
#5 — Liens explicites
Atelier #5Pourquoi éviter 'Cliquez ici' comme texte de lien ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<!-- Le lien doit décrire sa destination pour être compréhensible hors contexte. -->
<a href="contact.html">Contactez-nous</a>