Menu à onglets (tabs) — idTabs ou domTab ?

Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce *blogzine*. Mais la solution présentée 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 »*