Les lecteurs d'écran disposent de commandes permettant de passer rapidement d'un titre à l'autre ou d'accéder des régions emblématiques. En fait, une enquête auprès des utilisateurs de lecteurs d'écran constataient qu'ils parcouraient le plus souvent une page qu'ils ne connaissaient pas en explorant en-têtes.
En utilisant des titres et des points de repère corrects, 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 des éléments h1 à h6 pour créer un contour structurel pour votre page. L'objectif est
pour créer un squelette ou échafaudage de la page afin que toute personne naviguant
les titres peuvent se
former dans une image mentale.
Une pratique courante consiste à utiliser un seul h1 pour le titre ou le logo principal d'une
la page, des éléments h2 pour désigner les principales sections et des éléments h3 dans les sous-sections correspondantes:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Ne pas sauter de niveaux de titre
Les développeurs ignorent souvent des 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 de contour.
Au lieu d'utiliser la taille de police par défaut du navigateur pour les en-têtes, utilisez votre propre code CSS et de ne pas sauter de niveaux.
Par exemple, ce site comporte une section intitulée "DANS LES ACTUALITÉS", suivie de titres:
L'en-tête de la section, "IN THE NEWS", pourrait être un h2, et les liens
les titres peuvent tous deux être des éléments h3.
Parce que les font-size de "IN THE NEWS" est plus petit que le titre, il peut
être tentant de faire le titre du premier sujet une h2 et de faire
"DANS LES ACTUALITÉS" un h3. Bien que cela puisse correspondre
au style par défaut du navigateur,
cela casserait le plan transmis à un utilisateur de lecteur d'écran !
Vous pouvez utiliser Lighthouse pour vérifier si votre page ignore un niveau de titre. Exécutez la Audit de l'accessibilité (Lighthouse > Options > Accessibilité) et son apparence pour connaître les résultats de l'audit Les titres ne sautent pas de niveaux.
Utilisez des points de repère pour faciliter la navigation
Les éléments HTML5 tels que main, nav et aside servent de points de repère.
des régions spéciales de la page auxquelles
un lecteur d'écran peut accéder.
Utilisez des tags de point de repère pour définir les principales sections de votre page au lieu d'utiliser
divs. Attention à ne pas exagérer, car le fait d'avoir trop de points de repère peut
écrasante. Par exemple, limitez-vous à un seul élément main au lieu de trois ou
4.
Lighthouse vous recommande d'effectuer un audit manuel de votre site pour vérifier que sont utilisés pour améliorer la navigation. » Vous pouvez utiliser cette liste de points de repère éléments pour vérifier votre page.
Contournez les contenus répétitifs à l'aide de liens d'ancrage
De nombreux sites comportent des éléments de navigation répétitifs dans leurs en-têtes, ce qui peut être agaçant de naviguer avec une technologie d'assistance. Utilisez un lien ignoré pour permettre aux utilisateurs d'ignorer ce contenu.
Un lien "Ignorer" est une ancre hors écran qui est toujours le premier élément sélectionnable dans le DOM. Généralement, il s'agit d'un lien intégré vers le contenu principal de la page. Parce qu’il s’agit premier élément du DOM, il suffit d'une seule action (de la technologie d'assistance) pour se concentrer 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 connus, tels que GitHub, The NY
Times et Wikipédia.
contenant des liens d'ancrage. Essayez d'y accéder et d'appuyer sur la touche TAB de votre
plusieurs fois sur le clavier.
Lighthouse peut vous aider à vérifier si votre page contient un lien "Ignorer". Exécutez la Effectuez de nouveau l'audit d'accessibilité et recherchez les résultats de la section La page contient une un titre, un lien "Ignorer" ou une région du point de repère.