Le document traite de l'accessibilité web via ARIA, expliquant comment intégrer des composants dynamiques et accessibles dans des applications web. Il aborde l'utilisation de JavaScript et des techniques d'accessibilité pour améliorer l'expérience utilisateur, notamment pour les utilisateurs de technologies d'assistance. Des exemples pratiques et des recommandations sur la structuration et la navigation des contenus sont fournis.

1. ARIA au pays du WebJean-Pierre Villain - QeliosW3Café 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

2. ARIA au pays du WebUne (très) brèveHistoire duWeb DynamiqueHtmlJavascript

3. ARIA au pays du WebDes effets dynamiques Des Contenus StructurésMenu DéroulantImagesFormulairesDe la neige en hiverContrôle de formulaireLiensTextesHTMLJavascriptMultimédia1999199519922000HTML 1.0JavascriptHTML 4.01XHTML

4. ARIA au pays du WebXMLHttpRequest2002

5. ARIA au pays du WebDu comportementDes Contenus StructurésAjaxImagesFormulairesNouveauxComposantsApplicationRIALiensTextesJavascriptHTMLMultimédia19982005200620142002MSXMLAjaxARIAHTML5XmlHttpRequest

6. ARIA au pays du WebLes limites du développement Web classiqueLe web fonctionne en mode client-serveurHTML ne permet pas de créer des composantsLimités àUne actionLe lienLes éléments deformulaireUn rechargementde page

7. ARIA au pays du WebLa solution : utiliser Javascript pour :AjaxCréer des composantsen ajoutant du comportementsur des éléments HTMLquelconquesGérer les requêtes client-serveurvia l’objet JavascriptXMLHttpRequestCode Html du slider<div><span>0%</span><div><a></a></div></div>RechargementDe page

8. ARIA au pays du WebLe Web Dynamiqueet l’utilisateur

9. ARIA au pays du WebComment un lecteur d’écran sait de quoi il parle ?API Accessibilité SystèmeNavigateur WebTechnologie d’assistanceZone de liste déroulante Choose one or more users avery 1 sur 4

10. ARIA au pays du WebPour HTML tout est défini dans les spécificationsLe lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite :Lien, c’est super <a href=‘’> C’est super </a>Titre de niveau 1, c’est super<h1> C’est super </h1>Graphique, c’est super<imgsrc=‘’ alt=‘C’est super’ />Bouton, c’est super<input type=‘submit’ value=‘C’est super’ />Case à cocher, cochée,c’est super

11. ARIA au pays du WebAvec JavascriptLes problématiquesutilisateurs

12. ARIA au pays du WebProblème pour l’utilisateurIdentifier – Utiliser - Comprendre<div><span>0%</span><div><a></a></div></div>C’est quoi ce truc ?<div><span>0%</span><div> <a></a></div></div>0%VolumeHeu …0%Volume<div><span> 48% </span><div> <a></a></div></div>48%VolumeHa! bon …

13. ARIA au pays du WebProblème pour l’utilisateurVous êtes iciAfficher les actualitésCool…AJAXVous êtes toujours ici !Afficher les actualitésHa! bon…

14. ARIA au pays du WebProblème pour l’utilisateurNavigation Clavier HTMLNavigation Clavier JavascriptLimitée àLe lien<div style="display: block;" class="jcarousel-next ></div> Les éléments deformulaireL’élémentobject<div style="display: block;" class="jcarousel-prev></div> Je peuxJe peux pas

15. ARIA au pays du WebSolution : ARIAInformer de l’état et des propriétés d’un composant2Définir les composantsDéfinir la structure1SliderNavigationMenuApplicationBanner48%Volumevaluenow:48%« 48%, 49%... »Informer des misesà jour dynamiques4Rendre les composantsutilisables auclavier3TabindexFlèche de directionLive region

16. ARIA au pays du WebDéfinit des attributs et des valeursContenurôleJavascript(slider, menu, navigation, application…)AriaNavigateurstate, propertiesAPI ACC Systèmecheked, valuenow, expanded, labeledby InformationEtend le rôle de tabindexTabindex=0focusfocusTabindex=-1« 48%, 49%... »

17. ARIA au pays du WebL’implémentation utilise de simples attributs HTML Les 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"> <ulrole="group"> <li id="oranges" role="treeitem" tabindex="-1">Oranges</li>Exemplesd’attributs ARIA<li class="groupHeader" id="apples" role="treeitem" tabindex="-1" aria-expanded="false">RôleLabelledbyExpandedTabindex

18. ARIA au pays du WebRole State Propertiesbanner applicationslider aria-labelledbyaria-live aria-describedbyARIA par l’exemple

19. ARIA au pays du Web1. Guider l’utilisateurLes landmarks

20. 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 pagebanner : zone d’en-têtesearch: zone de rechercheformMain : la zone de contenu principalnavigationzone de formulairezone de navigationLe 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!!complementaryapplicationzone de contenu complémentairezone qui contient une « application »contentinfo: zone d’information propre au document

