Accordéons

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.1 issus du document WAI-ARIA Authoring Practices 1.1, dont les recommandations n’ont pas encore été officialisées à ce jour.

À titre indicatif, les motifs de conception ARIA 1.0 restent détaillés dans le document WAI-ARIA Authoring Practices 1.0.

Sommaire

Principe

Les accordéons sont des composants dynamiques qui permettent d’optimiser l’affichage d’un contenu dans un espace réduit grâce à un système de « plier/déplier » appliqué sur un groupe de panneaux.

Ils sont contrôlables par l’utilisateur via une action sur le bouton qui surplombe le contenu de chaque panneau.

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

Socle HTML

<h2>
  <button aria-expanded="false" aria-controls="accordion-panel-1">Entête du panneau 1</button>
</h2>
<div id="accordion-panel-1">
  [Contenu du panneau 1 (replié)]
</div>

<h2>
  <button aria-expanded="true" aria-controls="accordion-panel-2">Entête du panneau 2</button>
</h2>
<div id="accordion-panel-2">
  [Contenu du panneau 2 (déplié)]
</div>

<h2>
  <button aria-expanded="false" aria-controls="accordion-panel-3">Entête du panneau 3</button>
</h2>
<div id="accordion-panel-3">
  [Contenu du panneau 3 (replié)]
</div>

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

Interactions au clavier

Entrée ou Espace

Remarque

Dans le socle HTML proposé sur cette fiche, des titres de niveau 2 (<h2>) sont utilisés pour baliser les entêtes des panneaux d’accordéon. Le niveau de ces titres est éventuellement à adapter en fonction du contexte d’intégration de ce composant : il est important de veiller à maintenir une hiérarchie des titres logique dans la page.

Ainsi, si un <h2> surplombe le système d’accordéon, chaque entête de panneau devient enfant de ce titre de niveau 2 et devra donc être balisé avec <h3>.

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. Collapsible Sections.
  2. Accordion example.
  3. Expand and Collapse using ARIA states.
  4. handorgel.

7 commentaires

  • Par Johan Ramon, le 4 octobre 2016 à 15h11.

    Code de la partie « Socle HTML » mis à jour le 04/10/2016.

    Répondre

  • Par Gaëtan, le 10 novembre 2016 à 11h31.

    Bonjour,

    Super notice, comme toutes les autres d’ailleurs :)

    Je me demandais, est-il préférable d’ajouter les différents rôles (tablist, tab, tabpanel) directement dans le markup HTML ou via JavaScript ?

    Merci d’avance pour ta réponse !

    Répondre

    • Par Johan Ramon, le 14 novembre 2016 à 9h59.

      Bonjour Gaëtan,

      Merci pour ton message.

      Concernant ta question, il est préférable d’ajouter les différents rôles via JavaScript.

      Ainsi, dans le cas où le composant est parcouru sans le support de JavaScript, l’utilisateur de lecteur d’écran (synthèse vocale et/ou plage braille) ne se voit plus restituer des infos du type « Onglet ». Ce qui est souhaité car sans JS le composant n’est plus un accordéon mais un contenu classique, sans interaction possible.

      Johan

      Répondre

  • Par Claire Bizingre, le 2 juillet 2017 à 21h09.

    Bonjour,

    Si je relis la page de référence du W3C (https://www.w3.org/TR/wai-aria-practices/#accordion), je ne vois pas cette notion de gestion de tablist et de tab et je vois une structure de bouton et de heading.

    Est-ce qu’il y a une autre ressource à considérer alors ?

    Merci pour votre éclairage !

    Répondre

  • Par Laurent Bracquart, le 10 juillet 2017 à 10h13.

    Bonjour Claire,

    C’est bien vu !

    Effectivement, comme tu le constates, les motifs de conception décrits dans nos fiches AcceDe Web diffèrent parfois de ceux proposés dans le document que tu cites : les WAI-ARIA Authoring Practices 1.1.

    La raison ? Une mise à jour de la spécification ARIA est en cours (passage de ARIA 1.0 à ARIA 1.1), et nos fiches s’appuient pour le moment sur les motifs de conception de la recommandation officielle, qui reste aujourd’hui la version ARIA 1.0.

    Suite à ton commentaire, nous allons rajouter un encart informatif en haut de chacune des fiches relatives à un motif de conception ARIA, et mettrons à jour progressivement ces dernières, à mesure que la spécification ARIA 1.1 se stabilisera.

    Belle journée à toi,

    Répondre

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

    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 11 juillet 2017 à 17h22.

    Mise à jour du contenu de la fiche pour s’appuyer sur les motifs de conception ARIA 1.1 le 11/07/2017.

    Répondre

Ajouter un commentaire

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

Haut de page