Un intéressant billet sur l'importance de proposer une alternative accessible à l'utilisation du javascript : Javascript et accessibilité

Le RGAA (dont la version pdf est disponible sur le site Synergies) consacre un point de contrôle à ce sujet :

Point de contrôle : 6.3 Proposer une alternative au code javascript et aux éléments programmables

Description

Libellé

S'assurer que les pages ne perdent pas d'informations lorsque javascript ou les éléments programmables sont désactivés ou non supportés. Lorsque ce n'est pas possible, fournir une information équivalente de manière alternative.

Objectifs et intérêt

Permettre l'accès à l'information et l'utilisation du site, même lorsque les navigateurs ne lisent pas javascript ou ne disposent pas du programme nécessaire au bon fonctionnement de l'élément programmable.

Niveau WCAG1.0

Niveau A

Références

  • WCAG1.0 : directive 6
  • DGME1.0 : points : 1.1, 4.1, 7.1,11.7
  • Section 508 : points : 1194.22 (l), 1194.22 (m)

Impact

Profil communicant Profil développeur et intégrateur Profil rédacteur et contributeur

Mise en oeuvre

Explication

Les éléments programmables sont :

  • Le contenu affiché via l'élément applet,
  • Le contenu affiché via l'élément object,
  • Le contenu affiché via l'élément embed.

Les utilisateurs ont besoin d'une alternative dans les cas suivants :

  • Désactivation de javascript,
  • Désactivation de java,
  • Désactivation d'activex,
  • Utilisation d'un navigateur ne supportant pas javascript, java ou activex,
  • Absence du plugin nécessaire à la bonne visualisation de l'élément programmable,
  • Blocage du javascript dans un environnement sécurisé sans pour autant le désactiver,
  • Utilisation d'une aide technique n'interprétant pas correctement le code javascript.

L'alternative au code javascript se fait par :

  • L'utilisation d'un l'élément noscript reprenant l'ensemble des informations fournies par le script,
  • la conception de code javascript non obstrusif venant s'appliquer lors du chargement de la page. Cela permet ainsi d'avoir une page d'origine fonctionnelle et accessible, uniquement enrichie de fonctionnalités non bloquantes lorsque javascript est activé,
  • L'utilisation d'un langage côté serveur.

Il est à noter que l'utilisation de l'élément noscript comme unique solution d'accessibilité est hasardeuse. En effet, cet élément n'est affiché par le navigateur ou lu par la synthèse vocale que si l'utilisateur a explicitement désactivé javascript.

L'alternative aux éléments applet se fait par :

  • L'ajout d'un contenu alternatif, reprenant l'ensemble des informations présentes dans l'élément, avant la fermeture de l'élément,
  • L'ajout d'un lien vers une page reprenant l'ensemble des informations présentes dans l'élément.

L'alternative aux éléments object se fait de la même façon que celle des éléments applet. De plus, il est possible d'imbriquer plusieurs élément object, appelant des contenus différents, les uns dans les autres.

L'alternative aux éléments embed se fait par l'ajout d'un contenu alternatif, placé dans un élément noembed, et reprenant l'ensemble des informations présentes dans l'élément.

Exemple

Utilisation de l'élément noscript pour une alternative à une fonction lançant la fenêtre d'impression en javascript :

[html]
<script type="text/javascript">
function imprimer(){
document.write('<a href=\"javascript:window.print()\">Imprimer cette page<\/a>');
}
imprimer();
</script>
<noscript> Pour imprimer cette page, utiliser la fonction d'impression de vos navigateur, si vous ne savez comment faire reportez-vous à <a href="aide.html#impression">la page d'aide</a> </noscript>

Script non obstrusif permettant d'afficher un élément en cliquant sur un lien. L'élément restera affiché si javascript est désactivé :

[html]
<html lang="fr">
<head>
...
<style type="text/css">
.masquer{
display:none;
}
.afficher{
display:block;
}
</style>

<script type="text/javascript">
function lienafficher(){
document.write('<a href=\"javascript:afficher()\">Afficher le bloc<\/a>');
}

function afficher(){
document.getElementById("exemple2").className="afficher";
}

function masquer(){
document.getElementById("exemple2").className="masquer";
}
</script>

</head>

<body>

<script type="text/javascript">
lienafficher();
</script>
<div id="exemple2">
mon contenu à afficher
</div>

<script type="text/javascript">
masquer();
</script>

</body>
</html>

Par ailleurs, Accessiweb consacre 4 critères aux alternatives au javascript.