ARIA au pays du Web<br />Jean-Pierre Villain - Qelios<br />W3Café Accessibilité - Paris – Avril 2011<br />Les images utili...
ARIA au pays du Web<br />Une (très) brève<br />Histoire du<br />Web Dynamique<br />Html<br />Javascript<br />
ARIA au pays du Web<br />Des effets dynamiques <br />Des Contenus Structurés<br />Menu Déroulant<br />Images<br />Formulai...
ARIA au pays du Web<br />XMLHttpRequest2002<br />
ARIA au pays du Web<br />Du comportement<br />Des Contenus Structurés<br />Ajax<br />Images<br />Formulaires<br />Nouveaux...
ARIA au pays du Web<br />Les limites du développement Web classique<br />Le web fonctionne en <br />mode client-serveur<br...
ARIA au pays du Web<br />La solution : utiliser Javascript pour :<br />Ajax<br />Créer des composants<br />en ajoutant du ...
ARIA au pays du Web<br />Le Web Dynamique<br />et l’utilisateur<br />
ARIA au pays du Web<br />Comment un lecteur d’écran sait de quoi il parle ?<br />API Accessibilité Système<br />Navigateur...
ARIA au pays du Web<br />Pour HTML tout est défini dans les spécifications<br />Le lecteur d’écran dispose de toutes les i...
ARIA au pays du Web<br />Avec Javascript<br />Les problématiques<br />utilisateurs<br />
ARIA au pays du Web<br />Problème pour l’utilisateur<br />Identifier – Utiliser - Comprendre<br /><div><span>0%</span><br ...
ARIA au pays du Web<br />Problème pour l’utilisateur<br />Vous êtes  ici<br />Afficher les actualités<br />Cool…<br />AJAX...
ARIA au pays du Web<br />Problème pour l’utilisateur<br />Navigation Clavier HTML<br />Navigation Clavier Javascript<br />...
ARIA au pays du Web<br />Solution : ARIA<br />Informer de l’état et <br />des propriétés d’un <br />composant<br />2<br />...
ARIA au pays du Web<br />Définit des attributs et des valeurs<br />Contenu<br />rôle<br />Javascript<br />(slider, menu, n...
ARIA au pays du Web<br />L’implémentation utilise de simples attributs HTML <br />Les valeurs dynamiques sont gérées depui...
ARIA au pays du Web<br />Role State Properties<br />banner  application<br />slider aria-labelledby<br />aria-live aria-de...
ARIA au pays du Web<br />1. Guider l’utilisateur<br />Les landmarks<br />
ARIA au pays du Web<br />Les landmarks, role= banner, main, search… <br />Objectif : créer des points de repère et de navi...
ARIA au pays du Web<br />Exemple : Implémentation des landmarks chez Alsacréations<br />navigation<br />banner<br />search...
ARIA au pays du Web<br />2. Les boites de dialogue<br />
ARIA au pays du Web<br />Les boites de dialogue : role = alertdialog<br />Objectif : créer une boite d’alerte alternative ...
ARIA au pays du Web<br />3. Des composants<br />complexes<br />User Friendly<br />
ARIA au pays du Web<br />Le Slider clandestin<br />…<br /><div...><br /><img …/><br /></div><br />
ARIA au pays du Web<br />Le Slider qui parle<br /><div><br /><span>0$</span><a href=‘#’aria-valuenow="0" aria-valuetext="0...
ARIA au pays du Web<br />Exemple : une barre de progression, role=progressbar<br />Le principe est identique à celui d’un ...
ARIA au pays du Web<br />Exemple : messages avec labelledby et describedby<br />labelledby et describedby  permettent de l...
ARIA au pays du Web<br />4. Les Live Régions<br />
ARIA au pays du Web<br />Les live region, la propriété aria-live<br />Objectif : informer des mises à jour dynamiques et g...
ARIA au pays du Web<br />Les live region, les propriétés complémentaires<br />Objectif : informer de l’état de la zone mis...
ARIA au pays du Web<br />Une live region avec aria-live polite<br />aria-live=‘’polite’’<br />La zone mise à jour est lue<...
ARIA au pays du Web<br />Live regions : un chat avec ajax et aria-live<br />http://ideance.net/publications/live-regions/i...
ARIA au pays du Web<br />Contrôle <br />au clavier<br />
ARIA au pays du Web<br />Contrôles au clavier, la problématique<br />Principes<br />Paradigme<br />La touche tabulation na...
ARIA au pays du Web<br />Contrôles au clavier, la navigation<br />Touches dédiées<br />tabindex=0<br />Permet à un élément...
ARIA au pays du Web<br />Contrôles au clavier, exemples<br />Naviguer dans une fausse fenêtre modale<br />Gérer la navigat...
ARIA au pays du Web<br />Problématiques utilisateurs<br />Les technologies d’assistance annoncent, pour certains  rôle le ...
ARIA au pays du Web<br />Tester ARIA<br />
ARIA au pays du Web<br />02<br />Problématiques utilisateurs<br />Outils d’inspection d’évènement, attributs et propriétés...
ARIA au pays du Web<br />Merci de votre <br />attention<br />Les démos de l’atelier sont disponibles sur www.qelios.net/de...
Prochain SlideShare
Chargement dans…5
×

Aria au pays du Web

1 934 vues

Publié le

Publié dans : Technologie, Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 934
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 024
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Aria au pays du Web

  1. 1. ARIA au pays du Web<br />Jean-Pierre Villain - Qelios<br />W3Café Accessibilité - Paris – Avril 2011<br />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<br />
  2. 2. ARIA au pays du Web<br />Une (très) brève<br />Histoire du<br />Web Dynamique<br />Html<br />Javascript<br />
  3. 3. ARIA au pays du Web<br />Des effets dynamiques <br />Des Contenus Structurés<br />Menu Déroulant<br />Images<br />Formulaires<br />De la neige <br />en hiver<br />Contrôle de formulaire<br />Liens<br />Textes<br />HTML<br />Javascript<br />Multimédia<br />1999<br />1995<br />1992<br />2000<br />HTML 1.0<br />Javascript<br />HTML 4.01<br />XHTML<br />
  4. 4. ARIA au pays du Web<br />XMLHttpRequest2002<br />
  5. 5. ARIA au pays du Web<br />Du comportement<br />Des Contenus Structurés<br />Ajax<br />Images<br />Formulaires<br />Nouveaux<br />Composants<br />Application<br />RIA<br />Liens<br />Textes<br />Javascript<br />HTML<br />Multimédia<br />1998<br />2005<br />2006<br />2014<br />2002<br />MSXML<br />Ajax<br />ARIA<br />HTML5<br />XmlHttpRequest<br />
  6. 6. ARIA au pays du Web<br />Les limites du développement Web classique<br />Le web fonctionne en <br />mode client-serveur<br />HTML ne permet pas de créer des composants<br />Limités à<br />Une action<br />Le lien<br />Les éléments de<br />formulaire<br />Un rechargement<br />de page<br />
  7. 7. ARIA au pays du Web<br />La solution : utiliser Javascript pour :<br />Ajax<br />Créer des composants<br />en ajoutant du comportement<br />sur des éléments HTML<br />quelconques<br />Gérer les requêtes client-serveur<br />via l’objet Javascript<br />XMLHttpRequest<br />Code Html du slider<br /><div><span>0%</span><br /><div><a></a><br /></div><br /></div><br />Rechargement<br />De page<br />
  8. 8. ARIA au pays du Web<br />Le Web Dynamique<br />et l’utilisateur<br />
  9. 9. ARIA au pays du Web<br />Comment un lecteur d’écran sait de quoi il parle ?<br />API Accessibilité Système<br />Navigateur Web<br />Technologie d’assistance<br />Zone de liste déroulante Choose one or more users avery  1 sur 4 <br />
  10. 10. ARIA au pays du Web<br />Pour HTML tout est défini dans les spécifications<br />Le lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite :<br />Lien, c’est super <br /><a href=‘’> C’est super </a><br />Titre de niveau 1, c’est super<br /><h1> C’est super </h1><br />Graphique, c’est super<br /><imgsrc=‘’ alt=‘C’est super’ /><br />Bouton, c’est super<br /><input type=‘submit’ value=‘C’est super’ /><br />Case à cocher, cochée,c’est super<br />
  11. 11. ARIA au pays du Web<br />Avec Javascript<br />Les problématiques<br />utilisateurs<br />
  12. 12. ARIA au pays du Web<br />Problème pour l’utilisateur<br />Identifier – Utiliser - Comprendre<br /><div><span>0%</span><br /><div><a></a><br /></div></div><br />C’est quoi ce truc ?<br /><div><span>0%</span><br /><div> <a></a><br /></div></div><br />0%<br />Volume<br />Heu …<br />0%<br />Volume<br /><div><span> 48% </span><br /><div> <a></a><br /></div></div><br />48%<br />Volume<br />Ha! bon …<br />
  13. 13. ARIA au pays du Web<br />Problème pour l’utilisateur<br />Vous êtes ici<br />Afficher les actualités<br />Cool…<br />AJAX<br />Vous êtes toujours ici !<br />Afficher les actualités<br />Ha! bon…<br />
  14. 14. ARIA au pays du Web<br />Problème pour l’utilisateur<br />Navigation Clavier HTML<br />Navigation Clavier Javascript<br />Limitée à<br />Le lien<br /><div style="display: block;" class="jcarousel-next ></div> <br />Les éléments de<br />formulaire<br />L’élément<br />object<br /><div style="display: block;" class="jcarousel-prev></div> <br />Je peux<br />Je peux pas<br />
  15. 15. ARIA au pays du Web<br />Solution : ARIA<br />Informer de l’état et <br />des propriétés d’un <br />composant<br />2<br />Définir les composantsDéfinir la structure<br />1<br />Slider<br />Navigation<br />Menu<br />Application<br />Banner<br />48%<br />Volume<br />valuenow:48%<br />« 48%, 49%... »<br />Informer des misesà jour dynamiques<br />4<br />Rendre les composants<br />utilisables au<br />clavier<br />3<br />Tabindex<br />Flèche de direction<br />Live region<br />
  16. 16. ARIA au pays du Web<br />Définit des attributs et des valeurs<br />Contenu<br />rôle<br />Javascript<br />(slider, menu, navigation, application…)<br />Aria<br />Navigateur<br />state, properties<br />API ACC Système<br />cheked, valuenow, expanded, labeledby <br />Information<br />Etend le rôle de tabindex<br />Tabindex=0<br />focus<br />focus<br />Tabindex=-1<br />« 48%, 49%... »<br />
  17. 17. ARIA au pays du Web<br />L’implémentation utilise de simples attributs HTML <br />Les valeurs dynamiques sont gérées depuis la couche Javascript<br />Les comportements (l’affichage d’un sous-niveau de liste, par exemple ) sont également gérésdepuis la couche Javascript<br /><h2 id="label_1">Foods</h2><br /><ul id="tree1" class="tree" role="tree" aria-labelledby="label_1"><br /><li class="groupHeader" id="fruits" role="treeitem" tabindex="0" aria-expanded="true"><br /> <ulrole="group"><br /> <li id="oranges" role="treeitem" tabindex="-1">Oranges</li><br />Exemples<br />d’attributs ARIA<br /><li class="groupHeader" id="apples" role="treeitem" tabindex="-1" aria-expanded="false"><br />Rôle<br />Labelledby<br />Expanded<br />Tabindex<br />
  18. 18. ARIA au pays du Web<br />Role State Properties<br />banner application<br />slider aria-labelledby<br />aria-live aria-describedby<br />ARIA par l’exemple<br />
  19. 19. ARIA au pays du Web<br />1. Guider l’utilisateur<br />Les landmarks<br />
  20. 20. ARIA au pays du Web<br />Les landmarks, role= banner, main, search… <br />Objectif : créer des points de repère et de navigation dans la structure de la page<br />banner : zone d’en-tête<br />search: zone de recherche<br />form<br />Main : la zone de contenu principal<br />navigation<br />zone de formulaire<br />zone de navigation<br />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<br />!!<br />complementary<br />application<br />zone de contenu complémentaire<br />zone qui contient une « application »<br />contentinfo: zone d’information propre au document<br />
  21. 21. ARIA au pays du Web<br />Exemple : Implémentation des landmarks chez Alsacréations<br />navigation<br />banner<br />search<br />main<br />complementary<br />contentinfo<br />
  22. 22. ARIA au pays du Web<br />2. Les boites de dialogue<br />
  23. 23. ARIA au pays du Web<br />Les boites de dialogue : role = alertdialog<br />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 !<br />Alerte Javascript<br />Alerte ARIA<br />Inconvénient<br />Pas stylable<br />N’accepte que du texte<br />Avantage<br />C’est une vraie fenêtre modale<br />Ne nécessite aucun traitement<br />Inconvénient<br />Ce n’est pas une vraie fenêtre modale<br />Avantage<br />Personnalisable à 100%<br />
  24. 24. ARIA au pays du Web<br />3. Des composants<br />complexes<br />User Friendly<br />
  25. 25. ARIA au pays du Web<br />Le Slider clandestin<br />…<br /><div...><br /><img …/><br /></div><br />
  26. 26. ARIA au pays du Web<br />Le Slider qui parle<br /><div><br /><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><br /></div><br />price Potentiomètre 0 $<br />1 $<br />2 $<br />3 $<br />4 $<br />5 $<br />6 $<br />
  27. 27. ARIA au pays du Web<br />Exemple : une barre de progression, role=progressbar<br />Le principe est identique à celui d’un slideret 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.<br />NVDA propose deux restitutions :Vocale (annonce des valeurs)Par bip sonore<br />Par défaut, Jaws annonce la valeur atteinteà intervalles réguliers<br /><div <br />role="progressbar" <br />aria-valuemin="0" <br />aria-valuemax="100" <br />aria-valuenow="0" <br />aria-labelledby="progressMsg" <br />aria-valuetext=‘’0 %"><br /></div><br />
  28. 28. ARIA au pays du Web<br />Exemple : messages avec labelledby et describedby<br />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.<br />Id : commande<br />Id : unite<br />Commande de fruits groupage<br />Quantité 10 kilos<br />édition avec autocomplétion<br />Attention au délai :Plus de 30 kg : prévoir 10 jours<br />….<br />sélectionné 10<br />Id : disponible<br />Id : label<br /><input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text"><br />
  29. 29. ARIA au pays du Web<br />4. Les Live Régions<br />
  30. 30. ARIA au pays du Web<br />Les live region, la propriété aria-live<br />Objectif : informer des mises à jour dynamiques et gérer l’interaction entre la zone de mise à jour et les actions de l’utilisateur<br />Propriétés aria-live<br />aria-live=off<br />Valeur par défaut, la zone n’est pas lue du tout.<br />La zone est lue quand l’utilisateur a terminé son action.<br />aria-live=polite<br />aria-live=assertive<br />La zone est lue en interrompant l’utilisateur dés que c’est possible.<br />aria-live=rude<br />La zone est lue en interrompant l’utilisateur immédiatement.<br />
  31. 31. ARIA au pays du Web<br />Les live region, les propriétés complémentaires<br />Objectif : informer de l’état de la zone mise à jour, gérer le contenu de la zone mise à jour<br />Propriétés<br />Toute la zone ou seulement la partie mise à jour est lue<br />atomic = true/false<br />Les ajouts et les suppressions de contenus (dom) sont signalés<br />relevant = additions /removal<br />Seuls les changements de texte ou tous les changements sont signalés<br />relevant=text/all<br />aria-busy=true/false<br />Signale que la zone est en train d’être mise à jour<br />
  32. 32. ARIA au pays du Web<br />Une live region avec aria-live polite<br />aria-live=‘’polite’’<br />La zone mise à jour est lue<br />focus()<br />L’utilisateur est occupé; la zone n’est plus lue<br />
  33. 33. ARIA au pays du Web<br />Live regions : un chat avec ajax et aria-live<br />http://ideance.net/publications/live-regions/index.html<br />Lire uniquement le contenu mis à jour, c’est-à-dire le dernier texte inséré.<br /><ularia-atomic="false" aria-live="polite" id="chat-area"><li class="welcome"> Bienvenue</li><li><span>Invité </span>Bonjour tout le monde</li> </ul><br />Lire la zone mise à jour quand l’utilisateur est disponible.Donc, quand il a terminé, son message notamment.<br />
  34. 34. ARIA au pays du Web<br />Contrôle <br />au clavier<br />
  35. 35. ARIA au pays du Web<br />Contrôles au clavier, la problématique<br />Principes<br />Paradigme<br />La touche tabulation navigue d’un composant à l’autre<br />Tout est utilisable avec la touche de tabulation<br />C’est une problématique très difficile.<br />Il faut s’inspirer du fonctionnement de applications<br />!!<br />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<br />Pour certains éléments comme les listes de formulaires les flèches de direction servent à naviguer dans les éléments (item de liste)<br />HTML<br />ARIA<br />
  36. 36. ARIA au pays du Web<br />Contrôles au clavier, la navigation<br />Touches dédiées<br />tabindex=0<br />Permet à un élément quelconque de recevoir le focus de tabulation<br />tabindex=-1<br />Retire un élément du plan de tabulation<br />flêches de direction<br />Naviguer dans les éléments d’un composant<br />barre d’espace<br />Activer / désactiver<br />touche escape<br />Désactiver /annuler une action<br />
  37. 37. ARIA au pays du Web<br />Contrôles au clavier, exemples<br />Naviguer dans une fausse fenêtre modale<br />Gérer la navigation dans le système d’actualité de Yahoo<br />Naviguer dans un système d’onglets<br />
  38. 38. ARIA au pays du Web<br />Problématiques utilisateurs<br />Les technologies d’assistance annoncent, pour certains rôle le type de navigation attendue.<br />Les utilisateurs qui ne peuvent pas utiliser de souris ne recoivent pas d’informations sur la navigation<br />Respecter impérativement les Design Pattern préconisés par ARIA<br />!!<br />Exemple avec slider et jaws : « utiliser les touches flèchés… ».<br />Comment les informer ?<br />Conserver le paradigme de tabulation et ajouter des navigations auxiliaires<br />Comment être sur que c’est réellement le cas ?<br />
  39. 39. ARIA au pays du Web<br />Tester ARIA<br />
  40. 40. ARIA au pays du Web<br />02<br />Problématiques utilisateurs<br />Outils d’inspection d’évènement, attributs et propriétés <br />Les technologies d’assistance<br />Sur des applications RIA complexes.<br />Tests Utilisateurs<br />JAWS / NVDA<br />!!<br />ICITA Toolbar<br />Inspect 32<br />JuicyToolbar<br />Visioneuse de parole<br />
  41. 41. ARIA au pays du Web<br />Merci de votre <br />attention<br />Les démos de l’atelier sont disponibles sur www.qelios.net/demo_aria<br />

×