# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

- Bénéfice 1 :
  Les scripts peuvent être utilisés, par exemple, pour afficher dynamiquement du contenu sur un site. Leur fonctionnement est le suivant : Au passage de la souris sur une rubrique du menu s'affiche la liste de ses sous-rubriques. Ce comportement est le fait d'un script qui déclenche l'affichage et permet donc l'accès à des contenus secondaires.
  Or, il peut se trouver que le navigateur ou l'aide technique utilisée ne supporte pas JavaScript (comme c'est le cas du navigateur textuel Lynx) ou bien que le moteur de script soit désactivé par l'utilisateur (pour éviter l'apparition intempestive des fenêtres de type pop-up, par exemple). Dans ce cas, le script n'est plus d'aucun effet et la page perd une partie de son contenu. L'utilisateur n'y a pas accès. Les scripts peuvent aussi être utilisés pour bien d'autres usages (navigation ou validation d'un formulaire, par exemple); c'est pourquoi il est nécessaire d'assurer l'accessibilité des contenus et informations qu'ils prennent en charge.

#### 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 :

- le déclenchement d'événements qui repose uniquement sur l'utilisation de la souris.
- l'utilisation du protocole "javascript:" dans l'attribut href d'un lien.
- les redirections au moyen de scripts. Mettre en place une redirection côté serveur.
- la validation de formulaires uniquement au moyen de JavaScript.

Ces différents points sont traités dans d'autres fiches.

#### Exemple de mauvaise pratique

- L'utilisation de menu déroulants sans accès alternatif
- La validation des formulaires côté client

#### 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

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.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 7.2 : Des actions peuvent-elles être accomplies même si le périphérique pour lequel elles sont prévues est désactivé ?
- Fiche 11.7 : Le contrôle de saisie des champs du formulaire est-il accessible ?
- Fiche 13.2 : Si une redirection automatique est présente, s'effectue-t-elle sans l'intermédiaire d'un script ?
- Fiche 13.4 : Y a-t-il une alternative équivalente au script qui déclenche l'ouverture de nouvelles fenêtres ?

#### Autres ressources

- HTML techniques (section 12.1) : Graceful transformation of scripts
- opera.com tutorial : Using Opera without a mouse
- Trois articles de P. P. Koch parus en 2004 dans Digital Web Magazine :
- Keep JavaScript simple
- The behaviour layer
- Accessibility and usability
- Simon Willison propose des exemples d'utilisation de Javascript accessible (Enhancing Structural Markup with JavaScript)
- Plongez dans l'accessibilité (jour 13 Utilisez de vrais liens

revenir au sommaire de la fiche

revenir en haut de la page

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