Introduction à WAI-ARIA

Table des matières
1 PRINCIPE
2 INSTALLATION ET PREMIERE MAIN SUR ARIA
A. INSTALLATION
B. PREMIERE MAIN SUR ARIA
C. MISE EN PLACE D’ELEMENT AVEC ARIA
GLOSSAIRE
SITOGRAPHIE

1 Principe

Le Web d’aujourd’hui s’est conduit à utilisation massive du Javascript, afin de dynamiser et améliorer les applications en ligne.
Les acteurs de W3C veulent aussi se diversifier en élargissant leur périmètre d’utilisateur de lecteurs d’écran. C’est pourquoi, ils ont commencé à introduire une nouvelle « spécification technique », permettant aux mal-voyants ou aux non-voyants de mieux apprécier leur expérience sur leur ordinateur.
Avec l’arrivée de l’HTML 5, on a pu abandonner les lecteurs audios et vidéos supportés par le « langage » Flash*, qui, il faut le dire, n’est plus à la mode, car il devait être adapté à l’aide de liens issus de JQuery*. Aujourd’hui, les lecteurs sous HTML 5 sont déjà accessibles avec la technologie adéquate.
Cependant, pour les personnes avec un handicap visuel, il est parfois difficile voire impossible d’avoir un bon accès au contenu d’une page web, et il faut élargir l’horizon en termes d’accessibilité d’internet. C’est pourquoi, nous pouvons rencontrer quelques problèmes à la navigation d’une page, tels que :

  • Les applications web créées ne sont pas forcément accessibles au clavier
  • Nous n’avons pas directement le rôle d’un composant spécifique.
  • Les mises à jour ne sont pas toujours visibles ou renseignées lorsque l’on utilise une technologie d’assistance.
  • Et bien d’autres…

Ainsi est né WAI-ARIA, qui a fait l’œuvre de plusieurs études permettant de faciliter l’accès à l’information en créant des applications web beaucoup plus riches pour les utilisateurs.
Il est intéressant de noter que WAI ARIA est un acronyme :

  • WAI : Web Accessibility Initiative
  • ARIA : Accessible Rich Internet Application

Dans le jargon actuel, on le nommera ARIA, ce qui est effectivement plus rapide.
Il est aujourd’hui en version 1.1.

ARIA est une spécification technique en amélioration progressive mais continue, c’est pourquoi il faut suivre constamment toutes les mises à jour et à venir sur les différents navigateurs. Notamment aussi pour les lecteurs d’écrans, qui doivent aussi se mettre à jour en fonction des nouvelles fonctionnalités ajoutées pour ARIA.
Son but est donc de construire une arborescence HTML sémantique, lisible et bien structurée, avec une présentation visuelle s’ajoutant dans une feuille de style (fichier CSS) et un dynamisme dans un fichier Javascript, que l’on déclenchera après le chargement de la page.
On peut donc voir se dégager une structure de « code » en trois grands points :

  • Fondation (HTML)
  • Habillage (CSS)
  • Dynamisme (Javascript)

ARIA se situe sur ce que l’on appelle la couche d’accessibilité, c’est-à-dire que le navigateur disposera de méthodes et d’une interface pour lire et interpréter le texte affiché pour l’utilisateur.
Pour cela, elle utilise une sorte d’arbre hiérarchique pour chaque élément se résumant en trois familles :

  • Les rôles
  • Les noms
  • Les états

Ceux-ci permettront un dialogue entre tous les éléments du DOM et une meilleure lisibilité à l’écran pour les utilisateurs.
Afin d’interpréter auditivement le texte aux personnes déficientes, tous les navigateurs prenant en charge WAI-ARIA, s’inspirent d’une ou plusieurs API.

Tableau 1: Liste des OS pour la couche accessibilité

Système d’exploitation Navigateur(s) API utilisée
Windows Firefox, Chrome, Opera

Internet Explorer

MSAA, IAccessible 1 et 2

MSAA, IAccessible et UIAExpress

MaxOS Safari et Chrome NSAccessibility
iOS Safari et Chrome UIAccessibility

Toutes les API citées ci-dessus suivent les bonnes pratiques et donc le standard Wai-Aria. Ainsi, tous les attributs intégrés à WAI-ARIA seront interprétés directement par le navigateur et transmis à la couche d’accessibilité du système d’exploitation. Car il ne faut pas oublier que l’accessibilité passe notamment par le système d’exploitation.

