Les images utilisées dans cette présentation sont extraites des films « alice au pays des merveilles » de Tim Burton et « ...
Une (très) brève  Histoire duWeb Dynamique
Des Contenus Structurés                Des effets dynamiques                                             Menu Déroulant  L...
XMLHttpRequest    2002
Des Contenus Structurés                     Du comportement  Liens            Formulaires                        Ajax     ...
Les limites du développement Web classique HTML ne permet pas          Le web fonctionne ende créer des composants       m...
La solution : utiliser Javascript pour :                                         Ajax    Créer des composants           Gé...
Le Web Dynamique   et l’utilisateur
Comment un lecteur d’écran sait de quoi il parle ?                   API Accessibilité                       SystèmeTechno...
Pour HTML tout est défini dans les spécifications Le lecteur d’écran dispose de toutes les informations renvoyées par le n...
Avec JavascriptLes problématiques    utilisateurs
Problème pour l’utilisateur          Identifier – Utiliser - Comprendre                                 <div><span>0%</spa...
Problème pour l’utilisateur                            Vous êtes ici                          Afficher les actualités     ...
Problème pour l’utilisateurNavigation Clavier HTML       Navigation Clavier Javascript       Limitée à                Le l...
Solution : ARIA1   Définir les composants       2            Informer de l’état et    Définir la structure                ...
Définit des attributs et des valeurs              Contenu                 rôle                             Javascript (sli...
L’implémentation utilise de simples attributs HTMLLes valeurs dynamiques sont gérées depuis la couche JavascriptLes compor...
ARIA par l’exemple
1. Guider l’utilisateur    Les landmarks
Les landmarks, role= banner, main, search…    Objectif : créer des points de repère et de navigation dans la structure de ...
Exemple : Implémentation des landmarks chez Alsacréations                         navigation  banner                      ...
2. Les boitesde dialogue
Les boites de dialogue : role = alertdialogObjectif : créer une boite d’alerte alternative aux méthodes alert, promprt, co...
3. Des composants    complexes   User Friendly
Le Slider clandestin<div...><img …/>                          …</div>
Le Slider qui parle<div>                                           price Potentiomètre 0 $<span>0$</span>                 ...
Exemple : une barre de progression, role=progressbarLe principe est identique à celui d’un slider et utilise les mêmes att...
Exemple : messages avec labelledby et describedbylabelledby et describedby permettent de lier des contenus les uns aux aut...
4. Les Live Régions
Les live region, la propriété aria-liveObjectif : informer des mises à jour dynamiques et gérer l’interaction entre la zon...
Les live region, les propriétés complémentairesObjectif : informer de l’état de la zone mise à jour, gérer le contenu de l...
Une live region avec aria-live polite             aria-live=‘’polite’’                                    La zone mise à j...
Live regions : un chat avec ajax et aria-live              http://ideance.net/publications/live-regions/index.html        ...
Contrôleau clavier
Contrôles au clavier, la problématique       Paradigme                                               PrincipesTout est uti...
Contrôles au clavier, la navigation   Touches dédiées                           Permet à un élément quelconquetabindex=0  ...
Contrôles au clavier, exemples    Naviguer dans une fausse fenêtre modale Gérer la navigation dans le système d’actualité ...
Problématiques utilisateursLes technologies d’assistance              Les utilisateurs qui ne peuvent pasannoncent, pour c...
Tester ARIA
Problématiques utilisateurs   Outils d’inspection                                           Les technologiesd’évènement, a...
Merci de votre         attentionLes démos de l’atelier sont disponibles    sur www.qelios.net/demo_aria
Prochain SlideShare
Chargement dans…5
×

Aria au pays du web

2 422 vues

Publié le

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.

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

Aucun téléchargement
Vues
Nombre de vues
2 422
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Aria au pays du web

  1. 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. 2. Une (très) brève Histoire duWeb Dynamique
  3. 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 2000HTML 1.0 Javascript HTML 4.01 XHTML
  4. 4. XMLHttpRequest 2002
  5. 5. Des Contenus Structurés Du comportement Liens Formulaires Ajax Images Nouveaux Application Textes Multimédia Composants RIA HTML Javascript1998 2002 2005 2006 2014MSXML XmlHttpRequest Ajax ARIA HTML5
  6. 6. Les limites du développement Web classique HTML ne permet pas Le web fonctionne ende créer des composants mode client-serveur Limités à Une action Le lien Les éléments de formulaire Un rechargement de page
  7. 7. La solution : utiliser Javascript pour : Ajax Créer des composants Gérer les requêtesen 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. 8. Le Web Dynamique et l’utilisateur
  9. 9. Comment un lecteur d’écran sait de quoi il parle ? API Accessibilité SystèmeTechnologie Navigateurd’assistance Web Zone de liste déroulante Choose one or more users avery 1 sur 4
  10. 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. 11. Avec JavascriptLes problématiques utilisateurs
  12. 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. 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. 14. Problème pour l’utilisateurNavigation 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. 15. Solution : ARIA1 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. 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. 17. L’implémentation utilise de simples attributs HTMLLes valeurs dynamiques sont gérées depuis la couche JavascriptLes 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"> 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. 18. ARIA par l’exemple
  19. 19. 1. Guider l’utilisateur Les landmarks
  20. 20. Les landmarks, role= banner, main, search… Objectif : créer des points de repère et de navigation dans la structure de la pagebanner : 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 descomplementary évènements claviers, la application zone de navigation notamment, pour zone qui contenu utiliser la configuration contient unecomplémentaire habituelle dans une application « application » logiciellecontentinfo: zone d’information propre au document
  21. 21. Exemple : Implémentation des landmarks chez Alsacréations navigation banner search main complementary contentinfo
  22. 22. 2. Les boitesde dialogue
  23. 23. Les boites de dialogue : role = alertdialogObjectif : 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. 24. 3. Des composants complexes User Friendly
  25. 25. Le Slider clandestin<div...><img …/> …</div>
  26. 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. 27. Exemple : une barre de progression, role=progressbarLe principe est identique à celui d’un slider et utilise les mêmes attributs et le mêmefonctionnement enchainé.Implicitement, le composant est déclaré en « readonly » de telle sorte que l’utilisateur nepuisse 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. 28. Exemple : messages avec labelledby et describedbylabelledby 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 groupageId : 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. 29. 4. Les Live Régions
  30. 30. Les live region, la propriété aria-liveObjectif : 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. 31. Les live region, les propriétés complémentairesObjectif : informer de l’état de la zone mise à jour, gérer le contenu de la zone mise à jour Propriétésatomic = true/false Toute la zone ou seulement la partie mise à jour est lue Les ajouts et les suppressions derelevant = additions /removal contenus (dom) sont signalés Seuls les changements de texte ourelevant=text/all tous les changements sont signalésaria-busy=true/false Signale que la zone est en train d’être mise à jour
  32. 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. 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 quandaria-atomic="false" l’utilisateur est disponible.aria-live="polite" Donc, quand il a terminé, sonid="chat-area"> message notamment.<li class="welcome"> Bienvenue</li><li><span>Invité </span>Bonjour tout le monde</li> </ul>
  34. 34. Contrôleau clavier
  35. 35. Contrôles au clavier, la problématique Paradigme PrincipesTout est utilisable avec la touche La touche tabulation navigue d’unde tabulation C’est une problématique à l’autre composant très difficile. !!Pour certains éléments comme leslistes de formulaires les flèches dedirection servent à naviguer dansles é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. 36. Contrôles au clavier, la navigation Touches dédiées Permet à un élément quelconquetabindex=0 de recevoir le focus de tabulation Retire un élément du plan detabindex=-1 tabulation Naviguer dans les éléments d’unflêches de direction composantbarre d’espace Activer / désactivertouche escape Désactiver /annuler une action
  37. 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. 38. Problématiques utilisateursLes technologies d’assistance Les utilisateurs qui ne peuvent pasannoncent, pour certains rôle le utiliser de souris ne recoivent pastype 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. 39. Tester ARIA
  40. 40. Problématiques utilisateurs Outils d’inspection Les technologiesd’évènement, attributs et d’assistance propriétés Sur des applications JAWS / NVDA !! RIA complexes. Tests UtilisateursInspect 32 ICITA Toolbar Juicy Toolbar Visioneuse de parole
  41. 41. Merci de votre attentionLes démos de l’atelier sont disponibles sur www.qelios.net/demo_aria

×