« ARIA », « aides techniques » : c’est quoi tout ça ?

Périodiquement on me demande ce que sont ARIA et les aides techniques. Périodiquement j’explique en long, en large et en travers, tout en me disant qu’il serait plus rapide d’écrire une fois pour toutes un article d’introduction. C’est maintenant chose faite.

Le jeune Jean-Pierre Liégeois, du Var, me pose la question suivante : « J’étais au W3café samedi dernier et tout le monde parlait d’ARIA et d’aides techniques, mais au fait, c’est quoi ? ».

Je te remercie de ta question, jeune Jean-Pierre [1].

Replaçons la discussion dans le contexte : le W3café tournait autour d’Opera, et à travers Opera, il a parlé d’accessibilité.

L’accessibilité numérique, c’est la possibilité pour un produit ou un service d’être utilisable par tous et dans tous les contextes. Enfin, en théorie. En pratique, je suis de plus en plus persuadé qu’il vaut mieux viser le plus grand nombre de fonctionnalités pour le plus grand nombre d’utilisateurs. La nuance est subtile et nous y reviendrons ultérieurement, parce que sinon je vais me lancer dans des digressions passionnantes (pour moi), oiseuses (pour certains) et sans doute laborieuses pour toi ami lecteur.

Aides techniques

Partant du principe que mon ordinateur ne comprend pas les ordres que je lui donne à la voix, ni ne sait spontanément lire à voix haute ce qui m’est présenté sur une page web, il existe des programmes qui font ce travail pour moi.

En anglais on dit Assistive technologies, et en français on traduit par Aides techniques.

Citons quelques exemples :

  • pour la non- ou la mal-voyance, on utilise une revue d’écran. J’en reparle plus bas. On peut aussi utiliser des « logiciels de magnification », ce qu’on appelle vulgairement « une loupe », mais la première appellation est quand même vachement plus classieuse. Le travail de ces loupes est de ne présenter qu’une partie de l’écran, grossie n fois, et au passage si besoin de restituer l’écran en inverse vidéo, en noir et blanc, en jaune sur noir, etc.
  • pour le handicap moteur, on utilise tout un tas de périphériques particuliers. Le plus simple, c’est une grosse trackball avec l’équivalent des boutons de souris posés de part et d’autre. Dans les plus sophistiqués, on peut citer les contacteurs (un truc sur lequel je ne peux faire que « clic », et en fonction du contexte une action est déclenchée), le pilotage par la voix avec des logiciels de dictée, le pilotage par les yeux avec des solutions de tracking visuel. Pour cliquer je cligne de l’oeil.

Comme on me demande souvent la différence entre une revue d’écran, un lecteur d’écran, une plage Braille et une synthèse vocale, je me sens obligé de l’expliquer ici. Je ne peux rien vous refuser.

Une revue d’écran et un lecteur d’écran, c’est la même chose (ça au moins, c’est facile). C’est un logiciel dont le travail est de restituer tout ce qu’une personne non handicapée visuelle perçoit sur son écran.

Par exemple, dans le cas d’une page web, vous et moi repérons systématiquement, même inconsciemment, les éléments d’interface suivants [2] : les liens, les « blocs de contenu » représentés (à la louche) par une zone encadrée et/ou de couleur différente et introduite par un titre distinct, et les éléments de formulaire.

Autrement dit :

  1. Où puis-je cliquer ? Pour aller où ? Pour faire quoi ?
  2. Comment est organisée la page ? Où trouver l’information ? À quoi servent les différentes zones de la page ?
  3. Qu’est-ce que je peux faire ici ? Faire une recherche, envoyer un mail, passer une commande ?

Le travail de la revue d’écran, sachant qu’elle ne me restitue qu’une vue très parcellaire de la page, est d’accompagner l’utilisateur à l’aide de raccourcis clavier pour répliquer les méthodes cognitives automatiques que vous et moi avons mises en place. Schématiquement : la page se charge, la revue d’écran en fait une copie dans un buffer et tire de ce dernier les informations nécessaires.

Ce travail fait, elle restitue ses informations vers un périphérique de sortie : soit la carte son à travers une synthèse vocale, soit une plage Braille. La synthèse vocale est comme son nom l’indique un logiciel chargé de vocaliser la restitution d’informations par la revue d’écran. La plage Braille fait la même chose sous la forme de petits picots en plastiques dans une matrice Braille.

Par exemple voilà la photo d’un Pacmate QX400 en action. Vous voyez bien les petits picots ?

Un Pacmate en action

La revue d’écran en profite pour m’indiquer beaucoup plus d’informations quand je parcours la page. Par exemple si j’ai codé ma barre de navigation sous la forme d’une ul, elle me restitue une « liste de 5 éléments ».

Oui mais.

Le HTML est très rudimentaire, et les applications web modernes font bien plus que de présenter des listes et des textes universitaires. Que se passe-t-il si une partie de la page est rafraîchie ? Comment vider partiellement le buffer de la revue d’écran, par exemple ?

C’est là qu’intervient ARIA.

ARIA est lààààààààààà ! (en attente d’un thème par John Williams)

