Les lecteurs d'écran disposent de commandes permettant de passer rapidement d'un titre à un autre ou à des régions spécifiques. En effet, une enquête auprès d'utilisateurs de lecteurs d'écran a révélé qu'ils naviguaient le plus souvent sur une page inconnue en explorant les titres.
En utilisant des éléments de titre et de repère appropriés, vous pouvez considérablement améliorer l'expérience de navigation sur votre site pour les utilisateurs de technologies d'assistance.
Utiliser des titres pour structurer la page
Utilisez les éléments h1-h6 pour créer une structure de votre page. L'objectif est de créer un squelette ou un échafaudage de la page afin que toute personne qui navigue par titres puisse se faire une image mentale.
Une pratique courante consiste à utiliser un seul h1 pour le titre principal ou le logo d'une page, des éléments h2 pour désigner les sections principales et des éléments h3 dans les sous-sections secondaires:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Ne pas ignorer les niveaux de titres
Les développeurs ignorent souvent les niveaux de titres pour utiliser les styles par défaut du navigateur qui correspondent étroitement à leur conception. Il s'agit d'un antimodèle, car il brise le modèle de structure.
Au lieu de vous fier à la taille de police par défaut du navigateur pour les titres, utilisez votre propre CSS et ne sautez pas de niveaux.
Par exemple, ce site comporte une section intitulée "IN THE NEWS", suivie de deux titres:
Le titre de la section, "ACTUALITÉS", peut être un élément h2, et les titres secondaires peuvent tous deux être des éléments h3.
Étant donné que le font-size de "IN THE NEWS" est plus petit que le titre, il peut être tentant de faire du titre du premier article un h2 et de faire de "IN THE NEWS" un h3. Bien que cela corresponde au style par défaut du navigateur, cela casserait le contour transmis à un utilisateur de lecteur d'écran.
Vous pouvez utiliser Lighthouse pour vérifier si votre page saute des niveaux de titre. Exécutez l'audit d'accessibilité (Lighthouse > Options > Accessibilité) et recherchez les résultats de l'audit Les titres ne sautent pas de niveau.
Utiliser des repères pour faciliter la navigation
Les éléments HTML5 tels que main, nav et aside servent de repères, ou de régions spéciales sur la page auxquelles un lecteur d'écran peut accéder.
Utilisez des balises de repère pour définir les principales sections de votre page, au lieu de vous appuyer sur des div. Veillez à ne pas en abuser, car un trop grand nombre de repères peut être déconcertant. Par exemple, limitez-vous à un seul élément main au lieu de trois ou quatre.
Lighthouse recommande d'effectuer un audit manuel de votre site pour vérifier que les éléments de repère HTML5 sont utilisés pour améliorer la navigation. Vous pouvez utiliser cette liste d'éléments de repère pour vérifier votre page.
Ignorer les contenus répétitifs grâce aux liens de prévisualisation
De nombreux sites contiennent des éléments de navigation répétitifs dans leurs en-têtes, ce qui peut être gênant pour la navigation avec une technologie d'assistance. Utilisez un lien d'ancrage pour permettre aux utilisateurs de passer outre ce contenu.
Un lien de saut est un ancrage hors écran qui est toujours le premier élément sélectionnable dans le DOM. Il contient généralement un lien vers le contenu principal de la page. Comme il s'agit du premier élément du DOM, il suffit d'une seule action de la technologie d'assistance pour le mettre en surbrillance et contourner la navigation répétitive.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
De nombreux sites populaires tels que GitHub, The New York Times et Wikipedia contiennent des liens de prévisualisation. Essayez de les consulter et d'appuyer plusieurs fois sur la touche TAB de votre clavier.
Lighthouse peut vous aider à vérifier si votre page contient un lien de prévisualisation. Exécutez à nouveau l'audit d'accessibilité et recherchez les résultats de l'audit La page contient un titre, un lien "Ignorer" ou un point de repère.