<button> ou ayant un role="button";
<button> d'entête d'accordéon est imbriqué dans un élément ayant le role="heading" possédant l'attribut aria-level avec la valeur approprié à son niveau selon l'architecture d'information de la page :
aria-level implicite, comme les en-têtes de sections, l'en-tête de section devrait être privilégié;
<button> est le seul élément à l'intérieur de l'en-tête de section. Autrement dit, s'il existe d'autres éléments présentés visuellement, ils ne sont pas inclus dans l'en-tête de section;
<button> ayant l'attribut aria-expanded possède la valeur true. Si le panneau de contenu n'est pas visible, aria-expanded possède la valeur false;
<button> de l'entête possède l'attribut aria-disabled avec la valeur true;
role="region" et un attribut aria-labelledby ayant la valeur référant au <button> qui contrôle l'affichage du panneau :
role="region" dans le cas ou il est possible d'avoir une prolifération des régions repères comme dans le cas où un accordéon peut contenir plus de 6 panneaux pouvant être déplié en même temps;role="region" est utile pour aider les utilisateurs de lecteur d'écran à percevoir la structure lorsque des panneaux de contenu contiennent des éléments d'en-tête de section ou un accordéon imbriqué.Test d'un paragraphe avec élément focussable avant les accordéons.
Élément focussable dans l'accordéon au début.
Cat ipsum dolor sit amet, favor packaging over toy intently sniff hand curl up and sleep on the freshly laundered towels chase after silly colored fish toys around the house. Always hungry. I am the best need to chase tail purr for no reason meow meow.
Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now hopped up on catnip, yet gnaw the corn cob for instantly break out into full speed gallop across the house for no reason destroy the blinds. Fall asleep on the washing machine plays league of legends with tail in the air.
Test d'un paragraphe avec élément focussable après les accordéons.
| Touche | Fonction |
|---|---|
| Espace ou Entrer | Lorsque le focus est déposé sur l'entête de l'accordéon d'une section plié, ouvrir la section. |
| Flèche du bas |
|
| Flèche du haut |
|
| Début | Lorsque le focus est déposé sur un entête d'un accordéon, déplacer le focus sur l'entête du premier accordéon. |
| Fin | Lorsque le focus est déposé sur un entête d'un accordéon, déplacer le focus sur l'entête du premier accordéon. |
| Ctrl + Page Suivante |
|
| Ctrl + Page Précédente |
|
| Rôle | Attribut | Élément | Utilisation |
|---|---|---|---|
presentation |
<dl> |
Indique que l'élément <dl> est utilisé pour contrôler la présentation et ne représente pas une liste de définition. |
|
heading |
<dt> |
Identifie l'élément comme l'en-tête de section à l'accordéon. | |
region |
<dd> |
Crée une zone repère contenant le contenu de l'accordéon actuellement déplié. | |
aria-level |
<dt> |
Permet de péciser le niveau de l'en-tête de section de l'accordéon conformément à l'architecture d'information de la page. | |
aria-controls |
<button> |
Permet, pour un contrôle, de référer à l'identifiant de l'élément contrôlé par celui-ci. | |
aria-expanded |
<button> |
Permet d'annoncer l'état Plié / Déplié | |
aria-labelledby |
<dd> |
Permet de libeller le contenu de l'accordéon à son en-tête. | |
aria-hidden |
<dd> |
Permet de cacher ou afficher du contenu au lecteur d'écran. |