NOSCRIPT
ou le contenu statique initial du document). Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.
NOSCRIPT
ou le contenu statique initial du document).NOSCRIPT
ou le contenu statique initial du document).Le développeur doit veiller au respect de ce critère.
Il n'y a pas une implémentation typique qui permettrait de résoudre une bonne fois pour toute les problèmes liés aux scripts. De part la diversité de leur utilisation, chaque cas doit être considéré spécifiquement.
Il y a cependant quelques règles de conception qui permettent d'orienter l'emploi des scripts. Elles nous sont fournies par le développeur Peter Paul Koch qui, dans une série d'articles fort intéressants (voir les références plus bas), a proposé un principe et trois règles de conception pour s'assurer que le fonctionnement permis par un script reste accessible en dehors de son utilisation.
Le principe fondamental est le suivant : l'utilisation de JavaScript doit viser uniquement à l'amélioration de l'utilisabilité d'un site. Cette amélioration concerne le mode de présentation de la structure du site.
Il s’ensuit alors trois règles d'or pour une mise en oeuvre de JavaScript dans le cadre de sites accessibles :
Il faut donc veiller à ce que les scripts n’entravent pas le bon fonctionnement des sites qu’ils sont sensés servir.
Il existe une balise, NOSCRIPT
, qui permet l'affichage d'un contenu alternatif dans le cas où les scripts ne sont pas joués par le navigateur. En terme de conception, l'usage de la balise NOSCRIPT
devrait être restreint dans la mesure où lorsqu'il s'agit de proposer un contenu éditorial alternatif, ce contenu est finalement renseigné deux fois : une fois dans le script et une autre fois dans la balise NOSCRIPT
. Or cette information pourrait n'apparaître qu'une fois à la place qu'elles doivent occuper logiquement dans la structure de la page. Dans ce contexte, la balise NOSCRIPT
n'est pas forcément le meilleur recours. La section mise en oeuvre propose un tel exemple.
La balise NOSCRIPT
reste utile pour proposer des constructions de code alternatives. C'est, par exemple, le cas des techniques de marquage statistique dans une page : le marqueur est construit une première fois au moyen de JavaScript, ce qui permet de récupérer à la volée des informations sur l'environnement du client (navigateur, taille d'écran...). Le marqueur est proposé une seconde fois au moyen d'une balise NOSCRIPT
, mais dans ce cas il ne transmet qu'une information de base au serveur distant qui recueille les résultats transmis.
D'autres précautions concernent l'utilsation des scripts; il s'agit ainsi d'éviter :
Ces différents points sont traités dans d'autres fiches.
L'exemple qui suit montre comment il reste possible d'afficher des contenus secondaires lorsque JavaScript est désactivé.
Il s'agit d'une page qui propose une liste d'éléments cliquables. Au clic sur l'un de ces liens, un complément d'informations sur l'élément concerné apparaît dans une zone d'affichage adjacente. Un second clic sur un autre de ces liens remplace le contenu de cette zone par une nouvelle information, et ainsi de suite.
Ces compléments d'information sont eux-mêmes structurés au moyen d'un élément de type liste. Si ces listes étaient construites à la volée par un script, elles seraient complétement inaccessibles en l'absence de JavaScript, à moins que les mêmes informations soient reproduites à l'intérieur de balises NOSCRIPT
. Mais où placer ces balises afin de conserver au document un sens de lecture équivalent ? Au plus près des éléments dont elles explicitent le contenu, dans la mesure où l'artifice de la zone d'affichage n'a plus de pertinence.
<li><a href="#panel1" class="toggle">Qualité</a><noscript><ul
id="panel1"><li>Réalité</li><li>Négation</li><li>Limitation</li></ul></noscript></li>
Pourquoi ne pas avoir, dans ce cas, des listes placées directement dans le code source du document ?
<li><a href="#panel1" class="toggle">Qualité</a><ul
id="panel1"><li>Réalité</li><li>Négation</li><li>Limitation</li></ul></li>
L'avantage de cette construction est d'avoir placé l'information à l'endroit même où il est logique qu'elle apparaisse. Dans la configuration précédente, la même information se trouvait en deux endroits : une fois dans le script et une autre fois dans les balises NOSCRIPT
. Dans cette nouvelle configuration, l'information est dès le départ correctement organisée et l'artifice produit par JavaScript va consister à masquer les listes secondaires pour ne faire apparaître à chaque fois que la liste secondaire dont l'élément parent a fait l'objet d'un clic. Le script perd sa fonction de construction de contenu pour ne conserver que les fonctions de masquage et d'apparition d'un contenu déjà présent dans le document.
Ce qui donne finalement le code source suivant (adapté librement d'un exemple de Simon Willison) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Affichage d'informations au moyen de JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
li {
padding-right: 1em;
}
div {
margin: 1em;
padding: 1em;
border: 1px solid #666;
}
#displayingArea {
position: absolute;
left: 12%;
top: 15%;
font-size: 1em;
}
</style>
<script language="JavaScript1.2" type="text/javascript">
function cloneAndCopy(nodeId, deep) {
var toClone = document.getElementById(nodeId);
var heading =
document.createTextNode(toClone.parentNode.firstChild.firstChild.nodeValue+" :");
var clonedNode = toClone.cloneNode(deep);
clonedNode.insertBefore(heading, clonedNode.firstChild);
clonedNode.style.display = 'block';
var insertPoint = document.getElementById('displayingArea');
insertPoint.replaceChild(clonedNode, insertPoint.firstChild);
}
/* Initialisation */
function init() {
var i, link, id, target, first;
first = true;
for (i = 0; (link = document.links[i]); i++) {
if (/btoggleb/.exec(link.className)) {
id = link.href.split('#')[1];
target = document.getElementById(id);
et_toggleElements[et_toggleElements.length] = target;
target.style.display = 'none';
link.onclick = et_toggle;
}
}
document.getElementById('displayingArea').appendChild(document.createTextNode("Cliquer sur l'une des catégories de gauche pour afficher ses sous-catégories"));
}
function et_toggle(e) {
if (typeof e == 'undefined') {
var e = window.event;
}
var source;
if (typeof e.target != 'undefined') {
source = e.target;
} else if (typeof e.srcElement != 'undefined') {
source = e.srcElement;
} else {
return true;
}
if (source.nodeType == 3) {
source = source.parentNode;
}
var id = source.href.split('#')[1];
var elem;
for (var i = 0; (elem = et_toggleElements[i]); i++) {
if (elem.id != id) {
elem.style.display = 'none';
} else {
cloneAndCopy(elem.id, true);
}
}
return false;
}
function addEvent(obj, evType, fn){
if (obj.addEventListener) {
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
var et_toggleElements = [];
addEvent(window, 'load', init);
</script>
</head>
<body>
<h1>Affichage d'informations au moyen de JavaScript</h1>
<p>La table transcendantale des concepts de l'entendement :</p>
<ul>
<li><a href="#panel1" class="toggle">Qualité</a><ul
id="panel1"><li>Réalité</li><li>Négation</li><li>Limitation</li></ul></li>
<li><a href="#panel2" class="toggle">Quantité</a><ul
id="panel2"><li>Unité</li><li>Pluralité</li><li>Totalité</li></ul></li>
<li><a href="#panel3" class="toggle">Relation</a><ul
id="panel3"><li>Substance</li><li>Cause</li><li>Communauté</li></ul></li>
<li><a href="#panel4" class="toggle">Modalité</a><ul
id="panel4"><li>Possibilité</li><li>Existence</li><li>Nécessité</li></ul></li>
</ul>
<script language="JavaScript" type="text/javascript">
document.write("<div id="displayingArea"></div>");
</script>
</body>
</html>
Cette capture d'écran présente un clavier virtuel créé par des fonctions Javascript. Ce dispositif permet d'éviter l'interception d'un code entré au clavier. Il demande à l'utilisateur de cliquer à la souris sur les chiffre dessinés à l'écran. Par conséquent, un utilisateur qui ne peut utiliser la souris est dans l'impossibilité d'entrer son code et d'accéder à son compte personnel en ligne et les services qui s'y rattachent.
Cette capture d'écran présente une page sur laquelle il est demandé de cliquer sur les chiffres d'un clavier dessiné à l'écran pour entrer un code secret. Le clavier est normalement créé au chargement de la page par des fonctions javascript. Or les javascripts ont été désactivés. Le clavier virtuel ne s'affiche donc pas et l'utilisateur est dans l'impossibilité d'entrer son code secret.