aria-selected in Registerkarten
Die gewählte Registerkarte wird genannt
Wert, Beschriftung, Tableiste, Umschalter: vier Stellen an einem Register.
Zustand statt Stil
Auswahl und Fokus laufen auf zwei Spuren
aria-selected sagt, welcher Inhalt gilt. Der Fokus sagt, wo die Tastatur gerade arbeitet. Ein gutes Register hält beides sichtbar und synchron.
Fokus steigt ein
Die bereits gewählte Registerkarte ist der einzige Einstieg in die Leiste.
- Auswahl
- Daten ·
true - Fokus
- Daten ·
tabindex="0" - Bereich
- Technische Daten sichtbar
Fokus und Auswahl wechseln
Bei vorbereiteten Inhalten darf die Auswahl dem Pfeiltastenfokus folgen.
- Auswahl
- Lieferung ·
true - Fokus
- Lieferung ·
tabindex="0" - Bereich
- Lieferung sichtbar
Fokus geht, Auswahl bleibt
Außerhalb der Leiste bleibt klar, welcher Bereich geöffnet ist.
- Auswahl
- Lieferung · bleibt
true - Fokus
- im geöffneten Bereich
- Bereich
- Lieferung sichtbar
Die Synchronisation
Vier Werte wechseln als ein Vorgang
Ändern Sie nie nur die sichtbare Farbe. Registerkarte, Tabreihenfolge, Bereich und Beschriftung müssen dieselbe Auswahl ausdrücken.
aria-selected="true"tabindex="0"hidden = falsehidden = trueNicht jeder aktive Zustand ist eine Auswahl
Das Attribut folgt der Frage
aria-selectedaria-currentaria-pressedaria-checkedVollständiges Grundmuster
Ein Register, das seinen Zustand wirklich wechselt
Die Darstellung ist statisch, der Code ist kopierbar. Bei langsam nachladenden Bereichen lassen Sie den Fokus mit den Pfeiltasten wandern und wählen erst mit Enter oder Leertaste.
<div role="tablist" aria-label="Produkt">
<button id="tab-daten" type="button" role="tab"
aria-selected="true" aria-controls="daten">
Daten
</button>
<button id="tab-lieferung" type="button" role="tab"
aria-selected="false" aria-controls="lieferung"
tabindex="-1">
Lieferung
</button>
</div>
<div id="daten" role="tabpanel" tabindex="0"
aria-labelledby="tab-daten">
Maße, Gewicht, Anschlusswerte.
</div>
<div id="lieferung" role="tabpanel" tabindex="0"
aria-labelledby="tab-lieferung" hidden>
Versandarten und Fristen.
</div>const tabs = [...document.querySelectorAll(
'[role="tab"]'
)];
function select(tab) {
for (const item of tabs) {
const active = item === tab;
item.setAttribute('aria-selected', String(active));
item.tabIndex = active ? 0 : -1;
document.getElementById(
item.getAttribute('aria-controls')
).hidden = !active;
}
tab.focus();
}
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => select(tab));
tab.addEventListener('keydown', event => {
if (!['ArrowLeft', 'ArrowRight'].includes(event.key))
return;
event.preventDefault();
const step = event.key === 'ArrowRight' ? 1 : -1;
const next = (index + step + tabs.length) % tabs.length;
select(tabs[next]);
});
});So prüfen Sie es
Beobachten Sie Zustand, Fokus und Inhalt gemeinsam
- Gehen Sie mit Tab in die Leiste. Der Fokus muss auf der gewählten Registerkarte landen.
- Drücken Sie Pfeil rechts. Name, sichtbarer Bereich und
aria-selected="true"müssen gemeinsam wechseln. - Drücken Sie erneut Tab. Der Fokus verlässt die Leiste; die Auswahl bleibt bestehen.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Die Registerkarte meldet einen erfundenen Wert Regel aria-valid-attr-value
Nur true und false sind gültig. Genau eine Karte trägt true, alle anderen false.
Kritisch Eine Registerkarte ohne Beschriftung Regel aria-tab-name
Eine Karte, die nur ein Symbol enthält, bleibt namenlos. Der Titel des zugehörigen Bereichs gehört als Text hinein.
Kritisch Die Karte liegt außerhalb der Tableiste Regel aria-required-parent
role="tab" muss in role="tablist" enthalten oder von ihr referenziert sein. Ein neutrales Zwischenelement hebt die Beziehung nicht automatisch auf.
Kritisch aria-selected an einem Knopf ohne Tabrolle Regel aria-allowed-attr
Ohne role="tab" ist das Attribut unzulässig. Für einen Umschalter passt aria-pressed, für die aktuelle Seite aria-current.
Zum Mitnehmen
Das Register, korrigiert
Ein gültiger Wert, ein Name je Karte, eine klare Zuordnung.
Korrektur in 3 Schritten ansehen
Genau eine Karte auf true setzen
Nur true und false sind gültig. Die gewählte Karte trägt true, jede andere false, damit die Auswahl eindeutig bleibt.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="tablist" aria-label="Produkt"> <button role="tab" aria-selected="aktiv">Technische Daten</button> <button role="tab">Lieferung</button> </div>Nachher
<div role="tablist" aria-label="Produkt"> <button role="tab" aria-selected="true">Technische Daten</button> <button role="tab" aria-selected="false">Lieferung</button> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt bei der offenen Karte „ausgewählt“. Bei den anderen nicht.
Jeder Registerkarte einen Text geben
Ein Symbol allein benennt die Karte nicht. Der Titel des zugehörigen Bereichs steht als Text in der Karte.
KorrekturvergleichSchritt 2 · HTML Vorher
<button role="tab" aria-selected="false"> <svg aria-hidden="true"><use href="#lkw"></use></svg> </button>Nachher
<button role="tab" aria-selected="false"> <svg aria-hidden="true"><use href="#lkw"></use></svg> Lieferung </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie in die Registerleiste. Jede Karte wird mit ihrem Namen angesagt.
Die Karten in die Tableiste legen
role="tab" muss in role="tablist" enthalten oder von ihr referenziert sein. Ein Tab außerhalb dieser Beziehung verliert seinen erforderlichen Kontext.
KorrekturvergleichSchritt 3 · HTML Vorher
<div role="tablist" aria-label="Produkt"></div> <button role="tab" aria-selected="true">Technische Daten</button>Nachher
<div role="tablist" aria-label="Produkt"> <button role="tab" aria-selected="true">Technische Daten</button> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt bei der Karte ihre Position in der Registerleiste.