Le document doit avoir une balise ARIA principale

Assurez-vous qu'il existe un point de navigation vers le contenu principal de la page. Si la page contient des iframe éléments, chaque iframe élément ne doit contenir aucune balise d'orientation principale ou une seule.

Assurez-vous que tout le contenu est contenu dans une balise de repère, désignée par des éléments de balise de repère HTML5 et/ou des balises de repère ARIA.

Il est recommandé d'utiliser à la fois les repères HTML 5 et ARIA pour garantir que tout le contenu est contenu dans une zone de navigation. En HTML5, vous devez utiliser des éléments tels que header, nav, main et footer. Leurs homologues ARIA sont role="banner", role="navigation", role="main" et role="contentinfo", dans cet ordre. En utilisant à la fois le balisage HTML5 et ARIA, vous rendez la page Web plus robuste et fonctionnelle, quelle que soit la technologie de lecteur d'écran utilisée.

Une fois ajouté, les utilisateurs de lecteurs d'écran peuvent accéder à une section en fonction de son repère ARIA ou de son élément HTML. Les points de repère constituent un remplacement simple pour un lien de navigation par saut, bien que ce remplacement ne soit utile que pour les utilisateurs de lecteurs d'écran. Les utilisateurs voyants ou les utilisateurs d'agrandisseurs d'écran ne tireraient pas beaucoup d'avantages de cet ajout, il ne peut donc pas remplacer complètement les liens de saut de navigation.

Exemple

Une page Web simplifiée, réduite aux éléments essentiels, pourrait ressembler à ceci :

<header role="banner">
   <p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main role="main">
   <p>Put main content here.</p>
</main>
<footer role="contentinfo">
   <p>Put copyright, etc. here.</p>
</footer>

Le balisage pour les régions et les rôles est redondant, mais il s’agit d’une période de transition et le balisage ci-dessus est le plus robuste.