Générateur d’onglets (tabs) accessibles

Générateur d’onglets (tabs) accessibles: à quoi ça sert

Les onglets organisent des contenus comme la description, les mesures et la livraison d’un produit dans un petit espace. Mal conçus, ils deviennent inutilisables au clavier ou avec un lecteur d’écran.

Le générateur suit le modèle Tabs des WAI-ARIA Authoring Practices : tablist, tab avec aria-selected et tabpanel reliés par aria-controls et aria-labelledby, seul l’onglet actif dans l’ordre de tabulation et navigation avec les flèches, Début et Fin. Les panneaux ne sont masqués que lorsque le script se charge. Vous choisissez le style souligné ou en pilule et la couleur.

Mode d’emploi

1. Écrivez le titre et le contenu de chaque onglet.
2. Choisissez le style et la couleur.
3. Testez dans l’aperçu et copiez le code.

Quand l’utiliser

• Détails de produit dans une boutique en ligne.
• Formules ou services côte à côte.
• Informations sur un événement.

Questions fréquentes

Qu’est-ce qui rend les onglets accessibles ?

Suivre le modèle Tabs de WAI-ARIA : la liste a role=tablist, chaque onglet est un bouton avec role=tab et aria-selected, et chaque contenu a role=tabpanel relié à l’onglet par aria-controls et aria-labelledby. Seul l’onglet actif reçoit le focus avec la touche Tab ; entre les onglets, on se déplace avec les flèches.

Et si le JavaScript ne se charge pas ?

Le code ne masque les panneaux qu’après l’exécution du script. Sans JavaScript, tous les contenus apparaissent les uns sous les autres, et rien n’est inaccessible.

Onglets ou accordéon ?

Les onglets fonctionnent bien avec peu de titres courts sur ordinateur. Avec beaucoup d’éléments ou de longs textes, surtout sur mobile, l’accordéon (des questions qui s’ouvrent et se ferment) est généralement préférable.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires