Bases de l’accessibilité
Ajoutez un texte alternatif aux images et rendez vos pages web faciles à utiliser
Bases de l’accessibilité est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 4 leçons au total.
Rendre les pages accessibles
Bases de l’accessibilité
Bienvenue dans la prochaine leçon ! Aujourd’hui, nous apprendrons à rendre vos pages web accessibles à tout le monde, y compris aux personnes en situation de handicap. L’accessibilité est un aspect essentiel de la création de sites web faciles à utiliser.
Qu’est-ce que l’accessibilité ?
L’accessibilité garantit que tous les utilisateurs, quelles que soient leurs capacités, peuvent interagir avec vos pages web. Cela inclut les personnes qui :
- présentent des déficiences visuelles ou auditives ;
- utilisent des lecteurs d’écran ou d’autres technologies d’assistance ;
- naviguent sur les sites web à l’aide d’un clavier plutôt que d’une souris.
Apprenons à rendre vos pages plus inclusives !
Ajouter un texte alternatif aux images
Utilisez l’attribut alt dans la balise <img> pour décrire l’image. Cela aide les lecteurs d’écran à transmettre le contenu de l’image aux utilisateurs malvoyants.
Exemple :
<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />
Utiliser le HTML sémantique
Les balises sémantiques, telles que <header>, <nav> et <footer>, aident les technologies d’assistance à comprendre la structure de votre page.
Exemple :
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<footer>
<p>© 2024 My Blog</p>
</footer>
Navigation au clavier
Vérifiez que tous les éléments interactifs, tels que les liens et les boutons, sont accessibles à l’aide de la touche Tab. Utilisez l’attribut tabindex pour contrôler l’ordre de navigation avec la touche Tab.
Exemple :
<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>
Fournir des libellés aux champs de saisie
Utilisez la balise <label> pour fournir des descriptions claires des champs de saisie. Reliez le libellé au champ de saisie à l’aide de l’attribut for.
Exemple :
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</form>
Contraste des couleurs
Veillez à ce que le contraste entre les couleurs du texte et de l’arrière-plan soit suffisant afin que tout le monde puisse lire facilement votre contenu. Utilisez des outils en ligne pour vérifier les rapports de contraste des couleurs.
Conseil : Un contraste élevé améliore la lisibilité pour les personnes ayant une déficience visuelle.
Exemple :
<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>
Essayez vous-même
Créons un formulaire accessible. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Accessible Form</title>
</head>
<body>
<h1>Sign Up</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<button type="submit">Sign Up</button>
</form>
</body>
</html>
Récapitulatif sur l’accessibilité
Excellent travail !
Félicitations ! Vous avez appris à rendre vos pages web accessibles à tout le monde. L’accessibilité est un aspect essentiel du développement web moderne. Dans la prochaine leçon, vous apprendrez à valider votre code HTML afin de vérifier qu’il respecte les normes du Web. Préparez-vous à perfectionner vos compétences !
Questions Fréquemment Posées
La leçon « Bases de l’accessibilité » est-elle gratuite ?
Oui — le texte complet de « Bases de l’accessibilité » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Bases de l’accessibilité » ?
Ajoutez un texte alternatif aux images et rendez vos pages web faciles à utiliser Tu pratiques HTML for Kids avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Bases de l’accessibilité » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML for Kids ?
Oui. Chaque leçon HTML for Kids inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Écrire du code propre
- Bases de l’accessibilité
- Valider votre HTML
- Commentaires HTML