Les éléments HTML5 tels que main, nav et aside servent de repères
ou des régions spéciales sur la page
les lecteurs d'écran et d'autres
technologies d'assistance peuvent sauter.
En utilisant des éléments
de point de repère,
vous pouvez améliorer considérablement
l'expérience de navigation sur votre site
pour les utilisateurs de
technologies d'assistance.
Pour en savoir plus, consultez
HTML5 et repères ARIA :
Vérifier manuellement les points de repère
Utiliser la liste des points de repère du W3C pour vérifier que chaque section principale de votre page est contenue par 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 comme Microsoft Extension Accessibility Insights 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
- Utiliser des éléments emblématiques 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 transmettre 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 devrait donc y en avoir qu'un par page. Voir le résumé des éléments de section de contenu du MN pour apprendre à utiliser chaque point de repère. - Utilisez les points de repère judicieusement. Avoir trop de points de repère peut en fait rendent la navigation plus difficile pour les utilisateurs de technologies d'assistance, car cela les empêche de passer facilement au contenu souhaité.
Consultez le post Titres et points de repère. pour en savoir plus.