Description

Ce composant permet d'afficher des contenus sous la forme d'un système d'onglets : les contenus de chaque onglet sont masqués jusqu'à ce que l'utilisateur clique sur l'onglet, un seul onglet peut être affiché à la fois.

Restitution

• Chaque onglet doit posséder un nom accessible (ressource en anglais).
• L'onglet actif et sa position dans la liste des onglets doit être vocalisé.
• le contenu de chaque panneau est vocalisé automatiquement ou sur action de l'utilisateur lorsqu'il interagit avec le contenu.

Interactions de base au clavier

Les interactions au clavier sont :

• Les flèches haut ou droite permettent de passer à l'onglet suivant.
• Les flèches bas ou gauche permettent de passer à l'onglet précédent.
• La tabulation permet d'atteindre chaque élément interactif de l'onglet affiché.
• Les touches Espace et Entrée permettent d'afficher l'onglet sélectionné lorsque son contenu n'est pas afiché automatiquement.

Motif de conception : Tabpanel (WAI-ARIA Authoring Practices 1.1)

Exemple de Tabpanel

Cet exemple propose 3 panneaux (ou onglets) contenant soit du texte, soit du texte et des liens.

Test du tabpanel avec JAWS

Étape 1

1. Utiliser la flèche du bas pour aller jusqu'au premier onglet.
   JAWS annonce : « panneau 1, onglet sélectionné ».
2. Faire le même test à l'aide de la touche Tabulation.
3. JAWS passe en mode formulaire. Si ce n'est pas le cas, l'activer avec Entrée. JAWS annonce « onglet, panneau 1, sélectionné, appuyez sur touche JAWS + alt + m pour atteindre l'élément contrôlé ».

Étape 2

1. Utiliser la touche Tabulation pour aller sur le contenu du premier onglet. JAWS annonce « édition, panneau des onglets, contenu du panneau 1 ».
2. Appuyer sur Majuscule + Tabulation pour revenir au titre de l'onglet. JAWS annonce de nouveau « onglet, panneau 1, sélectionné, appuyez sur touche JAWS + alt + m pour atteindre l'élément contrôlé ».

Étape 3

1. Utiliser les flèches de direction pour vous déplacer d'onglet en onglet. JAWS annonce « onglet panneau 2 sélectionné, appuyez sur touche JAWS + maj + m pour lire le descriptif ».
2. Lorsque vous tabulez dans le contenu du panneau 3, JAWS quitte le mode formulaire et positionne le curseur sur le lien qui peut être activé.

Test du tabpanel avec NVDA

Étape 1

1. Utiliser la flèche du bas pour aller jusqu'au premier onglet.
   NVDA annonce : « onglet sélectionné panneau 1 ».
2. Faire le même test à l'aide de la touche Tabulation.
   NVDA annonce « panneau 1, onglet sélectionné ». Si vous avez paramétré NVDA pour qu'il active le mode formulaire au déplacement du focus, celui-ci s'activera automatiquement. Mais ce n'est pas le cas lorsque vous vous déplacez avec les flèches.
3. Si le mode formulaire ne s'active pas, le déclencher à l'aide des touches NVDA + Espace.
4. Lorsque le mode formulaire s'active, NVDA annonce « Panneau 1, onglet sélectionné, 1 sur 3 ».

Étape 2

1. Utiliser la touche Tabulation pour aller sur le contenu du premier onglet. NVDA quitte le mode formulaire et annonce « contenu du panneau 1, titre de niveau 4 ».
2. Appuyer sur Majuscule + Tabulation pour revenir au titre de l'onglet. NVDA retourne en mode formulaire et annonce de nouveau « onglet, panneau 1, onglet sélectionné 1 sur 3. »

Étape 3

1. Utiliser les flèches de direction pour vous déplacer d'onglet en onglet. NVDA annonce « panneau 2, onglet sélectionné 2 sur 3, panneau 3, onglet sélectionné 3 sur 3 ».
2. Lorsque vous tabulez dans le contenu du panneau 3, NVDA quitte à nouveau le mode formulaire et positionne le curseur sur le lien qui peut être activé.

Test du tabpanel avec VoiceOver

Étape 1

1. Utiliser la touche Tabulation pour atteindre le premier onglet.
   VoiceOver annonce : « Panneau 1 sélectionné, onglet 1 sur 3. Vous êtes actuellement sur onglet, pour sélectionner cette option, appuyez sur VO + Espace ».

Étape 2

1. Utiliser la touche Tabulation pour aller sur le contenu du premier onglet.
   VoiceOver annonce « niveau d'en-tête 4, contenu du panneau 1 ».
2. Revenir au titre du panneau 1 à l'aide des touches Majuscule + Tabulation.
   VoiceOver annonce à nouveau « panneau 1, sélectionné, onglet 1 sur 3 ».

Étape 3

1. Utiliser les flèches de direction pour aller d'un onglet à l'autre.
   VoiceOver annonce « panneau N sélectionné, [N sur total] ». Si on sélectionne un onglet avec VO + Espace, VoiceOver annonce juste le [numéro de l'onglet] tableau d'onglets.
   Note : lorsqu'on utilise les flèches de direction avec la navigation désactivée, VoiceOver sélectionne automatiquement l'onglet sur lequel est positionné le curseur. Si vous vous déplacez avec le raccourci VO + flèches, il faudra confirmer la sélection de l'onglet à l'aide des touches VO + Espace.
2. Sélectionner le troisième onglet à l'aide des flèches et utiliser la touche Tabulation pour aller dans le contenu de ce panneau.
   VoiceOver annonce : « lien, exemple de lien », le contenu du panneau 3.