Ajax et Accessibilite

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


Les fonctions de traitements javascript utilisent les fonctions de base de traitement du DOM

getElementById,

getElementsByTagName,

...


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.


Inconvnient de Prototype:

La taille de la bibliothque : 120 ko pour la version 1.6.0.


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 ?

Technology

Ajax et Accessibilite