Accordéon et onglets en UX : définition et accessibilité ARIA

Accordéon et onglets : la définition en UX

Deux composants, un même principe : masquer une partie du contenu pour n'en montrer qu'un morceau à la fois. L'accordéon et les onglets rangent beaucoup d'information dans peu de place, et le visiteur ne lit que ce qui l'intéresse. Ce qui les distingue ? La disposition, et le comportement au clic. Tous deux appartiennent à la famille des composants d'interface réutilisables, comme un menu ou une fenêtre modale.

L'accordéon (accordion)

En anglais, on dit accordion. Les sections s'empilent verticalement, chacune coiffée d'un titre cliquable (souvent flanqué d'un chevron pointé vers le bas). Un clic, et le panneau qui contient le texte se déplie ; le chevron pivote pour signaler le nouvel état. Plusieurs panneaux ouverts en même temps, ou un seul ? Tout dépend du réglage.

Les onglets (tabs)

Pensez aux intercalaires d'un classeur. Les onglets alignent leurs libellés sur une ligne, et chaque clic affiche le contenu correspondant. À un instant donné, un seul panneau est visible : les autres sont cachés, pas empilés. L'utilisateur garde ainsi la vue d'ensemble des options, mais ne lit qu'une réponse à la fois.

À quoi servent ces composants sur un site qui doit vendre

Si vous dirigez une PME, l'enjeu n'a rien d'esthétique. Votre page de service doit répondre aux objections, détailler l'offre et rester courte à l'écran (surtout sur mobile). Avec un accordéon ou des onglets, le texte complet reste sur la page, donc lisible par Google, et vous épargnez au visiteur ce mur de paragraphes qui le fait fuir.

• Les FAQs en bas de page de service : chaque question se déplie et lève un frein à l'achat.
• La fiche technique d'un produit, avec un onglet par usage, matière ou dimension.
• Les grilles d'offres, chaque option étant décrite dans son propre panneau.
• Livraison, garantie, support : des conditions que certains visiteurs lisent en détail et que d'autres ignorent.

L'expérience utilisateur y gagne, le référencement aussi. Une FAQ en accordéon peut même porter des données structurées, pourvu que les questions soient réellement visibles sur la page. Et le contenu replié ? Google a indiqué à plusieurs reprises qu'il reste indexé, dans un accordéon comme dans un onglet, à condition d'être présent dans le code HTML au chargement.

Comment ça marche : aria, expanded et les bons boutons

Joli à l'écran, inutilisable au clavier ou au lecteur d'écran : c'est le sort de beaucoup d'accordéons. Le référentiel qui fait foi à l'international, l'ARIA Authoring Practices Guide publié par le W3C, décrit les best practices de chaque composant, dont les motifs accordion et tabs. En France, le RGAA et l'accessibilité web reposent sur les mêmes principes.

Un button placé dans un heading

Chaque titre d'accordéon doit être un vrai élément button, lui-même logé dans un titre de niveau adapté (un heading h3, par exemple). Pourquoi les deux ? Le titre donne aux lecteurs d'écran la structure de la page. Le bouton, lui, devient atteignable avec Tab et activable avec Entrée ou Espace, sans une ligne de code supplémentaire. Une div cliquable n'offre rien de tout ça.

L'attribut aria-expanded : true ou false

Posé sur le bouton, aria-expanded annonce l'état du panneau : true quand la section est ouverte, false quand elle est fermée. À chaque interaction, le script doit mettre la valeur à jour. Un bouton marqué aria-expanded=true sur un panneau fermé ment à l'utilisateur ! Selon la valeur, le lecteur d'écran prononce « réduit » ou « développé ».

Tout se joue sur ce détail. Pour qui voit l'écran, le chevron indique l'état ; pour qui l'écoute, l'attribut aria transmet la même information, et c'est ce qui sépare un composant décoratif d'un composant utilisable. Quant à l'icône, masquez-la aux technologies d'assistance avec aria-hidden, sinon elle sera lue comme du bruit.

aria-controls et le panneau

Via l'identifiant du panneau, aria-controls relie le bouton à ce qu'il pilote. On peut ajouter au panneau un rôle region et un aria-labelledby pointant vers le bouton, ce qui lui donne un nom clair. Une réserve, toutefois : quand l'accordéon compte beaucoup de sections, le guide du W3C déconseille de multiplier les régions, qui encombrent alors la navigation.

La navigation au clavier

• Tab saute d'un titre d'accordéon au suivant, puis entre dans le contenu ouvert.
• Entrée ou Espace ouvre (ou ferme) la section qui a le focus.
• En option, les flèches haut et bas déplacent le focus entre les titres d'un même accordéon.
• Début et Fin mènent au premier et au dernier titre.

Gardez toujours le focus visible. Supprimez le contour dans la feuille de style, et le composant devient inutilisable au clavier. Pour le styliser proprement, lisez notre article sur l'état focus d'un bouton.

Le cas des onglets ARIA

Avec les onglets, la logique change. Le conteneur reçoit le rôle tablist, chaque libellé le rôle tab, chaque panneau le rôle tabpanel. aria-selected vaut true sur l'onglet actif et false sur les autres, et chacun pointe vers son panneau avec aria-controls. On ne circule pas d'un onglet à l'autre avec Tab, mais avec les flèches gauche et droite ; Tab sert à entrer dans le panneau affiché.

Deux modes existent. Activation automatique : le panneau change dès que le focus atteint l'onglet. Activation manuelle : il faut appuyer sur Entrée ou Espace. Si l'affichage d'un panneau demande un chargement, je recommande sans hésiter le second, pour ne pas faire attendre l'utilisateur à chaque flèche.

Exemple concret : la page d'un artisan menuisier

Imaginez une PME de menuiserie qui fabrique des fenêtres à la cote de chaque ouverture. Sur sa page de service : présentation de l'offre, matériaux, délais, aides financières et une dizaine de questions récurrentes. Tout afficher d'un bloc ? Sur téléphone, la page n'en finirait plus.

Résultat : une page courte à parcourir, complète pour Google, lisible au clavier. Soignez la rédaction, et chaque question de l'accordéon répondra à une vraie hésitation du client. C'est là que la page commence à rapporter.

Les erreurs courantes avec un accordéon ou des onglets

D'où viennent la plupart des défauts ? De thèmes ou d'extensions installés il y a plusieurs ans, quand l'accessibilité passait au second plan. Parfois aussi d'une mauvaise lecture du besoin. Voici les erreurs que nous corrigeons le plus souvent lors d'une refonte ou d'une création de site.

Une div cliquable au lieu d'un bouton

L'erreur numéro un. À la souris, le titre réagit ; au clavier, rien, et le lecteur d'écran ne l'annonce même pas comme interactif. La correction est simple : un élément button natif, sans tabindex bricolé.

Un état qui ne suit pas l'affichage

Le panneau s'ouvre, mais aria-expanded reste figé à false (ou l'inverse). À l'œil, tout va bien ; l'information transmise, elle, est fausse. Confiez l'affichage et la valeur de l'attribut au même script.

