Accordions (Accordéons)

Les accordéons sont des composants dynamiques qui permettent de mieux organiser le contenu en sections distinctes.Ils permettent aussi d’optimiser l’affichage de ce contenu dans un espace réduit grâce à un système de « plier/déplier » appliqué à ces sections. L’un des principaux avantages est que les accordéons permettent aux utilisateurs d’avoir une vue d’ensemble avant de se concentrer sur les détails.

Usage

Les accordéons sont utilisés pour gérer de grandes quantités de contenus. Ce contenu est divisé et réduit en sections logiques disposées verticalement.
L’utilisateur peut afficher le contenu de chaque section suite à un tap sur celle-ci. Ce contenu s’étend en poussant le reste de la page vers le bas.
Les accordéons sont particulièrement utiles pour des interfaces Mobile first car ils réduisent les contenus volumineux dans de petits espaces.

Accordéon avec chevron

Cet accordéon est le plus courant.

L’accordéon avec chevron peut être autofermant ou non. Autofermant : une seule des sections est ouverte à la fois. Quand une nouvelle section s’ouvre, la précédente section se ferme.
Lors d’un nouveau tap sur une section ouverte d’un accordéon avec chevron standard, le contenu déployé est masqué. Ce n’est pas le cas pour accordéon avec chevron autofermant.

Accordéon-radio

L’accordéon-radio contient un bouton radio visible à la place du chevron.

Il est forcément autofermant.
Suite à un tap sur une section, il n’est plus possible qu’aucune des sections ne soit ouverte.

Bonnes pratiques

Lors de l’ouverture d’une page, aucune ou une seule des sections doit être ouverte.
Le contenu doit être organisé de manière à simplifier la navigation.
Cacher un contenu via un accordéon n’améliore pas nécessairement l’expérience utilisateur. Ils peuvent provoquer une désorientation. De plus, le nombre d’interactions augmente.
N’utilisez pas d’accordéon lorsque tout le contenu doit être vu sur une même page. Si la page est extrêmement longue, l’accordéon n’est peut-être pas approprié. Une approche différente de la navigation et de la mise en page devra être pensée.
L’accordéon avec chevron est très souvent utilisé dans les foires aux questions.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
composant Radio-buttons (boutons-radio) (pour l’accordéon-radio).

Transition = hauteur maximale de contenu !

Un effet de transition est appliqué aux éléments de l’accordéon lors de l’ouverture. Pour le déclenchement de ces ouvertures, nous avons opté pour des accordéons sans javascript. Toutefois, à cause d’une limitation de CSS (les transitions n’acceptent pas la valeur « auto »), il n’est pas possible d’avoir à la fois un effet de transition et une hauteur automatique en fonction du contenu. Nous avons donc choisi d’appliquer un max-height de 1 000px. Il pourrait arriver que votre contenu soit supérieur à cette hauteur (notamment sur mobile où la largeur est moindre) et dans ce cas vous aurez un bug d’affichage (le contenu sortant de cette hauteur sera masqué).

Par conséquent, si vous rencontrez ce problème, vous avez 2 solutions :

Désactiver la transition en ajoutant la classe su-no-transition à côté des classes su-accordion-chevron ou su-accordion-radio.
Rajouter du style dans vos propres CSS pour surcharger la hauteur max initiale (sélecteur à surcharger : .sipaui [class*=su-accordion]:not(.su-no-transition) .su-accordion-item input:checked~.su-accordion-content).

Accordéon avec chevron

L’accordéon avec chevron est le type d’accordéon le plus commun. Il peut servir pour des glossaires, des FAQ… En fonction des cas, il peut être autofermant ou non. Par ailleurs, une version spéciale « Definition-list » existe avec les balises <dl>, <dd> et <dt> pour avoir du code sémantique quand nécessaire (dans le glossaire…).

Standard

Cet accordéon se construit avec ces 3 classes : su-accordion-chevron, su-accordion-item et su-accordion-content. La première classe, su-accordion-chevron encadre l’ensemble de l’accordéon, la seconde, su-accordion-item encadre chaque volet et su-accordion-content est affectée à la zone affichée/masquée dans chaque volet.

Il y a une dernière classe utile : su-no-transition. Elle sert à désactiver l’effet de transition sur les volets de l’accordéon. Pour en savoir plus, cf. l’encart Transition = hauteur maximale de contenu ! en haut de cet article.

