aria-controls
Wohin zeigt Ihr aria-controls?
Verschriebener Name, fehlende Ziel-ID, doppelte ID: drei Wege, den Bezug zu verlieren.
Beziehung statt Verhalten
So findet der Schalter sein Ziel
aria-controls verbindet zwei Elemente über eine eindeutige ID. Mehr tut es nicht.
1 Steuerndes Element
- Beziehung
aria-controls="notiz-1"- Zustand
aria-expanded="true"
2 Gesteuerter Bereich
id="notiz-1"SchichtnotizÜbergabe um 14:00 Uhr. Der Kühlraum bleibt geschlossen.
Zum Schichtplanaria-expanded="false"hidden am Zielaria-expanded="true"hidden entferntaria-controls macht die Beziehung für Software erkennbar. JavaScript muss den Bereich weiterhin zeigen oder verbergen und aria-expanded aktualisieren. Setzen Sie keinen Fokuswechsel voraus: Die Quelltextreihenfolge bleibt entscheidend.
Drei Leitungsfehler
Wo die Verbindung abreißt
aria-controllid="notiz-1"Der Browser kennt aria-controll nicht. Die Beziehung fehlt vollständig.
notiz-01notiz-1Keine Raute, keine Näherung: Der Wert muss exakt der vorhandenen ID entsprechen.
notiz-1id="notiz-1"id="notiz-1"Eine ID gehört genau einem Element. Zwei Ziele machen den Bezug mehrdeutig.
Dasselbe Kabel, andere Bauteile
Drei passende Einsatzorte
aria-controls="hilfe"Bereich id="hilfe"aria-controls="details"tabpanel id="details"aria-controls="treffer"listbox id="treffer"Der Wert darf auch mehrere, durch Leerzeichen getrennte IDs enthalten. Verwenden Sie das nur, wenn ein Steuerelement wirklich mehrere Bereiche kontrolliert.
Vollständiger Aufklapper
Markup und Zustandswechsel
HTML
<h2>
<button type="button" id="notiz-schalter"
aria-expanded="false" aria-controls="notiz-1">
Schichtnotiz anzeigen
</button>
</h2>
<div id="notiz-1" hidden>
<p>Übergabe um 14:00 Uhr.</p>
<a href="/schichtplan">Zum Schichtplan</a>
</div>JavaScript
const schalter = document.querySelector('#notiz-schalter');
const bereich = document.querySelector('#notiz-1');
schalter.addEventListener('click', () => {
const offen = schalter.getAttribute('aria-expanded') === 'true';
schalter.setAttribute('aria-expanded', String(!offen));
bereich.hidden = offen;
});Vier Abnahmepunkte
So prüfen Sie es
- 01
Suchen Sie die Ziel-ID. Es gibt genau einen Treffer.
- 02
Drücken Sie Enter oder Leertaste. Der Bereich erscheint.
- 03
Prüfen Sie:
aria-expandedundhiddenwechseln zusammen. - 04
Drücken Sie Tab. Der nächste Stopp folgt der sichtbaren Quelltextreihenfolge.
Quellen und Referenzen
Aus dem Prüfbericht
Drei Fälle, drei Befunde
Kritisch aria-controll ist kein Attribut Regel aria-valid-attr
Ein Buchstabe zu viel, und das Attribut existiert nicht. Der Bezug fällt lautlos weg.
Kritisch Die Ziel-ID gibt es nicht Regel aria-valid-attr-value
aria-controls="notiz-01" zeigt ins Leere, wenn der Bereich notiz-1 heißt. Beide müssen übereinstimmen.
Prüfen Zwei Bereiche tragen dieselbe ID Regel duplicate-id-aria
Eine ID darf nur einmal vorkommen. Bei zwei Treffern ist unklar, was gesteuert wird.
Zum Mitnehmen
Der Bezug, korrigiert
Ein Attributname, eine ID, einmal vergeben.
Korrektur in 2 Schritten ansehen
Attributname und Ziel-ID abgleichen
aria-controls schreibt sich ohne zweites l. Der Wert ist genau die id des gesteuerten Bereichs.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" aria-expanded="false" aria-controll="notiz-01"> Schichtnotiz öffnen </button> <div id="notiz-1" hidden>…</div>Nachher
<button type="button" aria-expanded="false" aria-controls="notiz-1"> Schichtnotiz öffnen </button> <div id="notiz-1" hidden>…</div>Markierte Zeilen wurden geändert
So prüfen Sie es Prüfen Sie in den Entwicklerwerkzeugen: die id im Attribut und am Bereich sind identisch.
Jede ID nur einmal vergeben
Zwei Elemente mit derselben id machen jeden Bezug zweideutig. Der zweite Bereich bekommt eine eigene.
KorrekturvergleichSchritt 2 · HTML Vorher
<div id="notiz-1" hidden>Schichtnotiz</div> <div id="notiz-1">Archiv</div>Nachher
<div id="notiz-1" hidden>Schichtnotiz</div> <div id="archiv-1">Archiv</div>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im Quelltext nach id="notiz-1". Es gibt genau einen Treffer.