Les applications web inventées ces dernières années sont une réinvention de ce qui jusque-là ne se faisait qu’à travers des logiciels « client lourd » installés sur le poste du client. Ces logiciels ont la plupart du temps des interfaces sophistiquées, impliquant des rafraîchissements partiels de contenu, des barres d’onglets, des potentiomètres verticaux et horizontaux, des zones de prévisualisation, des vues arborescentes, et j’en oublie.

Tout ça sur le web, c’est ce qu’on appelle les « clients riches », ou si on est friand de mots-clés vides de sens, on peut dire « les sites web2.0 » pour amuser ses amis en société.

Notre problème ici, c’est que le HTML n’est absolument pas prévu pour décrire tous ces nouveaux éléments d’interface. Flash non plus, soit dit en passant, or Flex (le versant applicatif de Flash) a besoin aussi de décrire ces composants.

Le W3C a donc été à l’origine d’une recommandation appelée ARIA, pour Accessible Rich Internet Applications. Cette recommandation ajoute à HTML (ou à tout langage de description qui veut l’embarquer) un moyen de décrire des éléments non plus en tant que ce qu’ils sont « à l’état naturel », mais en fonction de leur rôle dans la page et de leur état.

Par exemple, prenons une barre d’onglets. En réalité, que ce soit une ul (liste à puces) de n éléments, cinq divs, ou des spans en display:block, le tout déguisé par la magie des CSS en barre d’onglets, on s’en moque un peu [3]. Ce qui nous importe après tout, c’est de savoir que c’est une barre d’onglets.

Pour la suite de la démonstration, imaginons une liste à puces de trois éléments, le premier est « sélectionné » et les deux suivants sont « sélectionnables ». En HTML, nous allons écrire quelque chose comme ça :

<ul>
	<li><strong>Fiche produit</strong></li>
	<li><a href="#">Caractéristiques</a></li>
	<li><a href="#">Tarifs et coloris</a></li>
</ul>

Les informations d’accessibilité apportées par ARIA interviennent ici : quel que soit l’élément sous-jacent à ma barre d’onglets, je vais pouvoir ajouter des attributs HTML décrivant le rôle de l’élément : ceci est une barre d’onglets. Et le premier élément de cette liste devra dire : je suis un onglet, et je suis l’onglet actif. Les deux élément suivants diront : je suis un onglet, je suis activable, mais pour le moment je suis inactif.

Autrement dit :

  • le rôle du premier li c’est onglet, son état est actif ;
  • le rôle des deux lis suivants c’est aussi onglet, mais leur état est inactif, activable.

De même, on va pouvoir décrire une ul comme une vue arborescente, dire que le premier li est un noeud de l’arbre (son rôle) et qu’il est fermé (son état).

On voit bien là que la déclaration HTML sous-jacente n’a que peu d’importance par rapport à la description de la fonctionnalité présentée.

Mais ce n’est pas tout.

Quand j’écris une application web, j’ai besoin de rafraîchir certaines parties de la page. En ARIA, on les appelle les live regions. Nous allons alors pouvoir explicitement déclarer que telle région de la page est live, autrement dit qu’elle est susceptible de changer dynamiquement ; autrement dit [4] j’indique à la revue d’écran qu’elle va devoir le cas échéant ne pas stocker d’informations sur cette région dans son buffer, ou qu’elle devra le vider plus souvent.

Pendant que j’y suis, il arrive que certaines zones de la page demandent une action immédiate de l’utilisateur, alors que d’autres non. Je vais pouvoir spécifier un critère « d’impolitesse » (rudeness) de la live region. Par exemple, m’indiquer dans un coin de l’écran le nombre de mails non lus dans ma boîte de réception est une information susceptible de changer, mais qui ne me demande pas d’action immédiate. Je vais donc rendre cette zone polie. En revanche, la zone de notification d’erreur qui apparaît pour me dire que l’adresse mail que j’ai tapée est incorrecte, ou que les deux mots de passe que j’ai tapés ne sont pas équivalents, elle, doit avoir la priorité, m’interrompre dans le flux d’actions que j’avais entrepris. Elle doit donc être impolie et prendre la priorité sur ce que je m’apprêtais à faire.

Voilà, j’ai fini

C’est plus clair maintenant, Jean-Pierre ? Avec ça, un petit café ?

Notes

[1Allez, pour les moins de vingt ans, je vais expliquer : « le jeune Jean-Pierre Liégeois, du Var » est un canon du lecteur anonyme, canon dont l’origine revient à Gotlib dans Gai-Luron, en clin d’oeil à son beau-père.

[2Ami lecteur, si tu veux frimer en présence d’ergonomes, tu peux dire « les affordances perçues ». Ça claque bien, hein ?

[3Même si pour la beauté du sport nous sommes quelques-uns à aimer pinailler...

[4J’aime bien le son : « autrement dit », « autrement dit », « autrement dit ». Voilà, cadeau, découpe ton écran et fais des échanges à la récré.

Commentaires

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Lien hypertexte

(Si votre message se réfère à un article publié sur le Web, ou à une page fournissant plus d’informations, vous pouvez indiquer ci-après le titre de la page et son adresse.)