HTML sémantique comme fondation
Utilisez des éléments HTML natifs comme button, nav et heading pour bénéficier d’une accessibilité intégrée, avant de recourir à ARIA.
HTML sémantique comme fondation est une leçon Frontend Academy 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Le HTML sémantique offre l’accessibilité gratuitement
Utiliser le bon élément HTML vous offre la prise en charge du clavier, les annonces des lecteurs d’écran et les rôles ARIA appropriés, gratuitement. La plupart des problèmes d’accessibilité viennent de l’utilisation de div + JavaScript au lieu de l’élément natif.
button contre div avec onClick
Un <button> peut recevoir le focus, est annoncé comme « bouton » par les lecteurs d’écran, déclenche un clic avec Entrée/Espace et fonctionne avec la soumission d’un formulaire. Un <div onClick> ne possède aucune de ces caractéristiques.
<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>
<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>Utilisez button pour les boutons et a pour les liens
Si l’action permet d’accéder à une URL, utilisez <a href>. Si l’action effectue quelque chose sur la page, utilisez <button>. N’utilisez pas les ancres comme des boutons (sans href, avec seulement onclick) : cela prête à confusion pour les technologies d’assistance.
Les titres structurent le plan du document
Utilisez h1 à h6 dans l’ordre pour créer un plan logique. Les utilisateurs de lecteurs d’écran naviguent à l’aide des titres : sauter des niveaux (h1 -> h3) crée des ruptures déroutantes.
<h1>Article Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>Éléments de repère
Les éléments de repère HTML5 (header, nav, main, aside, footer) permettent aux utilisateurs de lecteurs d’écran de passer d’une grande région à l’autre. Un seul <main> par page.
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>...</article>
<aside>Sidebar</aside>
</main>
<footer>...</footer>Éléments de liste
Utilisez <ul> pour les listes non ordonnées, <ol> pour les listes ordonnées et <dl> pour les listes de définitions. Les lecteurs d’écran annoncent « liste de N éléments » : c’est une indication de navigation utile.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->Formulaires : étiquetez chaque champ input
Chaque champ input doit être associé à un <label>. La paire for/id les relie : cliquer sur le label place le focus sur le champ input, et les lecteurs d’écran annoncent le label lorsque le focus arrive.
<label for="email">Email</label>
<input id="email" name="email" type="email">
<!-- Or wrap (no for/id needed): -->
<label>
Email
<input name="email" type="email">
</label>fieldset et legend pour les groupes
Regroupez les champs input associés (par exemple, les boutons radio) avec <fieldset> + <legend>. Les lecteurs d’écran annoncent la légende chaque fois qu’un champ input du groupe reçoit le focus.
<fieldset>
<legend>Choose a plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Les éléments table pour les données tabulaires
Utilisez <table> avec <thead>, <tbody> et <th scope="col"> : n’utilisez jamais les tableaux pour la mise en page. Les lecteurs d’écran parcourent les cellules en deux dimensions et annoncent les en-têtes.
article, section et figure
<article> : contenu autonome (article de blog, commentaire). <section> : regroupement thématique avec un titre. <figure> + <figcaption> : média avec légende.
ARIA uniquement lorsque c’est nécessaire
La première règle d’ARIA : n’utilisez pas ARIA. Le HTML natif est toujours préférable. Utilisez ARIA uniquement lorsqu’aucun élément sémantique ne convient à votre composant personnalisé (combobox, onglets, arborescence).
Vérification rapide
Pourquoi <button onclick="..."> est-il préférable à <div onclick="..."> ?
Récapitulatif : HTML sémantique
Utilisez le bon élément : button pour les actions, a pour la navigation, h1-h6 dans l’ordre pour le plan, les éléments de repère (header, nav, main, footer), ul/ol pour les listes, label pour chaque champ input, fieldset/legend pour les groupes de boutons radio, table pour les tableaux de données. Le HTML natif offre l’accessibilité gratuitement. ARIA est une solution de dernier recours.
Questions Fréquemment Posées
La leçon « HTML sémantique comme fondation » est-elle gratuite ?
Oui — le texte complet de « HTML sémantique comme fondation » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « HTML sémantique comme fondation » ?
Utilisez des éléments HTML natifs comme button, nav et heading pour bénéficier d’une accessibilité intégrée, avant de recourir à ARIA. Tu pratiques Frontend Academy 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy 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 « HTML sémantique comme fondation » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend Academy 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
- Niveaux WCAG : A, AA et AAA
- HTML sémantique comme fondation
- Rôles et attributs ARIA
- Navigation au clavier et gestion du focus