Les lecteurs d'écran disposent de commandes permettant de passer rapidement d'un titre à l'autre ou à des régions spécifiques. En fait, une enquête auprès des utilisateurs de lecteurs d'écran a révélé qu'ils parcouraient le plus souvent une page inconnue en explorant les en-têtes.
En utilisant des éléments corrects de cap et de point de repère, 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 décrire la page
Utilisez les éléments h1-h6 pour créer un contour structurel pour votre page. L'objectif est de créer un squelette ou une échafaudage de la page de sorte que toute personne naviguant par en-têtes puisse se faire une idée mentale.
Une pratique courante consiste à utiliser un seul h1 pour le titre ou le logo principal 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 titre
Les développeurs ignorent souvent les niveaux de titre pour utiliser les styles par défaut du navigateur qui correspondent étroitement à leur conception. Ceci est considéré comme un anti-modèle, car il rompt le modèle des contours.
Au lieu de vous fier au dimensionnement de police par défaut du navigateur pour les titres, utilisez votre propre code CSS et ne sautez pas de niveaux.
Par exemple, ce site comporte une section intitulée "DANS L'ACTUALITÉ", suivie de deux titres:
L'en-tête de la section "IN THE NEWS" peut être un h2, et les titres associés peuvent être tous les deux des éléments h3.
Étant donné que la font-size de "IN THE NEWS" est plus petite que celle du titre, il peut être tentant de faire du titre du premier article une h2 et de "IN THE NEWS" comme h3. Bien que cela puisse correspondre au style par défaut du navigateur, cela endommagerait le contour transmis à un utilisateur de lecteur d'écran.
Vous pouvez utiliser Lighthouse pour vérifier si votre page ignore des niveaux de titre. Exécutez l'audit d'accessibilité (Lighthouse > Options > Accessibility) et recherchez les résultats de l'audit Les titres ne sautent pas de niveaux.
Utiliser des repères pour faciliter la navigation
Les éléments HTML5 tels que main, nav et aside servent de points de repère, c'est-à-dire des régions spéciales de la page auxquelles un lecteur d'écran peut accéder.
Utilisez des balises de points de repère pour définir les principales sections de votre page, au lieu d'utiliser des div. Veillez à ne pas trop en abuser, car un trop grand nombre de points de repère peut être submergé. Par exemple, limitez-vous à un seul élément main au lieu de trois ou quatre.
Lighthouse vous recommande d'effectuer un audit manuel de votre site afin de vérifier que "les éléments des points de repère HTML5 sont utilisés pour améliorer la navigation". Vous pouvez utiliser cette liste d'éléments de point de repère pour consulter votre page.
Contournez le contenu répétitif avec des liens d'ancrage
De nombreux sites comportent une navigation répétitive dans leurs en-têtes, ce qui peut être ennuyeux pour naviguer avec une technologie d'assistance. Utilisez un lien d'omission pour permettre aux utilisateurs de contourner ce contenu.
Un lien d'ancrage 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 cibler 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 NY Times et Wikipédia contiennent tous des liens d'ancrage. Essayez d'y accéder et d'appuyer plusieurs fois sur la touche TAB de votre clavier.
Lighthouse peut vous aider à vérifier si votre page contient un lien "Ignorer". Exécutez à nouveau l'audit d'accessibilité et recherchez les résultats de l'audit La page contient un titre, un lien d'omission ou une région de points de repère.