ARIA est un standard du W3C permettant de compléter le HTML traditionnel, et de rendre accessibles les interfaces riches. Cet présentation décrit quelques unes des innovations les plus intéressantes d'ARIA, avec des exemples réels d'implémentation.

1. Les images utilisées dans cette présentation sont extraites des films « alice au pays des merveilles » de Tim Burton et « 2001 l ’odysée de
l’espace » de Stanley Kubric

2. Une (très) brève
Histoire du
Web Dynamique

3. Des Contenus Structurés Des effets dynamiques
Menu Déroulant
Liens Formulaires
Images
De la neige Contrôle de
Textes Multimédia
en hiver formulaire
HTML Javascript
1992 1995 1999 2000
HTML 1.0 Javascript HTML 4.01 XHTML

4. XMLHttpRequest
2002

5. Des Contenus Structurés Du comportement
Liens Formulaires Ajax
Images
Nouveaux
Application
Textes Multimédia Composants
RIA
HTML Javascript
1998 2002 2005 2006 2014
MSXML XmlHttpRequest Ajax ARIA HTML5

6. Les limites du développement Web classique
HTML ne permet pas Le web fonctionne en
de créer des composants mode client-serveur
Limités à Une action
Le lien
Les éléments de
formulaire Un rechargement
de page

7. La solution : utiliser Javascript pour :
Ajax
Créer des composants Gérer les requêtes
en ajoutant du comportement client-serveur
sur des éléments HTML via l’objet Javascript
quelconques XMLHttpRequest
Code Html du slider
<div><span>0%</span> Rechargement
<div><a></a>
</div> De page
</div>

8. Le Web Dynamique
et l’utilisateur

9. Comment un lecteur d’écran sait de quoi il parle ?
API Accessibilité
Système
Technologie Navigateur
d’assistance Web
Zone de liste déroulante
Choose one or more users
avery
1 sur 4

10. Pour HTML tout est défini dans les spécifications
Le lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les
adapte comme il le souhaite :
<a href=‘’> C’est super </a> Lien, c’est super
<h1> C’est super </h1> Titre de niveau 1, c’est super
<img src=‘’ alt=‘C’est super’ /> Graphique, c’est super
<input type=‘submit’ value=‘C’est super’ /> Bouton, c’est super
Case à cocher, cochée,
c’est super

11. Avec Javascript
Les problématiques
utilisateurs

12. Problème pour l’utilisateur
Identifier – Utiliser - Comprendre
<div><span>0%</span>
Volume 0% <div><a></a>
</div></div>
C’est quoi ce truc ?
<div><span>0%</span>
Volume 0% <div> <a></a>
</div></div>
Heu …
<div><span> 48% </span>
Volume 48% <div> <a></a>
</div></div>
Ha! bon …

13. Problème pour l’utilisateur
Vous êtes ici
Afficher les actualités
Cool…
AJAX
Vous êtes toujours ici !
Afficher les actualités
Ha! bon…

14. Problème pour l’utilisateur
Navigation Clavier HTML Navigation Clavier Javascript
Limitée à
Le lien
Les éléments de <div style="display: block;"
formulaire class="jcarousel-next ></div>
L’élément <div style="display: block;"
object class="jcarousel-prev></div>
Je peux Je peux pas

15. Solution : ARIA
1 Définir les composants 2 Informer de l’état et
Définir la structure des propriétés d’un
composant
Slider
Navigation Volume 48%
Menu
Application valuenow:48%
Banner « 48%, 49%... »
3 Informer des mises 4 Rendre les composants
à jour dynamiques utilisables au
clavier
Live region Tabindex
Flèche de direction

16. Définit des attributs et des valeurs Contenu
rôle Javascript
(slider, menu, navigation, application…) Navigateur Aria
state, properties API ACC Système
cheked, valuenow, expanded, labeledby Information
Etend le rôle de tabindex
Tabindex=0 focus
Tabindex=-1 focus
« 48%, 49%... »

17. L’implémentation utilise de simples attributs HTML
Les valeurs dynamiques sont gérées depuis la couche Javascript
Les comportements (l’affichage d’un sous-niveau de liste, par exemple ) sont également gérés
depuis la couche Javascript
<h2 id="label_1">Foods</h2>
<ul id="tree1" class="tree" role="tree" aria-
labelledby="label_1">
<li class="groupHeader" id="fruits" role="treeitem" tabindex="0"
aria-expanded="true">
<ul role="group">
Exemples <li id="oranges" role="treeitem" tabindex="-1">Oranges</li>
d’attributs ARIA
<li class="groupHeader" id="apples" role="treeitem"
Rôle tabindex="-1" aria-expanded="false">
Labelledby
Expanded
Tabindex

18. ARIA par l’exemple

19. 1. Guider l’utilisateur
Les landmarks

20. Les landmarks, role= banner, main, search…
Objectif : créer des points de repère et de navigation dans la structure de la page
banner : zone d’en-tête search: zone de recherche
navigation Main : la zone de contenu principal form
zone de Le rôle application indique aux zone de
navigation technologies d’assistance de formulaire
!!
modifier la gestion des
complementary évènements claviers, la application
zone de navigation notamment, pour zone qui
contenu utiliser la configuration contient une
complémentaire habituelle dans une application « application »
logicielle
contentinfo: zone d’information propre au document

21. Exemple : Implémentation des landmarks chez Alsacréations
navigation
banner
search
main
complementary
contentinfo

22. 2. Les boites
de dialogue

23. Les boites de dialogue : role = alertdialog
Objectif : créer une boite d’alerte alternative aux méthodes alert, promprt, confirm de JS.
Attention : il faut maîtriser les limites des boites de dialogues ARIA !
Alerte Javascript Alerte ARIA
Inconvénient
Pas stylable
N’accepte que du texte Inconvénient
Ce n’est pas une vraie fenêtre
Avantage modale
C’est une vraie fenêtre modale
Ne nécessite aucun traitement Avantage
Personnalisable à 100%

