Onglets

Sommaire

Principe

Les onglets sont des modules dynamiques qui permettent d’optimiser l’affichage du contenu d’une page dans un espace réduit grâce à un système d’étiquettes contrôlant l’affichage de panneaux.

Ils se présentent généralement sous la forme d’une liste d’items accolés qui permettent d’afficher du contenu relatif à l’onglet sélectionné. Un seul onglet peut être activé à la fois.

Cette fiche s’appuie sur le motif de conception « Tabs » détaillé dans les WAI-ARIA 1.1 Authoring Practices du W3C.

Socle HTML


<ul role="tablist">
  <li role="tab" id="onglet-1" tabindex="-1" aria-selected="false" aria-controls="panneau-1">Onglet 1</li>
  <li role="tab" id="onglet-2" tabindex="0" aria-selected="true" aria-controls="panneau-2">Onglet 2</li>
  <li role="tab" id="onglet-3" tabindex="-1" aria-selected="false" aria-controls="panneau-3">Onglet 3</li>
  <li role="tab" id="onglet-4" tabindex="-1" aria-selected="false" aria-controls="panneau-4">Onglet 4</li>
</ul>

<div role="tabpanel" id="panneau-1" aria-labelledby="onglet-1">
  [Contenu du premier panneau (masqué)]
</div>
<div role="tabpanel" id="panneau-2" aria-labelledby="onglet-2">
  [Contenu du deuxième panneau (affiché, car onglet associé sélectionné)]
</div>
<div role="tabpanel" id="panneau-3" aria-labelledby="onglet-3">
  [Contenu du troisième panneau (masqué)]
</div>
<div role="tabpanel" id="panneau-4" aria-labelledby="onglet-4">
  [Contenu du quatrième panneau (masqué)]
</div>

Rôles, états et propriétés ARIA

Interactions au clavier

Tab et Maj + Tab

Lorsque l’utilisateur accède en tabulant aux onglets, le focus est positionné au niveau de l’onglet sélectionné dans le groupe d’onglets. Lorsque le focus est positionné sur un onglet, la prochaine tabulation permet à l’utilisateur de quitter le groupe d’onglets.

Flèche gauche

Lorsque le focus est positionné sur un onglet, déplace le focus clavier vers le précédent onglet du groupe et sélectionne cet onglet. Si le focus clavier est positionné au niveau du premier onglet du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du dernier onglet du groupe et cet onglet est sélectionné.

Dans le cas où les onglets sont orientés verticalement, prévoir également ce comportement pour la touche Flèche haut.

Flèche droite

Lorsque le focus est positionné sur un onglet, déplace le focus clavier vers l’onglet suivant dans le groupe et sélectionne cet onglet. Si le focus clavier est positionné au niveau du dernier onglet du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier onglet du groupe et cet onglet est sélectionné.

Dans le cas où les onglets sont orientés verticalement, prévoir également ce comportement pour la touche Flèche bas.

Remarque

Les panneaux non affichés à l’écran doivent être masqués avec display: none et/ou visibility: hidden.

Composants

Les composants ci-après sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements, variables en fonction de la version utilisée.

  1. Accessible ARIA Tabs.
  2. Awesome Accessible Tabpanel.
  3. Example of Tabs with Automatic Activation.
  4. jQuery Accessible tab panel system, using ARIA.
  5. Onglets.
  6. Responsive Tabs to Accordion.
  7. Système d’onglets avec substitut pour le responsive.
  8. Tabbed Interfaces.
  9. Tab Panel.
  10. Tab Panel: ARIA CSS Selectors.
  11. Tabpanel Widget.
  12. Tabs (jQuery UI).

9 commentaires

  • Par Thomas Beduneau, le 19 mai 2016 à 14h54.

    En jetant un œil sur le socle HTML je vois que l’attribut « disabled » est utilisé. Cet attribut s’applique aux éléments HTML de formulaires (boutons, champs texte, etc.), du coup, ne devrions-nous pas utiliser l’attribut « aria-disabled » dans cet exemple ? « disabled » fonctionne lorsque l’on utilise un «  » mais est-ce bien d’utiliser un élément html pour son comportement navigateur (focussable, cliquable, désactivable) alors qu’on lui force un rôle différent du sien (dans ce cas-ci le rôle « tab ») pour parvenir à nos fins ?

    Merci

    Répondre

    • Par Johan Ramon, le 19 mai 2016 à 15h58.

      Bien vu et merci Thomas !

      Nous avons remplacé disabled="disabled" par aria-disabled="true".

      Répondre

  • Par Johan Ramon, le 19 mai 2016 à 15h59.

    Fiche modifiée le 19/05/2016.
    (Remplacement de disabled="disabled" par aria-disabled="true")

    Répondre

  • Par Uxlco, le 2 septembre 2016 à 12h14.

    Salut je me dis qu’un rappel des critères Critère 3.2 [A], Critère 10.14 [A], Critère 10.15 [A] seraient un plus pour cette fiche.

    Accessiblement votre :) ,
    /J

    Répondre

  • Par Sébastien Delorme, le 20 février 2017 à 17h50.

    Cette fiche vient d’être mise à jour pour correspondre au nouveau motif de conception.

    Modifications réalisées :

    • Prise en charge des flèches haut et bas uniquement en cas de positionnement vertical.
    • Ajout d’aria-orientation="vertical" dans le cas de positionnement vertical.
    • Suppression de la gestion des combinaisons de touches Ctrl + Flèche haut, Ctrl + Page précédente et Ctrl + Page suivante.

    Répondre

  • Par Laurent Bracquart, le 10 juillet 2017 à 11h23.

    Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 10/07/2017.

    Répondre

  • Par Laurent Bracquart, le 9 janvier 2018 à 11h17.

    Modification de l’encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 09/01/2018.

    Répondre

  • Par Laurent Bracquart, le 15 janvier 2018 à 12h13.

    Mise à jour de la fiche pour respecter les motifs de conception ARIA 1.1 le 15/01/2018.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page