JavaScript barrierefrei
Nach dem Entfernen weiß der Fokus wohin
Löschknopf, Restliste, Statusmeldung: drei Stellen nach einer Änderung.
Fokus-Übergabe
Wenn ein Element geht, braucht der Fokus einen Übergabeplan
Beim Löschen verschwindet oft genau der aktive Knopf. Diese Umsetzung hält die Bedienposition stabil und meldet die Änderung über einen zweiten, ruhigen Kanal.
DOM vorher → DOM nachher
Der Fokus gibt den Taktstock weiter
Der Löschknopf von „Bildfreigabe einholen“ ist aktiv. Nach dem Entfernen landet der Fokus auf dem Löschknopf des nächsten Eintrags.
BedienpositionDer Fokus wechselt sofort zum logischen Ziel.
ziel.focus()RückmeldungDer vorhandene Statusbereich erhält das Ergebnis.
role="status"Fokus und Status lösen verschiedene Aufgaben: Der Fokus hält die nächste Aktion erreichbar; der Status erklärt, was gerade passiert ist.
Zielwahl
Drei Fälle, eine feste Reihenfolge
Das Ziel wird bestimmt, solange der aktuelle Eintrag noch im DOM steht. Danach kann er sicher entfernt werden.
- A
Nächster Eintrag vorhanden?Sein Löschknopf übernimmt.
nextElementSibling - B
Nur ein vorheriger Eintrag?Dessen Löschknopf übernimmt.
previousElementSibling - C
Liste jetzt leer?Die Listenüberschrift übernimmt.
tabindex="-1"
Vollständige Umsetzung
Native Buttons, statische Namen, gezielter Folgefokus
Die Namen stehen schon im Markup. Das Skript delegiert nur die Aktion, berechnet das Ziel vor dem Entfernen und aktualisiert anschließend den bereits vorhandenen Statusbereich.
HTML löschliste.html
<h2 id="listen-titel" tabindex="-1">
Aufgaben
</h2>
<ul id="aufgaben">
<li>
<span class="name">Vertrag prüfen</span>
<button type="button" data-remove
aria-label="Vertrag prüfen löschen">
<span aria-hidden="true">×</span>
</button>
</li>
<li>
<span class="name">Bildfreigabe einholen</span>
<button type="button" data-remove
aria-label="Bildfreigabe einholen löschen">
<span aria-hidden="true">×</span>
</button>
</li>
</ul>
<p id="listen-status" role="status"></p>JS löschliste.js
const liste = document.querySelector('#aufgaben');
const status = document.querySelector('#listen-status');
const titel = document.querySelector('#listen-titel');
liste.addEventListener('click', (event) => {
if (!(event.target instanceof Element)) return;
const knopf = event.target.closest('button[data-remove]');
if (!knopf || !liste.contains(knopf)) return;
const eintrag = knopf.closest('li');
if (!eintrag) return;
const name = eintrag.querySelector('.name')
?.textContent.trim() ?? 'Eintrag';
const nachbar = eintrag.nextElementSibling
?? eintrag.previousElementSibling;
const ziel = nachbar
?.querySelector('button[data-remove]') ?? titel;
eintrag.remove();
ziel.focus({ preventScroll: true });
ziel.scrollIntoView({ block: 'nearest' });
const rest = liste.children.length;
const anzahl = rest === 1 ? '1 Eintrag' : `${rest} Einträge`;
status.textContent = `${name} entfernt. Noch ${anzahl}.`;
});Tastaturprobe
Der wichtige Test beginnt nach Enter
- Tab
Zum Löschknopf gehen. Name und Aktion müssen unterscheidbar sein.
- Enter
Den mittleren Eintrag löschen. Der Fokus bleibt sichtbar.
- Enter
Direkt erneut auslösen. Der nächste Eintrag muss verschwinden.
- Konsole
document.activeElementist niebody.
Primärquellen zum Gegenprüfen
W3C APG: Keyboard InterfaceMDN: HTMLElement.focus()MDN: status role
Aus dem Prüfbericht
Zwei Befunde an der Löschliste
Kritisch Der Löschknopf zeigt nur ein Symbol Regel button-name
Ein Papierkorb ohne Wort bleibt namenlos. Ein aria-label nennt Aktion und Eintrag, den das Skript entfernt.
Kritisch Die Statusmeldung trägt einen ungültigen Wert Regel aria-valid-attr-value
aria-live kennt nur off, polite und assertive. Ein erfundener Wert lässt die Meldung nach dem Löschen stumm.
Zum Mitnehmen
Die Löschliste, korrigiert
Ein Name am Knopf, ein gültiger Wert am Status, ein Ziel für den Fokus.
Korrektur in 3 Schritten ansehen
Dem Löschknopf einen Namen geben
Der Name nennt Aktion und Eintrag. So bleibt in einer langen Liste unterscheidbar, welcher Eintrag gerade verschwindet.
KorrekturvergleichSchritt 1 · HTML Vorher
<li>Milch <button type="button" class="remove"> <span aria-hidden="true">🗑</span> </button> </li>Nachher
<li>Milch <button type="button" class="remove" aria-label="Eintrag Milch löschen"> <span aria-hidden="true">🗑</span> </button> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf den Knopf. Ein Vorleseprogramm nennt Aktion und Eintrag.
Die Statusmeldung gültig auszeichnen
aria-live nimmt off, polite oder assertive. Mit polite kommt die Meldung an, ohne die laufende Ausgabe zu unterbrechen.
KorrekturvergleichSchritt 2 · HTML Vorher
<p id="status" aria-live="on"></p>Nachher
<p id="status" aria-live="polite"></p>Markierte Zeilen wurden geändert
So prüfen Sie es Löschen Sie einen Eintrag. Ein Vorleseprogramm sagt kurz darauf „Eintrag entfernt“.
Den Fokus weitersetzen
Verschwindet das fokussierte Element, verliert der Browser den Fokus. Das Skript übergibt ihn an den nächsten Knopf.
KorrekturvergleichSchritt 3 · JavaScript Vorher
function entferne(eintrag) { eintrag.remove(); }Nachher
function entferne(eintrag) { const naechster = eintrag.nextElementSibling ?? eintrag.previousElementSibling; eintrag.remove(); naechster?.querySelector('button')?.focus(); status.textContent = 'Eintrag entfernt'; }Markierte Zeilen wurden geändert
So prüfen Sie es Löschen Sie mit der Tastatur. Der Fokus steht danach auf dem nächsten Löschknopf.