Il faut aussi noter que les navigateurs ci-dessus sont mis à jour régulièrement et donc ARIA doit aussi se baser sur cela pour être au mieux utilisé par eux.

Tableau 2: Liste des versions des navigateurs supportés

Navigateur(s) Version supportée
Firefox 29
Chrome 35
Internet Explorer 11
Safari 7

Avec cette technologie, il pourra être plus simple pour un développeur d’utiliser de développer des interfaces graphiques de qualité grâce à WAI-ARIA, mais il ne faut pas oublier que cette technologie ne doit pas remplacer les habitudes prisent avec HTML 5 pour rendre une page accessible et agréable pour l’utilisateur. Il faut donc l’utiliser en tant que renfort et aide pour créer une page web.

 

Installation et première main sur ARIA

Utilisation d’ARIA dans un site Web

WAI-ARIA est donc une manière de donner de l’information sémantique au contenu du Web 2.0 sur la couche accessibilité, donc pour les personnes avec un handicap, et aussi sur le système d’exploitation, car il va aider à mieux interpréter les lecteurs audio.

Il permet aussi de pouvoir mieux utiliser les fonctionnalités du clavier analogue. En d’autres termes, il peut aussi bien utiliser le clavier accessible fourni par le système d’exploitation mais côté Web, tout ceci pour montrer une interopérabilité avec les technologies d’adaptations* (TA) pour les applications que l’on retrouvera sur internet.

L’utilisation d’ARIA permettra une meilleure expérience utilisateur sur un site internet, qui lui proposera une navigation beaucoup plus cohérente et pratique, car il sera aidé par une voix externe en lui indiquant sur quelle touche appuyer par exemple.

Intéressant pour nous développeur, ce qui nous permettra de nous exercer par la suite dans ce tutoriel, et qu’ARIA est inclus maintenant dans les bibliothèques Javascript, notamment jQuery.

ARIA reprend la structure d’élément de la couche d’accessibilité pour définir trois attributs similaires :

  • Les rôles
    • Caractérisé par le type de l’élément
    • Attribut noté « role »
  • Les propriétés
    • C’est une caractéristique dite dynamique d’un élément du DOM
    • Attribut noté aria-nomAttribut
  • Les états
    • C’est une caractéristique statique d’un élément du DOM
    • Attribut noté aria-nomAttribut

 

  1. Installation

Il n’y a pas d’installation nécessaire à faire pour utiliser ARIA car il est directement implémenté dans HTML.

Cependant, il faut savoir que si on utilise du code en HTML 4.01 et/ou du XHTML, vous retrouverez une génération d’erreurs de validation. Par contre, en utilisant du HTML 5, donc il suffit de mettre le <!DOCTYPE html> du HTML 5, pour pallier à ces erreurs.

De plus, comme vu précédemment, il faut s’assurer que le lecteur d’écran (ou plus précisément le lecteur audio) s’assure d’être pris en charge avec le navigateur utilisé.

  2. Première main sur ARIA

Avant de découvrir un peu plus en détail les différents attributs disponibles avec ARIA, il existe deux règles fondamentales à respecter pour utiliser cette technologie intégrée.

  1. 1ère règle

La première règle consiste en la priorisation d’un élément natif HTML plutôt que de mettre des éléments ARIA de partout.

Il y a de tout de même quelques exceptions :

    • Si l’élément n’est pas personnalisable graphiquement parlant. C’est-à-dire qu’il est difficile de modifier le CSS du dit élément.
    • Si la fonction est indisponible en HTML.
    • Si, bien évidemment, la fonction est disponible mais n’est pas supportée par le navigateur ou les technologies d’adaptations
  1. 2ème règle

La seconde règle indique qu’il est important de ne pas changer la sémantique HTML native, sauf si un cas particulier se présente.

Prenons un exemple :

Si l’on souhaite avoir un hyperlien qui soit aussi un bouton, ce qui est courant dans le monde du Web.
Ne pas faire:

<a href="monlien" role="button">Mon bouton</a>

Faire plutôt:

<a href="monlien"><span role="button">Mon bouton</span></a>

Ou mieux avec HTML5 maintenant:
<button>Mon bouton</button>

