Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

2.1.3. Onglets

Principe

Les onglets sont des modules dynamiques qui permettent d’optimiser l’affichage du contenu d’une page dans un espace réduit. Ils se présentent généralement sous la forme d’une liste de liens accolés, qui permettent d’afficher au clic du contenu relatif à l’onglet sélectionné. Un seul onglet peut être activé à la fois.

Code HTML de base

Le code HTML de base est constitué de liens internes qui pointent vers leurs panneaux respectifs.

<ul>
    <li><a href="#panneau-01">Premier onglet</a></li>
    <li><a href="#panneau-02">Deuxième onglet</a></li>
    <li><a href="#panneau-03">Troisième onglet</a></li>
</ul>
 
<div id="panneau-01">
    Contenu du premier panneau.
</div>
 
<div id="panneau-02">
    Contenu du deuxième panneau.
</div>
 
<div id="panneau-03">
    Contenu du troisième panneau.
</div>

Sans JavaScript, la totalité des panneaux sont affichés, et les onglets servent de liens d’accès direct au contenu du panneau associé.

Comportement avec JavaScript

Sur cette base, les scripts doivent ensuite gérer les points suivants :

  • À l’exception du panneau actif, les panneaux sont masqués par défaut à l’aide de display: none; via CSS.
  • L’attribut role=“tabpanel” est appliqué sur chacun des panneaux.
  • L’attribut role=“tablist” est appliqué sur le conteneur des onglets.
  • L’attribut role=“tab” est appliqué sur chacun des onglets.
  • L’attribut aria-controls est appliqué sur chacun des onglets. La valeur de cet attribut reprend celle de l’attribut id du panneau associé.
  • L’attribut aria-selected=“false” est appliqué par défaut sur chaque onglet, à l’exception de l’onglet actif qui reçoit l’attribut aria-selected=“true”. La valeur de cet attribut change ensuite dynamiquement : true lorsque le contenu associé est affiché et false dans le cas contraire.
  • Une balise <strong> est rajoutée systématiquement autour du contenu de l’onglet actif. Cette balise est supprimée dès que l’onglet n’est plus actif.
  • L’attribut tabindex=“0” est appliqué sur chacun des panneaux afin de permettre à ces derniers de recevoir le focus. Dès qu’un onglet est sélectionné, le focus doit être positionné dynamiquement sur le panneau associé.

Le code ainsi obtenu avec JavaScript sera le suivant :

<ul role="tablist">
    <li role="tab" aria-selected="true" aria-controls="panneau-01"><a href="#panneau-01"><strong>Premier onglet</strong></a></li>
    <li role="tab" aria-selected="false" aria-controls="panneau-02"><a href="#panneau-02">Deuxième onglet</a></li>
    <li role="tab" aria-selected="false" aria-controls="panneau-03"><a href="#panneau-03">Troisième onglet</a></li>
</ul>
 
<div id="panneau-01" role="tabpanel" tabindex="0">
    Contenu du premier panneau.
</div>
 
<div id="panneau-02" role="tabpanel" tabindex="0">
    Contenu du deuxième panneau.
</div>
 
<div id="panneau-03" role="tabpanel" tabindex="0">
    Contenu du troisième panneau.
</div>

Démonstration

notices/interfaces-riches-javascript/onglets.txt · Dernière modification: Le 06/01/2014 à 11:39 par Régis Lapeze
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :