Composant d'interface qui affiche une liste de sections repliables. Chaque section comporte un en-tête cliquable qui révèle ou masque son contenu. Un seul panneau peut être ouvert à la fois dans la variante exclusive, plusieurs dans la variante indépendante. L'accordéon réduit la charge cognitive en cachant l'information secondaire. Il porte ce nom par analogie avec l'instrument de musique dont les soufflets se déplient.
On l'utilise pour les FAQ, les filtres de recherche et les formulaires longs. L'état par défaut (ouvert ou fermé) dépend du contexte : si la majorité des utilisateurs a besoin de l'information, le panneau doit être ouvert. Le chevron ou le signe +/- indique l'état actuel, pas l'action. L'accessibilité exige les attributs ARIA `expanded` et `controls` sur chaque en-tête. Sur mobile, l'accordéon évite le scroll infini en structurant le contenu verticalement.
Apple utilise des accordéons sur ses pages produit pour détailler les spécifications techniques. Chaque section (Affichage, Puce, Batterie) s'ouvre indépendamment, permettant la comparaison entre modèles.