Barrierefreies Webformular programmieren mit künstlicher Intelligenz (KI) – Anleitung

Barrierefreiheit im Web bedeutet, dass alle Menschen – unabhängig von körperlichen oder geistigen Einschränkungen – Inhalte und Funktionen nutzen können. In diesem Artikel zeige ich, wie man mithilfe von HTML und CSS ein barrierefreies Webformular erstellt. Außerdem erkläre ich, warum bestimmte Maßnahmen wichtig sind und welche Personengruppen davon profitieren.

Was ist ein Webformular?

Ein Webformular ist ein Bereich auf einer Webseite, in dem man Informationen eingeben kann. Du kennst das bestimmt von Anmeldungen, Bestellungen oder Kontaktseiten. Typische Felder in einem Formular sind:

• Vorname und Nachname
• Adresse
• Telefonnummer
• E-Mail-Adresse

Man trägt etwas ein und klickt dann meist auf einen Button wie „Absenden“. Die Daten werden dann an den Anbieter geschickt – zum Beispiel an ein Unternehmen oder eine Behörde.

Formulare helfen dabei, Informationen zu sammeln. Damit sie gut funktionieren, müssen sie klar verständlich, leicht bedienbar und für alle Menschen zugänglich sein.

Warum ist das Webformular barrierefrei?

Ein Formular ist barrierefrei, wenn es auch von Menschen mit Behinderungen bzw. körperlichen Einschränkungen problemlos genutzt werden kann – zum Beispiel:

• Menschen mit Sehbehinderung oder Blindheit
• Menschen mit motorischen Einschränkungen
• Menschen mit kognitiven oder Lernschwierigkeiten
• Ältere Menschen, die nicht so vertraut mit Technik sind
• Menschen, die keine Maus bedienen können und nur die Tastatur nutzen

Das Formular, das in diesem Blogartikel mit HTML und CSS programmiert wird, berücksichtigt genau diese Bedürfnisse. Es enthält verschiedene Merkmale, die die Bedienung erleichtern:

• Verknüpfte Labels: Jedes Texteingabefeld ist mit einem Label verbunden. Das hilft vor allem Screenreader-Nutzer:innen.
• Tastaturkürzel (Access Keys): Damit kann man per Tastatur schnell zum gewünschten Feld springen – ganz ohne Maus.
• Visuelles Feedback bei Fokus: Wenn ein Feld aktiv ist, wird es gelb hinterlegt.
• Hoher Kontrast beim Absenden-Button: Bei Fokus mit gelbem Hintergrund und schwarzer Schrift.

All diese Funktionen sorgen dafür, dass mehr Menschen selbstständig das Formular ausfüllen können – ohne Hürden.

Was ist ein Screenreader?

Ein Screenreader (auf Deutsch: Bildschirmleseprogramm) ist eine spezielle Software, die blinden oder sehbehinderten Menschen hilft, Webseiten zu nutzen. Der Screenreader „liest“ den Bildschirminhalt vor – zum Beispiel Texte, Überschriften, Links oder Formularfelder.

Statt zu sehen, wo man etwas eingeben muss, hört man es. Der Screenreader sagt zum Beispiel: „Eingabefeld – Vorname“ oder „Button – Absenden“.

Damit das funktioniert, müssen Webseiten gut strukturiert und korrekt programmiert sein. Genau deshalb sind verknüpfte Labels und klare Beschriftungen so wichtig.

Was ist künstliche Intelligenz – und was ist ChatGPT?

Künstliche Intelligenz (KI) bezeichnet Programme, die Aufgaben übernehmen können, für die sonst menschliches Denken notwendig ist – zum Beispiel Texte schreiben, Bilder erkennen oder Programmiercode erstellen.

Eine KI lernt durch viele Daten und Beispiele, wie bestimmte Dinge funktionieren, und kann darauf basierend passende Antworten oder Lösungen liefern.

Für diesen Artikel habe ich eine KI namens ChatGPT von OpenAI verwendet. ChatGPT ist ein Textmodell, das Fragen beantworten, Ideen liefern oder – wie in diesem Fall – sogar fertigen Code schreiben kann. Man schreibt einfach eine genaue Aufgabe (einen sogenannten Prompt), und die KI erledigt den Rest.

Das Tolle daran: Auch Menschen ohne viel Programmiererfahrung können so z.B. barrierefreie Formulare erstellen – schnell und verständlich.

Wer lieber ein Video schaut, hier gibt es das Video zum Blogartikel:

Der KI-Prompt

