ARIA : attribut aria-expanded
L'attribut aria-expanded est défini sur un élément pour indiquer si un contrôle est développé ou réduit, et si les éléments contrôlés sont affichés ou masqués.
Description
Plusieurs widgets peuvent être développés ou réduits, notamment les menus, boîtes de dialogue et panneaux d'accordéon. Chacun de ces objets possède un élément interactif qui contrôle leur ouverture et fermeture. L'attribut aria-expanded s'applique à ce contrôle interactif pouvant recevoir la sélection, qui bascule la visibilité de l'objet.
Par exemple, aria-expanded est appliqué à l'élément parent dans un arbre DOM pour indiquer si sa branche enfant est affichée. Le parent contrôle également la visibilité de la branche enfant associée.
Deux déclarations peuvent être appliquées aux objets qui contrôlent la visibilité d'un autre objet : aria-controls ou aria-owns combiné avec aria-expanded. aria-controls et aria-owns indiquent la relation entre l'élément contrôleur et l'élément contrôlé. aria-expanded indique aux technologies d'assistance si l'élément contrôlé est développé ou réduit.
Utilisez la propriété aria-owns sur les éléments qui possèdent des conteneurs de regroupement extensibles. Si le conteneur extensible/réductible n'est pas possédé par l'élément ayant l'attribut aria-expanded, utilisez la propriété aria-controls pour référencer le conteneur de regroupement.
Boutons
Un bouton qui bascule un widget doit avoir aria-controls défini sur l'id du widget basculé et aria-expanded défini sur l'état actuel du widget.
<button aria-expanded="false" aria-controls="widget1">
Afficher/masquer le widget
</button>
Lorsque le widget est visible, l'objet de contrôle transmet cette information via aria-expanded="true". Le nom accessible de l'objet de contrôle doit refléter ce changement.
<button aria-expanded="true" aria-controls="widget1">
Afficher/masquer le widget
</button>
Menu
Lorsqu'un menu est affiché, le bouton qui bascule la visibilité de ce menu a comme valeur aria-expanded="true". Lorsque le menu est masqué, aria-expanded peut être omis. S'il est spécifié lorsque le menu est masqué, il doit être défini à aria-expanded="false". Quand un sous-menu n'est pas visible, son parent menuitem possède aria-expanded. Il doit être défini à true lorsque le sous-menu est visible.
Zone de liste déroulante (Combobox)
Par défaut, certains rôles sont masqués ou réduits et d'autres sont ouverts ou développés. Les éléments avec le rôle combobox ont une valeur par défaut de aria-expanded à false. Quand la zone de liste déroulante n'est pas visible, l'élément avec le rôle combobox a aria-expanded à false. C'est l'état par défaut. Quand l'élément contextuel est visible, aria-expanded doit être défini à true.
<label for="username">Nom d'utilisateur</label>
<input id="username" name="username" aria-describedby="username-desc" />
<button
aria-expanded="false"
aria-controls="username-desc"
aria-label="Aide sur le nom d'utilisateur"
type="button">
<span aria-hidden="true">?</span>
</button>
<p id="username-desc" hidden>
Votre nom d'utilisateur est celui que vous utilisez pour vous connecter à ce
service.
</p>
Note :
La présence de l'attribut aria-expanded indique un contrôle. Évitez de l'inclure sur des éléments qui ne contrôlent pas l'état développé d'autres éléments.
Éléments d'arbre (Treeitems)
Chaque élément avec le rôle treeitem servant de nœud parent a aria-expanded="false" lorsque le nœud est fermé et aria-expanded="true" lorsqu'il est ouvert. Les nœuds finaux, sans nœuds descendants, ne doivent pas avoir l'attribut aria-expanded car, s'ils l'avaient, ils seraient incorrectement décrits comme nœuds parents aux technologies d'assistance.
Lignes
Une ligne parente dans une treegrid est une ligne pouvant être développée — ou réduite — pour afficher ou masquer un ensemble de lignes enfants dans un tableau ou une grille. Chaque ligne parente a l'état aria-expanded défini soit sur l'élément de ligne, soit sur une cellule contenue dans la ligne. Quand les lignes enfants sont masquées, aria-expanded="false" est défini. aria-expanded="true" est défini lorsque les lignes enfants sont affichées. Les lignes qui ne contrôlent pas l'affichage de lignes enfants ne doivent pas inclure l'attribut aria-expanded car cela les définirait comme lignes parentes.
Valeurs
false-
L'élément de regroupement que cet élément possède ou contrôle est réduit.
true-
L'élément de regroupement que cet élément possède ou contrôle est développé.
undefined(par défaut)-
L'élément ne possède ni ne contrôle un élément de regroupement extensible.
Interfaces associées
Element.ariaExpanded-
La propriété
ariaExpanded, partie de l'interfaceElement, reflète la valeur de l'attributaria-expanded. ElementInternals.ariaExpanded-
La propriété
ariaExpanded, partie de l'interfaceElementInternals, reflète la valeur de l'attributaria-expanded.
Rôles associés
Utilisé dans les rôles :
Hérité dans les rôles :
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-expanded |
Voir aussi
- L'attribut ARIA
aria-controls - L'attribut ARIA
aria-owns - L'attribut ARIA
aria-hidden - L'attribut HTML
hidden