Avant d’attaquer directement dans le code, il faut se pencher un peu plus en détail sur ce que sont les rôles, les propriétés et les états dans ARIA car ce sont les clés de voute de ce principe.

  • Les rôles

Tout d’abord, qu’est-ce qu’un rôle ? C’est tout simplement l’élément de base du principe ARIA. Pour l’utiliser, il suffit d’affecter une valeur sémantique à un élément déjà connu, comme une balise HTML, pour décrire son contenu.

Petit exemple avec une balise div peut tout à fait devenir une image en lui affectant un rôle d’image.

<div role="img">Mon image</div>

D’après l’image ci-dessous, on peut remarquer qu’il existe une multitude de rôle mis à disposition par ARIA.

 

Parmi tous ces rôles, on peut les distinguer en trois grandes familles ou types différents.

Dans un premier temps, on va retrouver les rôles concernant la structuration sémantique de documents, ensuite les rôles dits « Landmarks », concernant la définition de zones de navigation par exemple et enfin les rôles sur des composants d’interfaces graphiques tout simplement.

On peut dénombrer ces catégories :

  • 8 landmarks (points de repère en français)
  • 18 structurations sémantiques
  • 34 rôles concernant les composants d’interfaces graphiques

Listons donc ces différents rôles.

 

 

 

Landmarks

application*

banner

complementary

contentinfo

form

main

navigation

search*

 

 

 

 

 

 

 

 

 

Structurations sémantiques

article

region*

columnheader

row

definition

rowheader

directory*

separator

document*

toolbar

group*

heading

img

list

listitem

math

note*

presentation*

 

 

 

 

 

 

 

 

 

 

 

 

 

Composants graphiques (Widgets)

Autonome Composites
alert *

progressbar

alertdialog *

radio

button

scrollbar *

checkbox

slider

dialog

spinbutton

gridcell *

status *

link

tab *

log *

tabpanel *

marquee *

textbox

menuitem

timer *

menuitemcheckbox *

tooltip *

 

combobox

grid *

listbox

menu *

menubar *

radiogroup

tablist *

tree *

treegrid *

 

NB : Les éléments disposant d’un astérisque ne sont pas des rôles natifs intégré à HTML 5, contrairement aux autres.

Attention ! Les rôles ARIA écrasera le rôle sémantique natif HTML5.

Ajouter un rôle ARIA ne changer ni les comportements, les états ou les propriétés, il s’agira simplement d’insérer le rôle afin de faire comprendre à l’utilisateur où il se trouve et à avoir une meilleure interaction.

Prenons un exemple :

<button role=heading>Mon texte</button>

Notre bouton va devenir un titre dans la couche d’accessibilité :

<heading>Mon texte</heading>

Mais on pourra toujours cliquer dessus, il fera parti du cheminement par tabulation, ressemblant graphiquement à un bouton et déclenchera les actions associées s’il est pressé.

Cependant, changer un bouton en titre est une grosse erreur de conformité.

Changer le rôle d’un élément n’ajoute pas automatiquement les comportements, les propriétés et les états correspondants. Il faut donc les implémenter.

  • Les propriétés

Les propriétés sont similaires aux états que nous verrons après, mais sont plus axés sur le côté statique des éléments du DOM et se greffent à leur propre propriété.

On peut distinguer deux types de propriétés :

 

 

 

 

Propriété Globale

aria-atomic* aria-controls*

aria-describedby* aria-dropeffect*

aria-flowto* aria-haspopup*

aria-label* aria-labelledby* aria-live*

aria-owns* aria-relevant*

 

Propriété de composant (ou Widget)

aria-activedescendant* aria-autocomplete

aria-haspopup aria-label

aria-level* aria-multiline

aria-multiselectable aria-orientation*

aria-posinset* aria-readonly

aria-required aria-setsize*

aria-sort* aria-valuemax

aria-valuemin aria-valuenow

aria-valuetext

NB : Les éléments disposant d’un astérisque ne sont pas des rôles natifs intégré à HTML 5, contrairement aux autres.

  • Les états

Qu’est-ce qu’un état ? Il s’agit d’un élément permettant de signaler, justement, l’état d’un élément du DOM. Il donnera la possibilité notamment de changer dynamiquement la présentation en termes d’apparence, d’apparition et/ou de disparition.

