Accueil Boite à Outils Quand JavaScript est désactivé... 2/2

Publié le : 26 juillet 2005
Imprimer Imprimer cet article

Auteur :
Alain Sichel †

Alain Sichel
Quand JavaScript est désactivé... 2/2

Lorsqu’on utilise JavaScript pour un menu de navigation, il est nécessaire de prévoir une solution pour ceux qui ont désactivé Javascript. Cet article fait suite aux articles Quand JavaScript est désactivé... 1/2 [1] et Menu de navigation sans JavaScript.

 

 Le principe

Le but est que tout visiteur puisse avoir accès au contenu du site, même s’il a désactivé Javascript (c’est ce que nous allons voir ici), s’il utilise un vieux navigateur non compatible CSS2 ou s’il est handicapé (nous verrons cela dans d’autres articles).

Depuis octobre 2004, le site du CYES utilise les principes présentés dans l’article Quand JavaScript est désactivé... 1/2 :

- message d’avertissement utilisant les balises <noscript> </noscript> et page d’aide spécifique,
- les menus ne fonctionnant qu’avec JavaScript, non indispensables à la visite du site, ne sont pas visibles [2].

A ceci s’ajoutait la possibilité d’activer un Menu de navigation sans JavaScript utilisant des menus déroulants.

 Nouveau mode de navigation

Toutes les pages du site du CYES présentent de nombreux liens dans la colonne gauche des pages :

- vers les pages pages principales et les différentes rubriques de sa partie,
- vers les pages de la même rubriques ainsi que vers d’autres pages sur le même thème.

D’autre part,

- il est possible d’accéder à la plupart des pages sans Javascript, soit à partir du Plan du site ou de la Page d’accueil,
- on peut aussi avoir accès à de nombreuses pages avec les Raccourcis clavier,
- la page d’accueil de chaque partie donne le sommaire de ses différentes pages.

Il ne manque donc pour avoir un accès aux différentes pages qu’un menu sur les différentes parties du site :

Depuis juillet 2005, ce menu remplace le Menu de navigation sans JavaScript proposé précédemment.

 Montrer ou cacher les menus

Pour que tout fonctionne parfaitement, il reste encore à régler 2 choses :

  1. masquer le menu de navigation normal lorsque JavaScript est désactivé,
  2. masquer la liste des Différentes parties du site lorsque JavaScript fonctionne.

1) Masquer le menu de navigation normal

Le contenu de chaque partie est présenté en haut de chaque page par un menu déroulant accessible aux personnes handicapées [3]. Ce menu fonctionne très bien quand JavaScript est activé ; quand il est désactivé, l’ensemble du menu s’affiche en bas de la page. C’est fonctionnel, puisqu’on a les liens vers toutes les pages, mais pas très esthétique. Puisque je propose le menu Différentes parties du site quand JavaScript est désactivé, je vais donc masquer ce menu de navigation dans ce cas là.

Pour cela je modifie la feuille de style en ajoutant :

#menu, #ssmenu1, #ssmenu2, #ssmenu3, #ssmenu4, #ssmenu5, #ssmenu6, #ssmenu7 {
 visibility: hidden;
}

Ceci masque le menu et les sous-menus (7 dans le cas du site du CYES).

Pour que le menu devienne visible quand JavaScript fonctionne, il suffit de modifier le script [4] :

with(document.getElementById("menu").style) {
 position="absolute";
 top="1em";
 left="1em";
 margin="0";

en ajoutant visibility="visible"; ce qui donne

with(document.getElementById("menu").style) {
 position="absolute";
 visibility="visible";
 top="1em";
 left="1em";
 margin="0";

ce qui rend le menu visible quand JavaScript fonctionne. Il n’y a rien de plus à faire pour les sous-menus qui sont rendus visibles par MontrerMenu()

2) Masquer la liste des Différentes parties du site

Pour que cette liste ne soit visible que quand JavaScript est désactivé, on reprend le principe décrit dans l’article Quand JavaScript est désactivé... 1/2.

Cette fois-ci, le calque se présente ainsi :

<div id="LayerParties"><script language='JavaScript' type="text/javascript">
<!--
vis['Parties'] = 'show';
//-->
</script><h4>Différentes parties du site :</h4>
Les différents liens...
</div>

Le calque est donc visible par défaut. Pour le masquer quand JavaScript fonctionne, il suffit de ce script [5] :

function swapcouche(couche){
 if (vis[couche] == 'show'){
   montrecache('Layer'+couche,'','hide');
   vis[couche] = 'hide';
 } else {
   montrecache('Layer'+couche,'','show');
   vis[couche] = 'show';
 }
}

et pour déclencher la fonction, il suffit de remplacer la balise <body> par <body onload="swapcouche('Parties');">.

 

 

[1] La lecture de cet article est nécessaire pour comprendre la proposition de cette page.

[2] On rend un calque invisible en lui donnant le style style='display: none;' et on utilise un JavaScript qui change le style au chargement de la page, ainsi la partie cachée devient visible si JavaScript fonctionne, mais reste invisible s’il est désactivé. Ce script est une adaptation de celui décrit dans l’article Menu dépliant pour les rubriques.

[3] Inspiré de Faire un menu dynamique ouvert et accessible.

[4] Je n’ai pas remis tout le code du script, celui-ci est indiqué sur la page Faire un menu dynamique ouvert et accessible.

[5] C’est une version simplifiée de la fonction indiquée dans Quand JavaScript est désactivé... 1/2, utilisée cette fois-ci dans l’autre sens.




Bookmark and Share

Imprimer Imprimer cet article