Les éléments HTML5 tels que main, nav et aside servent de repères, ou de régions spéciales sur la page auxquelles les lecteurs d'écran et d'autres technologies d'assistance peuvent accéder.
En utilisant des éléments de repère, vous pouvez considérablement améliorer l'expérience de navigation sur votre site pour les utilisateurs de technologies d'assistance.
Pour en savoir plus, consultez la section HTML 5 et repères ARIA de Deque University.
Vérifier manuellement les repères
Utilisez la liste des éléments de repère du W3C pour vérifier que chaque section principale de votre page est contenue dans un élément de repère. Exemple :
<header>
<p>Put product name and logo here</p>
</header>
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main>
<p>Put main content here</p>
</main>
<footer>
<p>Put copyright info, supplemental links, etc. here</p>
</footer>
Vous pouvez également utiliser des outils tels que l'extension Accessibility Insights de Microsoft pour visualiser la structure de votre page et repérer les sections qui ne sont pas contenues dans des repères:
Utiliser efficacement les repères
- Utilisez des éléments de repère pour définir les principales sections de votre page au lieu de vous appuyer sur des éléments génériques tels que
<div>ou<span>. - Utilisez des repères pour indiquer la structure de votre page.
Par exemple, l'élément
<main>doit inclure tout le contenu directement lié à l'idée principale de la page. Il ne doit donc y en avoir qu'un seul par page. Consultez le résumé des éléments de structuration du contenu de MDN pour découvrir comment utiliser chaque repère. - Utilisez les repères judicieusement. Un trop grand nombre de repères peut rendre la navigation plus difficile pour les utilisateurs d'une technologie d'assistance, car ils ne peuvent pas facilement accéder au contenu souhaité.
Pour en savoir plus, consultez l'article Orientations et repères.