Il est préférable d’utiliser les états d’ARIA (surtout en ce qui concerne le CSS) pour changer l’aspect visuel plutôt que de le faire via un script Javascript afin d’en changer le nom de classe.

Petit exemple sur un CSS tout simple d’une image que l’on décrira :

figure[role="presentation"]{ /* Je mets mon contenu css ici… */}

Donnons quelques exemples d’états courants :

  • Aria-checked : permet de récupérer l’état d’une case à cocher ou d’un radio button
  • Aria-disabled : va indiquer un élément qui sera visible, mais ne pourra être ni modifié ou utilisé
  • Aria- labelledby : indique les identifiants (ID) des éléments qui attribue un label à un objet
  • Aria-describedby : indiquera une description du contenu
  • Aria-required : retourne à l’utilisateur si le champ est requis ou non

Mise en place d’élément avec ARIA

Exemple d’affichage d’une image avec ARIA :

Afficher une image avec WAI ARIA ne diffère pas d’un simple affichage avec HTML5. On y ajoute les bons états et propriétés, avec un rôle si besoin est.

Voici mon exemple :

<figure aria-labelledby="un munchkin" role="group">

        <img width="150" height="150" src="http://i-exc.ccm2.net/iex/1280/1585840621/1323489.jpg" alt="Un mignon munchkin">

        <figcaption id="munchkin">Un petit Munchkin</figcaption>

</figure>

J’ai choisi ici d’utiliser la balise figure issue d’HTML5, qui permet de rajouter des informations directement sur si on en a besoin.

Comme on peut le constater, j’ai labellisé ma figure avec l’état : aria-labelledby, ainsi qu’un ajout de rôle avec un group, permettant de « grouper » l’image et une figCaption


Réalisons un TP, en reprenant ce que l’on a pu voir tout à l’heure avec les états...

Pour cela, il faudra que le formulaire dispose :

  • Un nom
  • Un prénom
  • Un téléphone
  • Un email
  • Un sujet
  • Un message
  • Un bouton envoyer
  • Un bouton réinitialiser

Les champs obligatoires : le nom, le prénom, l’email, le sujet et le message.

Il faut bien entendu mettre des labels de description à chaque élément

Voilà pour le côté interface utilisateur.

Ensuite, il faudra faire en sorte d’avoir une vérification sur les champs requis (indication, il faut utiliser l’état ARIA : aria-invalid).

Autre indication : le fichier javascript aura contiendra ces trois méthodes :

function removeDisplayedAlert() {…}

function displayMessage(message) {…}

function checkValidity(ids, searchTerm, message) {…}

Vous pouvez tout aussi bien l’utiliser en Javascript pur tout comme une librairie, telle que jQuery

Dernière indication, pour ajouter la validation à un champ, il suffit d’ajouter une méthode javascript directement sur l’élément voulu : onblur.

 

Correction du TP

Voici une correction du fichier html. Comme on peut le voir dans les différents inputs on a l’attribut onblur, sur lequel on reviendra un peu plus tard.

<body>
    <div id="container">
        <form id="form" action="/" method="post">
            <h3><span>Contactez-nous</span></h3>
            <fieldset>
                <legend>Formulaire de contact</legend>
                <p class="name">
                    <label for="name">Nom</label>
                    <input type="text" name="name" id="name" size="30" aria-required="true" onblur="checkValidity('name', ' ', 'Le nom saisi est invalide&nbsp;!');" />
                </p>
                <p class="first">
                    <label for="first">Prénom</label>
                    <input type="text" name="first" id="first" size="30" aria-required="true" onblur="checkValidity('first', ' ', 'Le prénom saisi est invalide&nbsp;!');" />
                </p>
                <p>
                    <label for="telephone">Téléphone</label>
                    <input type="text" id="telephone" aria-required="false" />
                </p>
                <p>
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" size="30" aria-required="true" onblur="checkValidity('email', '@', 'L’adresse électronique saisie est invalide&nbsp;!');" />
                </p>
                <p>
                    <label for="subject">Sujet</label>
                    <input type="text" name="subject" id="subject" size="30" aria-required="true" onblur="checkValidity('subject', ' ', 'Le sujet saisi est invalide&nbsp;!');" />
                </p>
                <p>
                    <label for="message">Message</label>
                    <textarea name="message" id="message" cols="30" rows="10" aria-required="true" onblur="checkValidity('message', ' ', 'Le message saisi est invalide&nbsp;!');"></textarea>
                </p>
                <p class="submit" style="float:left;"><button aria-describedby="descriptionRevert">Envoyer</button></p>
                <p class="submit" style="float:right;"><button type="reset" name="reset">Réinitialiser</button></p>
                <div id="descriptionRevert" aria-hidden="true">La réinitialisation entraînera la suppression de tout ce qui a été inscrit dans les différents champs.</div>
            </fieldset>
        </form>
    </div>
