Ce composant permet d'implémenter des contenus en accordéon : le contenu de chaque panneau est affiché lorsque le titre du panneau est activé.

Restitution

• Chaque panneau doit posséder un nom accessible (ressource en anglais).
• le panneau actif et sa position dans la liste des panneaux doit être vocalisé.
• l'état affiché d'un panneau 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 :

• Sur le titre d'un panneau, les touches Espace et Entrée affichent ou ferment le panneau associé.
• Les flèches haut ou droite permettent de sélectionner le panneau précédent.
• Les flèches bas ou gauche permettent de sélectionner le panneau suivant.
• La touche Majuscule  +  Tabulation permet d'atteindre le premier titre de panneau affiché et les éléments interactifs du ou des panneaux affichés dans l'ordre de la séquence de tabulation (en avant ou en arrière).

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

Exemple d'accordion

Test de l'accordéon avec JAWS

Étape 1

1. Utiliser la touche Tabulation jusqu'à l'accordéon.
   JAWS active le mode formulaire et annonce : « Onglet, panneau 1, utiliser touche jaws + alt + r pour lire le descriptif. Pour activer cet onglet, barre d'espace ».
2. Se déplacer avec les flèches de direction d'un panneau à l'autre. JAWS annonce : « onglet panneau X ».

Étape 2

1. Activer le panneau avec la touche Entrée. JAWS annonce « onglet Panneau [x], sélectionné ».
2. Utiliser la touche Tabulation pour accéder au contenu du panneau.
   JAWS quitte le mode formulaire et annonce « document » et lit le contenu.
3. Sélectionner le deuxième onglet. JAWS lit le contenu du panneau.

Étape 3

1. Retourner dans la liste des onglets à l'aide des touches Majuscule + Tabulation. JAWS annonce : « onglet panneau X ».
2. Sortir de l'accordéon à l'aide de la touche Tabulation. Lorsqu'on quitte la liste des onglets, JAWS quitte le mode formulaire. Il n'annonce pas lorsqu'on quitte l'accordéon.

Test de l'accordéon avec NVDA

Étape 1

1. Utiliser la touche Tabulation jusqu'à l'accordéon.
   NVDA active le mode formulaire et annonce : « Onglet, panneau 1, onglet 1 sur 3 ».
2. Se déplacer avec les flèches de direction d'un panneau à l'autre. NVDA annonce : « panneau X, onglet X sur 3 ».

Étape 2

1. Activer le panneau avec la touche Entrée. NVDA annonce « Panneau [x] sur [total], sélectionné ».
2. Utiliser la touche Tabulation pour accéder au contenu du panneau.
   NVDA quitte le mode formulaire et annonce « fenêtre développée ».
3. Sélectionner le deuxième onglet. NVDA lit le contenu du panneau.

Étape 3

1. Retourner dans la liste des onglets à l'aide des touches Majuscule + Tabulation. NVDA annonce : « panneau X, onglet sélectionné, X sur total ».
2. Sortir de l'accordéon à l'aide de la touche Tabulation.

Test de l'accordéon avec VoiceOver

Étape 1

1. Utiliser la touche Tabulation jusqu'à l'accordéon. VoiceOver annonce : « panneau 1, onglet 1 sur 3 ».
2. Se déplacer avec les flèches de direction d'un panneau à l'autre. VoiceOver annonce : « panneau X, onglet X sur 3 ».

Étape 2

1. Activer le panneau avec les touches VO + Espace. L'appui sur la touche Entrée ne fonctionne pas. VoiceOver annonce : « appuyer Panneau [x], onglet [x] sur [total]».
2. Se positionner sur le contenu avec VO + flèche droite. Il faudra alors appuyer sur VO + Maj + flèche vers le bas pour interagir avec le contenu.
3. Utiliser les touches VO + flèche droite pour lire le contenu.
4. Retourner dans la liste des onglets à l'aide des touches Tabulation ou Majuscule + Tabulation. Sélectionner le deuxième onglet.
   VoiceOver lit le contenu du panneau avec les touches VO + flèche droite.

Étape 3

1. Retourner dans la liste des onglets à l'aide des touches Majuscule + Tabulation. VoiceOver annonce : « panneau X, onglet sélectionné, X sur total ».
2. Sortir de l'accordéon à l'aide de la touche Tabulation. VoiceOver n'annonce pas la sortie de l'accordéon.