Structure html pour onglets

Bonjour,

Je souhaite utiliser une navigation par onglets dans une des pages du projet dont je m'occupe actuellement.
Après une rapide recherche sur le Web, j'ai trouvé deux ressources qui me parlent :
¤ http://samcroft.co.uk/2011/lightweight-semantic-jquery-tabs-plugin/ : (c'est une page sur un plugin jQuery, mais l'exemple html, avec des <dl>, me semblait être pertinent)
¤ http://forum.alsacreations.com/topic-2-75471-1-Navigationparongletsetattributsrole.html : sujet sur l'attribut rôle, mais on y parle beaucoup de la structure HTML.

Pour ma part, je comptais faire de la manière suivante (avant d'avoir cherché sur le Web) :

<!-- Les onglets -->
<nav>
   <h2><a href="#contenu-o1">Onglet 1</a></h2>
   <h2><a href="#contenu-o2">Onglet 2</a></h2>
</nav>
<!-- fin des onglets -->
<section id="contenu-o1">
   <!-- le contenu en relation avec l'onglet 1 -->
</section>
<section id="contenu-o2">
   <!-- le contenu en relation avec l'onglet 2 -->
</section>

<h2> pour les onglets car le titre principal de la page est en h1. Faut-il créer absolument un <ul> dans un <nav> ? Ceci est généré côté serveur mais piloté par JavaScript bien évidemment. Le contenu du premier onglet sera visible au chargement. Aria n'est pas ma tasse de thé, mais je suis preneur pour un ajout d'attributs

Merci d'avance pour vos conseils/avertissements
Modifié par jojaba (02 Aug 2016 - 10:35)

Bonjour !

Je m'étais fait une petite page pour faire des dégradés linéaires et utilisé une navigation par onglets. Je m'étais alors servi de :target. Mon plus gros souci a été de faire en sorte que l'onglet actif fasse parti de la page active.

Je suis curieuse de voir ce que vous allez faire...

Euh, je pense m'être mal exprimé sur mes besoins d'après la réponse que tu me donnes Zelena... Le but des onglets dans mon cas est d'afficher/masquer les sections (il y en a deux dans mon cas).
Voici ce que j'ai mis en place (testé et fonctionnel) :

<nav class="search-tabs">
   <h2>
      <a class="site-tab active" href="#site-results">
      Résultats sur le site
      </a>
   </h2>
   <h2>
      <a class="blogs-tab" href="#blogs-results">
      Résultats sur les blogs
      </a>
   </h2>
</nav>
<section id="site-results">
   <!-- résultats sur le site -->
</section>
<section id="blogs-results" style="display: none;">
   <!-- résultats sur les blogs -->
</section>
<!-- Le script JS (jQuery) pour le fonctionnement -->
<script>
jQuery(document).ready(function () {
   jQuery(".search-tabs a").on("click", function(e) {
      e.preventDefault();
      var linkClass = jQuery(this).attr("class");
      if (linkClass == "site-tab") {
        // Active
         jQuery(this).addClass("active");
         jQuery("#site-results").show();
         // Hidden
         jQuery("a.blogs-tab").removeClass("active");
         jQuery("#blogs-results").hide();
      } else {
         // Active
         jQuery(this).addClass("active");
         jQuery("#blogs-results").show();
         // Hidden
         jQuery("a.site-tab").removeClass("active");
         jQuery("#site-results").hide();
      }
   })
 });
</script>

Ma question était plutôt d'ordre sémantique. Je cherche un bon compromis entre seo et accessibilité (pas toujours évident et même parfois antagoniste...).

En ce cas, bonne chance !

Je suppose que c'est quelque chose de difficile à évaluer...

Bonjour,

Il s'agit donc ici d'onglets codés "en dur", mais les onglets n'ont en soit rien de sémantique, d'où l'idée de les mettre dans une <nav> j'imagine... Moi je procède avec une autre philosophie : ce qui est nécessaire à javascript doit être généré par javascript. Point. En fait ma réflexion ne part pas du résultat, mais d'une réflextion autour du contenu. Le script doit ensuite s'adapter.

Mon exigence de structure est la suivante : un titre (dans une balise <hx> ou autre), un contenu (dans une div ou un simple paragraphe, l'important étant que l'élément suivant le titre soit unique), un deuxième titre, un deuxième contenu, etc... Un élément parent comportant la classe .tab, englobe le tout afin de permettre au script de traiter le contenu comme des onglets (je vous laisse deviner ce que cela aurait donné si j'avais appliqué la classe .accordion). L'ensemble est ensuite traité en javascript : génération des onglets, affichage/masquage des contenus...

- Une page d'exemple : Tabs
- Le même html avec cette fois l’application d'une classe dédiée aux accordéons : Accordions

Le script pour les onglets : Github, Tabs for Scriptura framework

Oui, Olivier, l'idée du nav c'est justement que je veux partir de quelque chose qui n'a pas forcément quelque chose à voir avec le résultat visuel final (un peu en accord avec ta philosophie), mais qui me permet de coller mieux au contenu (et non à la structure) tout en faisant un pas vers le côté design (le fait d'avoir les deux titres l'un après l'autre simplifie le passage sous forme d'onglets par après).
Modifié par jojaba (02 Aug 2016 - 15:58)

Hello

Je pense que l'approche de OkivierC est la bonne, après il y a la question de l'accessibilité de ce type de module, notamment en terme de navigation clavier ou via synthèse vocale. ARIA peut pas mal aider.
Il y a l'ami Nico3333fr qui a bien bossé l'accessibilité sur son système d'onglets : http://a11y.nicolas-hoffmann.net/tabs/
Modifié par audrasjb (03 Aug 2016 - 08:59)

audrasjb a écrit :
... après il y a la question de l'accessibilité de ce type de module, notamment en terme de navigation clavier

Le script que j'ai composé supporte la navigation clavier que j'avais prévu du départ (les onglets sont générés comme des listes composés de liens). Pour la synthèse vocale par contre je n'y connais rien, le problème étant surtout que je ne saurais comment tester...

Hello Olivier,

J'ai pas encore eu le temps de jeter un oeil à ton code mais c'est déjà bien d'avoir pensé à la navigation clavier

Pour tester la synthèse vocale, si tu est sur iOS tu as déjà VoiceOver sur mobile.

En fait j'ai donné le lien vers le travail de Nicolas car je sais que ses plugins jQuery sont un modèle de prise en compte d'ARIA et de l'accessibilité, et qu'ils sont très bien codés. Ce qui n'enlève pas pour autant la valeur de ton travail