Le fonctionnement de l’ouverture / fermeture s’appuie sur la présence d’une case à cocher qui est masquée et d’un label. Quand la case est cochée, le contenu est affiché et quand elle est décochée, le contenu est masqué.

La gestion de l’accessibilité sur ce genre de composant dynamique est à la fois très importante pour les utilisateurs concernés et complexe à mettre en œuvre. C’est pourquoi elle fait l’objet d’un point spécifique sur cette page.

<div class="su-accordion-chevron">
    <div class="su-accordion-item">
        <input type="checkbox" id="accordion-radio1" name="nom1">
        <label for="accordion-radio1">Label court</label>
        <div class="su-accordion-content">
            <p class="su-text-small">Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="checkbox" id="accordion-radio2" name="nom1">
        <label for="accordion-radio2">Label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long</label>
        <div class="su-accordion-content">
            <p class="su-text-small">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="checkbox" id="accordion-radio3" name="nom1">
        <label for="accordion-radio3">
            <div style="display: flex; align-items: center;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="30px" height="30px" style="margin-right: 10px;"><path d="M36.8 5l-4.4-.5V2.9c0-.9-1.3-1.1-1.8-1.1-1.9-.3-4.9-.1-6.8.3-.4.1-1.3.3-1.6.9V1.7c0-1-1.4-1.3-2.6-1.5-2.5-.4-5.9-.1-7.4.5-.2.1-.9.4-1 1v1c-1.7-.2-3.6-.1-4.5.3-.5.2-.7.5-.7.8v1.3l-3 1c-.3.1-.5.4-.5.7v21.8c0 .2.1.4.2.5l10.9 10.7h.6L37 32.5c.3-.1.5-.4.5-.7V5.7c0-.4-.3-.7-.7-.7zm-6.4-1.8c.2 0 .4.1.5.1v1l-5.3-.6v-.4c1.6-.2 3.6-.3 4.8-.1zM19.5 1.7c.8.1 1.2.2 1.3.3v1.3L15 2.6v-1c1.4-.1 3.1-.1 4.5.1zM36 31.2l-21.1 7V4.1L36 6.4v24.8z"/><path d="M30.2 9.2v7l-6.2.4v-1.2l5.5-.2V8.8c-4.4-2-9.6 1.6-11.2 8.4-1.5 6.5 1.2 12.6 5.7 13.8v-7.6l6.2-1v1.1l-5.4.9v6.8c4.4.6 8.5-3.8 9.6-9.4 1-5.1-.7-10.4-4.2-12.6z"/></svg>
                Label avec image
            </div>
        </label>
        <div class="su-accordion-content">
            <p class="su-text-small">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
            <p class="su-text-small">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.</p>
        </div>
    </div>
</div>

Standard autofermant

Ici, c’est exactement la même chose que le cas standard ci-dessus, sauf que les cases à cocher sont remplacées par des boutons-radio.

<div class="su-accordion-chevron">
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio4" name="nom2" checked>
        <label for="accordion-radio4">Label court</label>
        <div class="su-accordion-content">
            <p class="su-text-small">Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio5" name="nom2">
        <label for="accordion-radio5">Label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long</label>
        <div class="su-accordion-content">
            <p class="su-text-small">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio6" name="nom2">
        <label for="accordion-radio6">
            <div style="display: flex; align-items: center;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="30px" height="30px" style="margin-right: 10px;"><path d="M36.8 5l-4.4-.5V2.9c0-.9-1.3-1.1-1.8-1.1-1.9-.3-4.9-.1-6.8.3-.4.1-1.3.3-1.6.9V1.7c0-1-1.4-1.3-2.6-1.5-2.5-.4-5.9-.1-7.4.5-.2.1-.9.4-1 1v1c-1.7-.2-3.6-.1-4.5.3-.5.2-.7.5-.7.8v1.3l-3 1c-.3.1-.5.4-.5.7v21.8c0 .2.1.4.2.5l10.9 10.7h.6L37 32.5c.3-.1.5-.4.5-.7V5.7c0-.4-.3-.7-.7-.7zm-6.4-1.8c.2 0 .4.1.5.1v1l-5.3-.6v-.4c1.6-.2 3.6-.3 4.8-.1zM19.5 1.7c.8.1 1.2.2 1.3.3v1.3L15 2.6v-1c1.4-.1 3.1-.1 4.5.1zM36 31.2l-21.1 7V4.1L36 6.4v24.8z"/><path d="M30.2 9.2v7l-6.2.4v-1.2l5.5-.2V8.8c-4.4-2-9.6 1.6-11.2 8.4-1.5 6.5 1.2 12.6 5.7 13.8v-7.6l6.2-1v1.1l-5.4.9v6.8c4.4.6 8.5-3.8 9.6-9.4 1-5.1-.7-10.4-4.2-12.6z"/></svg>
                Label avec image
            </div>
        </label>
        <div class="su-accordion-content">
            <p class="su-text-small">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
            <p class="su-text-small">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.</p>
        </div>
    </div>
