Comment les en-têtes et les points de repère contribuent à l'accessibilité

How Headings and Landmarks Help Accessibility

La mise en place d'une structure et d'une conception de page solides pour tout site ou application est essentielle pour créer une expérience accessible. La structure de la page se compose d'en- têtes et d'éléments de repère qui aident les utilisateurs de lecteurs d'écran à comprendre la mise en page et le contenu de la page à un niveau élevé.

Rubriques

Lorsque nous parlons d'un "en-tête", nous nous référons aux gros morceaux de texte qui désignent une nouvelle section de contenu que la page trouve souvent dans le corps du texte, et non à l'"en-tête" du site, qui se compose généralement du logo et de la navigation, etc. .

Les personnes qui dépendent de la technologie d'assistance naviguent souvent d'abord par titres.

Il est important que le code composant la structure des titres soit linéaire et dans un ordre logique. Lorsqu'une personne qui dépend d'une technologie d'assistance visite un nouveau site ou une nouvelle page qu'elle n'a jamais visité auparavant, elle navigue souvent d'abord par titres pour avoir une idée du contenu proposé sur la page.

L'analogie du menu

Voici une façon de penser aux niveaux de titre. Imaginez que vous êtes dans un nouveau restaurant pour la première fois. Quelqu'un peut vous montrer à votre table, vous prenez place et prenez un menu. Maintenant, réfléchissez à la façon dont vous pourriez essayer de réduire ce que vous aimeriez avoir.

  1. Premièrement, la couverture du menu pourrait porter le nom du restaurant. C'est la confirmation que vous êtes au bon endroit et que vous êtes prêt à plonger dans le menu. Le nom du restaurant pourrait être assimilé à un titre de niveau 1 ( h1 ), le thème principal de la page. Super, continuons.
  2. Ensuite, vous passez en revue les catégories de repas disponibles sur le menu : entrées, salades, sandwichs, burgers, pizza, menu enfant, etc. Les titres des catégories pourraient être considérés comme des titres de niveau 2 ( h2 ) puisqu'ils représentent une section importante de contenu sur le menu.
  3. Une faim de loup, vous plongez dans la catégorie pizza. Fromage nature, pepperoni, végétarien, amateurs de viande, hawaïen (oui s'il vous plaît). Ceux-ci représentent les articles disponibles dans la catégorie pizza. Par conséquent, chaque titre d'article pourrait être considéré comme un titre de niveau 3 ( h3 ). Le contenu décrivant la pizza serait en texte brut sous cet en-tête.

    Lorsque le dernier article de pizza est lu et que vous décidez de vérifier ce qui se trouve dans la catégorie des fruits de mer à la place, cela nous ramènera à "Fruits de mer", niveau d'en-tête 2 ( h2 ), en explorant ses articles ( h3 ) et ainsi de suite jusqu'à ce que vous faites votre délicieux choix!

De la même manière qu'une personne naviguant dans un menu, les utilisateurs de lecteurs d'écran naviguent également sur des pages Web qu'ils n'ont jamais consultées auparavant. La navigation par en-tête est une méthode disponible pour comprendre rapidement ce qui se trouve sur la page et décider de revenir à une section qui vous intéresse ou d'aller de l'avant.

L'ordre logique des en-têtes est la clé

Dans votre code HTML, vous commencerez par un seul en-tête h1 comme titre principal de la page, suivi d'un en-tête h2 pour chaque sous-section principale du contenu. S'il y avait des sous-sous-sections, celles-ci comporteraient des titres h3 , et ainsi de suite. Lorsqu'une section de contenu est terminée, le titre revient au niveau précédent approprié pour commencer la nouvelle section.

 <h1>Primary heading</h1> <!-- ... -->​ <h2>Section</h2> <!-- ... -->​ <h3>Sub-section</h3> <!-- ... -->​ <h2>Section</h2>

Capture d'écran de la page d'accueil de Shopify.com avec les outils de développement ouverts inspectant un en-tête de 3h.

En plus du code HTML véhiculant une signification sémantique derrière les titres, la conception visuelle des titres est également très importante. Les tailles de texte allant de grande à moyenne à petite dénotent visuellement la structure du contenu et le contenu associé. Les personnes ayant des troubles cognitifs ou des troubles de lecture/d'apprentissage apprécieront grandement que le contenu soit divisé en morceaux avec des titres véhiculant le message : "ceci est une nouvelle section de contenu".

Sans titres, les grands murs de contenu peuvent être assez difficiles à consommer pour certaines personnes et peuvent même conduire à un sentiment de dépassement.

Exemples

Découvrez ces exemples. Remarquez la lisibilité et la compréhension accrues du texte à mesure que les titres sont ajoutés au document. De plus, lorsque les en-têtes HTML sont utilisés correctement, les utilisateurs de lecteurs d'écran peuvent mieux comprendre la structure de la page.

Critères de réussite WCAG

Cela revient à 2.4.6 En-têtes et étiquettes qui stipule :

"Les titres et les étiquettes décrivent le sujet ou le but."

Repères

Les repères sont les éléments HTML qui définissent la structure globale d'une page complète. Une page Web typique peut inclure des sections telles qu'une barre supérieure avec un logo d'en-tête, une navigation principale, une barre latérale avec plus de navigation ou du contenu connexe supplémentaire, une section de pied de page et bien sûr le contenu du corps principal.

En conséquence, ce que nous avons maintenant avec HTML5, ce sont des éléments spécifiques qui présentent la signification sémantique de chaque section.

À un niveau élevé, les éléments emblématiques consistent en :

Élément Rôle Remarques
header banner Généralement le premier élément repère du DOM, contenant le logo principal, la navigation principale et parfois un formulaire de recherche.
footer contentinfo Généralement le dernier élément du DOM, contenant des liens et des informations de copyright.
aside complimentary Contient du contenu relatif à l'article ou au site en général.
nav navigation Utilisé pour désigner les zones de navigation.
main main La zone de contenu principale de la page, généralement associée à l'en- header et au pied de footer .
section Le seul point de repère sans valeur de role explicite est un élément générique utilisé pour découper du contenu tel que des portions d'une page ou d'un article.

Tout comme avec les titres, les personnes qui utilisent un lecteur d'écran peuvent découvrir le contenu de la page en naviguant exclusivement via des éléments de repère. Cela permet aux utilisateurs de passer rapidement d'une section à l'autre de la page sans avoir à parcourir du contenu sans rapport avec leur tâche actuelle.

Par conséquent, il est essentiel de comprendre et de savoir comment utiliser les en-têtes et les points de repère d'une manière utile et utile pour les personnes qui dépendent de la technologie d'assistance.

Ressources:

Retour au blog