Une introduction aux Applications Internet Riches et Accessibles.

Ce que j’ai fait :

• lire l’article HTML5 et ARIA(lien externe) d’Orange
• lire la notice ARIA(lien externe) de Mozilla
• lire l’article Introduction to ARIA(lien externe) de Google
• lire l’article Top 5 Rules of ARIA(lien externe) de Suman Damera

Ce que j’ai appris

Qu’est-ce qu’ARIA ?

Au cours des dernières années, les applications web sont devenues de plus en plus complexes et des fonctionnalités de plus en plus poussées sont apparues : des carrousels, des sélecteurs de dates (datepicker)… Il est très difficile de rendre ces composants accessibles uniquement avec le langage HTML (HyperText Markup Language) : toutes les informations sémantiques ne sont pas remontées aux technologies d’assistance et la navigation au clavier est parfois impossible.

Pour remédier à cela, le W3C (World Wide Web Consortium) a rédigé la spécification WAI-ARIA(lien externe).

ARIA, de l’anglais “Accessible Rich Internet Applications”, que l’on pourrait traduire en français par “Applications Internet Riches et Accessibles”, est un ensemble d’attributs qui permet de rendre les contenus web plus accessibles, et notamment les composants d’interface dynamiques.

ARIA agit comme une surcouche sémantique qui augmente et modifie l’arbre d’accessibilité. Concrètement, ARIA ajoute :

• des rôles : button, nav…
• des états : aria-disabled, aria-hidden…
• des propriétés : aria-required, aria-describedby

Ces attributs ajoutés vont spécifiquement interagir avec les technologies d’assistance.

Que peut faire ARIA ?

ARIA peut modifier une sémantique existante ou en ajouter à certains éléments pour lesquels aucune sémantique native n’existe. Par exemple :

<div id="progressbar-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

Les rôles ARIA permettent ici d’ajouter une valeur sémantique à l’élément HTML div pour indiquer qu’il s’agit d’une barre de progression. Les attributs aria-valuemin et aria-valuemax indiquent les valeurs minimales et maximales pour cette barre tandis que aria-valuenow décrit l’état actuel de la barre

ARIA permet aussi d’ajouter du texte qui pourra être lu uniquement par les technologies d’assistance :

<button class="burger-menu" aria-label="Ouvrir le menu de navigation"></button>

Règles d’ARIA

• Règle n°1 : ne pas utiliser ARIA s’il est possible d’utiliser un élément HTML natif ou un attribut avec la sémantique et le comportement désiré.

• Règle n°2 : ne pas changer la sémantique native d’une élément, à moins que cela ne soit vraiment indispensable.

  Ne pas faire :

  <h2 role=tab>Titre d'onglet</h2>
  

  Plutôt privilégier :

  <div role=tab><h2>Titre d'onglet</h2></div>
  

• Règle n°3 : s’assurer que les composants dynamique peuvent être utilisables avec un clavier.

• Règle n°4 : ne pas utiliser role="presentation" ou aria-hidden="true" sur un élément qui doit recevoir le focus.

  Ne pas faire :

  <button role=presentation>Valider</button>
  

• Règle n°5 : tous les éléments interactifs doivent avoir un nom accessible.