Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée alors n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu'il s'agit d'une fonctionnalité et non d'un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.

Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :

1. Poids du script — généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.

   
   
   
   
   

   • idTabs -> 10 ko + jQuery -> 31 ko = 41 ko. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.

   
   

   • domtab -> 10 ko. C’est déjà beaucoup mieux, et par rapport à idTabs, vous pourrez encore installer plusieurs scripts intéressants avant d’arriver à 41 ko.

   
   
   
   
   

   Ceci dit, l’appétit vient en mangeant et le nombre de scripts à tendance à s’allonger, de sorte que l’investissement en jQuery est très vite rentabilisé.




2. Comportement quand javascript n’est pas activé — Ces deux scripts se dégradent élégamment en l’absence de Javascript. Comme l’affichage des onglets est géré par la feuille de style CSS ils restent en place ; les éléments masqués au départ s’affichent simplement les uns sous les autres.




3. Balisage HTML, classes CSS et identifiants nécessaires — Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des ancres internes vers lesquelles les liens des onglets pointeront.

Commençons par idTabs »

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Ca peut vous intéresser »

• SCRIPTS (0)


• Menu à onglet avec javascript et css. (22)


• Utilisez le DOM et Javascript comme un chef (25)


• Trucs et astuces CSS (5)


• Menu HTML et CSS, sliding doors et item current en PHP (24)