Utiliser les bons éléments HTML pour structurer le contenu de manière compréhensible
<!-- Mauvais : divs sans sémantique -->
<div class="page-header">
<div class="site-title">Mon Site</div>
<div class="navigation">
<div>Accueil</div>
<div>À propos</div>
</div>
</div>
<div class="page-content">
<div class="content-title">Bienvenue</div>
<div>Contenu principal...</div>
</div>
<div class="page-footer">
© 2025 Mon Site
</div>Contenu principal de la page...
<!-- Bon : éléments HTML sémantiques -->
<header>
<div class="site-title">Mon Site</div>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/about">À propos</a></li>
</ul>
</nav>
</header>
<main>
<h1>Bienvenue</h1>
<p>Contenu principal...</p>
</main>
<footer>
<p>© 2025 Mon Site</p>
</footer>Explication : Une structure sémantique claire aide les lecteurs d'écran à naviguer et comprendre le contenu. Les éléments de sectionnement (header, nav, main, footer) créent des repères importants.
L'accessibilité web est importante...
Voici quelques techniques...
Le HTML sémantique...
Les éléments comme header, nav...
Le CSS peut améliorer...
<!-- Mauvais : divs avec classes pour le style -->
<div class="title-large">Introduction</div>
<p>Contenu...</p>
<div class="title-medium">Section 1</div>
<p>Contenu...</p>
<div class="title-medium">Section 2</div>
<p>Contenu...</p>
<div class="title-small">Sous-section</div>
<p>Contenu...</p>L'accessibilité web est importante...
Voici quelques techniques...
Le HTML sémantique...
Les éléments comme header, nav...
Le CSS peut améliorer...
<!-- Bon : hiérarchie de titres sémantiques -->
<h1>Introduction</h1>
<p>Contenu...</p>
<h2>Techniques de base</h2>
<p>Contenu...</p>
<h3>HTML sémantique</h3>
<p>Contenu...</p>
<h4>Éléments de structure</h4>
<p>Contenu...</p>
<h3>CSS et accessibilité</h3>
<p>Contenu...</p>Explication : Une hiérarchie logique des titres (h1 → h2 → h3) permet aux lecteurs d'écran de créer un plan de navigation et aux utilisateurs de comprendre la structure du contenu.
<!-- Mauvais : divs et spans cliquables -->
<div @click="handleSave" style="cursor: pointer;">
💾 Sauvegarder
</div>
<div @click="handleDelete" style="cursor: pointer;">
🗑️ Supprimer
</div>
<span @click="navigateToProfile" style="cursor: pointer;">
👤 Voir le profil
</span><!-- Bon : boutons pour actions, liens pour navigation -->
<button type="button" @click="handleSave">
💾 Sauvegarder
</button>
<button type="button" @click="handleDelete">
🗑️ Supprimer
</button>
<a href="/profile">
👤 Voir le profil
</a>
<button type="button" @click="toggleModal">
ℹ️ Plus d'infos
</button>Explication : Utiliser les bons éléments pour les actions : boutons pour les actions, liens pour la navigation. Cela garantit la bonne sémantique et les comportements clavier attendus.
<!-- Mauvais : divs pour listes -->
<div class="list-title">Ingrédients :</div>
<div>3 œufs</div>
<div>2 cuillères à soupe de lait</div>
<div>Sel et poivre</div>
<div class="list-title">Étapes :</div>
<div>1. Battre les œufs</div>
<div>2. Faire chauffer le beurre</div>
<div>3. Verser et cuire</div><!-- Bon : ul et ol sémantiques -->
<h3>Ingrédients :</h3>
<ul>
<li>3 œufs</li>
<li>2 cuillères à soupe de lait</li>
<li>Sel et poivre</li>
</ul>
<h3>Étapes :</h3>
<ol>
<li>Battre les œufs avec le lait</li>
<li>Faire chauffer le beurre</li>
<li>Verser et cuire</li>
<li>Plier en deux et servir</li>
</ol>Explication : Utiliser les éléments de liste appropriés permet aux lecteurs d'écran d'annoncer le nombre d'éléments et de faciliter la navigation.