aria-controls
Die globale aria-controls
-Eigenschaft identifiziert das Element (oder die Elemente), dessen Inhalt oder Vorhandensein von dem Element gesteuert wird, auf dem dieses Attribut gesetzt ist.
Beschreibung
Wenn ein interaktives Widget oder Element, sei es ein Combobox, Tab, Button usw., verwendet wird, um ein anderes Element oder eine Komponente in einem Dokument oder einer Anwendung anzupassen oder zu verändern, kann das aria-controls
-Attribut verwendet werden, um das entsprechende Element oder die entsprechenden Elemente programmatisch mit dem steuernden Element zu verknüpfen. Das aria-controls
-Attribut identifiziert das Element (oder die Elemente), dessen Inhalt oder Anwesenheit von dem Element gesteuert wird, auf dem das Attribut gesetzt ist, unabhängig davon, welche Art von Interaktion das beeinflusste Verhalten auslöst.
Ein combobox-Element hat aria-controls
auf einen Wert gesetzt, der auf das Element verweist, das als Popup dient. Das aria-controls
muss nur gesetzt werden, wenn das Popup sichtbar ist, es ist jedoch gültig und einfacher, ein unsichtbares Element zu referenzieren.
Weitere Beispiele für Steuerungen umfassen:
- Die Button-Teile eines Accordion-Widgets, die die Sichtbarkeit ihres zugehörigen Panel-Inhalts umschalten. Jeder Button kann ein
aria-controls
spezifiziert haben, das auf die ID des Elements verweist, das den mit der Steuerung verbundenen Inhalt enthält. - Ein Element mit der Rolle
scrollbar
: Der Scrollbalken benötigt einaria-controls
-Attribut, das auf die ID des Elements verweist, das er steuert. - Eine Gruppe von Tabs, die jeweils ein anderes Tab-Panel anzeigen: Jedes Element mit
role="tab"
hat einaria-controls
-Attribut, das auf sein zugehörigestabpanel
verweist.
Beispiel
In diesem Tab-Beispiel steuert jeder Tab ein Tab-Panel:
<div class="tab-interface">
<div role="tablist" aria-label="Sample Tabs">
<span
role="tab"
aria-selected="true"
aria-controls="panel-1"
id="tab-1"
tabindex="0">
First Tab
</span>
<span
role="tab"
aria-selected="false"
aria-controls="panel-2"
id="tab-2"
tabindex="-1">
Second Tab
</span>
<span
role="tab"
aria-selected="false"
aria-controls="panel-3"
id="tab-3"
tabindex="-1">
Third Tab
</span>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>Content for the first panel</p>
</div>
<div
id="panel-2"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-2"
class="display-none">
<p>Content for the second panel</p>
</div>
<div
id="panel-3"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-3"
class="display-none">
<p>Content for the third panel</p>
</div>
</div>
Hinweis: ARIA ändert nur den Accessibility-Baum eines Elements und gibt an, wie assistive Technologien den Inhalt den Benutzern präsentieren können. ARIA ändert keine implizite Funktionalität oder Styling.
Werte
id
-Liste-
Eine durch Leerzeichen getrennte Liste von einer oder mehreren ID-Werten, die auf die Elemente verweisen, die vom aktuellen Element gesteuert werden
Zugehörige Schnittstellen
Element.ariaControlsElements
-
Die
ariaControlsElements
-Eigenschaft ist Teil der Schnittstelle jedes Elements. Ihr Wert ist eine Liste vonElement
, die den inaria-controls
angegebenen ID-Werten entsprechen.
Zugehörige Rollen
Verwendet in ALLEN Rollen.
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-controls |