Barrierefreien Web-Code mit KI prüfen und verbessern

Das Problem

Auf Ihrer Website kann ein Mensch ohne Maus ein Formular nicht ausfüllen, weil man mit der Tab-Taste nicht auf die Schaltfläche kommt. Eine sehbehinderte Kundin hört von ihrem Vorleseprogramm nur «Schaltfläche, Schaltfläche, Schaltfläche», weil die Knöpfe keine Beschriftung haben. Ein älterer Besucher kann den grauen Text auf hellem Grund kaum lesen. Das Kontaktformular meldet Fehler nur durch eine rote Umrandung.

Solche Hürden betreffen mehr Menschen, als man denkt: Menschen mit Seh-, Hör- oder Bewegungseinschränkungen, ältere Personen, Menschen mit einem gebrochenen Arm oder in grellem Licht am Handy. Wer sie nicht beachtet, schliesst Kundschaft aus und riskiert, dass Behörden oder Auftraggeber Mängel beanstanden. Für manche Organisationen gelten rechtliche Anforderungen, die Sie im Einzelfall klären.

KI kann helfen, Code auf typische Hürden zu prüfen und Verbesserungen vorzuschlagen. Sie findet aber nicht alles, und manche Vorschläge sind falsch. Barrierefreiheit entsteht durch Prüfen, Testen und, wenn möglich, Rückmeldungen von Betroffenen.

So lösen Sie es mit KI – Schritt für Schritt

1. Definieren Sie den Massstab. Als anerkannter Standard gelten die Web Content Accessibility Guidelines (WCAG) des W3C. Klären Sie, welche Stufe für Ihr Vorhaben verlangt oder angestrebt wird.
2. Wählen Sie Seiten und Abläufe. Beginnen Sie mit den wichtigsten: Startseite, Kontaktformular, Bestellprozess. Prüfen Sie ganze Abläufe, nicht nur einzelne Seiten.
3. Testen Sie von Hand mit der Tastatur. Drücken Sie die Tab-Taste: Kommen Sie zu allen Links, Schaltflächen und Formularfeldern? Sehen Sie, wo der Fokus ist? Funktioniert Enter oder Leertaste?
4. Prüfen Sie Kontraste und Grösse. Ist der Text gut lesbar? Lässt sich die Seite vergrössern, ohne dass etwas abgeschnitten wird? Funktioniert sie auf dem Handy?
5. Lassen Sie die KI den Code prüfen. Geben Sie ihr einen bereinigten HTML-Ausschnitt und bitten Sie um Hinweise zu Struktur, Beschriftungen und Bedienung. Mit dem Auftrag unten.
6. Setzen Sie automatische Prüfwerkzeuge ein. Browser-Erweiterungen und Prüfprogramme finden viele formale Fehler, aber nicht alle. Sie ergänzen den manuellen Test.
7. Beheben Sie die Fehler und testen Sie erneut. Ein KI-Vorschlag ist erst richtig, wenn der Test ihn bestätigt.
8. Holen Sie Rückmeldungen ein. Wenn möglich, lassen Sie Menschen mit Einschränkungen die Seite ausprobieren. Ihre Erfahrung findet Dinge, die keine Prüfung entdeckt.

Vorlage zum Kopieren

Geben Sie nur öffentlichen oder bereinigten Code ohne Zugangsdaten und ohne vertrauliche Inhalte ein.

Prüfe den folgenden HTML-Ausschnitt einer Website eines Schweizer KMU auf typische Barrieren für Menschen mit Seh-, Motorik- oder Hörbeeinträchtigungen: [Code einfügen, bereinigt].
Prüfe insbesondere: 1. Sinnvolle HTML-Struktur (Überschriften in logischer Reihenfolge, Listen, Navigationsbereiche), 2. Beschriftungen von Formularfeldern und Schaltflächen, 3. Textalternativen für Bilder, 4. Elemente, die nur mit der Maus bedienbar sind, 5. Linktexte wie «hier klicken», 6. Fehlermeldungen in Formularen (nur Farbe oder auch Text?).
Gib die Befunde als Tabelle aus: Fundstelle im Code, Problem, warum es ein Hindernis ist, Verbesserungsvorschlag mit Codebeispiel. Weise darauf hin, was du am Code nicht beurteilen kannst (zum Beispiel Kontraste, Verhalten im Browser, Bedienung mit Screenreader) und was manuell getestet werden muss. Mache keine Aussage, ob die Seite insgesamt konform ist.