Cacher l'essentiel

Prix, délai, bouton de contact : rien de tout cela n'a sa place dans un panneau fermé. Un accordéon range le secondaire, alors que l'information qui déclenche la décision doit rester sous les yeux. Plier une page entière en accordéon, c'est aussi imposer des dizaines de clics à quelqu'un qui voulait parcourir le texte d'un coup d'œil.

Des onglets pour des contenus qu'on veut comparer

Avec des onglets, il faut mémoriser le panneau précédent. Votre visiteur doit comparer deux offres ligne à ligne ? Un tableau fera mieux. Trop nombreux, les onglets passent à la ligne sur mobile et deviennent illisibles : au-delà de quelques libellés, laissez l'accordéon prendre le relais.

Des animations sans retenue

Une ouverture interminable lasse vite, et certains utilisateurs sont sensibles au mouvement. Mon conseil ? Une transition courte, désactivée quand le système demande de réduire les animations. Ça suffit largement.

Accordéon ou onglets : comment choisir

Tout dépend de la façon dont le visiteur lit. Contenus indépendants, consultés au cas par cas ? L'accordéon s'impose, et comme il s'empile verticalement, il s'adapte sans effort aux écrans étroits. Les onglets, eux, conviennent à quelques catégories parallèles, de longueur comparable, sur un écran assez large.

• Prenez l'accordéon pour une FAQ, des conditions détaillées ou toute liste de plus de cinq ou six sections.
• Réservez les onglets à deux à cinq variantes d'un même sujet, aux libellés courts.
• Sur mobile, beaucoup de sites transforment leurs onglets en accordéon. Choix cohérent, à condition que les deux versions respectent leurs attributs ARIA.
• Besoin d'un accordéon très simple ? Les éléments HTML details et summary offrent un comportement natif, accessible sans JavaScript.

Questions fréquentes