aria-pressed am Filter
Ein Filterknopf zeigt, ob er aktiv ist
Filterknopf, Symbolknopf, Link: drei Stellen mit einem Schaltzustand.
Zustand sichtbar machen
Ein Name. Drei ehrliche Zustände.
aria-pressed macht aus einem Button einen Umschalter. Die Beschriftung bleibt stehen; nur der Zustand wechselt.
Statische Zustandsdarstellung · Texteditor
Wert
false · aus
Im DOM
aria-pressed="false"Im Accessibility Tree
- Name
- Fett
- Rolle
- Umschaltknopf
- Zustand
- nicht gedrückt
Wert
true · an
Im DOM
aria-pressed="true"Im Accessibility Tree
- Name
- Fett
- Rolle
- Umschaltknopf
- Zustand
- gedrückt
Wert
mixed · gemischt
Im DOM
aria-pressed="mixed"Im Accessibility Tree
- Name
- Fett
- Rolle
- Umschaltknopf
- Zustand
- gemischt
Vollständiges Beispiel
Drei Filter, eine Zustandsquelle
Die Beschriftungen bleiben gleich. JavaScript ändert nur aria-pressed; CSS liest genau dieses Attribut.
Produkte filtern
Sichtbares Ergebnis: Nur verfügbar ist aktiv.
HTML
<div class="filterleiste"
aria-label="Produkte filtern">
<button type="button" class="filter"
aria-pressed="false">
Nur verfügbar
</button>
<button type="button" class="filter"
aria-pressed="false">
Neu
</button>
<button type="button" class="filter"
aria-pressed="false">
Bio
</button>
</div>JavaScript
const leiste =
document.querySelector('.filterleiste');
leiste.addEventListener('click', (ereignis) => {
const knopf =
ereignis.target.closest('[aria-pressed]');
if (!knopf || !leiste.contains(knopf)) return;
const an = knopf.getAttribute('aria-pressed')
=== 'true';
knopf.setAttribute('aria-pressed', String(!an));
});CSS
.filter {
border: 2px solid currentColor;
background: Canvas;
color: CanvasText;
font: inherit;
}
.filter[aria-pressed="true"] {
background: CanvasText;
color: Canvas;
}
.filter[aria-pressed="true"]::before {
content: "\2713\00a0";
}
.filter:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}Quellen zum Nachschlagen
Der W3C-Leitfaden für Buttons erklärt die stabile Beschriftung und Tastaturbedienung. Die WAI-ARIA-Spezifikation definiert false, true und mixed. Die MDN-Referenz zu aria-pressed fasst Einsatz und DOM-Schnittstelle zusammen.
So prüfen Sie es
Drei Beobachtungen nach einem Tastendruck
- Mit Tab fokussieren. Name, Rolle und Zustand müssen verständlich sein.
- Leertaste drücken. Fokus bleibt am Button; Zeichen und Fläche ändern sich.
- Im DOM nachsehen. Der Wert wechselt zeitgleich von
falsezutrueund beim nächsten Druck zurück.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Der Filterknopf meldet „an“ Regel aria-valid-attr-value
Nur true, false und mixed sind gültig. Ein deutsches Wort im Attribut lässt den Schaltzustand verschwinden.
Kritisch Der Merken-Knopf hat keinen Namen Regel button-name
Ein Herz ohne Text sagt weder Aktion noch Zustand. aria-label="Merken" nennt die Aktion, aria-pressed den Zustand.
Kritisch Ein Schaltzustand an einem Link Regel aria-allowed-attr
Ein a mit href ist kein Umschaltknopf, dort ist das Attribut unzulässig. Ein button trägt den Zustand richtig.
Zum Mitnehmen
Die Filterknöpfe, korrigiert
Gültige Werte, ein Name, das richtige Element.
Korrektur in 3 Schritten ansehen
Nur die drei gültigen Werte setzen
true, false und mixed beschreiben den Schaltzustand. Der Knopf trägt das Attribut auch im Zustand false, sonst fehlt die Information.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" class="aktiv" aria-pressed="an">Nur verfügbar</button>Nachher
<button type="button" class="aktiv" aria-pressed="true">Nur verfügbar</button>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt beim aktiven Filter den Zustand. Bei den übrigen Filtern nicht.
Dem Symbolknopf einen Namen geben
Das Herz bleibt sichtbar und für Vorleseprogramme verborgen. aria-label nennt die Aktion, aria-pressed den Zustand.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-pressed="false"> <svg aria-hidden="true"><use href="#herz"></use></svg> </button>Nachher
<button type="button" aria-pressed="false" aria-label="Merken"> <svg aria-hidden="true"><use href="#herz"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit der Tab-Taste auf das Herz. Ein Vorleseprogramm sagt „Merken“ und den Zustand.
Umschalter als button auszeichnen
Ein Link führt zu einer Adresse, ein Umschalter ändert etwas auf der Seite. Nur am button ist aria-pressed zulässig.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="#" class="filter" aria-pressed="true">Nur verfügbar</a>Nachher
<button type="button" class="filter" aria-pressed="true">Nur verfügbar</button>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie die Leertaste auf dem Filter. Er schaltet um, ohne dass die Seite neu lädt.