Jean-Pierre Villain - Qelios W3Café Accessibilité - Paris – Avril 2011 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

ARIA au pays du Web Html Une (très) brève Histoire du Web Dynamique Javascript

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

ARIA au pays du Web XMLHttpRequest 2002

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

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

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> Rechargement De page

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

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

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 : <a href=‘’> C’est super </a> Lien, c’est super 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

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

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

ARIA au pays du Web Problème pour l’utilisateur Vous êtes ici Afficher les actualités Ha! bon… AJAX Vous êtes toujours ici ! Afficher les actualités Cool…

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

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

ARIA au pays du Web rôle state, properties 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 focus Tabindex=-1 « 48%, 49%... »

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

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

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

!! 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 navigation zone de navigation Main : la zone de contenu principal contentinfo: zone d’information propre au document search: zone de recherche complementary zone de contenu complémentaire form zone de formulaire application zone qui contient une « application » 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 !!

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

ARIA au pays du Web 2. Les boites de dialogue

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

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

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

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 $

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>

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 : unite <input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text"> Id : commande Id : disponible Id : label 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

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

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. aria-live=polite La zone est lue quand l’utilisateur a terminé son action. 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.

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

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

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.

ARIA au pays du Web Contrôle au clavier

!! ARIA au pays du Web HTML ARIA Contrôles au clavier, la problématique Paradigme Tout est utilisable avec la touche de tabulation Pour certains éléments comme les listes de formulaires les flèches de direction servent à naviguer dans les éléments (item de liste) Principes La touche tabulation navigue d’un composant à l’autre 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 C’est une problématique très difficile. Il faut s’inspirer du fonctionnement de applications !! HTML ARIA

ARIA au pays du Web Contrôles au clavier, la navigation tabindex=0 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

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

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

ARIA au pays du Web Tester ARIA

Sur des applications RIA complexes. 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 Visioneuse de parole Inspect 32 ICITA Toolbar Juicy Toolbar

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