</div>

Version « Definition-list »

Pour cet accordéon sémantique on est obligé d’utiliser les balises <dl>, <dd> et <dt>. Cela ajoute donc un niveau autour du label.

<dl class="su-accordion-chevron">
    <div class="su-accordion-item">
        <input type="checkbox" id="accordion-radio7" name="nom3">
        <dt>
            <label for="accordion-radio7">Label court</label>
        </dt>
        <dd class="su-accordion-content">
            <p class="su-text-small">Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </dd>
    </div>
    <div class="su-accordion-item">
        <input type="checkbox" id="accordion-radio8" name="nom3">
        <dt>
            <label for="accordion-radio8">Label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long</label>
        </dt>
        <dd class="su-accordion-content">
            <p class="su-text-small">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </dd>
    </div>
    <div class="su-accordion-item">
        <input type="checkbox" id="accordion-radio9" name="nom3">
            <dt>
                <label for="accordion-radio9">
                <div style="display: flex; align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="30px" height="30px" style="margin-right: 10px;"><path d="M36.8 5l-4.4-.5V2.9c0-.9-1.3-1.1-1.8-1.1-1.9-.3-4.9-.1-6.8.3-.4.1-1.3.3-1.6.9V1.7c0-1-1.4-1.3-2.6-1.5-2.5-.4-5.9-.1-7.4.5-.2.1-.9.4-1 1v1c-1.7-.2-3.6-.1-4.5.3-.5.2-.7.5-.7.8v1.3l-3 1c-.3.1-.5.4-.5.7v21.8c0 .2.1.4.2.5l10.9 10.7h.6L37 32.5c.3-.1.5-.4.5-.7V5.7c0-.4-.3-.7-.7-.7zm-6.4-1.8c.2 0 .4.1.5.1v1l-5.3-.6v-.4c1.6-.2 3.6-.3 4.8-.1zM19.5 1.7c.8.1 1.2.2 1.3.3v1.3L15 2.6v-1c1.4-.1 3.1-.1 4.5.1zM36 31.2l-21.1 7V4.1L36 6.4v24.8z"/><path d="M30.2 9.2v7l-6.2.4v-1.2l5.5-.2V8.8c-4.4-2-9.6 1.6-11.2 8.4-1.5 6.5 1.2 12.6 5.7 13.8v-7.6l6.2-1v1.1l-5.4.9v6.8c4.4.6 8.5-3.8 9.6-9.4 1-5.1-.7-10.4-4.2-12.6z"/></svg>
                    Label avec image
                    </div>
                </label>
            </dt>
        <dd class="su-accordion-content">
            <p class="su-text-small">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
            <p class="su-text-small">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.</p>
        </dd>
    </div>
</dl>

Accordéon-radio

L’accordéon-radio est un type plus particulier. Il peut servir, par exemple, pour des sous-parties d’un formulaire, liées à un choix de l’utilisateur (comme le choix d’un moyen de paiement qui ouvre les paramètres liés à ce choix). Comme pour les boutons-radio il ne peut y avoir qu’une seule partie de l’accordéon active à la fois. Chaque partie est donc autofermante.

Standard

Comme l’accordéon avec chevron cet accordéon se construit avec 3 classes. Ce sont d’ailleurs les mêmes à l’exception de la première, su-accordion-radio qui remplace su-accordion-chevron. Il a aussi besoin du composant radio-buttons qui sert à activer l’effet d’accordéon et est affiché pour renforcer visuellement la logique de fonctionnement.

