La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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 lespace » de.

Présentations similaires


Présentation au sujet: "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 lespace » de."— Transcription de la présentation:

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 lespace » de Stanley Kubric

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

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

4 XMLHttpRequest 2002

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

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

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

8 Le Web Dynamique et lutilisateur

9 Technologie dassistance API Accessibilité Système Navigateur Web Comment un lecteur décran sait de quoi il parle ? 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 Lien, cest super Titre de niveau 1, cest super Graphique, cest super Bouton, cest super Cest super Case à cocher, cochée, cest super Le lecteur décran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite :

11 Avec Javascript Les problématiques utilisateurs

12 Problème pour lutilisateur Cest quoi ce truc ? Volume 0% Heu … Volume 0% Volume 48% Ha! bon … 48% Identifier – Utiliser - Comprendre

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

14 Problème pour lutilisateur Navigation Clavier HTML Limitée à Le lien Les éléments de formulaire Lélément object Navigation Clavier Javascript Je peuxJe peux pas

15 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 dun 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

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

17 Foods Oranges Exemples dattributs ARIA Rôle Labelledby Expanded Tabindex Limplémentation utilise de simples attributs HTML Les valeurs dynamiques sont gérées depuis la couche Javascript Les comportements (laffichage dun sous-niveau de liste, par exemple ) sont également gérés depuis la couche Javascript

18 ARIA par lexemple

19 1. Guider lutilisateur 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 den-tête navigation zone de navigation Main : la zone de contenu principal contentinfo: zone dinformation 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 dassistance de modifier la gestion des évènements claviers, la navigation notamment, pour utiliser la configuration habituelle dans une application logicielle !!

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

22 2. Les boites de dialogue

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

24 3. Des composants complexes User Friendly

25 Le Slider clandestin … …

26 Le Slider qui parle 0$ price Potentiomètre 0 $ 1 $ 2 $ 3 $ 4 $ 5 $ 6 $

27 Exemple : une barre de progression, role=progressbar

Le principe est identique à celui dun 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 lutilisateur 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

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. Lune des utilisations est de produire des messages lors de lutilisation dun composant. 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 : unite Id : commande Id : disponible Id : label

29 4. Les Live Régions

30 Les live region, la propriété aria-live Objectif : informer des mises à jour dynamiques et gérer linteraction entre la zone de mise à jour et les actions de lutilisateur Propriétés aria-live aria-live=off Valeur par défaut, la zone nest pas lue du tout. aria-live=polite La zone est lue quand lutilisateur a terminé son action. aria-live=assertive La zone est lue en interrompant lutilisateur dés que cest possible. aria-live=rude La zone est lue en interrompant lutilisateur 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 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

32 Une live region avec aria-live polite La zone mise à jour est lue aria-live=polite Lutilisateur est occupé; la zone nest plus lue focus()

33 Live regions : un chat avec ajax et aria-live Bienvenue Invité Bonjour tout le monde Lire uniquement le contenu mis à jour, cest-à-dire le dernier texte inséré. Lire la zone mise à jour quand lutilisateur est disponible. Donc, quand il a terminé, son message notamment.

34 Contrôle au clavier

35 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) HTML Principes La touche tabulation navigue dun composant à lautre Des touches dédiées comme les flèches de direction, la touche escape, la barre despace apportent des fonctionnalités de contrôle ARIA Cest une problématique très difficile. Il faut sinspirer du fonctionnement de applications !!

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

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

38 Problématiques utilisateurs Les technologies dassistance 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 cest réellement le cas ? Les utilisateurs qui ne peuvent pas utiliser de souris ne recoivent pas dinformations 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 !!

39 Tester ARIA

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

41 Merci de votre attention Les démos de latelier sont disponibles sur


Télécharger ppt "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 lespace » de."

Présentations similaires


Annonces Google