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

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

Après la théorie, place à la pratique : qu’est-ce qu’on utilise et dans quelle situation ?

Ce que j’ai fait :

Ce que j’ai appris

Le recours systématique aux landmarks ARIA…

… si le code n’est pas du HTML5

Pour une page qui n’est pas codée en HTML 5 (en HTML 4 ou XHTML par exemple), il est nécessaire d’ajouter les landmarks ARIA afin de faciliter la compréhension et la navigation de la page pour les personnes aveugles ou naviguant au clavier :

<div role="banner">
   <p>Logo, titre de la page...</p>
</div>

<div role="navigation">
   <ul>
      <li>Item de navigation</li>
   </ul>
</div>

<div role="main">
   <p>Contenu principal</p>
</div>

<div role="contentinfo">
   <p>Autrice, copyright...</p>
</div>

… s’il n’y a pas d’équivalent HTML 5

C’est le cas du rôle landmark search qui ne possède pas d’équivalent en HTML5. Par conséquent, il est conseillé d’identifier le moteur de recherche avec role="search". Par exemple :

<form role="search">
  <input type="text" title="Recherche par mots-clés" />
  <input type="submit" value="Rechercher" />
</form>

Landmarks ARIA et éléments HTML 5 pour un meilleur support

Il a fallu du temps avant que les navigateurs et les technologies d’assistance interprètent correctement les nouvelles balises HTML 5 de structuration.

Dans son article Support des rôles landmark ARIA et éléments sectionnants HTML5 par les lecteurs d’écran(lien externe) en date de juillet 2013, Sophie Schuermans montre ainsi que les éléments HTML 5 sans ARIA n’étaient quasiment pas supportés contrairement aux landmarks ARIA. L’autrice préconisait donc de systématiquement doubler les éléments HTML 5 des landmarks ARIA afin de garantir un support optimal. L’article HTML 5 and ARIA Landmarks(lien externe) de l’Université de Deque fait le même constat.

Plus récemment, l’article Screen Reader Support for new HTML5 Section Elements(lien externe) en date d’avril 2016, montre que le support des éléments HTML 5 seuls par les navigateurs et les lecteurs d’écran est plutôt très bon.

La question de doubler la valeur sémantique des éléments pour une meilleure compatibilité se pose donc de moins en moins, à minima pour les navigateurs et lecteurs d’écran récents. Toutefois, afin de garantir le meilleur support possible, notamment sur d’anciennes versions, le doublement de la valeur sémantique peut être une garantie qui, à fortiori, n’engendre pas d’erreurs à la validation de la page par le W3C.

Les éléments HTML 5 peuvent-ils être suffisants ?

Les éléments HTML 5 sectionnants portent une valeur sémantique certes, mais qui n’est pas toujours équivalente à celle des landmarks ARIA.

Dans le tableau de comparaison des éléments HTML 5 et des landmarks ARIA (voir l’article Landmarks ARIA ou éléments HTML 5 ? (1/3)), il est par exemple précisé que l’élément <header> correspond à role="banner" uniquement lorsque <header> n’est pas descendant d’un article ou d’un élément section. <header> n’a donc pas toujours la même sémantique que role="banner". Il en va de même pour <footer> et contentinfo.

Prenons la structure de page suivante :

<body>
  <header>
     <h1>Titre de la page</h1>
  </header>

  <nav>
     <ul>
        <li>Item navigation</li>
     </ul>
  </nav>

  <main>
     <article>
      <header>
        <h2>Titre de l'article</h2>
      </header>

      Contenus de l'article

      <footer>Autrice et date de l'article</footer>
     </article>
  </main>

  <footer>
     <p>Autrice, copyright...</p>
  </footer>
</body>

Ici les balises <header> et <footer> sont présentes à plusieurs reprises dans la page mais ont une valeur sémantique qui diffère en fonction de leur emplacement.

J’ai testé ce code en utilisant l’extension Firefox Landmarks(lien externe) de Matthew Tylee Atkinson. Résultat : les landmarks role="header" et role="contentinfo" sont bien restitués uniquement pour les balises <header> et <footer> situées immédiatement après la balise <body>. Les balises <header> et <footer> présentes dans la balise <article> ne sont pas prises en compte.

L’emplacement des balises semble donc être suffisant pour distinguer l’emploi du multiples balises <header> et <footer> (je précise avoir fait ce test uniquement avec l’extension Landmarks et non pas un lecteur d’écran), d’où la recommandation du W3C de ne pas nécessairement doubler la valeur sémantique des balises.