ajax et accessibilite
TRANSCRIPT
Paris Web 2007 - Ajax et Accessibilit
Ajax et Accessibilit
Prsentation
Michel HOL :
Responsable Technique d'Urbilog
En 2001, cration d'Ocawa : Outil de validation automatique de "rgles d'accessibilit" pour France Tlcom.
Les rgles sont externes et rattaches un Rfrenciel (WCAG 1.0, DGME/ADAE,... et bientt RGAA).
Pralable
Ce dont je vais vous parler :
Savoir si on peut faire de l'Ajax accessible.
Si oui sous quelles conditions.
Peut-on esprer industrialiser l'utilisation de la/des technique/s.
Ce dont je ne parlerai pas :
Si Ajax est la solution du Web 2.0.
De la comparaison des Frameworks utilisant Ajax.
Ajax
Asynchronous Javascript And XML.
En franais : Javascript et XML asynchrones.
Attention : ce n'est pas une technique, mais plutt l'association conjointe de techniques.
Ajax
Page classique :
Les informations sont recueillies (par le biais des formulaires, des liens, ...) Le serveur fournit des informations au travers une nouvelle page web.
Page avec Ajax :
L'ensemble de ces traitements sont effectus dans la mme page et intgrs l'aide du DOM de Javascript.
Ajax - Bases
XmlHttpRequest (XHR)
Requte HTTP faite par le poste client en vue de recevoir un flux d'informations.
Sous IE 5 et 6 : ActiveX.
Pour les autres pouvant faire cette requte : intgr Javascript.
Javascript
Elabore la requte,
Attend la rponse,
Analyse et traite la rponse.
Ajax Premires remarques
Pas d'Ajax :
XmlHttpRequest : ActiveX
Si le navigateur interdit les ActiveX.
Javascript
Si le navigateur n'interprte pas le javascript.
Si l'on bloque son interprtation.
Ajax Premires conclusions
Se poser les questions suivantes pour chaque fonction :
Doit-on utiliser absolument Ajax?
Dans l'affirmative, doit-on prvoir une fonctionnalit alternative?
Ajax Le pour, le contre
Le pour:
Mise jour partielle de la page, donc:
Une limitation des changes avec le serveur,
La modification ne concerne qu'un nombre limit d'lments dans la page.
Ajax Le pour, le contre
Le contre:
Problme pour le rfrencement,
Problme pour les fonctions de base d'un navigateur:
Prcdent, Suivant, Raffraichissement
La mise en Favoris.
Ajax Les choix sont faits
On suppose que le choix de l'utilisation des techniques Ajax est valid (qu'il soit bon ou mauvais)
Il faut donc maintenant trouver la meilleure faon d'intgrer la technique en essayant d'tre :
Accessible,
Testable,
Maintenable.
Mode dgrad et rehauss
Graceful Degradation & Progressive Enhancement, par Tommy Olsson sur Accessites.org (Fev 2006).
Cet article a t traduit en franais sur :
http://www.yoyodesign.org/doc/accessites/graceful-degradation-progressive-enhancement/
Il dcrit deux mthodes de conception de page Web intgrant la problmatique de l'accessibilit.
Mode dgrad
Mode dgrad (dgradation gracieuse),
Une page web est d'abord fabrique en considrant que la majorit aura les options permettant d'excuter tout ce que l'on veut.
Puis complter avec mes lments pour permettre une meilleure accessibilit (comme le prconise souvent les WCAG), permettant ainsi de ragir en mode dgrad :
Les lments alternatifs (alt, title...)
Les balises noscript, noframe...
Mode rehauss
Mode rhauss:
Ici la logique est inverse, on dveloppe en s'imposant d'assurer le service en concevant la structure smantique et cela :
Sans javascript,
Sans CSS.
Mode rehauss
Mode rhauss (suite) :
Puis on rhausse le rendu en ajoutant et/ou en amliorant le service en :
Ecrivant les feuilles de styles externes,
Intgrant le Javascript en non-intrusif (un-obstructive),
Mode rehauss
Exemple : rendre accessible la notion de Popup,
Ou mieux :
et dans un script :
var maregle = {
'a.popup' : function(element){
element.onclick = function(){
return popup(this.href);
}
}
};
Behaviour.register(maregle);
Rfrence : Behaviour.js - version 1.1 - Copyright (c) Ben Nolan and Simon Willison sur http://www.bennolan.com
Mode rehauss
Mode rhauss (suite) :
Maintenant en intgrant les fonctions demandant des requtes XmlHttpRequest.
Hijax
Cette faon de procder a t dcrite galement par Jeremy Keith et a mme reu un nom le Hijax.
Exemple d'application de la mthode sur
http://elsewhere.adactio.com/
Plan de dveloppement
L'ide forte est celle-ci:
Un plan pour l'utilisation d'Ajax au dmarrage du projet.
Une intgration d'Ajax la fin conformment au mode rhauss:
HTML->CSS->Javascript->Ajax
Maintenabilit d'une application Ajax
D'abord assurer la maintenabilit du code en assurant la sparation :
De la structure des informations (HTLM XHTML),
De la reprsentation visuelle : CSS
La partie dynamique : Javascript Un-obstructive.
Maintenabilit d'une application Web
Sparation HTML-CSS : beaucoup de littrature.
Javascript Un-Obstructive :
On vite l'criture des attributs HTML: onclick, onload, onsubmit....
On centralise le code dans des fichiers .js et intgrs par balise
Maintenabilit d'une application Web
Les fonctions de traitements javascript utilisent les fonctions de base de traitement du DOM
getElementById,
getElementsByTagName,
...
Maintenabilit d'une application Web
Sparation CSS-Javascript :
On a tendance dans les fonctions Javascript d'aller transformer le rendu en modifiant les attributs de style du DOM directement.
Cela peut devenir trs rapidement non maintenable.
En modifiant seulement les attributs class ou id et en reportant le rendu effectuer dans des rgles CSS, on rgle le problme.
Maintenabilit d'une application Ajax
Il faut maintenant parler de la maintenabilit des fonctions qui intgrent les informations reues de requtes Ajax.
Type de rception :
XML / XHTML.
Texte
JSON
Injection des informations : innerHTML -> non standard. (mais trs efficace).
Utilisation de bibliothques Javascript
Prototype (version 1.6.0) :
Ajax prend en charge
l'change en fonction du navigateur utilis.
l'intgration de la rponse si elle est faite en xhtml partir d'un noeud du DOM.
La manipulation des Array, String.. enrichi.
Gestion des vnements : souris, clavier...
Avantages :
Rduction du code dvelopper,
La simplification de l'criture.
Utilisation de bibliothques Javascript
Inconvnient de Prototype:
La taille de la bibliothque : 120 ko pour la version 1.6.0.
Utilisation de bibliothques Javascript
Solution : utiliser la version compresse < 25 ko
Ajax et Les lecteurs d'cran
2 problmes importants sont prendre en compte
Comment avertir les lecteurs d'un changement dans la page.
A l'inverse viter d'tre perturb par les changements cycliques et automatiques d'une zone de page.
Fonctionnement des lecteurs d'cran
Les buts d'un lecteur d'cran:
Lire le contenu de la page
Interagir avec le contenu de la page
Ils font cela en prenant une image instantane de la page et en la plaant dans une zone tampon.
Dans Jaws, cette zone s'appelle Virtual PC.
Ajax et les lecteurs d'cran
Quand est mise jour la zone tampon ?
Sur vnement clavier ou souris : zone input, lien hypertext...
Avec Ajax, un nouveau contenu est ajout la suite de l'vnement 'onreadystatechange' de l'objet XMLHttpRequest et en gnral Jaws n'est pas alert.
Conclusion : Une fois l'intgration du nouveau contenu, il faut s'assurer que le lecteur soit averti.
Seul Jaws 7.0 avec Firefox prend en charge le onreadystatechange
Ajax et les lecteurs d'cran
La solution pour faire prendre en compte la modicafication du contenu, est de donner le focus la zone o le changement a t effectu.
Attribut tabindex="-1"
Donner le focus un lien ou un bouton de la zone.
Tabindex ngatif ne fonctionne pas sous Safari.
Le autres problmes d'accessibilit
Avec des solutions framework (Google, Yahoo, Dojo, jQuery ...):
Mme si un jour on vous dit que les bibliothques tiennent compte de l'accessibilit, reste vous de grer:
Changement de navigation (WCAG 2.0)
Les problmes lis aux mouvements, contrastes de couleur, clignotements...
....
Le futur
Le projet : ARIA
W3C ARIA Roadmap
http://www.w3.org/TR/2006/WD-aria-roadmap-20060926/
W3C ARIA Rles
http://www.w3.org/TR/2006/WD-aria-role-20060926/
W3C ARIA Etats et Proprits
http://www.w3.org/TR/2006/WD-aria-state-20060926/
Une intgration Ajax-ARIA semble le plus promteur.
Merci
Des questions ?