21. ARIA au pays du WebExemple : Implémentation des landmarks chez Alsacréationsnavigationbannersearchmaincomplementarycontentinfo

22. ARIA au pays du Web2. Les boites de dialogue

23. ARIA au pays du WebLes 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 JavascriptAlerte ARIAInconvénientPas stylableN’accepte que du texteAvantageC’est une vraie fenêtre modaleNe nécessite aucun traitementInconvénientCe n’est pas une vraie fenêtre modaleAvantagePersonnalisable à 100%

24. ARIA au pays du Web3. Des composantscomplexesUser Friendly

25. ARIA au pays du WebLe Slider clandestin…<div...><img …/></div>

26. ARIA au pays du WebLe 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 $

27. ARIA au pays du WebExemple : une barre de progression, role=progressbarLe 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.NVDA propose deux restitutions :Vocale (annonce des valeurs)Par bip sonorePar défaut, Jaws annonce la valeur atteinteà intervalles réguliers<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="progressMsg" aria-valuetext=‘’0 %"></div>

28. 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.Id : commandeId : uniteCommande de fruits groupageQuantité 10 kilosédition avec autocomplétionAttention au délai :Plus de 30 kg : prévoir 10 jours….sélectionné 10Id : disponibleId : label<input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text">

29. ARIA au pays du Web4. Les Live Régions

30. ARIA au pays du WebLes 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’utilisateurPropriétés aria-livearia-live=offValeur par défaut, la zone n’est pas lue du tout.La zone est lue quand l’utilisateur a terminé son action.aria-live=politearia-live=assertiveLa zone est lue en interrompant l’utilisateur dés que c’est possible.aria-live=rudeLa zone est lue en interrompant l’utilisateur immédiatement.

31. 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 à jourPropriétésToute la zone ou seulement la partie mise à jour est lueatomic = true/falseLes ajouts et les suppressions de contenus (dom) sont signalésrelevant = additions /removalSeuls les changements de texte ou tous les changements sont signalésrelevant=text/allaria-busy=true/falseSignale que la zone est en train d’être mise à jour

32. ARIA au pays du WebUne live region avec aria-live politearia-live=‘’polite’’La zone mise à jour est luefocus()L’utilisateur est occupé; la zone n’est plus lue

33. ARIA au pays du WebLive regions : un chat avec ajax et aria-livehttp://ideance.net/publications/live-regions/index.htmlLire uniquement le contenu mis à jour, c’est-à-dire le dernier texte inséré.<ularia-atomic="false" aria-live="polite" id="chat-area"><li class="welcome"> Bienvenue</li><li><span>Invité </span>Bonjour tout le monde</li> </ul>Lire la zone mise à jour quand l’utilisateur est disponible.Donc, quand il a terminé, son message notamment.

34. ARIA au pays du WebContrôle au clavier

35. ARIA au pays du WebContrôles au clavier, la problématiquePrincipesParadigmeLa touche tabulation navigue d’un composant à l’autreTout est utilisable avec la touche de tabulationC’est une problématique très difficile.Il faut s’inspirer du fonctionnement de applications!!Des touches dédiées comme les flèches de direction, la touche escape, la barre d’espace apportent des fonctionnalités de contrôlePour certains éléments comme les listes de formulaires les flèches de direction servent à naviguer dans les éléments (item de liste)HTMLARIA

36. ARIA au pays du WebContrôles au clavier, la navigationTouches dédiéestabindex=0Permet à un élément quelconque de recevoir le focus de tabulationtabindex=-1Retire un élément du plan de tabulationflêches de directionNaviguer dans les éléments d’un composantbarre d’espaceActiver / désactivertouche escapeDésactiver /annuler une action

37. ARIA au pays du WebContrôles au clavier, exemplesNaviguer dans une fausse fenêtre modaleGérer la navigation dans le système d’actualité de YahooNaviguer dans un système d’onglets

38. ARIA au pays du WebProblématiques utilisateursLes technologies d’assistance annoncent, pour certains rôle le type de navigation attendue.Les utilisateurs qui ne peuvent pas utiliser de souris ne recoivent pas d’informations sur la navigationRespecter impérativement les Design Pattern préconisés par ARIA!!Exemple avec slider et jaws : « utiliser les touches flèchés… ».Comment les informer ?Conserver le paradigme de tabulation et ajouter des navigations auxiliairesComment être sur que c’est réellement le cas ?

39. ARIA au pays du WebTester ARIA

40. ARIA au pays du Web02Problématiques utilisateursOutils d’inspection d’évènement, attributs et propriétés Les technologies d’assistanceSur des applications RIA complexes.Tests UtilisateursJAWS / NVDA!!ICITA ToolbarInspect 32JuicyToolbarVisioneuse de parole

41. ARIA au pays du WebMerci de votre attentionLes démos de l’atelier sont disponibles sur www.qelios.net/demo_aria