aria-expanded

Das aria-expanded Attribut wird auf ein 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, einschließlich Menüs, Dialoge und Akkordeonpanels. Jedes dieser Objekte hat wiederum ein interaktives Element, das ihre Öffnung und Schließung steuert. Das aria-expanded Attribut wird auf dieses fokussierbare, interaktive Steuerelement angewendet, das die Sichtbarkeit des Objekts umschaltet.

Beispielsweise wird aria-expanded auf das übergeordnete Element in einem DOM-Baum angewendet, um anzuzeigen, ob sein untergeordnetes Element angezeigt wird. Das übergeordnete Element steuert ebenfalls die Sichtbarkeit des zugehörigen untergeordneten Elements.

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. aria-controls und aria-owns geben die Beziehung zwischen dem steuernden und dem gesteuerten Element an. aria-expanded zeigt der unterstützenden Technologie, 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 mit dem aria-expanded Attribut besessen wird, verwenden Sie stattdessen das aria-controls Attribut, um auf den Gruppierungscontainer zu verweisen.

Schaltflächen

Eine Schaltfläche, die ein Widget umschaltet, sollte aria-controls mit der id des umgeschalteten Widgets und aria-expanded mit dem aktuellen Zustand des Widgets haben.

html

<button aria-expanded="false" aria-controls="widget1">Toggle widget</button>

Wenn das Widget sichtbar ist, teilt das steuernde Objekt diese Information mit, indem aria-expanded="true" darauf gesetzt wird. Der zugängliche Name des steuernden Objekts sollte diese Änderung widerspiegeln.

html

<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ü versteckt ist, kann aria-expanded weggelassen werden. Wenn es angegeben wird, wenn das Menü versteckt ist, sollte es auf aria-expanded="false" gesetzt werden. Wenn ein untergeordnetes Menü nicht sichtbar ist, hat dessen übergeordnetes menuitem aria-expanded. Es sollte auf true gesetzt werden, wenn das untergeordnete Menü sichtbar ist.

Kombinationsfeld

Standardmäßig sind einige Rollen versteckt oder standardmäßig eingeklappt, während andere Rollen standardmäßig geöffnet oder erweitert sind. Elemente mit der Rolle combobox haben einen Standardwert von 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 werden.

html

<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: Die Anwesenheit des aria-expanded Attributs deutet auf Kontrolle hin. Vermeiden Sie es, es auf Elemente zu setzen, die nicht den erweiterten Zustand anderer Elemente steuern.

Baumelemente

Jedes Element mit der Rolle treeitem, das als übergeordneter Knoten dient, hat aria-expanded="false", wenn der Knoten im geschlossenen Zustand ist und aria-expanded="true", wenn der Knoten im offenen Zustand ist. Endknoten, Knoten ohne Nachkommen, sollten das aria-expanded Attribut nicht haben, da sie, wenn sie es hätten, fälschlicherweise 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 Reihe von untergeordneten Zeilen in einer Tabelle oder einem Raster anzuzeigen oder zu verbergen. Jede übergeordnete Zeile hat den aria-expanded Zustand entweder auf dem Zeilenelement oder auf einer in der Zeile enthaltenen Zelle gesetzt. Wenn die untergeordneten Zeilen versteckt sind, wird aria-expanded="false" gesetzt. aria-expanded="true" wird gesetzt, wenn die untergeordneten Zeilen angezeigt werden. Zeilen, die die Anzeige von untergeordneten Zeilen nicht steuern, sollten das aria-expanded Attribut überhaupt nicht enthalten, da das Attribut die Zeilen als übergeordnete Zeilen definiert.

Werte

false: Das Gruppierungselement, das dieses Element besitzt oder steuert, ist eingeklappt.
true: Das Gruppierungselement, das dieses Element besitzt oder steuert, ist erweitert.
undefined (Standard): Das Element besitzt oder steuert kein erweiterbares Gruppierungselement.

Zugehörige Schnittstellen

Element.ariaExpanded: Die ariaExpanded Eigenschaft, Teil der Element Schnittstelle, spiegelt den Wert des aria-expanded Attributs wider.
ElementInternals.ariaExpanded: Die ariaExpanded Eigenschaft, Teil der ElementInternals Schnittstelle, spiegelt den Wert des aria-expanded Attributs wider.

Zugehörige Rollen

Verwendet in Rollen:

Vererbt in Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-expanded