aria-expanded
Das aria-expanded
Attribut wird auf einem Element gesetzt, um anzuzeigen, ob ein Steuerelement erweitert oder eingeklappt ist und ob die gesteuerten Elemente angezeigt oder versteckt sind.
Beschreibung
Es gibt mehrere Widgets, die erweitert und eingeklappt werden können, darunter Menüs, Dialoge und Akkordeon-Panels. Jedes dieser Objekte hat wiederum ein interaktives Element, das deren Öffnen und Schließen steuert. Das aria-expanded
Attribut wird auf dieses fokussierbare, interaktive Steuerelement angewendet, das die Sichtbarkeit des Objekts umschaltet.
Zum Beispiel wird aria-expanded
auf das übergeordnete Element in einem DOM-Baum angewendet, um anzuzeigen, ob sein Kindzweig angezeigt wird. Das übergeordnete Element steuert auch die Sichtbarkeit des zugehörigen Kindzweigs.
Es gibt zwei Deklarationen, die auf Objekte angewendet werden können, die die Sichtbarkeit eines anderen Objekts steuern: aria-controls
oder aria-owns
in Kombination mit aria-expanded
. Die aria-controls
und aria-owns
Attribute zeigen die Beziehung zwischen dem steuernden Element und dem gesteuerten Element an. Das aria-expanded
Attribut zeigt unterstützenden Technologien, ob das gesteuerte Element erweitert oder eingeklappt ist.
Verwenden Sie das aria-owns
Attribut auf den Elementen, die erweiterbare Gruppierungscontainer besitzen. Wenn der erweiterbare und einklappbare Gruppierungscontainer nicht von dem Element, das das aria-expanded
Attribut besitzt, verwaltet wird, verwenden Sie das aria-controls
Attribut, um stattdessen auf den Gruppierungscontainer zu verweisen.
Schaltflächen
Eine Schaltfläche, die ein Widget umschaltet, sollte aria-controls
auf die id
des umgeschalteten Widgets und aria-expanded
auf den aktuellen Zustand des Widgets setzen.
<button aria-expanded="false" aria-controls="widget1">Toggle widget</button>
Wenn das Widget sichtbar ist, gibt das steuernde Objekt diese Information weiter, indem aria-expanded="true"
darauf gesetzt wird. Der zugängliche Name des steuernden Objekts sollte diese Änderung widerspiegeln.
<button aria-expanded="true" aria-controls="widget1">Toggle widget</button>
Menü
Wenn ein menu
angezeigt wird, hat das Schaltflächenobjekt, das die Sichtbarkeit dieses Menüs umschaltet, aria-expanded="true"
gesetzt. Wenn das Menü verborgen ist, kann aria-expanded
weggelassen werden. Falls angegeben, wenn das Menü verborgen ist, sollte es auf aria-expanded="false"
gesetzt sein. Wenn ein untergeordnetes Menü nicht sichtbar ist, hat sein übergeordnetes menuitem
aria-expanded
. Es sollte auf true
gesetzt werden, wenn das untergeordnete Menü sichtbar ist.
Kombinationsfeld (Combobox)
Standardmäßig sind einige Rollen verborgen oder eingeklappt und andere Rollen sind standardmäßig offen oder erweitert. Elemente mit der Rolle combobox
haben standardmäßig den Wert false
für aria-expanded
. Wenn ein Kombinationsfeld-Popup nicht sichtbar ist, hat das Element mit der Rolle combobox
aria-expanded
auf false
gesetzt. Dies ist der Standardzustand. Wenn das Popup-Element sichtbar ist, sollte aria-expanded
auf true
gesetzt sein.
<label for="username">Username</label>
<input id="username" name="username" aria-describedby="username-desc" />
<button
aria-expanded="false"
aria-controls="username-desc"
aria-label="Help about username"
type="button">
<span aria-hidden="true">?</span>
</button>
<p id="username-desc" hidden>
Your username is the name that you use to log in to this service.
</p>
Hinweis:
Das Vorhandensein des aria-expanded
Attributs zeigt Kontrolle an. Vermeiden Sie, es auf Elemente zu setzen, die den erweiterten Zustand anderer Elemente nicht kontrollieren.
Treeitems
Jedes Element mit der Rolle treeitem
, das als übergeordneter Knoten fungiert, hat aria-expanded="false"
, wenn der Knoten geschlossen ist, und aria-expanded="true"
, wenn der Knoten geöffnet ist. Endknoten, Knoten ohne Nachkommen, sollten das aria-expanded
Attribut nicht haben, da sie, wenn sie es hätten, fälschlicherweise gegenüber unterstützenden Technologien als übergeordnete Knoten beschrieben würden.
Zeilen
Eine übergeordnete Zeile in einem treegrid
ist eine Zeile, die erweitert oder eingeklappt werden kann, um eine Gruppe von untergeordneten Zeilen in einer Tabelle oder einem Raster anzuzeigen oder zu verbergen. Jede übergeordnete Zeile hat den aria-expanded
Zustand entweder auf das Zeilenelement oder auf eine Zelle in der Zeile gesetzt. Wenn die untergeordneten Zeilen verborgen sind, ist aria-expanded="false"
gesetzt. aria-expanded="true"
ist gesetzt, wenn die untergeordneten Zeilen angezeigt werden. Zeilen, die die Anzeige von untergeordneten Zeilen nicht kontrollieren, sollten das aria-expanded
Attribut überhaupt nicht enthalten, da das Vorhandensein des Attributs die Zeilen als übergeordnete Zeilen definiert.
Werte
false
-
Das Gruppierungselement, das dieses Element besitzt oder kontrolliert, ist eingeklappt.
true
-
Das Gruppierungselement, das dieses Element besitzt oder kontrolliert, ist erweitert.
undefined
(standard)-
Das Element besitzt oder kontrolliert kein erweiterbares Gruppierungselement.
Zugehörige Schnittstellen
Element.ariaExpanded
-
Die
ariaExpanded
Eigenschaft, als Teil derElement
Schnittstelle, spiegelt den Wert desaria-expanded
Attributs wider. ElementInternals.ariaExpanded
-
Die
ariaExpanded
Eigenschaft, als Teil derElementInternals
Schnittstelle, spiegelt den Wert desaria-expanded
Attributs wider.
Zugehörige Rollen
Verwendet in Rollen:
Wird vererbt in Rollen:
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-expanded |
Siehe auch
aria-controls
aria-owns
aria-hidden
- Das HTML
hidden
Attribut