Testen Sie jeden Vorschlag im Browser, bevor Sie ihn übernehmen.

Typische Hürden und Verbesserungen

Ein einfaches Beispiel für ein beschriftetes Feld: Zu jedem Eingabefeld gehört ein Beschriftungselement («label»), das über die Kennung des Feldes («for» und «id») fest mit ihm verbunden ist. So liest ein Vorleseprogramm «E-Mail-Adresse, Eingabefeld», und ein Klick auf die Beschriftung setzt den Cursor ins Feld.

Worauf Sie achten müssen

• KI-Vorschläge können Barrieren verursachen: Falsch gesetzte Zusatzattribute können die Bedienung verschlechtern. Weniger ist oft besser: zuerst richtiges HTML, dann Zusätze.
• Kein Konformitätsurteil durch KI: Ob eine Website einer Anforderung entspricht, klärt eine Prüfung nach dem anerkannten Verfahren. Der WCAG-Massstab ist beim W3C beschrieben.
• Rechtliche Anforderungen: Für Behörden, öffentliche Stellen und bestimmte Auftraggeber gelten Vorgaben zur Zugänglichkeit. Klären Sie sie im Einzelfall.
• Bedienung ist mehr als Code: Verständliche Sprache, klare Struktur und Zeit zum Lesen gehören dazu, siehe Bürgerinformation prüfen.
• Bilder und Medien: Videos brauchen Untertitel, Bilder Textalternativen. Siehe Barrierefreie Bildbeschreibungen.
• Regelmässig prüfen: Neue Inhalte und Updates können Barrieren einführen. Planen Sie wiederkehrende Tests ein.

Ein Beispiel aus der Praxis

Ein Beispiel: Eine Physiotherapie-Kette in der Ostschweiz lässt ihr Online-Terminformular von einer Agentur entwickeln.

Vorher: Das Formular sieht gut aus, aber die Datumsauswahl lässt sich nur mit der Maus bedienen, und die Felder haben keine Beschriftungen. Ein Patient, der wegen einer Sehbehinderung ein Vorleseprogramm nutzt, bricht frustriert ab und ruft an.

Nachher: Die Agentur testet das Formular mit der Tastatur und mit einem Vorleseprogramm und lässt die KI den Code auf Hürden prüfen. Die Datumsauswahl wird durch ein Standard-Eingabefeld ersetzt, Felder erhalten Beschriftungen, und Fehler werden auch als Text angezeigt. Ein Patient mit Sehbehinderung testet die neue Fassung und gibt zwei weitere Hinweise.

So hilft Ihnen Alpasana

Der Kurs KI für Developer mit Claude und Codex von absofort behandelt Codegenerierung, Debugging, Refactoring und Review, das Delegieren von Aufgaben und das Verifizieren der Ergebnisse sowie Datenschutzgrenzen. Claude, Claude Code, Claude API und Codex sind Kursgegenstände.

Dazu gehören ein Entwickler-Playbook mit Prompts, Review-Regeln und Tests, ein Praxisprojekt und ein verifizierbares Zertifikat. Spezielle Prüfungen auf Barrierefreiheit nach Standards sind nicht als Kursinhalt beschrieben.

Häufige Fragen

Reicht ein automatisches Prüfwerkzeug?

Nein. Es findet formale Fehler, aber nicht alle Probleme der Bedienbarkeit. Ergänzen Sie es mit Tests per Tastatur und, wenn möglich, mit Vorleseprogramm und Rückmeldungen von Betroffenen.

Ist eine KI-Prüfung besser als ein Prüfwerkzeug?

Sie ergänzt es: KI kann Zusammenhänge erklären und Verbesserungen vorschlagen. Sie kann aber irren. Verlassen Sie sich nicht auf ein einzelnes Verfahren.

Wo fange ich an, wenn die Website gross ist?

Mit den wichtigsten Abläufen: Kontakt, Bestellung, Anmeldung. Beheben Sie dort zuerst die gravierendsten Hürden und planen Sie danach die weiteren Bereiche.