retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Scripts > Fiche 7.1

Fiche 7.1 : Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ?

Carte d'identité

  • Critère AccessiWeb : 7.1
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 6.2, 6.3

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

Comment évaluer

Par le code source

  1. Examiner le code source afin d'identifier toutes les situations où des scripts peuvent générer du contenu de document supplémentaire (e.g., en utilisant document.write() ).
  2. A l'aide d'un navigateur avec les scripts activés, examiner le document afin d'identifier tous les contenus importants générés dynamiquement.
  3. Dans chaque cas, vérifier qu'un contenu équivalent est disponible lorsque les scripts sont désactivés (soit via un élément NOSCRIPT ou le contenu statique initial du document).
  1. Examiner le code source afin d'identifier les situations où les scripts peuvent fournir une fonctionnalité (par exemple les gestionnaires d'événements).
  2. A l'aide d'un navigateur avec les scripts activés, examiner le document pour identifier toutes les fonctionnalités importantes basées sur des scripts.
  3. Désactiver tous les scripts.
  4. Juger si toute fonctionnalité importante n'est plus utilisable.

Par l'utilisation d'outils

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.

Evaluer avec la barre AccessiWeb (version 1.0) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "7. Scripts" de la Barre AccessiWeb, activer le critère 7.1.
  3. Toutes les actions de la page générées par un javascript sont désactivées.
  4. Vérifier alors pour ces actions qu'un contenu équivalent est disponible (soit via un élément NOSCRIPT ou le contenu statique initial du document).
    Note : pour réactiver les javascripts de la page, cliquer sur le critère 7.1.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Lorsque des actions générés par un script sont repérées sur la page (à l'aide d'un navigateur avec les scripts activés) et qu'elles nécessitent une alternative pour être accessibles :
  1. Cliquer sur le menu "Options IE", puis sur l'option "activer/désactiver le Javascript".
  2. Vérifier alors pour ces actions qu'un contenu équivalent est disponible (soit via un élément NOSCRIPT ou le contenu statique initial du document).

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
  1. Cliquer sur le menu "Désactiver", puis sur l'option "Désactiver JavaScript".
  2. Vérifier alors pour ces actions qu'un contenu équivalent est disponible (soit via un élément NOSCRIPT ou le contenu statique initial du document).

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

Le développeur doit veiller au respect de ce critère.

Implémentation

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 :

  1. Une règle d'évidence : un site doit toujours fonctionner quand le navigateur ne supporte pas JavaScript.
  2. Un script doit toujours fonctionner lorsque le navigateur ne supporte pas CSS. Un script ne doit pas reposer uniquement sur des changements de style pour atteindre son but. Il arrive qu'un script travaille en étroite collaboration avec des éléments de style, notamment pour tout ce qui concerne le positonnement de bloc de contenu dans une page.
  3. D'où cette troisième règle : les styles qui masquent un contenu et qui sont gérés par un script, doivent être déclarés au moyen de JavaScript.
    Si vous appliquez la règle de style display: none à un élément de structure et comptez sur JavaScript pour déclencher son apparition, le fonctionnement de votre site risque de se dégrader très rapidement si les feuilles de style sont désactivées tandis que JavaScript ne l’est pas.

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.

Exemple de mauvaise pratique

Exemple de bonne pratique

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>

revenir en haut de la page

Illustrations

Exemple de clavier d'identification créé par Javascript

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.

Le clavier virtuel est absent si Javascript est désactivé

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.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 6.7 Fiche suivante : fiche 7.2

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact