Accessibilité des applications AJAX - implications
Par WebAIM
Table des matières
Qu'est-ce qu'AJAX ?
AJAX est une combinaison de technologies utilisées ensemble afin de permettre à des interactions client-serveur dynamiques de se produire dans des applications web sans nécessiter de charger ou recharger de nouvelle page. AJAX est l'abréviation de Asynchronous Javascript And XML (Javascript et XML asynchrones). En soi, AJAX n'est pas une technologie mais une combinaison particulière de technologies. AJAX repose sur :
- XHTML (ou HTML) et CSS pour créer une interface et présenter les informations visuellement. Les éléments HTML et CSS peuvent être modifiés dynamiquement pour afficher de nouvelles informations ou modifier la présentation. En règle générale, ces changements sont effectués à l'aide du DOM (Modèle Objet du Document).
- Javascript, pour manipuler les éléments d'interface et communiquer avec le serveur web grâce à XmlHTTPRequest. Cela permet l'échange de données (le plus souvent au format XML) entre le poste client et le serveur, sans charger ou recharger de page.
AJAX permet d'améliorer l'interactivité et la réactivité d'applications web sans nécessiter le schéma traditionnel Client/Serveur :
- L'interface est affichée dans une page web
- Des informations fournies par l'utilisateur sont collectées (par un formulaire, des liens, etc.)
- L'utilisateur envoie ces informations (en envoyant le formulaire, en cliquant sur le lien, etc.)
- Le serveur traite les informations envoyées
- Une nouvelle page/interface est envoyée à l'utilisateur
AJAX permet de rassembler toutes ces étapes dans une seule et même interface. Exemples d'utilisation d'AJAX : application cartographique, recherche en temps réel1, messagerie instantanée, validation et traitement de formulaire en temps réel2, gestion interactive de panier d'achat 3, application de courrier électronique, et la liste est loin de s'arrêter là.
Le type d'applications web et d'interactions rendues possibles par cette combinaison de technologies a donné naissance au terme « Web 2.0 » - signe qu'il s'agit d'une évolution majeure dans la manière d'utiliser le web. Les technologies sous-jacentes ne sont ni nouvelles ni innovantes, mais vues la popularité et l'utilisation croissante d'AJAX, les développeurs doivent être informés des implications concernant l'accessibilité.
Pourquoi utiliser AJAX ?
Comme expliqué plus haut, AJAX permet de créer des applications web riches en fonctionnalités, reposant sur des traitements côté serveur, sans pour autant nécessiter le paradigme traditionnel « envoyer des données - recevoir une nouvelle page complète ». Grâce à XMLHttpRequest, l'envoi des données se fait silencieusement et javascript permet de manipuler l'interface et d'afficher les données de manière dynamique. Dans les applications qui en résultent les interactions se font sans à-coups et les transferts de données sont réduits au minimum car il n'est pas nécessaire de générer l'interface complète à chaque demande. À la place, une seule application web affiche l'ensemble des changements effectués. Javascript autorise également une plus grande interactivité que ne le permet le HTML simple (raccourcis clavier, glisser-déplacer dans Google Maps par exemple).
Pourquoi ne pas utiliser AJAX ?
AJAX ne fonctionne pas dans tous les navigateurs. Comme le nom l'indique, Javascript en est le ciment indispensable ; AJAX ne fonctionne que si le navigateur ou agent utilisateur en dispose. Pour cette raison, de nombreux utilisateurs n'auront pas accès aux interfaces qui l'utilisent. Les conseils d'accessibilité pour le contenu Web (WCAG) stipulent qu'une application doit fonctionner même si Javascript est désactivé ou non supporté. De plus, AJAX nécessite XMLHttpRequest, qui n'est pas disponible dans tous les navigateurs.
Actuellement, la solution à ces problèmes consiste à fournir une alternative entièrement non-AJAX, ou à faire en sorte que l'application fonctionne également sans Javascript et XMLHttpRequest. Ces exigences peuvent être très difficiles à mettre en œuvre. Les développeurs peuvent insister pour que les utilisateurs utilisent un navigateur compatible mais il leur faut accepter que ce prérequis soit impossible pour certains utilisateurs, en particulier ceux qui utilisent un appareil mobile ou un navigateur un peu ancien.
Le fonctionnement typique d'AJAX consiste à mettre à jour et manipuler des éléments de l'interface à la volée. AJAX peut également contacter le serveur en l'absence de toute action de la part de l'utilisateur ou par des procédés discrets. La plupart des utilisateurs s'attend à ce qu'un formulaire ne soit envoyé, validé et traité que lorsqu'ils cliquent sur le bouton d'envoi, mais avec AJAX ces opérations peuvent se produire à n'importe quel moment (toutes les 5 secondes, quand un champ perd le focus, etc.). L'utilisateur peut ne pas se rendre compte que les informations ont été traitées, et ce d'autant plus que le processus peut se produire très rapidement. La plupart des utilisateurs s'attend en effet à ce qu'un court délai signale la fin du traitement, ou qu'un message de confirmation apparaisse, voire un rechargement complet de la page. Avec AJAX, aucun de ces indicateurs visuels n'est automatique.
Un autre problème concerne la mise à jour de l'interface. La modification d'une zone peut ne pas être remarquée. Ce problème est d'autant plus ennuyeux pour les utilisateurs de lecteur d'écran que ces dispositifs parcourent la page de manière linéaire. Si un changement intervient dans l'interface, rien ne garantit que l'utilisateur en sera informé et que le contenu modifié sera lu.
En résumé, pour qu'une modification dynamique de l'interface soit accessible, l'application doit prévenir l'utilisateur qu'un changement a été effectué, permettre d'y accéder directement, puis permettre de reprendre là où l'utilisateur se trouvait précédemment. Ce processus, bien que difficile à obtenir, -en particulier pour les utilisateurs de revue d'écran- peut être mis en place dans beaucoup d'applications AJAX. La 2ème partie de cet article présente différentes solutions possibles pour la plupart de ces problèmes, et les moyens pour les applications Internet riches et accessibles (ARIA) de rendre leurs contenus dynamiques totalement accessibles.
Notes
Les contenus pointés par certains liens ont disparu depuis l'écriture de cet article. Voici néanmoins les adresses originales :
- Recherche en temps réel : http://www.backbase.com/demos/bbsearch/
- Validation et traitement de formulaires en temps réel : http://www.zapatec.com/website/main/zpform/demo/basic.html
- Gestion interactive de panier d'achat : http://www.rapha.cc/index.php?page=21
Copyright © 1999-2006 WebAIM (Web Accessibility in Mind). Tous droits réservés.
Cet article est le premier d'une série de 2 concernant AJAX et l'accessibilité des contenus dynamiques. Nous vous recommandons de poursuivre votre lecture avec Accessibilité des applications internet riches.
La société Ideose a conclu un accord avec WebAIM pour traduire leurs documents techniques. Nous invitons donc nos lecteurs à consulter les documents traduits sur le site d'Ideose.
http://www.webaim.org/techniques/ajax/