Les éléments HTML5 tels que main, nav et aside servent de points de repère ou de régions spéciales sur la page vers lesquelles 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 les repères HTML 5 et ARIA de l'université Deque.
Vérifier manuellement des points de repère
Utilisez la liste d'éléments de point de repère de la W3C pour vérifier que chaque section majeure de votre page est contenue dans un élément de point 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 identifier les sections qui ne sont pas contenues dans des points de repère:
Comment utiliser efficacement les points de repère
- Utilisez des éléments de point de repère pour définir les principales sections de votre page au lieu d'utiliser des éléments génériques comme
<div>ou<span>. - Utilisez des points de repère pour représenter 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 avoir qu'un seul par page. Consultez le récapitulatif des éléments de section de contenu de l'MDN pour savoir comment utiliser chaque point de repère. - Utiliser les points de repère judicieusement. Avoir trop de points de repère peut rendre la navigation plus difficile pour les utilisateurs de technologies d'assistance, car cela les empêche d'accéder facilement au contenu souhaité.
Pour en savoir plus, consultez l'article Titres et points de repère.