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

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

Quelles sont les recommandations officielles concernant l’utilisation des landmarks ARIA et des éléments sectionnants HTML5 ?

Ce que j’ai fait :

Référentiels et spécifications

Ce que j’ai appris

Du côté des WCAG

La sémantique native en priorité

La spécification Accessible Rich Internet Applications (WAI-ARIA) 1.1 du W3C n’évoque pas explicitement les équivalences entre les landmarks ARIA et les éléments HTML 5. Toutefois, un chapitre est consacré à l’implémentation d’ARIA dans les langages hôtes (c’est-à-dire le HTML dans le cas qui nous intéresse) :

Therefore, there are many situations in which WAI-ARIA semantics are redundant with host language semantics. These host language features can be viewed as having “implicit WAI-ARIA semantics”. (…) Features with implicit WAI-ARIA semantics satisfy WAI-ARIA structural requirements such as required owned elements, required states and properties, etc. and do not require explicit WAI-ARIA semantics to be provided.

Par conséquent, il existe de nombreuses situations dans lesquelles la sémantique WAI-ARIA est redondante avec la sémantique du langage hôte. Ces caractéristiques du langage hôte peuvent être considérées comme ayant une “sémantique WAI-ARIA implicite”. (…) Les fonctionnalités avec une sémantique WAI-ARIA implicite satisfont aux exigences structurelles WAI-ARIA telles que les éléments spécifiques requis, les états et propriétés requis, etc. et ne nécessitent pas de fournir une sémantique WAI-ARIA explicite.

La spécification WAI-ARIA Authoring Practices 1.1 précise quant à elle :

It is important to understand that many HTML sectioning (e.g. main, nav, aside …) elements by default define ARIA landmarks.

Il est important de comprendre que de nombreux éléments de sectionnement HTML (par exemple main, nav, aside…) définissent par défaut les landmarks ARIA.

Les éléments sectionnant HTML 5 possédent donc une valeur sémantique native et sont équivalents aux landmarks ARIA. Par conséquent, ils n’ont pas à être doublés du rôle correspondant.

Test au validateur du W3C

Prenons le code suivant et soumettons-le au validateur du W3C :

<body>
    <header role="banner">
       <h1>Titre de la page</h1>
    </header>

    <nav role="navigation">
       <ul>
          <li>Item navigation</li>
       </ul>
    </nav>

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

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

Résultat, la page n’est pas invalidée. Toutefois, plusieurs avertissements nous sont donnés :

  • Warning: The banner role is unnecessary for element <header>

  • Warning: The navigation role is unnecessary for element <nav>… et de même pour les balises <main> et <footer>.

Encore une fois, le W3C n’interdit donc pas totalement l’usage simultané des landmarks ARIA et des éléments HTML5 puisque la page n’est pas invalidée. Cependant, il recommande de supprimer les valeurs sémantiques redondantes.

Vers une recommandation explicite ?

Une spécification ARIA in HTML du W3C est actuellement en cours de rédaction. Son contenu est donc à l’état de brouillon et peut encore largement changer d’ici sa validation définitive. Toutefois, on y trouve la note suivante :

Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is NOT RECOMMENDED as these properties are already set by the browser.

La définition d’un rôle ARIA et/ou d’un attribut aria-* correspondant à la sémantique ARIA implicite n’est pas nécessaire et n’est PAS RECOMMANDÉE car ces propriétés sont déjà définies par le navigateur.

Cette recommandation va donc également dans le sens de la spécification ARIA 1.1, tout en étant beaucoup plus explicite.

Recommandations du côté du RGAA

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) fait référence aux landmarks dans le critère 12.6 :

Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?

L’une des conditions pour valider ce critère est : La zone possède un rôle WAI-ARIA de type landmark correspondant à sa nature . Aucune mention n’est faite des éléments sectionnants HTML 5.

Si l’on se réfère ensuite à la défintion de “landmarks” dans le glossaire du RGAA(lien externe), on trouve les indications suivantes :

  • La zone d’en-tête doit avoir un attribut WAI-ARIA role=”banner”;
  • Le menu de navigation principal doit avoir un attribut WAI-ARIA role=”navigation”;
  • La zone de contenu principal doit avoir un attribut WAI-ARIA role=”main”;
  • La zone de pied de page doit avoir un attribut WAI-ARIA role=”contentinfo”;
  • La zone de moteur de recherche sur le site doit avoir un attribut WAI-ARIA role=”search”.

Le glossaire ne précise pas si ces zones doivent être balisées avec des éléments HTML 5 ou non. Toutefois si tel était le cas, la validation du critère ne pourrait se faire que si ces éléments sont doublés du rôle landmark correspondant (et si aucune autre condition de validation du critère n’est mise en oeuvre).

Le RGAA recommande donc explicitement l’utilisation des landmarks ARIA et ce même si des éléments HTML 5 sont employés pour structurer le code. L’information est donc doublée.

Conclusion

On a donc une contradiction entre les recommandations du W3C et celles du RGAA. Toutefois, le doublement des valeurs sémantiques ne posent pas réellement de problème puisque la page reste conforme au validateur du W3C.

Dans une dernière partie, j’aborderai les cas pratiques d’utilisation des landmarks ARIA et éléments HTML5, ainsi que leur support par les navigateurs et technologies d’assistance.