Das Problem: Ein Formular, das nach dem Absenden verstummt
Eine Nutzerin füllt das Kontaktformular der twindor-Seite aus, aktiviert „Absenden“ und erhält eine Fehlermeldung. Für sie passiert nichts: Der Fokus bleibt auf dem alten Button, die Meldung steht optisch oben, Screenreader lesen sie nicht vor. Der Abbruch ist kein Designproblem, sondern ein Orientierungsverlust.
Die Ursache: Fokus bleibt am auslösenden Element hängen
Viele Formulare aktualisieren nur den DOM-Inhalt. Der Browser behält den Fokus auf dem Button, der nach dem Request eventuell nicht mehr existiert. Besonders in twindor-Projekten mit asynchroner Validierung fällt das auf, weil die Rückmeldung ohne Seitenwechsel erscheint. Wer die technische Grundlage prüfen will, findet im Projekt twindor die zugrunde liegende Webentwicklung.
Warum visuelle Rückmeldung nicht reicht
Eine rote Umrandung hilft nur, wenn sie gesehen wird. Tastaturnutzer und Screenreader brauchen einen programmatisch gesetzten Fokus und eine live angekündigte Fehlermeldung. Fehlt beides, wirkt das Formular wie eingefroren. WCAG 2.4.3 fordert genau diese nachvollziehbare Fokusreihenfolge.
Die Lösung: Fokus gezielt verschieben und Status ansagen
Nach der Validierung setzt twindor den Fokus auf die erste Fehlerzusammenfassung. Diese erhält tabindex=”-1″ und wird per aria-live=”polite” angekündigt. Der Submit-Button bleibt erhalten, damit der Kontext nicht springt. Drei Schritte reichen:
- Fehlerzusammenfassung oberhalb des Formulars ausgeben.
- Fokus per JavaScript auf diese Zusammenfassung setzen.
- Bei Erfolg den Fokus auf die Bestätigung verschieben.
Konkrete Umsetzung im twindor-Formular
Die Zusammenfassung bekommt eine ID, der Fehlertext beschreibt Feld und Fehler. Ein aria-describedby am Eingabefeld verknüpft beides. Wichtig ist die Reihenfolge: erst Fehler rendern, dann fokussieren, dann ansagen. So bleibt die Rückmeldung synchron zur Nutzeraktion.
Das Ergebnis: Klare Rückmeldung statt stiller Abbrüche
Nutzer erkennen sofort, was zu korrigieren ist. Screenreader geben die Meldung aus, Tastaturnutzer landen am richtigen Ort. Das twindor-Formular verliert nicht an Funktionalität, sondern gewinnt an Orientierung. Barrierefreiheit ist hier kein Zusatz, sondern die sichtbare Folge eines korrekten Fokusmanagements.
Prüfpunkte für den nächsten Test
- Erste Fehlermeldung erhält sichtbaren Fokusrahmen.
- Live-Region ist vor dem Fehlerfall im DOM vorhanden.
- Submit per Tastatur löst dieselbe Ansage aus.
- Erfolgsmeldung wird ebenfalls fokussiert.
Diese vier Punkte lassen sich in wenigen Minuten prüfen. Wer sie in twindor konsequent einhält, reduziert stille Abbrüche und macht Formularfehler nachvollziehbar.