Beim Laden deines Formulars bricht die Internetverbindung eines Besuchers ab. Eine Chrome-Erweiterung stört dein JavaScript. Ein älterer Browser unterstützt das JavaScript nicht, das du nutzt. Sein Screenreader kann dein Formular nicht bedienen, weil die Beschriftungen per CSS versteckt sind.
Formulare sind kritische Wege. Nutzer müssen sie absenden können. Das Formular darf nicht einfach kaputtgehen. Progressive Enhancement ist das Prinzip, Formulare zu bauen, die überall funktionieren, und dann Verbesserungen für Browser zu ergänzen, die sie verkraften.
In diesem Artikel erfährst du, wie du Formulare baust, die sauber zurückfallen, ohne JavaScript funktionieren und für alle zugänglich bleiben.
Was ist Progressive Enhancement?
Progressive Enhancement bedeutet, mit einem einfachen, funktionierenden Formular zu beginnen, das in den ältesten Browsern und ohne JavaScript läuft, und darüber Verbesserungen für moderne Browser zu legen. Ebene 1 (HTML) liefert ein einfaches Formular mit Eingabefeldern, Beschriftungen und einem Absende-Button, das kein JavaScript braucht und überall funktioniert. Ebene 2 (CSS) gestaltet das Formular mit Farben, Abständen und Layout. Lädt das CSS nicht, funktioniert das Formular weiter, sieht nur schlecht aus. Ebene 3 (JavaScript) ergänzt Validierung in Echtzeit, flüssige Animationen und AJAX-Versand. Fällt JavaScript aus, funktioniert das Formular weiter und sendet klassisch ab. Fällt eine Ebene aus, bekommt der Nutzer trotzdem ein funktionierendes Formular. Das ist Robustheit.
Die Basis: HTML, das funktioniert
Beginne mit semantischem HTML mit richtigen Labels, Fieldsets und Legend-Elementen. Ein Basisformular sieht so aus: <form action="/submit" method="POST"> <label for="email">E-Mail</label> <input type="email" id="email" name="email" required> <label for="message">Nachricht</label> <textarea id="message" name="message" required></textarea> <button type="submit">Senden</button> </form>. Dieses Formular funktioniert ohne JavaScript, ohne CSS, in alten Browsern, mit Screenreadern und per Tastatur. Das ist deine Basis. Entferne nie Elemente aus dem DOM, um sie durch per JavaScript erzeugte Elemente zu ersetzen, denn fällt das JavaScript aus, ist das Formular kaputt. Behalte das semantische HTML.
Sauberer Rückfall mit CSS
Lege CSS-Verbesserungen über das HTML. Gestalte das Formular schön. Fällt CSS aus, funktioniert das Formular trotzdem.
Verstecke Labels nicht per CSS und verlasse dich nicht auf Platzhalter, denn manches CSS lädt nicht, und Screenreader brauchen Labels im HTML. Nutze kein CSS, um Pflichtmarkierungen zu verstecken: Lädt dein eigener „Pflicht-Stern“ nicht, erkennen Nutzer nicht, welche Felder Pflicht sind. Nutze stattdessen das HTML-Attribut required. Vermeide es, das Label visuell zu verstecken und stattdessen einen Platzhalter zu zeigen, mit label { display: none; } und input::placeholder { content: 'E-Mail'; }. Behalte stattdessen das Label im HTML und gestalte es nach Belieben, zum Beispiel mit label { font-weight: bold; color: #333; }.
JavaScript-Verbesserungen, die sauber zurückfallen
Ergänze JavaScript-Verbesserungen, aber nur, wenn das Formular schon funktioniert. Nutze Funktionserkennung, um zu prüfen, ob der Browser das Nötige unterstützt, mit if (window._blocked_) { // Use _blocked_ for AJAX submission } else { // Form submits traditionally }. Gehe nicht davon aus, dass Funktionen vorhanden sind. Gehe davon aus, dass sie fehlen könnten. Erkenne zuerst.
Validierung in Echtzeit mit Rückfall
Nutze die HTML-Validierung als Basis mit <input type="email" required>, damit der Browser beim Absenden prüft. Ergänze dann JavaScript-Validierung, die in Echtzeit läuft, mit input.addEventListener('blur', () => { if (!isValid(input.value)) { input.classList.add('invalid'); showError(input, 'Invalid email'); } });. Sie zeigt Fehler schon beim Tippen, und fällt JavaScript aus, funktioniert die eingebaute Validierung des Browsers weiter. Der Nutzer hat den Vorteil von Feedback in Echtzeit, und fällt JavaScript aus, bekommt er beim Absenden das Feedback des Browsers. In beiden Fällen wird validiert.
AJAX-Versand mit klassischem Rückfall
Baue ein klassisches Formular, das serverseitig absendet, fange dann das Absenden ab und nutze stattdessen AJAX, mit form.addEventListener('submit', async (e) => { e.preventDefault(); const response = await _blocked_('/submit', { method: 'POST', body: new FormData(form) }); if (response.ok) { showMessage('Success'); } });. Fällt JavaScript aus, läuft preventDefault nie, das Formular sendet klassisch ab, und der Nutzer bekommt einen Seiten-Reload statt flüssiger Bedienung. Aber das Formular funktioniert.
Barrierefreiheit als Progressive Enhancement
Barrierefreiheit ist keine Zusatzfunktion. Sie ist die Basis. Baue barrierefreie Formulare.
Labels müssen über die Attribute for und id mit den Eingabefeldern verbunden sein. Nicht über data-Attribute, nicht über aria-labels, die übersehen werden können. Richtige Labels.
<label for="email">E-Mail</label>
<input id="email">
Nutze semantische HTML-Elemente (fieldset, legend, button, input). Keine divs, die wie Buttons gestaltet sind.
Die Tastaturbedienung muss funktionieren. Mit Tab durch alle Felder. Mit Umschalt+Tab zurück. Mit Enter absenden. Mit der Leertaste Kontrollkästchen umschalten. Das klappt mit semantischem HTML von Haus aus. Zerstöre es nicht mit JavaScript.
Wenn die Grundlagen funktionieren, ergänze ARIA-Labels für Screenreader. Ergänze Fokusanzeigen für Tastaturnutzer. Das sind aber Verbesserungen über barrierefreiem HTML.
Auf Robustheit testen
Teste dein Formular mit deaktiviertem JavaScript. Deaktiviere JavaScript in deinem Browser und versuche abzusenden. Geht das Formular kaputt, ist es nicht robust.
Teste mit langsamen Netzen. Drossle deine Verbindung auf 2G. Braucht das Formular ewig zum Laden, verlassen Besucher mit schlechtem Internet die Seite.
Teste mit älteren Browsern. Nutze einen Browser-Testdienst, um in sehr alten Browserversionen zu testen (falls du das noch brauchst). Sieh nach, welche Funktionen nicht unterstützt werden.
Teste mit Screenreadern. Nutze einen Screenreader für Windows oder Mac. Höre, wie das Formular vorgelesen wird. Ergibt es für einen Screenreader keinen Sinn, behebe das.
Teste nur mit der Tastatur. Benutze keine Maus. Kannst du durch das Formular navigieren? Kannst du es absenden?
Funktionserkennung statt Browsererkennung
Prüfe nicht auf bestimmte Browser. Prüfe auf Funktionen, statt Browsererkennung wie if (navigator.userAgent.includes('Chrome')) { /* use _blocked_ */ } zu nutzen. Nutze stattdessen Funktionserkennung wie if (window._blocked_) { /* use _blocked_ */ }. Funktionserkennung ist zuverlässiger, denn ein Browser-Update, das _blocked_ unterstützt, funktioniert mit deinem Code, mit Browsererkennung aber nicht.
So baut WEMASY robuste Formulare
WEMASY-Formulare folgen den Prinzipien von Progressive Enhancement: Sie funktionieren ohne JavaScript, haben Labels und semantisches HTML und bieten optionale JavaScript-Verbesserungen. Ältere Browser bekommen so ein funktionierendes Formular und moderne Browser eine flüssige Bedienung.
Die Funktionen für Robustheit in deinem WEMASY-Tarif findest du auf der Preisseite.