In diesem Blogartikel wird erklärt wie man mit der Künstlichen Intelligenz Google AI Studio ein barrierefreies Webformular programmieren kann.
In der heutigen digitalen Welt ist Barrierefreiheit nicht nur eine ethische Verpflichtung, sondern auch ein entscheidender Faktor für den Erfolg einer Website. Jedes Detail zählt, und Webformulare sind oft die Schnittstelle, an der Nutzer mit deiner Marke interagieren. Ein barrierefreies Formular stellt sicher, dass jeder, unabhängig von seinen Fähigkeiten, Informationen eingeben und senden kann.
Was wäre, wenn du den Prozess der Erstellung eines solchen Formulars beschleunigen könntest? Genau das haben wir getan, indem wir Google AI Studio um Hilfe gebeten haben. In diesem Artikel zeigen wir dir, wie ein einfacher KI-Prompt zu einem vollständig funktionierenden und barrierefreien HTML- und CSS-Formular führte.
Was ist ein Webformular?
Ein Webformular ist im Wesentlichen ein digitaler Fragebogen auf einer Webseite, der es Benutzern ermöglicht, Informationen einzugeben und an den Server zu senden. Du kennst sie von Online-Shops (Bestellformulare), Registrierungen für Newsletter oder der Eingabe deiner Login-Daten. Sie bestehen typischerweise aus Eingabefeldern (für Text, Zahlen, E-Mails), Auswahllisten, Checkboxen und einem „Absenden“-Button.
Besonders wichtig sind Webformulare auch bei der Kontaktaufnahme mit Behörden und Ämtern. Ob es um die Beantragung eines Dokuments, die Meldung eines Anliegens oder die Übermittlung von persönlichen Daten geht – immer häufiger werden diese Prozesse online über Webformulare abgewickelt. Hier ist Barrierefreiheit von größter Bedeutung, damit alle Bürgerinnen und Bürger uneingeschränkt Zugang zu öffentlichen Dienstleistungen haben.
Verstanden. Du möchtest, dass der Abschnitt über KI im Blogartikel nicht im Plural („wir“) verfasst wird, sondern in einer neutralen Berichtsform. Ich habe den Abschnitt entsprechend überarbeitet und füge ihn hier ein. Die restlichen Teile des Artikels bleiben unverändert.
Künstliche Intelligenz (KI) – Einfach erklärt
Bevor ins Detail gegangen wird, wird hier kurz geklärt, was unter Künstlicher Intelligenz verstanden wird, denn sie ist der Star im Hintergrund dieses Artikels.
Stellen Sie sich vor, man versucht, einem Computer beizubringen, menschliche Aufgaben zu lösen oder menschliches Denken nachzuahmen. Genau das ist die Grundidee der Künstlichen Intelligenz (KI). Es geht darum, Computersysteme zu entwickeln, die lernen, verstehen, planen und Probleme lösen können – ähnlich wie Menschen.
Im Kontext dieses Blogartikels wurde eine spezielle Form der KI genutzt: ein großes Sprachmodell (Large Language Model, LLM). Diese Modelle sind darauf trainiert, riesige Mengen an Textdaten zu verarbeiten. Dadurch können sie Texte verstehen, zusammenfassen, übersetzen und – wie in diesem Fall – sogar neuen Text in einem bestimmten Stil und Format generieren. Wenn der KI die Anforderungen an das Webformular gegeben werden, analysiert sie diese Anweisungen und „schreibt“ den passenden HTML- und CSS-Code, weil sie gelernt hat, wie diese Programmiersprachen aufgebaut sind und welche Muster sie haben. Es ist, als würde man einem sehr fleißigen und wissbegierigen Assistenten eine Aufgabe geben, die er aufgrund seines umfangreichen Wissens sofort erledigen kann.
Was ist Google AI Studio?
Google AI Studio ist eine webbasierte Entwicklerplattform, die von Google bereitgestellt wird, um den Zugriff und die Arbeit mit Googles fortschrittlichen KI-Modellen, insbesondere den großen Sprachmodellen (Large Language Models wie Gemini), zu erleichtern. Man kann es sich als eine Art „Spielplatz“ für KI vorstellen. Hier können Entwickler und Interessierte Experimente mit KI-Modellen durchführen, eigene Prompts (Anfragen) an die KI senden, deren Antworten analysieren und die Modelle für spezifische Aufgaben anpassen. Es ist ein Werkzeug, das die Entwicklung von KI-gestützten Anwendungen vereinfacht, indem es eine benutzerfreundliche Oberfläche für die Interaktion mit komplexen KI-Technologien bietet. In unserem Fall haben wir Google AI Studio genutzt, um unseren Prompt für das barrierefreie Webformular an ein dahinterliegendes Sprachmodell zu senden und den generierten Code direkt zu erhalten.
Die Barrierefreiheit von Google AI Studio habe ich in diesem Blogartikel erklärt:
Googles KI: Google AI Studio und Barrierefreiheit
Was bedeutet Digitale Barrierefreiheit?
Digitale Barrierefreiheit bedeutet, dass digitale Angebote – wie Webseiten, Apps oder Online-Dokumente – von allen Menschen uneingeschränkt genutzt werden können. Dies schließt Menschen mit Behinderungen ein, die beispielsweise visuelle, auditive, motorische oder kognitive Einschränkungen haben. Es geht darum, Hürden im digitalen Raum abzubauen.
Einige Beispiele für Barrierefreiheit sind:
- Für Menschen mit Sehbehinderung: Texte, die von Screenreadern vorgelesen werden können, ausreichende Kontraste bei Farben und die Möglichkeit, die Schriftgröße anzupassen.
- Für Menschen mit motorischen Einschränkungen: Die Bedienung einer Webseite nur mit der Tastatur, ohne Maus, sowie ausreichend große Klickflächen.
- Für Menschen mit Hörbehinderung: Untertitel für Videos oder Transkripte für Audioinhalte.
Im Kern geht es darum, Websites so zu gestalten und zu programmieren, dass sie flexibel sind und sich an die individuellen Bedürfnisse und die verwendeten Hilfsmittel der Nutzer anpassen können. Ein barrierefreies Webformular, wie wir es in diesem Artikel erstellen, ist ein perfektes Beispiel dafür, wie diese Prinzipien in die Praxis umgesetzt werden, um allen Nutzern eine gleichberechtigte Teilnahme zu ermöglichen.
Die Herausforderung: Ein barrierefreies Webformular
Es gab klare Anforderungen für das Formular:
- Grundlegende Eingabefelder: Vorname, Nachname, Straße, Postleitzahl, Ort, Telefon, Mailadresse.
- Getrennte Dateien: HTML und CSS in separaten Dateien für sauberen Code.
- Wesentliche Barrierefreiheitsmerkmale:
- Labels müssen mit den Eingabefeldern verknüpft sein.
- Tastaturkürzel (Accesskeys) mit visuell unterstrichenen Buchstaben.
- Gelber Fokus-Hintergrund für Eingabefelder und den Absenden-Button.
- Hintergrundfarbe sollte nach Fokusverlust wieder weiß sein.
- Fokus auf „Absenden“ sollte auch die Schriftfarbe auf Schwarz ändern.
Dies ist eine Liste, die für einen Entwickler machbar ist, aber die manuelle Umsetzung aller Details kann zeitaufwändig sein. Hier kommt die KI ins Spiel.
Das Formular soll für folgende Personengruppen bedienbar sein:
- Blinde Menschen
- Menschen mit Sehbehinderung
- Menschen mit Farbfehlsichtigkeit
Der KI-Prompt: Meiner Anfrage an Google AI Studio
Ich formulierte meine Anforderungen präzise in einem einzigen Prompt:
„Programmiere ein barrierefreies Webformular mit HTML und CSS. HTML und CSS sollen in getrennten Dateien gespeichert werden. Das Formular enthält Eingabefelder für: Vorname, Nachname, Straße, Postleitzahl, Ort, Telefon, Mailadresse. Besonderheiten: Labels mit den Eingabefeldern verknüpfen, Tastaturkürzel mit unterstrichenem Buchstaben, Gelber Fokus-Hintergrund für Eingabefelder und Button, Fokus-Verlust = Hintergrund wieder weiß, Fokus auf „Absenden“ = schwarze Schriftfarbe.“
Das Ergebnis: Funktionalität und Barrierefreiheit aus der KI
Die KI lieferte umgehend den vollständigen HTML- und CSS-Code, der all unsere Spezifikationen erfüllte. Hier sind die generierten Dateien:
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barrierefreies Kontaktformular</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Kontaktformular</h1>
<form action="#" method="post">
<div class="form-group">
<label for="vorname"><u>V</u>orname:</label>
<input type="text" id="vorname" name="vorname" accesskey="v" required>
</div>
<div class="form-group">
<label for="nachname"><u>N</u>achname:</label>
<input type="text" id="nachname" name="nachname" accesskey="n" required>
</div>
<div class="form-group">
<label for="strasse"><u>S</u>traße:</label>
<input type="text" id="strasse" name="strasse" accesskey="s" required>
</div>
<div class="form-group">
<label for="plz"><u>P</u>ostleitzahl:</label>
<input type="text" id="plz" name="plz" accesskey="p" pattern="[0-9]{5}" title="Bitte geben Sie eine 5-stellige Postleitzahl ein." required>
</div>
<div class="form-group">
<label for="ort"><u>O</u>rt:</label>
<input type="text" id="ort" name="ort" accesskey="o" required>
</div>
<div class="form-group">
<label for="telefon"><u>T</u>elefon:</label>
<input type="tel" id="telefon" name="telefon" accesskey="t" pattern="[0-9]{3}-[0-9]{7}" title="Format: 123-4567890">
</div>
<div class="form-group">
<label for="email"><u>M</u>ailadresse:</label>
<input type="email" id="email" name="email" accesskey="m" required>
</div>
<button type="submit"><u>A</u>bsenden</button>
</form>
</div>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
/* Unterstreichung für Accesskey-Buchstaben */
label u {
text-decoration: underline;
}
input[type="text"],
input[type="tel"],
input[type="email"] {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Stellt sicher, dass Padding und Border zur Breite gehören */
font-size: 16px;
background-color: #fff; /* Standardhintergrund weiß */
transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Gelber Fokus-Hintergrund für Eingabefelder */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
background-color: #fffacd; /* LightYellow */
border-color: #888;
outline: none; /* Entfernt den Standard-Fokusrahmen des Browsers */
}
button[type="submit"] {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
/* Standardhintergrund weiß für den Button, um den Fokus-Effekt zu zeigen */
background-color: #007bff;
}
/* Gelber Fokus-Hintergrund für den Button */
button[type="submit"]:focus {
background-color: #fffacd; /* LightYellow */
color: black; /* Schwarze Schriftfarbe bei Fokus */
outline: none;
border: 1px solid #888;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
Die Umsetzung der Barrierefreiheitsmerkmale im Detail
- Labels mit Eingabefeldern verknüpft (
<label for="id">): Die KI hat konsequent dasfor-Attribut der Labels mit denid-Attributen der Inputs verbunden. Dies ist grundlegend für Screenreader, die dann die Labels als Beschreibungen der Eingabefelder vorlesen. Dies ist für blinde und Menschen mit einer starken Sehbehinderung wichtig. - Tastaturkürzel (
accesskey) mit unterstrichenem Buchstaben: Jedes Eingabefeld und der Button erhielten einaccesskey-Attribut (z.B.accesskey="v"für Vorname). Die KI hat auch die<u>-Tags in den Labels korrekt platziert, um den jeweiligen Kürzelbuchstaben visuell hervorzuheben. Dies ermöglicht es Benutzern, direkt zu einem Feld zu springen (z.B.Alt + Vunter Windows,Ctrl + Vunter Linux). Tastaturkürzel ist für blinde Menschen wichtig. - Gelber Fokus-Hintergrund (
:focusPseudo-Klasse): Im CSS wurde die:focus-Pseudo-Klasse meisterhaft eingesetzt. Sobald ein Benutzer ein Eingabefeld oder den Absenden-Button fokussiert (entweder durch Klicken oder über die Tab-Navigation), wird der Hintergrund auf ein dezentes Gelb (#fffacd) gesetzt. Dies ist ein klarer visueller Indikator für den aktuellen Fokuspunkt. Dies ist für Menschen mit Sehbehinderung wichtig. - Fokus-Verlust = Hintergrund wieder weiß: Sobald der Fokus von einem Feld genommen wird, kehrt der Hintergrund automatisch zu seiner ursprünglichen Farbe zurück, was durch die Standard-CSS-Eigenschaften und das Verhalten der
:focus-Klasse gewährleistet wird. - Fokus auf „Absenden“ = schwarze Schriftfarbe: Beim Fokussieren des Absenden-Buttons wird nicht nur der Hintergrund gelb, sondern auch die Schriftfarbe auf Schwarz geändert. Dies erhöht den Kontrast auf dem hellen Hintergrund und verbessert die Lesbarkeit.
Zusätzliche sinnvolle Details der KI:
- Validierungs-Attribute:
patternundtitlefür Postleitzahl und Telefonnummer bieten wichtige Hinweise für die Dateneingabe und erleichtern die Fehlerkorreidung. required: Pflichtfelder sind klar gekennzeichnet.lang="de": Die Sprachangabe im HTML-Tag ist essenziell für Screenreader.transition: Sanfte Farbübergänge beim Fokussieren sorgen für eine angenehmere Benutzererfahrung.- Mobile-First (
viewportMeta-Tag): Auch wenn nicht explizit angefragt, wurde dasviewport-Meta-Tag hinzugefügt, was für Responsivität wichtig ist.
Schlussbemerkung
Dieses Beispiel zeigt eindrucksvoll, wie KI-Tools wie Google AI Studio Entwickler dabei unterstützen können, qualitativ hochwertigen Code zu generieren, der wichtige Aspekte wie Barrierefreiheit von Anfang an berücksichtigt. Statt boilerplate-Code manuell zu schreiben und jedes Barrierefreiheitsmerkmal einzeln zu implementieren, können Entwickler sich auf komplexere Logik konzentrieren, während die KI die Grundlagen legt.
Barrierefreiheit muss kein mühsamer Zusatzschritt sein. Mit den richtigen Tools und Prompts kann sie nahtlos in den Entwicklungsprozess integriert werden. Probiere es selbst aus und nutze KI, um deine Webprojekte inklusiver und effizienter zu gestalten!
Wenn Sie Fragen zu den obigen Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463.
Ein Kommentar zu „Ein barrierefreies Webformular mit einem KI-Prompt von Google AI Studio programmieren“