Die Aufgabe habe ich der KI in Form eines sogenannten Prompts gegeben. Ein Prompt ist einfach gesagt eine ganz genaue Beschreibung dessen, was die KI machen soll.

Ich musste meinen Prompt mehrmals anpassen und verbessern, bis am Ende genau das Ergebnis herauskam, das ich mir vorgestellt hatte.

Hier der vollständige Prompt:

Programmiere ein barrierefreies Webformular mit HTML und CSS. HTML und CSS sollen in getrennten Dateien gespeichert werden. Erstelle ein Webformular mit Labels und Eingabefeldern für folgende Angaben: Vorname, Nachname, Straße, Postleitzahl, Ort, Telefon, Mailadresse. Die Labels sollen mit den Eingabefeldern verknüpft sein. Die Labels sollen per Tastaturkürzel erreichbar sein. Der jeweilige Buchstabe des Tastenkürzels soll im Label unterstrichen dargestellt werden. Wenn ein Eingabefeld oder der Schalter ‚Absenden‘ den Eingabefokus erhält, soll es eine gelbe Hintergrundfarbe bekommen. Wenn der Fokus verloren geht, soll die Hintergrundfarbe wieder weiß werden. Wenn der Schalter ‚Absenden‘ den Fokus erhält, soll zusätzlich auch die Schriftfarbe schwarz werden.

Der KI-generierte Code

Hier der barrierefreie HTML-und CSS-Code den die KI erstellt hat.

HTML

<form action="#" method="post" novalidate="">&nbsp;
<div class="form-group"><label accesskey="v" for="vorname">V<span class="underline">o</span>rname:</label> <input id="vorname" name="vorname" required="" type="text" /></div>

<div class="form-group"><label accesskey="n" for="nachname"><span class="underline">N</span>achname:</label> <input id="nachname" name="nachname" required="" type="text" /></div>

<div class="form-group"><label accesskey="s" for="strasse"><span class="underline">S</span>traße:</label> <input id="strasse" name="strasse" required="" type="text" /></div>

<div class="form-group"><label accesskey="p" for="plz"><span class="underline">P</span>ostleitzahl:</label> <input id="plz" title="Bitte eine 5-stellige Postleitzahl eingeben" name="plz" pattern="\d{5}" required="" type="text" /></div>

<div class="form-group"><label accesskey="o" for="ort"><span class="underline">O</span>rt:</label> <input id="ort" name="ort" required="" type="text" /></div>

<div class="form-group"><label accesskey="t" for="telefon"><span class="underline">T</span>elefon:</label> <input id="telefon" title="Telefonnummer eingeben" name="telefon" pattern="[\d\s+\-()]{5,}" type="tel" /></div>

<div class="form-group"><label accesskey="m" for="mail"><span class="underline">M</span>ailadresse:</label> <input id="mail" name="mail" required="" type="email" /></div>

<div class="form-group"><button accesskey="a" type="submit">Absenden</button></div>
</form>

Der CSS-Code

body {
    font-family: Arial, sans-serif;
    margin: 2rem;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: inline-block;
    margin-bottom: 0.3rem;
    cursor: pointer;
}

/* Unterstrichene Buchstaben im Label */
label .underline {
    text-decoration: underline;
}

/* Eingabefelder und Button - Grundstil */
input[type="text"],
input[type="tel"],
input[type="email"],
button {
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Fokus auf Eingabefelder und Button: gelber Hintergrund */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
button:focus {
    background-color: yellow;
    outline: 2px solid #555;
}

/* Zusätzlich für den Button beim Fokus Schriftfarbe schwarz */
button:focus {
    color: black;
    font-weight: bold;
}

Schlussbemerkung

Ein barrierefreies Webformular zu erstellen ist gar nicht so kompliziert – vor allem, wenn man dabei Unterstützung durch künstliche Intelligenz bekommt. Mit ein paar einfachen Regeln und etwas Aufmerksamkeit für unterschiedliche Bedürfnisse kann man Webseiten für viel mehr Menschen zugänglich machen. Die hier vorgestellte Lösung zeigt, wie man mit HTML, CSS und einer klaren Idee ein Formular programmiert, das von allen genutzt werden kann – egal ob mit Maus, Tastatur oder Screenreader. Und mit Hilfe von ChatGPT war es sogar möglich, den passenden Code schnell und unkompliziert zu erzeugen. Probieren Sie es selbst aus – barrierefreies Webdesign lohnt sich für alle Menschen.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Weiterlesen

Barrierefreie Webseiten-Navigation programmieren mit künstlicher Intelligenz (KI) – Anleitung
Experten für digitale Barrierefreiheit: Was sie wirklich können müssen