Attention ! Cet article a plus de 1 an (2534 jours), ce qui signifie qu'il n'est pas forcément à jour !
Premièrement, qu’est-ce que l’ARIA. Cet acronyme veut dire "Accessible Rich Internet Application". En résumé, cela aide les personnes avec des handicapes visuels et auditifs. Alors comment peut-on l’utiliser ?
Bon commençons par le début, pour s’en servir on doit l’insérer dans notre HTML.
ARIA Roles
En ajoutant l’attribut role à une balise HTML nous définissons le type d’élément et à quoi il sert. Voici quelques exemples provenant de la structure de Bootstrap.
<a class="btn btn-primary" role="button" href="#">
Link with href
</a>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
</div>
//autre exemple
<div role="alert">
Veuillez mettre à jour votre navigateur.
</div>Comme on le remarque, le rôle est assez simple et descriptif sur le contenu de la balise qu’il entoure.
L’Attribut ARIA
L’attribut ARIA est un peu différent de celui de role. Ils sont ajoutés au HTML de la même manière sauf qu’il y a quelques types d’attributs ARIA disponibles à l’utilisation. Tous les attributs ARIA sont préfixés avec aria-. Il y a deux types pour les attributs, states et properties. La valeur pour states est rattachée aux changements résultant d’une interaction de l’utilisateur, tandis que la valeur de properties ne change pratiquement pas.
Un exemple d’attribut ARIA state est le aria-checked. Ceci est utilisé pour montrer l’état de l’élément lorsque l’élément en soit n’est pas natif, comme disons de mettre roles="checkbox" aria-checked="true" sur un span ou un div au lieu d’un checkbox.
Je ne ferai pas l’énumération de tous les types d’ARIA possibles, honnêtement je ne les connais même pas tous. Cependant, vous pouvez consulter une liste de Supported States and Properties.
Règles d’ARIA
Avant d’aller trop loin, sachez que nous ne voulons et ne devons pas ajouter ARIA sur tous les éléments.
Certaines balises HTML représentent nativement une sémantique ARIA, dans ces cas ce n’est donc pas nécessaire et surtout pas recommandé d’y ajouter ces propriétés. Vous pouvez en voir une liste des Default Implicit ARIA Semantics. Ainsi des éléments comme nav, article et bouton ont implicitement un ARIA de role="navigation", role="article" et role="button".
Un élément ne peut posséder plus qu’un rôle. Un élément ne peut être un bouton en même temps qu’un header, on doit donc choisir celui qui décrit le mieux la fonction de l’élément.
On ne doit pas changer la sémantique native d’un élément. Voici un exemple, un peu étrange, mais qui illustre bien le propos. . Si vous faites face à une problématique que vous devriez avoir un rôle sur un élément qui possède nativement son ARIA, il est alors préférable d’utiliser deux balises, comme suit :
<footer><button>Acheter ces articles</button></footer>Alors, pour que votre structure soit plus accessible, je vous conseille d’utiliser le plus souvent possible un élément avec une sémantique native. Vous pouvez consulter une liste de ces éléments HTML. Je vous conseille aussi de vous familiariser avec eux, cela va vous simplifier la vie par la suite pour rendre votre site complètement accessible.
L’attribut ALT
Le ALT est un attribut si souvent oublié mais si efficace en accessibilité, spécialement pour les lecteurs d’écran. Penser à cet attribut comme une alternative, lorsqu’une image ne peut être vu, l’attribut est une alternative pour indiquer ce qui devrait être vu.
Nous ne devrions pas utiliser qu’un seul ou quelques mot. En fait, efforcez-vous d’y faire une description qui permet de savoir vraiment ce que l’image représente. On devrait pouvoir lire la description et bien s’imaginer ce que c’est. Tentez donc d’éviter les descriptions du type : "bébé", "un chien", "représentant" et utilisez plutôt :
<img src="charle.jpg" alt="Mon fils Charles jouant avec ses blocs">
<img src="fido.jpg" alt="Mon damaltien Fido jouant à la balle dans le parc">
<img src="jeanpierre.jpg" alt="Image de Jean-Pierre, représentant aux ventes">L’ARIA rôle et attribut peuvent faire une grande différence quand votre site est vu par un lecteur d’écran ou d’autres technologies d’assistance. C’est donc peu de temps investi et une bonne pratique de l’intégrer tout de suite dans sa routine. Votre site aura donc, pratiquement sans ajout de temps, une base d’accessibilité.