Accessibilité HTML
Avant, datalist branchait des suggestions sur un champ. Accessibilité est plus large : toute la page utilisable au clavier, lecteurs d’écran et zoom. Bon HTML — repères, labels, alt, titres, vrais boutons — est la base.
Pourquoi l’accessibilité compte
Certains naviguent sans souris, agrandissent le texte ou écoutent la page. Un graphique sans alt est muet ; une recherche sans label sans nom ; un div cliquable peut ne pas recevoir le focus. Le balisage inclusif aide tout le monde. Souvent des habitudes en écrivant du HTML.
Réponse directe
1) Régions sémantiques et contrôles natifs. 2) Label sur chaque contrôle avec for/id. 3) Alt significatif pour images informatives ; alt vide seulement décoratif. 4) Un h1 clair et imbrication logique sans sauts. 5) Tab vers liens et boutons. 6) ARIA quand le HTML natif ne suffit pas — structure d’abord.
📊 Accessibility habits beginners use
| Habit | Why it helps | Beginner tip |
|---|---|---|
| Semantic landmarks | Tools jump to regions | Prefer main/nav over anonymous divs |
| Labels on controls | Names fields clearly | for= must match the control id |
| Alt on images | Describes non-text content | Say what the image communicates |
| Logical headings | Outlines the page | Do not jump h1 → h4 for style |
| Keyboard-operable controls | Not everyone uses a pointer | Prefer button/a over clickable divs |
| Native before ARIA | Roles come built-in | Repair HTML; do not wallpaper broken markup |
Recherche libellée avec landmark
Petite bande de recherche : nav nommé, champ libellé et vrai bouton. Le lecteur annonce la région et le nom ; Tab atteint l’input et le bouton.
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>
Lire la démo recherche
- nav est un landmark de navigation ; aria-label distingue plusieurs nav
- label for + input id donnent le nom accessible
- name sert à l’envoi — distinct du nom accessible
- type=search est natif
- vrai button avec Entrée/Espace
- Leçon précédente : suggestions ; ici nommer et atteindre
Titres, alt et vrai bouton
Deuxième extrait : h1, h2 imbriqué, image informative avec alt descriptif et action en button. Contraire des liens « cliquez ici » et graphiques muets.
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>
Lire la démo structure
- Un h1 fixe le sujet ; h2 dessous sans sauter à h4
- L’alt du graphique dit l’idée, pas seulement « image »
- Décoratif : alt vide ; ce graphique est informatif
- L’action est button, pas div
- main marque le contenu principal
- Prochaine leçon JavaScript — gardez ces habitudes HTML
Que corriger d’abord
- Champs sans nom : label avant le placeholder
- Images informatives muettes : écrire l’alt
- Faux contrôles : remplacer le div cliquable par button/a
- Soupe de titres : rétablir un plan logique
- Rustines ARIA seules : utiliser l’élément natif s’il existe
- Impasses clavier : tout ce qui se clique doit être Tabable
Pratique — habitudes page entière
- Démo recherche ; retirez le label puis restaurez for/id
- Second nav avec aria-label distinct
- Videz l’alt du graphique ; restaurez un alt significatif
- Sautez volontairement h1→h4 ; corrigez en h1→h2
- Remplacez le bouton par un div ; remettez button et Tab
- Phrase : l’accessibilité commence par la structure HTML, pas le papier peint ARIA
- La leçon suivante ajoute un script — gardez labels et boutons
Erreurs faciles
- Liens « cliquez ici » sans contexte
- Images informatives sans alt ou alt vide
- Divs cliquables qui ignorent le clavier
- Niveaux de titres seulement pour la taille visuelle
- Placeholder à la place du label
- Rôles ARIA sur un balisage cassé
- Oublier que datalist avait aussi besoin d’un label
Résumé
- Accessibilité = structure utilisable pour plus de personnes et d’outils
- Landmarks, labels, alt, titres et boutons natifs comptent
- L’accès clavier fait partie du travail
- HTML solide avant ARIA lourd
- Datalist était un contrôle ; cette leçon voit la page
- Suite : ajouter JavaScript aux pages HTML
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut