Barrierefreie Formulare (WCAG 2.2)

KCForms erfüllt die Anforderungen an Barrierefreiheit zum größten Teil selbst: Knöpfe sind groß genug, die Anmeldung funktioniert mit Passwortmanagern, und Fehlermeldungen werden vorgelesen. Bei drei Kriterien aus WCAG 2.2 hängt das Ergebnis aber auch davon ab, wie Sie Ihr Formular bauen. Diese Seite zeigt, worauf Sie achten sollten.

Zusammenklicken reicht — das JSON ist zum Nachschauen da

Alles auf dieser Seite stellen Sie im Formular-Editor ein. Die zugeklappten Kästen zeigen nur, was dabei im Formular gespeichert wird.

Warum das wichtig ist

Behörden, Kommunen, Regionen und staatliche Hochschulen in Schweden müssen ihre digitalen Dienste barrierefrei anbieten (DOS-lagen, Aufsicht: Digg). Der Maßstab ist die Norm EN 301 549. Ihre neue Fassung V4.1.1 verweist auf WCAG 2.2. Sie gilt, sobald sie im EU-Amtsblatt veröffentlicht ist (erwartet Ende 2026). Für Formulare sind drei neue Kriterien besonders wichtig.

Nichts doppelt abfragen (3.3.7 Redundant Entry)

Was jemand im selben Vorgang schon angegeben hat, soll er nicht noch einmal tippen müssen. Das Formular setzt die Angabe ein oder bietet sie zur Auswahl an.

Angaben aus der Anmeldung vorbelegen. Name, E-Mail-Adresse und Kennung kennt KCForms schon aus der Anmeldung. Tragen Sie sie im Feld unter Eigenschaften → Erweitert → Vorbelegung als Makro ein, etwa ${user:firstName}, ${user:lastName} oder ${user:emailAddress}. Das gilt auch für die Anmeldung über die Hochschule (SAML) oder BankID.

Hinter den Kulissen: Vorbelegung mit Makro

"email": {
  "type": "string",
  "title": "E-Mail",
  "format": "email",
  "default": "${user:emailAddress}"
}

Detail-Tabellen: Werte aus der Zeile darüber übernehmen. Steht in jeder Zeile dieselbe Kostenstelle oder derselbe Ort, öffnen Sie die Spalte mit dem Stift-Symbol. Unter Vorbelegung gibt es zwei Möglichkeiten:

• Wert: Eine neue Zeile beginnt mit diesem Wert. Makros wie ${date(yyyy-MM-dd)|now} sind erlaubt.
• Wert aus der vorigen Zeile übernehmen: Eine neue Zeile übernimmt, was in der Zeile darüber steht. Für die erste Zeile gilt die Vorbelegung.

Beides wirkt, wenn jemand auf „+ Zeile" klickt. Startzeilen, die das Formular von sich aus anlegt, bleiben leer. So verschwinden sie beim Speichern weiterhin, wenn niemand etwas hineinschreibt.

Hinter den Kulissen: Spalte mit Vorbelegung und Übernahme

"kostenstelle": {
  "type": "string",
  "title": "Kostenstelle",
  "default": "4711",
  "kc:carryOver": true
}

Ein Feld auf mehreren Seiten. Braucht ein mehrseitiges Formular dieselbe Angabe auf mehreren Seiten, legen Sie das Feld nur einmal an und zeigen es zusätzlich auf den anderen Seiten an. Das tragen Sie im JSON-Editor als kc:appearsOn ein, siehe Mehrseitige Formulare. Es bleibt ein einziger Wert.

„Wie oben"-Ankreuzfeld. Für „Lieferanschrift = Rechnungsanschrift" setzen Sie ein Ankreuzfeld und blenden die zweite Anschrift aus, solange es angekreuzt ist (Sichtbarkeit → bedingt). Brauchen Sie die Werte trotzdem in den Feldern, kopiert ein kurzes Skript im Hook onFieldChange sie hinüber.

Nicht: „E-Mail-Adresse wiederholen"

Ein zweites Feld, in das die E-Mail-Adresse zur Kontrolle noch einmal getippt wird, verlangt genau die Doppeleingabe, die das Kriterium verbietet. Ausgenommen sind nur Passwörter. Besser: die Adresse aus der Anmeldung vorbelegen, oder sie nach dem Absenden in der Bestätigung anzeigen.

Anmeldung ohne Gedächtnisaufgabe (3.3.8 Accessible Authentication)

Niemand darf sich beim Anmelden etwas merken oder abschreiben müssen, wenn es keine Hilfe dafür gibt. Die KCForms-Anmeldeseite erfüllt das:

• Passwortmanager erkennen die Felder.
• Einfügen ist erlaubt.
• Es gibt keine CAPTCHA.

Bei der Anmeldung über die Hochschule (SAML), einen Anmeldedienst (OIDC) oder BankID findet der eigentliche Schritt beim jeweiligen Anbieter statt. Ob dessen Seite das Kriterium erfüllt, liegt bei ihm.

Wenn Sie ein Login-Skript schreiben: Bauen Sie dort keine zusätzlichen Fragen ein, die man sich merken muss (etwa „Wie lautet Ihre Kundennummer?").

Groß genug zum Treffen (2.5.8 Target Size)

Jedes Bedienelement muss mindestens 24 × 24 Pixel groß sein. Alle Knöpfe, die KCForms selbst zeichnet, halten das ein: Löschen-Kreuze, Hilfe-Symbole, Datumswähler, Auswahl-Chips. Ein Test prüft das bei jeder Änderung für alle Formulare.

Im Absolut-Layout (Papiervorlage) bestimmen Sie die Höhe jedes Feldes selbst. Setzen Sie dort Eingabefelder und Ankreuzfelder nicht niedriger als 24 Pixel, vor allem nicht dicht untereinander. Auf schmalen Bildschirmen schaltet KCForms ohnehin auf das normale Layout um, aber am großen Bildschirm gilt Ihre Höhe.

Felder mit ihrem Zweck kennzeichnen (1.3.5)

Fragt ein Feld eine Angabe über die ausfüllende Person selbst ab (Name, E-Mail, Anschrift, Geburtsdatum), stellen Sie unter Eigenschaften → Browser-Autofill / Vorschläge den passenden Zweck ein. Dann kann der Browser die eigenen Angaben vorschlagen, und Hilfsprogramme erkennen das Feld. Die mitgelieferten Feldgruppen „Anschrift", „Kontaktdaten" und „Personenstammdaten" bringen das schon mit.

Bei Angaben über andere Personen stellen Sie keinen Zweck ein, etwa bei Empfänger, Notfallkontakt oder Antragsteller, für den jemand anderes ausfüllt. Der Browser würde sonst die eigenen Daten anbieten.

Hinter den Kulissen: Feld mit Zweck

"plz": { "type": "string", "title": "PLZ", "kc:autocomplete": "postal-code" }