</body>

Voici le fichier javascript. Pour ma part, j’ai utilisé directement le javascript pur.

function removeDisplayedAlert() {
    var oldAlert = document.getElementById("alert");
    if (oldAlert)
        document.body.removeChild(oldAlert);
}
function displayMessage(message) {
    removeDisplayedAlert();
    var newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.setAttribute("id", "alert");
    var msg = document.createTextNode(message);
    newAlert.appendChild(msg);
    document.body.appendChild(newAlert);
}
function checkValidity(ids, searchTerm, message) {
    var elem = document.getElementById(ids);
    var invalid = (elem.value.indexOf(searchTerm) < 0);
    if (invalid) {
        elem.setAttribute("aria-invalid", "true");
        displayMessage(message);
    } else {
        elem.setAttribute("aria-invalid", "false");
        removeDisplayedAlert ();
    }
}

Voyons un peu les trois méthodes :

  • removeDisplayedAlert()

Cette méthode nous permet de supprimer les anciens messages d’alertes déjà affichés.

Ceci en supprimant directement l’élément enfant avec l’id alert

  • displayMessage(message)

Cette méthode permet d’afficher un message en alert à l’écran. Pour cela, il suffit d’ajouter un attribut de type role et un id à l’élément voulu. Puis d’ajouter l’alerte directement à l’élément.

  • checkValidity(ids, searchTerm, message)

Enfin, cette méthode principale, nous permet de valider le contenu, s’il respecte donc les normes que l’on désire.

En paramètre, nous aurons besoin des ids des éléments du DOM, ensuite, le/les caractères sur lesquels on s’appuie et enfin, le message retourné si la validité ne se fait pas.

Pour afficher le message à l’écran, on ajoute simplement à l’élément un attribut aria-invalid que l’on met à true et on affiche le message avec la méthode displayMessage.

Revenons sur l’attribut onblur, intégré au composant HTML. C’est un gestionnaire d’évènements, qui détecte le moment où le composant prend le focus. C’est en effet l’attribut le plus souvent utilisé dans la validation d’un formulaire (d’après le W3S).

Donc, nous pouvons à l’aide de cet attribut, passer notre méthode checkValidity à l’intérieur pour que lors du focus sur l’élément soit validé ou non.

Et le tour est joué !

Conclusion

Nous avons fait le tour pour cette introduction sur WAI-ARIA.

Pour résumé, on peut dire que c’est une technologie permettant d’ajouter un contenu d’accessibilité pour les personnes mal-voyantes, qui ouvre de nouveaux horizons au Web, pour ne pas délaisser les personnes handicapées.

Elle se base sur 3 grands éléments, qui sont des rôles (primordial), des propriétés et des états. Ceci dans le but de retranscrire à l’écran les différentes actions que l’utilisateur peut faire, même s’il ne voit pas.

Cette technologie est assez jeune et est en constante évolution, car elle doit s’adapter aux nouvelles technologies, mais aussi les navigateurs doivent pouvoir s’adapter et améliorer leur(s) lecteur(s) d’écran (audio et vidéo).

Glossaire

DOM : Le DOM ou Document Object Model correspond aux éléments HTML présent dans une page Web. Il permet d’avoir une structuration comme un arbre, afin de pouvoir parcourir chaque élément plus facilement.

JQuery : Librairie Javascript libre créée en 2006, permettant d’utiliser beaucoup plus facilement des scripts en Javascript.

Sémantique : Standardisation pour des formats de données notamment en Web.

Couche d’accessibilité : Surtout dans le domaine de l’handicap, composant permettant de faciliter l’utilisation d’un PC par exemple, avec des outils basés sur l’audio, ou pour les malentendants, d’avoir un meilleur visuel beaucoup plus expliqué.

Sitographie

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *