Upload
jpvillain
View
1.508
Download
4
Embed Size (px)
DESCRIPTION
Citation preview
ARIA au pays du Web
Jean-Pierre Villain - Qelios
W3Café Accessibilité - Paris – Avril 2011Les 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 Javascript
Une (très) brèveHistoire du
Web Dynamique
ARIA au pays du Web
Images
Liens Formulaires
MultimédiaTextes
Des Contenus Structurés Des effets dynamiques
Menu Déroulant
De la neige en hiver
Contrôle de formulaire
199919951992
HTML 1.0 Javascript HTML 4.01
HTML Javascript
2000
XHTML
ARIA au pays du Web
XMLHttpRequest2002
ARIA au pays du Web
Images
Liens Formulaires
MultimédiaTextes
Des Contenus Structurés
1998
MSXML
HTML Javascript
Ajax
NouveauxComposantsApplication
RIA
Du comportement
2002
XmlHttpRequest
2005
Ajax
2006
ARIA
2014
HTML5
ARIA au pays du Web
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
ARIA au pays du Web
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>
ARIA au pays du Web
Le Web Dynamiqueet l’utilisateur
ARIA au pays du Web
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
ARIA au pays du WebPour 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 :
ARIA au pays du Web
Avec JavascriptLes problématiques
utilisateurs
ARIA au pays du WebProblè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
ARIA au pays du WebProblème pour l’utilisateur
Cool…
Afficher les actualités
Vous êtes ici
Afficher les actualités
Ha! bon…
AJAXVous êtes toujours ici !
ARIA au pays du WebProblè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
ARIA au pays du WebSolution : ARIA
Dé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
ARIA au pays du Web
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%... »
ARIA au pays du Web
<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 au pays du Web
ARIA par l’exemple
ARIA au pays du Web
1. Guider l’utilisateurLes landmarks
ARIA au pays du WebLes 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
!!
ARIA au pays du Web
banner
main
contentinfo
search
complementary
Exemple : Implémentation des landmarks chez Alsacréationsnavigation
ARIA au pays du Web
2. Les boites de dialogue
ARIA au pays du WebLes 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 !
ARIA au pays du Web
3. Des composantscomplexes
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 WebExemple : 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
ARIA au pays du WebExemple : 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 : unite
<input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text">
Id : commande
Id : disponibleId : label
ARIA au pays du Web
4. Les Live Régions
ARIA au pays du WebLes 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 WebLes 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
ARIA au pays du WebUne 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 WebLive 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
ARIA au pays du Web
Contrôle au clavier
ARIA au pays du WebContrô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!!
ARIA au pays du WebContrô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
ARIA au pays du WebContrô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 WebProblé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
02ARIA au pays du WebProblématiques utilisateurs
Outils 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!!
ARIA au pays du Web
Merci de votre attention
Les démos de l’atelier sont disponibles sur www.qelios.net/demo_aria