Onglets

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

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 « Tab Panel » détaillé dans les WAI-ARIA 1.0 Authoring Practices du W3C.

Socle HTML


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

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

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

Interactions au clavier

Tab et Maj + Tab

Lorsque l’utilisateur accède en tabulant au groupe d’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 activable du groupe et sélectionne cet onglet. Si le focus clavier est positionné au niveau du premier onglet activable du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du dernier onglet activable du groupe et cet onglet est sélectionné.

Dans le cas où la barre d’onglets est positionnée à la verticale, prévoir également ce comportement sur la touche Flèche haut.

Flèche droite

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

Dans le cas où la barre d’onglets est positionnée à la verticale, prévoir également ce comportement sur la touche Flèche bas.

Suppr

Quand l’utilisateur a la possibilité de supprimer un onglet et lorsque le focus est positionné dans un panneau, supprime à la fois le panneau et l’onglet associé à ce panneau. Si au moins un autre onglet activable reste présent dans le module suite à la suppression, déplace le focus clavier vers le prochain onglet du groupe.

Avant toute suppression, une alerte demandant la confirmation de l’action doit être renvoyée à l’utilisateur.

Comportements attendus

Composant AcceDe Web

Ce composant « Onglets » est approuvé AcceDe Web : il suit parfaitement les recommandations énoncées précédemment dans cette fiche. À noter qu’il est en Vanilla et donc sans dépendance.

N’hésitez donc surtout pas à l’utiliser dans votre projet !

Autres 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. jQuery Accessible tab panel system, using ARIA.
  4. Responsive Tabs to Accordion.
  5. Système d’onglets avec substitut pour le responsive.
  6. Tab Panel.
  7. Tab Panel: ARIA CSS Selectors.
  8. Tabpanel Widget.
  9. Tabs (jQuery UI).

7 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

Ajouter un commentaire

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

Haut de page