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 with Automatic Activation » détaillé dans les ARIA Authoring Practices Guide (APG) du W3C.

Socle HTML

<div role="tablist">
  <button role="tab" id="onglet-1" tabindex="-1" aria-selected="false" aria-controls="panneau-1">Onglet 1</button>
  <button role="tab" id="onglet-2" aria-selected="true" aria-controls="panneau-2">Onglet 2</button>
  <button role="tab" id="onglet-3" tabindex="-1" aria-selected="false" aria-controls="panneau-3">Onglet 3</button>
  <button role="tab" id="onglet-4" tabindex="-1" aria-selected="false" aria-controls="panneau-4">Onglet 4</button>
</div>
<div role="tabpanel" id="panneau-1" aria-labelledby="onglet-1" tabindex="0">
  [Contenu du premier panneau (masqué)]
</div>
<div role="tabpanel" id="panneau-2" aria-labelledby="onglet-2" tabindex="0">
  [Contenu du deuxième panneau (affiché, car onglet associé sélectionné)]
</div>
<div role="tabpanel" id="panneau-3" aria-labelledby="onglet-3" tabindex="0">
  [Contenu du troisième panneau (masqué)]
</div>
<div role="tabpanel" id="panneau-4" aria-labelledby="onglet-4" tabindex="0">
  [Contenu du quatrième panneau (masqué)]
</div>

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

  • L’attribut role="tablist" doit être appliqué sur l’élément qui englobe les onglets.

    Dans le cas où les onglets sont orientés verticalement, l’attribut aria-orientation="vertical" doit également être appliqué sur cet élément.

  • L’attribut role="tab" doit être appliqué sur chaque onglet.
  • L’attribut role="tabpanel" doit être appliqué sur chaque panneau.
  • L’attribut tabindex="0" doit être appliqué sur chaque panneau.
  • Chaque onglet doit être associé à son panneau via l’attribut aria-controls :
    • Chaque panneau doit posséder un attribut id renseigné avec une valeur unique.
    • Chaque onglet doit posséder un attribut aria-controls renseigné avec la valeur de l’attribut id de son panneau associé.
  • Chaque panneau doit être rattaché à l’onglet qui le contrôle via l’attribut aria-labelledby :
    • Chaque onglet doit posséder un attribut id renseigné avec une valeur unique.
    • Chaque panneau doit posséder un attribut aria-labelledby renseigné avec la valeur de l’attribut id de l’onglet qui le contrôle.
  • L’attribut aria-selected doit être appliqué sur chaque onglet. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’onglet associé :
    • aria-selected="true" sur l’onglet sélectionné.
    • aria-selected="false" sur les autres onglets, non sélectionnés.
  • L’attribut tabindex="-1" doit être appliqué sur chaque onglet non sélectionné. Il doit être renseigné dynamiquement en fonction de l’état de l’onglet associé.

Interactions au clavier

Tab et Maj + Tab

Lorsque l’on 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 de quitter le groupe d’onglets et de se positionner sur le panneau affiché.

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

Ces composants « Onglets » 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.

10 commentaires

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

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    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.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bien vu et merci Thomas !

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

      Répondre

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

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    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 Philippe Thierry, le 21 mars 2019 à 10h13.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour,

    La fiche concernant les onglets sur https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html est maintenant très différente de la structure que vous proposez. Que recommenderiez-vous plutôt de suivre ?
    J’imagine que votre pattern est très bien testé.
    Merci beaucoup !

    Répondre

    • Par Johan Ramon, le 24 avril 2019 à 13h51.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour,

      Désolé pour notre réponse quelque peu tardive.

      Oui, nous vous confirmons que les recommandations de cette fiche collent bien au motif de conception ARIA « Tabs ». Et que le pattern est bien testé.

      En fait, l’exemple que vous évoquez (« Example of Tabs with Manual Activation ») est une variante de celui-ci : « Example of Tabs with Automatic Activation ».

      Ces deux implémentations sont bien compatibles avec l’accessibilité.

      Nous restons à votre écoute, si besoin.
      Johan

      Répondre

      • Par Philippe Thierry, le 24 avril 2019 à 14h04.

        Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

        Bonjour,

        Merci de votre réponse !

  • Par Romaric Blot, le 1 août 2019 à 13h53.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour, j’ai utilisé la librairie jQuery UI à mon travail afin de rendre des onglets accessibles, celle-ci enrichie bien le contenu html avec les bons attributs comme ceux spécifiés sur cette page.

    Toutefois testant la navigation audio avec NVDA j’ai remarqué que la lecture ne rentrait pas à l’intérieur des panneaux, j’ai pourtant testé diverses combinaisons de touches liées à la configuration de NVDA.
    Y aurait-il une subtilité à connaitre ?
    Cela aurait-il un lien avec le mode formulaire de NVDA ?

    Répondre

    • Par Johan Ramon, le 23 août 2019 à 11h23.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour,

      Nous vous remercions pour l’intérêt que vous portez au projet AcceDe Web.

      Toutefois, cet espace de commentaires est dédié aux échanges à propos des recommandations AcceDe Web.

      Étant donné que votre demande relève davantage d’un forum d’entraide, nous vous suggérons donc de la publier sur ce type d’espace : Forum « Accessibilité du Web d’Alsacréations », par exemple.

      Bien à vous,
      Johan

      Répondre

  • Par DEV WEB ACCESSIBLE, le 31 octobre 2020 à 21h46.

    Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour ,

    si on utilise le système d’onglet dans un menu de navigation faut il mettre les aria des onglets dans ce cas ou pas ?

    Répondre

Ajouter un commentaire

Tous les champs sont obligatoires.

Haut de page