Lui aussi peut utiliser la classe su-no-transition pour désactiver l’effet de transition sur les volets de l’accordéon. Pour en savoir plus, cf. l’encart Transition = hauteur maximale de contenu ! en haut de cet article.

<div class="su-accordion-radio">
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio10" name="nom4" checked>
        <label for="accordion-radio10">Label court</label>
        <div class="su-accordion-content">
            <p>Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio11" name="nom4">
        <label for="accordion-radio11">Label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long label long</label>
        <div class="su-accordion-content">
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio12" name="nom4">
        <label for="accordion-radio12">
            <div style="display: flex; align-items: center;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="30px" height="30px" style="margin-right: 10px;"><path d="M36.8 5l-4.4-.5V2.9c0-.9-1.3-1.1-1.8-1.1-1.9-.3-4.9-.1-6.8.3-.4.1-1.3.3-1.6.9V1.7c0-1-1.4-1.3-2.6-1.5-2.5-.4-5.9-.1-7.4.5-.2.1-.9.4-1 1v1c-1.7-.2-3.6-.1-4.5.3-.5.2-.7.5-.7.8v1.3l-3 1c-.3.1-.5.4-.5.7v21.8c0 .2.1.4.2.5l10.9 10.7h.6L37 32.5c.3-.1.5-.4.5-.7V5.7c0-.4-.3-.7-.7-.7zm-6.4-1.8c.2 0 .4.1.5.1v1l-5.3-.6v-.4c1.6-.2 3.6-.3 4.8-.1zM19.5 1.7c.8.1 1.2.2 1.3.3v1.3L15 2.6v-1c1.4-.1 3.1-.1 4.5.1zM36 31.2l-21.1 7V4.1L36 6.4v24.8z"/><path d="M30.2 9.2v7l-6.2.4v-1.2l5.5-.2V8.8c-4.4-2-9.6 1.6-11.2 8.4-1.5 6.5 1.2 12.6 5.7 13.8v-7.6l6.2-1v1.1l-5.4.9v6.8c4.4.6 8.5-3.8 9.6-9.4 1-5.1-.7-10.4-4.2-12.6z"/></svg>
                Label avec image
            </div>
        </label>
        <div class="su-accordion-content">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.</p>
        </div>
    </div>
</div>

Accordéon inactif

Pour rendre l’accordéon-radio inactif, il faut ajouter la classe su-disabled à su-accordion-radio et la valeur disabled sur chaque bouton-radio.

<div class="su-accordion-radio su-disabled">
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio13" name="nom5" disabled>
        <label for="accordion-radio13">Label 1</label>
        <div class="su-accordion-content">
            <p>Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio14" name="nom5" disabled>
        <label for="accordion-radio14">Label 2</label>
        <div class="su-accordion-content">
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio15" name="nom5" disabled>
        <label for="accordion-radio15">Label 3</label>
        <div class="su-accordion-content">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
    </div>
</div>

Volet inactif

Pour rendre uniquement un volet de l’accordéon-radio inactif, la méthode est identique, mais en mettant la classe su-disabled sur le su-accordion-item concerné et la valeur disabled sur son bouton-radio.

<div class="su-accordion-radio">
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio16" name="nom6" checked>
        <label for="accordion-radio16">Label 1</label>
        <div class="su-accordion-content">
            <p>Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio17" name="nom6">
        <label for="accordion-radio17">Label 2</label>
        <div class="su-accordion-content">
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
    <div class="su-accordion-item su-disabled">
        <input type="radio" id="accordion-radio18" name="nom6" disabled>
        <label for="accordion-radio18">Label 3</label>
        <div class="su-accordion-content">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
        </div>
    </div>
</div>

Accessibilité

Pour permettre aux accordéons d’être accessibles, il faut leur ajouter 2 ID et 3 attributs aria :

un ID sur le titre déclencheur,
un ID sur la balise du contenu,
aria-controls qui indique quel contenu est affiché / masqué par le déclencheur et attend l’ID de ce contenu (p. ex : aria-controls="contenu_1"),
aria-expanded qui précise l’état et attend une valeur booléenne (p. ex : false),
aria-labelledby qui indique par quoi le contenu répond et attend l’ID du déclencheur.

