ARIA au pays du Web

1. ARIA au pays du Web Jean-Pierre Villain - Qelios W3Café Accessibilité - Paris – Avril 2011 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. ARIA au pays du Web Une (très) brève Histoire du Web Dynamique Html Javascript

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

4. ARIA au pays du Web XMLHttpRequest2002

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

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

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

8. ARIA au pays du Web Le Web Dynamique et l’utilisateur

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

10. ARIA au pays du Web 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 : Lien, c’est super <a href=‘’> C’est super </a> Titre de niveau 1, c’est super <h1> C’est super </h1> Graphique, c’est super <img src=‘’ alt=‘C’est super’ /> Bouton, c’est super <input type=‘submit’ value=‘C’est super’ /> Case à cocher, cochée,c’est super

11. ARIA au pays du Web Avec Javascript Les problématiques utilisateurs

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

13. ARIA au pays du Web 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. ARIA au pays du Web Problème pour l’utilisateur Navigation Clavier HTML Navigation Clavier Javascript Limitée à Le lien <div style="display: block;" class="jcarousel-next ></div> Les éléments de formulaire L’élément object <div style="display: block;" class="jcarousel-prev></div> Je peux Je peux pas

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

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

17. ARIA au pays du Web 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ésdepuis 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"> <li id="oranges" role="treeitem" tabindex="-1">Oranges</li> Exemples d’attributs ARIA <li class="groupHeader" id="apples" role="treeitem" tabindex="-1" aria-expanded="false"> Rôle Labelledby Expanded Tabindex

18. ARIA au pays du Web Role State Properties banner application slider aria-labelledby aria-live aria-describedby ARIA par l’exemple

19. ARIA au pays du Web 1. Guider l’utilisateur Les landmarks

20. ARIA au pays du Web 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 form Main : la zone de contenu principal navigation zone de formulaire zone de navigation Le rôle application indique aux technologies d’assistance de modifier la gestion des évènements claviers, la navigation notamment, pour utiliser la configuration habituelle dans une application logicielle !! complementary application zone de contenu complémentaire zone qui contient une « application » contentinfo: zone d’information propre au document

21. ARIA au pays du Web Exemple : Implémentation des landmarks chez Alsacréations navigation banner search main complementary contentinfo

22. ARIA au pays du Web 2. Les boites de dialogue

23. ARIA au pays du Web 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 ARIA Alerte Javascript Inconvénient Pas stylable N’accepte que du texte Avantage C’est une vraie fenêtre modale Ne nécessite aucun traitement Inconvénient Ce n’est pas une vraie fenêtre modale Avantage Personnalisable à 100%

24. ARIA au pays du Web 3. Des composants complexes User Friendly

25. ARIA au pays du Web Le Slider clandestin … <div...> <img …/> </div>

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

27. ARIA au pays du Web 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 restitutions :Vocale (annonce des valeurs)Par bip sonore Par défaut, Jaws annonce la valeur atteinteà intervalles réguliers <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="progressMsg" aria-valuetext=‘’0 %"> </div>

28. ARIA au pays du Web 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 Quantité 10 kilos édition avec autocomplétion Attention au délai :Plus de 30 kg : prévoir 10 jours …. sélectionné 10 Id : disponible Id : label <input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text">

29. ARIA au pays du Web 4. Les Live Régions

30. ARIA au pays du Web 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 aria-live=off Valeur par défaut, la zone n’est pas lue du tout. La zone est lue quand l’utilisateur a terminé son action. aria-live=polite aria-live=assertive La zone est lue en interrompant l’utilisateur dés que c’est possible. aria-live=rude La zone est lue en interrompant l’utilisateur immédiatement.

31. ARIA au pays du Web 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 Toute la zone ou seulement la partie mise à jour est lue atomic = true/false Les ajouts et les suppressions de contenus (dom) sont signalés relevant = additions /removal Seuls les changements de texte ou tous les changements sont signalés relevant=text/all aria-busy=true/false Signale que la zone est en train d’être mise à jour

32. ARIA au pays du Web 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. ARIA au pays du Web 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 aria-atomic="false" aria-live="polite" id="chat-area"><li class="welcome"> Bienvenue</li><li><span>Invité </span>Bonjour tout le monde</li> </ul> Lire la zone mise à jour quand l’utilisateur est disponible.Donc, quand il a terminé, son message notamment.

34. ARIA au pays du Web Contrôle au clavier

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

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

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

39. ARIA au pays du Web Tester ARIA

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

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