Vous êtes à : Blog > Jour 69 - Landmarks ARIA ou éléments HTML 5 ? (1/3)

Jour 69 - Landmarks ARIA ou éléments HTML 5 ? (1/3)

Pourquoi et comment structurer une page ? A quoi servent vraiment les landmarks ARIA et les éléments sectionnant HTML 5 ?

Ce que j’ai fait :

Référentiels et spécifications

Ce que j’ai appris

De l’importance de structurer une page

Pourquoi et pour qui ?

Structurer un contenu (qu’il soit web ou non) signifie le découper en sections logiques, afin de faciliter sa compréhension et son utilisation. Il s’agit par exemple de regrouper certains contenus par section, d’ajouter une hiérarchie de titres ou même de mettre en valeur les mots ou concepts qui paraissent importants.

Pour une grande partie des internautes, la structuration d’une page web est avant tout visuelle. La mise en forme aide en effet à comprendre la fonction de certaines parties de la page. Par exemple :

  • le titre de la page généralement de grande taille et situé en haut du document

  • un menu de navigation sous forme horizontale avec une certaine mise en exergue

Pour autant, une structuration purement visuelle est loin d’être suffisante. En effet, pour une personne aveugle qui ne perçoit aucune mise en forme, le menu de navigation ne représente rien d’autre qu’une liste de liens, comme il peut y en avoir d’autres dans la page. Il est donc important de fournir aussi dans le code un moyen de distinguer les éléments importants d’une page.

Pour plus d’informations sur comment déterminer les différentes sections d’une page, il existe de nombreuses ressources :

Comment ?

Une fois les sections principales bien définies, il y a deux manières de matérialiser leur structure dans le code :

  • les rôles landmarks ARIA

  • les éléments HTML 5

Historiquement, le langage HTML manquait de balises sémantiques permettant de désigner les différentes sections d’une page telles que le header, le footer ou la navigation. HTML 4 utilisait essentiellement la notion de sections (matérialisés par des éléments <div>) définies par des titres (<h1>, <h2>, <h3>, <h4>, <h5> ou <h6>). HTML 5 introduit de nouveaux éléments, permettant de mieux caractériser les différentes sections de la page : <header>, <footer>, <nav>, <main>…

De la même manière, les rôles landmarks ARIA permettent d’indiquer ce que contiennent les différents blocs qui constituent une page : role="navigation", role="main", role="search"… A noter que les landmarks ARIA permettent également de couvrir les applications web, ce qui n’est pas nécessairement le cas du HTML 5.

Il s’agit donc de caractériser sémantiquement, c’est à dire de donner une information sur le rôle et le contenu des différentes sections qui composent une page.

Quels avantages ?

Utiliser des marqueurs sémantiques comme des éléments HTML 5 ou des landmarks ARIA, facilite grandement la consultation d’une page web pour de nombreux internautes.

Les personnes aveugles, utilisant des lecteurs d’écran, bénéficient ainsi d’informations sur les régions principales de la page et savent à quoi elles correspondent : le menu de navigation principal peut être distingué d’une simple liste de liens grâce à la balise <nav> ou au landmark ARIA role="navigation".

Les personnes naviguant grâce à leur clavier qui peuvent aussi bénéficier de fonctionnalités de navigation leur permettant de passer rapidement d’une section à l’autre. Il est à noter cependant que si la plupart des lecteurs d’écran mettent à disposition ces fonctionnalités, les navigateurs n’implémentent pas encore nativement de fonctionnalité de navigation dédiée au clavier. La mise en place de landmarks ne signifie donc pas qu’il faut se passer de liens d’évitement.

Sur cette vidéo intitulée How ARIA landmark roles help screen reader users(lien externe), Léonie Watson fait une démonstration de l’utilisation des rôles landmarks par les lecteurs d’écran : Jaws, par exemple, utilise le symbole ‘;’ pour passer d’une région à l’autre. A chaque landmark atteint, Jaws annonce le type de contenu dont il s’agit.

Vous pouvez simuler dans votre navigateur la navigation clavier des lecteurs d’écran. L’extension Firefox Landmarks(lien externe) de Matthew Tylee Atkinson implémente des raccourcis clavier qui permettent de naviguer d’une région à l’autre. Le nom de la région atteinte apparaît alors visuellement, de la même manière qu’il serait restitué vocalement par un lecteur d’écran.

Rôles landmarks ARIA versus éléments HTML

Typologie comparative

J’avais évoqué brièvement dans un de mes premiers articles, Structure de page, les différents éléments permettant de sectionner une page. Voici un tableau récapitulatif plus complet des éléments HTML 5, mis en perspectice avec les rôles landmarks correspondants (il s’agit d’une traduction du tableau proposé par le W3C sur sa page ARIA Landmarks Example(lien externe)):

Correspondance des éléments sectionnants HTML5 avec les landmarks ARIA
Éléments HTML Rôles landmark ARIA
aside complementary
footer contentinfo, dans le contexte de l'élémént body.
L'élément footer n'est pas équivalent au rôle landmark contentinfo quand il est descendant des éléments HTML suivants : - article - aside - main - nav - section
form form, lorsqu'il a un nom accessible donné par les attributs aria-labelledby, aria-label ou title
header banner, dans le contexte de l'élémént body.
L'élément header n'est pas équivalent au rôle landmark banner quand il est descendant des éléments HTML suivants : - article - aside - main - nav - section
main main
nav navigation
section region lorsqu'il a un nom accessible donné par les attributs aria-labelledby, aria-label ou title
pas d'équivalent search

Cas d’usages

  • il ne peut y avoir qu’une seule balise <main> et qu’un seul role="main" par page

  • la balise <header> peut être utilisée plusieurs fois dans une page, mais role="banner" ne doit être employé qu’une seule fois

  • la balise <footer> peut être utilisée plusieurs fois dans une page, mais role="contentinfo" ne doit être employé qu’une seule fois

  • la balise <nav> et role="navigation" peuvent être employés plusieurs fois dans une page pour identifier les menus de navigation principaux et secondaires. Quand plusieurs d’entre eux sont présents dans une page, il peut être intéressant de les différencier grâce à l’attribut aria-label : 
    <nav aria-label="Menu principal">[...]</nav>
<nav aria-label="Menu secondaire">[...]</nav>
  • role="article" ne fait pas partie des rôles landmarks ARIA mais des rôles de structuration du document. Son équivalent HTML 5 est <article>.

Dès lors que nous connaissons les différents éléments et landmarks permettant de structurer correctement une page web, comment les utiliser ? Dans un second article, j’aborde les recommandations données à ce sujet par le W3C et le RGAA (Référentiel Général d’Amélioration de l’Accessibilité).