les images utilisées dans cette présentation sont extraites des films « alice au pays des...
TRANSCRIPT
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
Une (très) brèveHistoire du
Web Dynamique
Images
Liens Formulaires
MultimédiaTextes
Des Contenus Structurés Des effets dynamiques
Menu Déroulant
De la neige en hiver
Contrôle de formulaire
199919991995199519921992
HTML 1.0 Javascript HTML 4.01
HTML Javascript
20002000
XHTML
XMLHttpRequest2002
Images
Liens Formulaires
MultimédiaTextes
Des Contenus Structurés
19981998
MSXML
HTML Javascript
Ajax
NouveauxComposantsApplication
RIA
Du comportement
20022002
XmlHttpRequest
20052005
Ajax
20062006
ARIA
20142014
HTML5
HTML ne permet pas de créer des composants
Le web fonctionne en mode client-serveur
Limités à
Le lien
Les éléments deformulaire
Une action
Un rechargementde page
Les limites du développement Web classique
Créer des composantsen ajoutant du comportement
sur des éléments HTMLquelconques
Code Html du slider Rechargement
De page
Ajax
Gérer les requêtes client-serveur
via l’objet JavascriptXMLHttpRequest
La solution : utiliser Javascript pour :
<div><span>0%</span><div><a></a></div></div>
Le Web Dynamiqueet l’utilisateur
Technologie d’assistance
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
Pour HTML tout est défini dans les spécifications
Lien, c’est super
Titre de niveau 1, c’est super
Graphique, c’est super
Bouton, c’est super
<a href=‘’> C’est super </a>
<h1> C’est super </h1>
<img src=‘’ alt=‘C’est super’ />
<input type=‘submit’ value=‘C’est super’ />
Case à cocher, cochée,c’est super
Le lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite :
Avec JavascriptLes problématiques
utilisateurs
Problème pour l’utilisateur
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>
Identifier – Utiliser - Comprendre
Problème pour l’utilisateur
Cool…
Afficher les actualités
Vous êtes ici
Afficher les actualités
Ha! bon…
AJAXVous êtes toujours ici !
Problème pour l’utilisateur
<div style="display: block;" class="jcarousel-next ></div>
Navigation Clavier HTML
Limitée à
Le lien
Les éléments deformulaire
L’élémentobject
<div style="display: block;" class="jcarousel-prev></div>
Navigation Clavier Javascript
Je peux Je peux pas
Solution : ARIADéfinir les composantsDéfinir la structure
SliderNavigationMenuApplicationBanner
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 composantsutilisables au
clavier
4
TabindexFlèche de direction
Définit des attributs et des valeursrôle
(slider, menu, navigation, application…)
state, propertiescheked, valuenow, expanded, labeledby
Etend le rôle de tabindex
Tabindex=0
Tabindex=-1
focus
focus
Contenu
Javascript
Navigateur Aria
API ACC Système
Information
« 48%, 49%... »
<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">
Exemplesd’attributs ARIA
RôleLabelledbyExpandedTabindex
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
ARIA par l’exemple
1. Guider l’utilisateurLes landmarks
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
applicationzone 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
!!
banner
main
contentinfo
search
complementary
Exemple : Implémentation des landmarks chez Alsacréationsnavigation
2. Les boites de dialogue
Les boites de dialogue : role = alertdialog
InconvénientPas stylableN’accepte que du texte
AvantageC’est une vraie fenêtre modaleNe nécessite aucun traitement
Alerte Javascript
InconvénientCe n’est pas une vraie fenêtre modale
AvantagePersonnalisable à 100%
Alerte ARIA
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 !
3. Des composantscomplexes
User Friendly
Le Slider clandestin
……
<div...><img …/></div>
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 $
Exemple : une barre de progression, role=progressbar
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="progressMsg" aria-valuetext=‘’0 %"></div>
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
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.
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 : uniteId : unite
<input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text">
Id : commandeId : commande
Id : disponibleId : disponibleId : labelId : label
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 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.
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és
atomic = true/false Toute la zone ou seulement la partie mise à jour est lue
relevant = additions /removalLes 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
Une live region avec aria-live polite
La zone mise à jour est lue
aria-live=‘’polite’’aria-live=‘’polite’’
L’utilisateur est occupé; la zone n’est plus lue
focus()focus()
Live regions : un chat avec ajax et aria-live
<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 uniquement le contenu mis à jour, c’est-à-dire le dernier texte inséré.
Lire la zone mise à jour quand l’utilisateur est disponible.Donc, quand il a terminé, son message notamment.
http://ideance.net/publications/live-regions/index.html
Contrôle au clavier
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 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
ARIA
C’est une problématique très difficile.
Il faut s’inspirer du fonctionnement de
applications!!
Contrôles au clavier, la navigation
tabindex=0
tabindex=-1
flêches de direction
barre d’espace
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 d’un composant
Activer / désactiver
Désactiver /annuler une action
Touches dédiées
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
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!!
Tester ARIA
Problématiques utilisateursOutils d’inspection
d’évènement, attributs et propriétés
Les technologies d’assistance
JAWS / NVDA
Visioneuse de parole
Inspect 32 ICITA Toolbar
Juicy Toolbar
Sur des applications RIA complexes.
Tests Utilisateurs!!
Merci de votre attention
Les démos de l’atelier sont disponibles sur www.qelios.net/demo_aria