24. 3. Des composants
complexes
User Friendly

25. Le Slider clandestin
<div...>
<img …/> …
</div>

26. Le Slider qui parle
<div> price Potentiomètre 0 $
<span>0$</span> 1$
<a href=‘#’ 2$
aria-valuenow="0" 3$
aria-valuetext="0 $" 4$
role="slider" 5$
aria-valuemin="0" 6$
aria-valuemax="100"
title="price" style="left: 0%;"></a>
</div>

27. Exemple : une barre de progression, role=progressbar
Le principe est identique à celui d’un slider et utilise les mêmes attributs et le même
fonctionnement enchainé.
Implicitement, le composant est déclaré en « readonly » de telle sorte que l’utilisateur ne
puisse pas interagir avec lui.
NVDA propose deux
<div
restitutions :
role="progressbar"
Vocale (annonce des valeurs)
aria-valuemin="0"
Par bip sonore
aria-valuemax="100"
aria-valuenow="0"
Par défaut, Jaws annonce la
aria-labelledby="progressMsg"
valeur atteinte
aria-valuetext=‘’0 %">
à intervalles réguliers
</div>

28. Exemple : messages avec labelledby et describedby
labelledby et describedby permettent de lier des contenus les uns aux autres.
Ces deux attributs sont omniprésents dans les implémentations ARIA.
L’une des utilisations est de produire des messages lors de l’utilisation d’un composant.
Id : commande Id : unite
Commande de fruits
groupage
Id : label Id : disponible
Quantité 10 kilos
édition avec
autocomplétion
Attention au délai :
<input id="commande" value="10" Plus de 30 kg : prévoir 10
aria-labelledby="label commande unite" jours
aria-describedby="disponible" ….
type="text"> sélectionné 10

29. 4. Les Live Régions

30. Les live region, la propriété aria-live
Objectif : informer des mises à jour dynamiques et gérer l’interaction entre la zone de mise
à jour et les actions de l’utilisateur
Propriétés aria-live
Valeur par défaut, la zone n’est pas
aria-live=off lue du tout.
La zone est lue quand l’utilisateur a
aria-live=polite terminé son action.
La zone est lue en interrompant
aria-live=assertive l’utilisateur dés que c’est possible.
La zone est lue en interrompant
aria-live=rude l’utilisateur immédiatement.

31. Les live region, les propriétés complémentaires
Objectif : informer de l’état de la zone mise à jour, gérer le contenu de la zone mise à jour
Propriétés
atomic = true/false Toute la zone ou seulement la partie
mise à jour est lue
Les ajouts et les suppressions de
relevant = additions /removal contenus (dom) sont signalés
Seuls les changements de texte ou
relevant=text/all tous les changements sont signalés
aria-busy=true/false Signale que la zone est en train d’être
mise à jour

32. Une live region avec aria-live polite
aria-live=‘’polite’’
La zone mise à jour est lue
focus()
L’utilisateur est occupé;
la zone n’est plus lue

33. Live regions : un chat avec ajax et aria-live
http://ideance.net/publications/live-regions/index.html
Lire uniquement le contenu mis à
jour, c’est-à-dire le dernier texte
inséré.
<ul
Lire la zone mise à jour quand
aria-atomic="false"
l’utilisateur est disponible.
aria-live="polite"
Donc, quand il a terminé, son
id="chat-area">
message notamment.
<li class="welcome"> Bienvenue</li>
<li><span>Invité </span>
Bonjour tout le monde
</li> </ul>

34. Contrôle
au clavier

35. Contrôles au clavier, la problématique
Paradigme Principes
Tout est utilisable avec la touche La touche tabulation navigue d’un
de tabulation C’est une problématique à l’autre
composant
très difficile.
!!
Pour certains éléments comme les
listes de formulaires les flèches de
direction servent à naviguer dans
les éléments (item de liste)
Des touches dédiées comme les
Il faut s’inspirer du de direction, la touche
flèches
fonctionnement de la barre d’espace
escape,
applications
apportent des fonctionnalités de
contrôle
HTML ARIA

36. Contrôles au clavier, la navigation
Touches dédiées
Permet à un élément quelconque
tabindex=0 de recevoir le focus de tabulation
Retire un élément du plan de
tabindex=-1 tabulation
Naviguer dans les éléments d’un
flêches de direction composant
barre d’espace Activer / désactiver
touche escape Désactiver /annuler une action

37. Contrôles au clavier, exemples
Naviguer dans une fausse fenêtre modale
Gérer la navigation dans le système d’actualité de Yahoo
Naviguer dans un système d’onglets

38. Problématiques utilisateurs
Les technologies d’assistance Les utilisateurs qui ne peuvent pas
annoncent, pour certains rôle le utiliser de souris ne recoivent pas
type de navigation attendue. Respecter
d’informations sur la navigation
!!
Exemple avec slider et jaws :
« utiliser les touches flèchés… ».
impérativement les
Design Pattern Comment les informer ?
préconisés par
ARIA Conserver le paradigme de
Comment être sur que c’est
tabulation et ajouter des
réellement le cas ?
navigations auxiliaires

39. Tester ARIA

40. Problématiques utilisateurs
Outils d’inspection
Les technologies
d’évènement, attributs et
d’assistance
propriétés
Sur des applications
JAWS / NVDA
!! RIA complexes.
Tests Utilisateurs
Inspect 32 ICITA Toolbar
Juicy Toolbar
Visioneuse de parole

41. Merci de votre
attention
Les démos de l’atelier sont disponibles
sur www.qelios.net/demo_aria