In diesem Blogartikel wird erklärt wie mit einem ChatGPT-Prompt ein barrierefreies Multiple-Choice-Quiz programmiert werden kann.
Einleitung
Barrierefreiheit im Web ist kein „Nice-to-have“ mehr, sondern eine Voraussetzung, damit digitale Angebote von allen Menschen genutzt werden können. Ob Screenreader, Tastatursteuerung oder farbkontrastsicheres Design – ein gutes Webprojekt muss diese Aspekte berücksichtigen.
Doch wie kann man ein solches Projekt effizient umsetzen, ohne bei null anfangen zu müssen? Hier kommt GPT ins Spiel. Mit einem sorgfältig formulierten Prompt lassen sich komplette, barrierefreie Anwendungen generieren.
In diesem Artikel zeige ich Schritt für Schritt, wie ein Multiple-Choice-Quiz als Progressive Web App (PWA) entsteht – barrierefrei, tastaturfreundlich und screenreader-tauglich.
Was ist ein Multiple-Choice-Quiz?
Ein Multiple-Choice-Quiz ist ein Frage-Antwort-Spiel, bei dem es zu jeder Frage mehrere Antwortmöglichkeiten gibt. Meistens ist genau eine Antwort richtig, manchmal können es auch mehrere richtige Antworten sein.
Vorteile eines Multiple-Choice-Quiz:
- Spieler:innen können strukturiert überlegen.
- Lerninhalte lassen sich klar abfragen.
- Die Auswertung ist einfach, weil die Antworten vordefiniert sind.
Beispiele kennt man aus Schul-Tests, Führerscheinprüfungen oder Online-Lernplattformen.
Menschen, die JavaScript programmieren können, sind in der Lage, die Quiz-Fragen sehr leicht an ihre eigenen Bedürfnisse anzupassen. So ist es möglich, mit diesem Quiz ganz unterschiedliche Inhalte zu lernen – von Schulfächern über Themen im Studium bis hin zu Schachaufgaben.
Wer statt Text lesen lieber ein Video anschauen möchte, hier gibt es das Video zum Blogartikel:
Was ist eine Progressive Web App (PWA)?
Eine Progressive Web App (PWA) ist eine Website, die sich wie eine App auf dem Smartphone oder Computer anfühlt. Sie läuft im Browser, kann aber:
- installiert werden (ohne App Store)
- offline funktionieren (dank Service Worker)
- Push-Benachrichtigungen verschicken (wenn gewünscht)
Vorteile gegenüber einer Native App:
- Nur eine Codebasis für alle Geräte
- Keine aufwendige App-Store-Veröffentlichung
- Läuft auf jedem Gerät mit Browser – egal ob Android, iPhone, Windows oder Mac
Kurz gesagt: Eine PWA kombiniert die Reichweite einer Website mit den Funktionen einer App.
Wie programmiert man eine PWA?
Eine PWA wird mit den üblichen Webtechnologien erstellt:
- HTML für die Struktur der Seite (z.?B. Fragen, Buttons, Überschriften)
- CSS für das Design (Farben, Layout, Responsivität)
- JavaScript für die Logik (Quiz-Auswertung, Navigation, Tastenkürzel)
Zusätzlich benötigt man:
- Web Manifest (json) – enthält Name, Icon, Startseite der App
- Service Worker (service-worker.js) – ermöglicht Offline-Funktionalität
Damit ist eine PWA im Kern nichts anderes als eine Website mit ein paar Extras – sie fühlt sich für die Nutzer:innen aber wie eine richtige App an.
Der entscheidende Prompt an GPT
Alles beginnt mit dem richtigen Prompt. Genau dieser Text wurde an GPT übergeben:
Programmiere mit HTML, CSS und JavaScript eine barrierefreie Progressive Web App. Es soll ein Multiple-Choice-Quiz werden. HTML, CSS und JavaScript sollen jeweils in einer eigenen Datei liegen. Das CSS soll responsiv sein. Die Buttons sollen eine blaue Hintergrundfarbe bekommen.Das Quiz hat 1 Frage mit 3 Antwortmöglichkeiten. Die Frage und die 3 Antwortmöglichkeiten sollen in einer JavaScript-Struktur gespeichert werden, die sehr leicht erweiterbar ist. Das bedeutet, es soll sehr einfach sein, neue Fragen und Antwortmöglichkeiten zu erstellen. In der Javascript-Struktur sollen 3 Fragen, inklusive Antwortmöglichkeiten, zum Thema „Digitale Barrierefreiheit“ gespeichert sein.Barrierefreiheit:• Die Weboberfläche muss screenreader-tauglich sein.• Die Bedienung soll ohne Computermaus, also nur per Tastatur, möglich sein.• Der Farbkontrast zwischen Schriftfarbe und Hintergrundfarbe muss barrierefrei sein, auch für Menschen mit Farbfehlsichtigkeit.• Das aktive Bedienelement soll eine gelbe Hintergrundfarbe und eine schwarze Schriftfarbe bekommen.• Nach Auswahl einer Antwort soll der Fokus automatisch auf den Button „Antwort prüfen“ springen. Außerdem soll es möglich sein, mit Enter auf einer Antwort nicht nur auszuwählen, sondern sofort die Prüfung auszuführen.• Der Button „Nächste“ muss per Tastatur erreichbar sein und es soll ein Tastaturkürzel geben (z. B. Taste „n“) für die nächste Frage. p für vorherige Frage.• Der Instruktionsabschnitt (mit ID instructions) muss für Screenreader automatisch vorgelesen werden, sobald die Seite geladen wird, ohne den Fokus auf diesen Abschnitt zu setzen, damit alle Tastenkürzel weiterhin funktionieren. Dies wird durch eine ARIA-Live-Region erreicht. Die PWA benötigt ein Web Manifest und einen Service Worker. Im Web Manifest sollen als icons die Bilddateien icon-192.png und icon-512.png angegeben werden.Kommentiere den Code leicht verständlich. Bitte programmiere die PWA. Stelle das Ergebnis als Zip-Datei zum Download zur Verfügung, wenn es geht.
Damit ist alles klar definiert:
- Struktur (HTML, CSS, JS in getrennten Dateien)
- Barrierefreiheit (Screenreader, Tastatur, Kontraste)
- PWA-Funktionalität (Manifest + Service Worker)
- Einfache Erweiterbarkeit (Fragen in JavaScript-Objekten gespeichert)
Generiertes Quiz im Überblick
GPT liefert auf Basis dieses Prompts automatisch eine komplette PWA mit:
- html – semantische Struktur, aria-live-Regionen, Buttons
- css – responsives Design, blaue Buttons, gelber Fokus
- js – Quizlogik, Fragenarray, Tastatursteuerung (n für nächste, p für vorherige Frage)
- json + service-worker.js – offlinefähig und installierbar
Die Fragen im Quiz behandeln direkt das Thema digitale Barrierefreiheit – so wird auch der Lerninhalt barrierefrei vermittelt.
Barrierefreie Funktionen im Überblick
Barrierefreiheit bedeutet, dass digitale Inhalte für alle Menschen nutzbar sind, unabhängig von körperlichen Einschränkungen, Sehfähigkeit, Hörvermögen oder motorischen Fähigkeiten. Niemand soll ausgeschlossen werden – egal durch Bildschirmgröße, Farben oder Eingabemethoden.
Das Quiz ist barrierefrei für:
- Blinde Menschen und Menschen mit Sehbehinderungen, die Screenreader nutzen (z.B. NVDA oder VoiceOver)
- Menschen mit motorischen Einschränkungen, die keine Maus verwenden können
- Menschen mit Farbfehlsichtigkeit, dank hoher Kontraste
Wichtige Funktionen:
- Screenreader-Unterstützung durch aria-live-Regionen und semantische Struktur
- Tastaturbedienung: Tab/Shift+Tab zum Navigieren, Enter/Leertaste zum Auswählen
- Fokusmanagement: Fokus springt automatisch auf „Antwort prüfen“
- Hoher Farbkontrast: Blaue Buttons, gelber Fokus mit schwarzer Schrift
- Tastenkürzel: n für nächste, p für vorherige Frage
- Instruktionen werden beim Laden automatisch vorgelesen
So ist das Quiz für möglichst viele Menschen zugänglich, egal welche Hilfsmittel sie verwenden.
Warum dieser Ansatz so stark ist
- Effizienz: Ein präziser Prompt ersetzt stundenlange Eigenprogrammierung
- Barrierefreiheit von Anfang an: Accessibility ist direkt eingebaut
- Erweiterbarkeit: Neue Fragen lassen sich leicht im JavaScript-Array ergänzen
- Modernes Web-Feature: Dank PWA offline spielbar
Schlussbemerkung
Mit einem sorgfältig formulierten Prompt lässt sich ein komplettes, barrierefreies Multiple-Choice-Quiz erstellen. GPT übernimmt dabei die Umsetzung in HTML, CSS, JavaScript, Manifest und Service Worker.
Das Projekt zeigt: Barrierefreiheit ist kein Extra, sondern integraler Bestandteil moderner Webentwicklung – und mit KI-Werkzeugen einfacher umsetzbar denn je.
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.