Software / Anfang

Barrierefreies Anmeldeformular für eine Veranstaltung

Entwirf die zugängliche Oberfläche für eine hypothetische Veranstaltungsanmeldung eines Studierendenclubs.

Mit dieser Aufgabe beginnen Beispielarbeiten

Die ersten 30 Minuten

Vor dem Start

Ehrliche HTML- und CSS-Grundkenntnisse sind nötig. Programmieren ist für diesen Brief hilfreich, aber du kannst stattdessen auch einen Design- oder Kommunikationsbrief wählen. Es gibt kein Demo-Backend und keine personenbezogenen Daten.

Die ersten 30 Minuten

Notiere auf Papier die Felder und Zustände für eine Anmeldung zu einer Veranstaltung eines fiktiven Studierendenclubs. Zeichne danach einen einfachen HTML-Rahmen für leere, ungültige und ausgefüllte Zustände.

Ausreichender Umfang für eine kleine Arbeit

Ein Git-Repository oder eine Code-Datei.Eine HTML-Datei mit dem Grundgerüst der Anmeldungsoberfläche.
Screenshots der drei Formularzustände.Leere, ungültige und ausgefüllte Zustände, jeweils klar voneinander unterscheidbar.
Eine Notiz zu Tastaturprüfung und Test auf schmalem Bildschirm.Eine kurze Notiz zu Tastaturbedienung und Darstellung auf einem schmalen Bildschirm.
Ein README mit Entscheidungen und Begrenzungen.Eine README mit deiner Entscheidung und einer klar benannten Grenze der Arbeit.

Wenn du möchtest: erweitern

Ergänze weitere Formularzustände oder eine kleine, rein lokale Vorschau, ohne ein Backend und ohne persönliche Daten zu behaupten.

Beispielhafte Dateistruktur

index.html
README.md
status-leer.png
status-fehler.png

Beispiel für die Präsentation

Eine fiktive Studentin entwarf eine kleine Anmeldungsoberfläche für einen Campusfilmabend. Sie legte zuerst die Felder und Zustände auf Papier fest und überführte sie dann in eine einzelne HTML-Datei. Die Vorschau zeigt einen leeren Zustand und einen Fehlerzustand, aber keine echte Anmeldung. In ihrer README erklärt sie, warum sie die Zahl der Felder begrenzte und die mobile Darstellung nicht vollständig ausarbeitete. Das Beispiel zeigt eine mögliche Präsentationsform, nicht ein abgeschlossenes Kundenprojekt.

Beispiel für ein repräsentatives Konzept; keine echte Kundenarbeit und nicht deine persönliche Arbeit. Lerne die Form kennen und schreibe deine eigenen Entscheidungen auf.

Die Startvorlage ist keine fertige Abgabe. Erstelle deine Belege selbst.

01Szenario

Du arbeitest für einen hypothetischen Studierendenclub und entwirfst die Oberfläche für eine Veranstaltungsanmeldung. Es gibt kein Backend und keine echten personenbezogenen Daten; verwende synthetische Namen.

Ziel

Erstelle einen verständlichen, zugänglichen Frontend-Prototypen für die Anmeldung. Zeige leere, ungültige und ausgefüllte Formularzustände sowie einen nachvollziehbaren Tastaturablauf.

02Umfang und Grenzen

Kein Backend und keine Speicherung echter personenbezogener Daten.
Verwende ausschließlich synthetische Namen und Beispieldaten.
Begrenze die Arbeit auf Formular, Zustände und Tastaturbedienung.

03Umsetzungsschritte

1
Lege Felder, synthetische Daten und die drei Formularzustände fest.
2
Baue den Frontend-Prototypen mit sichtbaren Fokus- und Fehlermeldungen.
3
Prüfe den Ablauf nur mit Tastatur und auf einem schmalen Bildschirm.
4
Dokumentiere Entscheidungen, offene Punkte und Grenzen im README.

04Abgabebelege

Ein Git-Repository oder eine Code-Datei.
Screenshots der drei Formularzustände.
Eine Notiz zu Tastaturprüfung und Test auf schmalem Bildschirm.
Ein README mit Entscheidungen und Begrenzungen.

05Fragen an dich selbst

Welche Formularzustände sind für eine verständliche Bedienung unverzichtbar?
Was kann eine Person ohne Maus erkennen und bedienen?
Welche technische Grenze würdest du als Nächstes untersuchen?

06Quellen und Lizenzen

Erstelle Code und visuelle Elemente selbst oder nutze Material mit passender offener Lizenz. Notiere den Lizenznamen und die Quellen-URL jedes externen Materials; behandle zufällige Internetbilder nicht als offen lizenziert. Kennzeichne Beiträge deines Teams und einer KI.

Leitfaden für eine ethische Darstellung