Barrierefreiheit mit JavaScript
Barrierefreiheit in JavaScript heißt: die Bestellung lässt sich mit der Tastatur auslösen, und eine Statusänderung wird angesagt. Diese Seite nutzt einen echten Button. Ein click setzt die sichtbare Zeile auf tea / regular.
Nicht die Seite der Fehler
Die vorige Seite hat missing size geworfen. Ihre Zeile lautete caught / missing size. Diese Seite nutzt kein throw. Das Steuerelement bleibt auf der Seite, und das Ergebnis steht dort, wo man es sieht.
Einen Button verwenden
<button type="button"> führt seinen click-Listener bei einem Mausklick, bei Enter und bei Space aus. Ein div mit nur einem click-Listener ignoriert die Tastatur. Der Text des Buttons ist der Name, den man hört.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
Die Zeile wird tea / regular. Enter und Space führen denselben Listener aus.
Die neue Zeile ansagen
textContent aktualisiert den Bildschirm. Ein Screenreader kann eine stille Änderung verpassen. aria-live="polite" bittet ihn, den neuen Text nach dem aktuellen Satz zu sprechen.
<p id="line" aria-live="polite">…</p>
Die Änderung wird angesagt und bricht den aktuellen Satz nicht ab. assertive unterbricht. Diese Seite nutzt polite.
Ohne size wird der Button deaktiviert
Die Bestellung ist { drink: "tea" }, und size fehlt. Setzen Sie button.disabled auf true. Der Button bleibt sichtbar. Der click-Listener läuft nicht.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
Der Button ist noch auf der Seite und löst die Bestellung nicht aus. Entfernen Sie das Element nicht.
Den Fokus auf dem Button lassen
Wer den Button ausgelöst hat, ist schon dort. Schreiben Sie die Zeile, dann rufen Sie button.focus() auf. Rufen Sie nicht line.focus() auf, und blenden Sie den Umriss nicht aus.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
Der Fokus bleibt auf dem Button. Die Zeile braucht kein tabindex. Der Umriss bleibt sichtbar.
Vier Gewohnheiten
Jede Zeile ist eine Entscheidung für dieses Bestellsteuerelement.
📊 Barrierefreie Bestellsteuerung
| Gewohnheit | Verwenden | Vermeiden |
|---|---|---|
| Aktion | button mit type="button" |
ein div, das nur click hört |
| Status | aria-live="polite" an der Zeile |
ein stiller Texttausch |
| Nicht verfügbar | button.disabled = true |
den Button entfernen |
| Fokus | button.focus() und ein sichtbarer Umriss |
line.focus() oder outline: none |
Ein Button übernimmt die Aktion. Die Live-Zeile spricht das Ergebnis. disabled behält ein Steuerelement, das nicht laufen kann. Der Umriss zeigt, wo der Fokus liegt.
Die Zeile der Seite
Die Seite verbindet einen Button mit der Live-Zeile. Es wird nichts geworfen.
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
Nach dem click liest die Zeile tea / regular. Enter und Space tun dasselbe. caught / missing size gehörte zur Fehlerseite.
An der Theke
- Klicken Sie den Button. Die Zeile liest tea / regular.
- Drücken Sie Enter auf demselben Button. Der Listener läuft wieder.
- Setzen Sie aria-live="polite" auf die Zeile, damit der neue Text angesagt wird.
- Ohne size setzen Sie button.disabled auf true. Der Button bleibt, und click läuft nicht.
- Nach einem erfolgreichen click rufen Sie button.focus() auf. Rufen Sie line.focus() nicht auf.
Häufige Fehlgriffe
Ein click auf einem div ist keine Tastatursteuerung. disabled ist nicht dasselbe wie den Button zu löschen.
- Ein
divfür die Bestellaktion verwenden - Die Zeile ändern und
aria-livevergessen - Den Button entfernen, wenn
sizefehlt - Nach einer erfolgreichen Bestellung
line.focus()aufrufen - Den Fokus-Umriss ausblenden
- Die Zeile als caught / missing size lesen
Das bleibt
- Ein
buttonführt die Bestellung mit der Maus, mit Enter und mit Space aus aria-live="polite"sagttea / regularan, ohne zu unterbrechen- Fehlt
size, wirdbutton.disabledauftruegesetzt und der Button bleibt auf der Seite - Der Fokus bleibt auf dem Button
- Die Zeile der Seite ist tea / regular
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt