Javascript non-intrusif, chapitre 1 : le grand nettoyage !
Cet article est le premier d'une série qui en compte 5.
Le Javascript est un formidable outil pour améliorer l'utilisabilité des sites web. C'est une couche supplémentaire au dessus du balisage « qu'est-ce qu'est ce texte » et du CSS « comment doit-il être affiché » qui ajoute une nouvelle dimension, le « comment cet élément doit-il se comporter».
Dans les pages suivantes nous allons voir comment utiliser Javascript tout en continuant de maintenir l'accessibilité. La technique utilisée pour séparer complètement le Javascript des deux autres couches de développement web est désormais communément appelée le « Javascript non-intrusif », dans la mesure où « Javascript accessible » ne convenait pas tout à fait puisque vous pouvez avoir un Javascript parfaitement séparé et rester complètement inaccessible.
Mais bon, cessons les bavardages et mettons nous au travail.
Ces dernières années, le développement web a subi un changement majeur : nous avons appris à séparer la présentation et la structure, simplifiant ainsi les processus de relookage en n'intervenant plus que sur une feuille de style centralisée.
On peut aller encore plus loin dans la séparation, en n'utilisant plus de styles en ligne (NdT : on a un mot pour ça en français ?) ni de classes, mais en se basant sur les héritages et les sélecteurs contextuels.
Ainsi...
HTML: <table border="0" cellpadding="0" width="100%" cellspacing="5"> <tr> <td><font face="Arial" size="-2">Lorem Ipsum</font></td> </tr> </table>
... est devenu :
CSS:
td.content {font-family:Arial,sans-serif;font-size:12px;}
HTML:
<table cellpadding="0" style="width:100%;border:none" cellspacing="5">
<tr>
<td class="content">Lorem Ipsum</td>
</tr>
</table>
... puis finalement :
CSS:
body {font-family:Arial,sans-serif;font-size:12px;}
p {padding:5px;}
HTML:
<p>Lorem Ipsum</p>
La même évolution peut et doit avoir lieu en ce qui concerne le Javascript.
Sortons le Javascript de la page
La première règle du club Javascript non-intrusif, c'est de ne pas parler du club Javascript non-intrusif. Euh non, attendez, je m'égare... c'est :
1. Jamais, au grand jamais, vous ne devez insérer de Javascript directement dans le document
Une des grandes forces du Javascript est d'être stocké dans un fichier à part. Tout comme avec les CSS, cela signifie que vous pouvez appliquer une collection de fonctions à chaque page de votre site, et si vous devez changer une fonctionnalité, vous pourrez le faire dans un document unique plutôt que de parcourir toutes vos pages.
Ce qui veut dire que, sauf circonstances exceptionnelles, tout ce que nous devons voir dans un document HTML se résume à :
<script type="text/javascript" src="scripts.js"></script>
Nous n'avons besoin que de cette ligne, et plus d'aucun Javascript imbriqué. Apprenez cette dernière phrase par cœur.
2. Le Javascript permet d'améliorer l'expérience de l'utilisateur, ce n'est cependant pas une fonctionnalité fiable à 100%
Nous n'utilisons le Javascript que pour améliorer une fonctionnalité qui existe déjà, nous ne nous appuyons pas dessus. Le Javascript peut être désactivé, ou filtré par les proxies et les pare-feux des sociétés férues de sécurité. On ne peut jamais partir du principe qu'il fonctionnera toujours.
Ce qui ne veut pas dire que nous ne pouvons pas utiliser de Javascript ; cela signifie simplement que nous devons l'intégrer de manière optionnelle plutôt que comme un prérequis.
HTML:
<form action="index.php" onsubmit="return checkform(this)">
<p>
<label for="login">Identifiant :</label>
<input type="text" name="login" id="login" />
</p>
<p>
<label for="pw">Mot de passe :</label>
<input type="password" name="pw" id="pw" />
</p>
<p>
<input type="submit" value="send" />
</p>
</form>
Javascript:
function checkform(f)
{
var error='';
error+=f.login.value==''?'\nlogin':'';
error+=f.pw.value==''?'\npassword':'';
if (error!='')
{
alert('Veuillez saisir le(s) champ(s) suivant(s) :'+error);
}
return error=='';
}
Le code ci-dessus est parfaitement valide, et évitera que les utilisateurs ne subissent un aller-retour vers le serveur s'ils oublient de saisir une valeur.
HTML:
<form action="index.php">
<p>
<label for="login">Identifiant :</label>
<input type="text" name="login" id="login" />
</p>
<p>
<label for="pw">Mot de passe :</label>
<input type="password" name="pw" id="pw" />
</p>
<p>
<input type="button" onclick="checkform()" value="Envoyer" />
</p>
</form>
Javascript:
function checkform()
{
var f=document.forms[0];
var error='';
error+=f.login.value==''?'\nlogin':'';
error+=f.pw.value==''?'\npassword':'';
if (error!='')
{
alert('Veuillez saisir le(s) champ(s) suivant(s) :'+error);
} else {
f.submit();
}
}
On pourrait croire que c'est la même chose, mais un détail change : si le Javascript est désactivé, le bouton ne réagira plus du tout, malgré les clics répétés de l'utilisateur frustré ! Répétons-le : on ne peut pas se fier au Javascript, ne nous appuyons pas dessus !
3. Vérifiez qu'un objet est disponible avant de le manipuler
Bon nombre d'erreurs Javascript arrivent pour la simple raison
que le développeur n'a pas pris la peine de tester si une méthode
ou un objet est ou non disponible.
Javascript:
function color(o,col)
{
o.style.background=col;
}
Le code ci-dessus peut échouer et provoquer une
erreur Javascript si
l'objet o n'est pas disponible... alors que
celui-ci marchera à tous les coups :
Javascript:
function color(o,col)
{
if(o)
{
o.style.background=col;
}
}
Cette technique est utilisée le plus souvent pour vérifier qu'un navigateur sait gérer telle ou telle fonctionnalité Javascript. À l'époque où nos développements se faisaient encore à tâtons (on s'en moquait, on était payés, soit par le client soit par la startup qui nous employait), ces tests se faisaient en détectant les navigateurs (NdT : browser sniffing), un concept voué à l'échec dès le départ : chaque fois qu'un nouveau navigateur sortait ou était mis à jour, il fallait réécrire le script de détection. De nos jours, il est généralement nécessaire de tester si le navigateur est capable de comprendre le modèle d'objet document du W3C[1] (DOM[2]), ce qui nous amène à la règle suivante.
4. Écrivez du Javascript, et pas un dialecte particulier à un navigateur
À moins qu'il n'y ait une bonne raison de le faire,
nous ne devrions jamais utiliser des extensions spécifiques
à un (ou des) navigateur(s) au lieu des standards du web.
L'époque où nous vérifiions document.layers
(Netscape 4.x) ou document.all (Internet
Explorer < 5) est révolue. Les navigateurs modernes
comprennent la méthode document.getElementById
issue
du DOM, et c'est donc ces méthodes que nous utiliserons et
que nous testerons.
Javascript:
function unTrucEnDOM()
{
if(document.getElementById && document.createTextNode)
{
[...]
}
}
La deuxième vérification n'est nécessaire que parce que certaines versions précédentes d'Opera annonçaient qu'elles comprenaient le DOM, alors qu'elles ne savaient pas l'utiliser comme il fallait.
5. N'utilisez pas des variables qui ne vous appartiennent pas
En écrivant une fonction ou une méthode, nous devons nous assurer que toutes les variables utilisées sont locales, pour éviter qu'une fonction ne modifie une variable utilisée par une autre fonction.
Javascript:
var i=42; // variable globale
function faisUnTruc()
{
for (i=0;i<200;i++) // i change
{
// du code
}
}
function faisBienLesChoses()
{
var i; // i est définie localement
for (i=0;i<200;i++)
{
// du code
}
}
alert(i); // = 42
faisBienLesChoses();
alert(i) // = 42 (puisque c'est une définition locale)
faisUnTruc();
alert(i) // = 200, oulà!
6. Ne soyez pas dépendant de la souris !
S'assurer que les choses marchent quand le Javascript est activé n'est pas encore suffisant. Nous devons aussi être attentifs aux visiteurs qui n'utilisent pas de souris, ou avec difficulté. Nous devons donc nous assurer que tous les effets seront déclenchés aussi bien par la souris que par le clavier.
Le plus gros problème pour se libérer de
la souris vient souvent des éléments de
formulaires qui sont validés ou qui déclenchent
une
action quand ils changent (onchange) ou quand on les quitte (onblur). Ne vous en servez pas,
c'est aussi simple que ça !
Par exemple cette méthode inaccessible est très répandue pour détourner les listes déroulantes et en faire des artefacts de navigation :
HTML:
<form>
<p>
<label for="go2">Aller à:</label>
<select name="go2" id="go2" onchange="envoyer(this)">
<option value="index.html">Accueil</option>
<option value="chapter1.html">Chapitre 1</option>
<option value="chapter2.html">Chapitre 2</option>
</select>
</p>
</form>
Javascript:
function envoyer(f)
{
var monChoix;
monChoix=f.options[f.selectedIndex].value;
self.location=monChoix;
}
Testez cet exemple de liste déroulante non accessible.
Dans les faits, si vous utilisez un clavier et que vous
tabulez
jusqu'à cet élément de formulaire,
tapez flèche bas pour faire votre choix,
vous n'irez jamais plus loin que la première option, puisque
la
fonction envoyer() est
déclenchée quand vous
passez de la première à la deuxième
option.
Les utilisateurs experts du clavier savent qu'il faut taper alt + flèche bas auparavant, pour dérouler la liste avant de faire son choix.
Cependant, cette méthode n'est pas connue de tous. De plus, cet exemple ne fait rien si le Javascript n'est pas activé.
HTML:
<form action="send.php" method="post" onsubmit="return envoyer(this)">
<p>
<label for="go2">Aller à:</label>
<select name="go2" id="go2">
<option value="index.html">Accueil</option>
<option value="chapter1.html">Chapitre 1</option>
<option value="chapter2.html">Chapitre 2</option>
</select>
<input type="submit" value="hop !" />
</p>
</form>
Javascript:
function envoyer(f)
{
var monChoix;
monChoix=f.go2.options[f.go2.selectedIndex].value;
self.location=monChoix;
return false;
}
PHP:
<?php
if(isset($_POST['go2'])){
header('Location:'.$_POST['go2']);
}
?>
Testez cet exemple de liste accessible.
Au contraire de tout à l'heure, cet exemple fonctionne sans souci, et nous épargne un aller-retour au serveur vers
send.php, qui n'est utilisé que si
le Javascript est
désactivé.
Que penser de onkeypress ?
En parcourant les Règles d'Accessibilité des Contenus Web[3], on nous demande de n'invoquer que des gestionnaires d'événements indépendants des interfaces d'entrée dans nos scripts :
Sinon, si vous devez utiliser des attributs dépendant d'interfaces particulières, fournissez des mécanismes d'entrée redondants (par exemple, spécifiez deux gestionnaires d'événements pour le même élément) : utilisez « onmousedown » avec « onkeydown ». Utilisez « onmouseup » avec « onkeyup ». Utilisez « onclick » avec « onkeypress ».
Tout cela a l'air parfait, en théorie, mais dans la
vie réelle, l'événement onkeypress
est
assez mal géré par les différents
navigateurs. Des
utilisateurs dépendant de leur clavier pour surfer ont
habituellement configuré une touche pour simuler le clic,
soit la touche entrée soit la barre d'espace, et ces deux
touches déclenchent l'événement
onclick. En utilisant onkeypress
nous risquons d'intercepter d'autres
fonctionnalités du clavier dont l'utilisateur avait besoin.
Quelques exemples : la
fonction « type
ahead »[4] de Mozilla, les
raccourcis
étendus d'Opera[5] (comme « A
» pour aller au lien suivant) ou
les
contrôles au clavier de JAWS[6].
Autrement dit, en nous conformant aux Règles d'accessibilité, nous risquons de rendre notre script encore plus inaccessible.
Dans les exemples qui suivront dans ces leçons,
nous ajouterons onkeypress en tant que
gestionnaire
supplémentaire, mais nous le laisserons en commentaire. Il
s'agit juste de vous permettre de l'activer le cas
échéant, par exemple si vous devez subir un audit
d'accessibilité fait par des outils automatisés
plutôt que par des humains.
Liens
-
[1] Le Consortium World Wide Web : http://www.w3.org
-
[2] Le Modèle d'Objet Document du W3C : http://www.w3.org/DOM/
-
[3] Les Règles d'accessibilité du contenu web : http://www.w3.org/TR/WCAG10-HTML-TECHS/#directly-accessible-scripts
-
[4] Mozilla type-ahead: http://www.mozilla.org/projects/ui/accessibility/typeaheadfind.html
-
[5] Commandes au clavier dans Opera : http://www.opera.com/features/keyboard/complete/
-
[6] Commandes au clavier de JAWS : http://www.webaim.org/techniques/jaws/keyboard-shortcuts
» À suivre : « Javascript non-intrusif, chapitre 2 : comment retrouver les éléments que l'on veut manipuler ».
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter1.html