Les 2 premiers sont donc à positionner sur l’élément le plus signifiant du déclencheur, à savoir le <label> en standard ou le <dt> contenant le <label> pour le cas en definition-list. Le dernier est à mettre sur le contenu.

Les accordéons SipaUI sont des accordéons qui fonctionnent sans JavaScript. Toutefois, aria-expanded ayant une valeur changeante, le JS sera indispensable pour lui. Il faut donc lui ajouter un déclencheur s’appuyant sur le composant JS toggleattribute pour changer sa valeur (pour plus d’infos sur ce composant JS de SipaUI, se référer à sa documentation).

Exemple standard :

On utilise donc ici sur la balise <label> pour placer les attributs aria, ainsi que ce code : data-sutoggleattribute='{"attr":"aria-expanded","val":"true","val2":"false"}' où l’on passe en paramètre l’attribut visé et les 2 valeurs possibles. Ce code autoréférence la balise sur laquelle il est.

<div class="su-accordion-chevron">
    <div class="su-accordion-item">
        <input type="checkbox" id="accordion-radio19" name="nom7">
        <label id="titre_1" for="accordion-radio19" aria-controls="contenu_1" aria-expanded="false" data-sutoggleattribute='{"attr":"aria-expanded","val":"true","val2":"false"}'>Label court</label>
        <div class="su-accordion-content" id="contenu_1" aria-labelledby="titre_1">
            <p class="su-text-small">Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
</div>

Exemple definition-list :

Dans ce cas, la balise <dt> est sémantiquement reliée à la balise <dd>. Il est donc préférable de mettre les attributs aria et le code JS sur ce <dt> plutôt que sur le <label>.

<div class="su-accordion-chevron">
    <div class="su-accordion-item">
        <dt id="titre_2" aria-controls="contenu_2" aria-expanded="false" data-sutoggleattribute='{"attr":"aria-expanded","val":"true","val2":"false"}'>
            <input type="checkbox" id="accordion-radio20" name="nom8">
            <label for="accordion-radio20">Label court</label>
        </dt>
        <dd class="su-accordion-content" id="contenu_2"  aria-labelledby="titre_2">
            <p class="su-text-small">Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </dd>
    </div>
</div>

Exemple avec un accordéon-radio ou accordéon-chevron autofermant :

Le cas de l’accordéon-radio (ou de l’accordéon-chevron auto-fermant) est un cas plus particulier. En effet, vu qu’il agit sur les autres accordéons du groupe, le code qui change les valeurs de aria-expanded doit faire de même. Il faut donc un déclencheur avec 2 actions : la première change la valeur de tous les labels, la seconde change celle du label cliqué. Ce qui donne : sutoggleattribute='[{"sel":"#accordeon-radio-accessible-1 .su-accordion-item > label","attr":"aria-expanded","val":"false","force":1},{"attr":"aria-expanded","val":"true","force":1}]'. sel permet de passer le chemin pour atteindre tous les labels concernés, et force sert à empêcher l’interversion automatique en forçant l’application de la valeur.

<div id="accordeon-radio-accessible-1" class="su-accordion-radio">
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio21" name="nom9" checked>
        <label id="titre_3" for="accordion-radio21" aria-controls="contenu_3" aria-expanded="true" data-sutoggleattribute='[{"sel":"#accordeon-radio-accessible-1 .su-accordion-item > label","attr":"aria-expanded","val":"false","force":1},{"attr":"aria-expanded","val":"true","force":1}]'>Label court</label>
        <div id="contenu_3" class="su-accordion-content"  aria-labelledby="titre_3">
            <p>Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <div class="su-accordion-item">
        <input type="radio" id="accordion-radio22" name="nom9">
        <label id="titre_4" for="accordion-radio22" aria-controls="contenu_4" aria-expanded="false" data-sutoggleattribute='[{"sel":"#accordeon-radio-accessible-1 .su-accordion-item > label","attr":"aria-expanded","val":"false","force":1},{"attr":"aria-expanded","val":"true","force":1}]'>Label court</label>
        <div id="contenu_4" class="su-accordion-content"  aria-labelledby="titre_4">
            <p>Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
</div>

Liste des classes disponibles

su-accordion-chevron
su-accordion-radio
su-accordion-item
su-accordion-content
su-no-transition