eforms.cloud – Barrierefreiheit

1. Ueberblick & Zielstandard

eforms.cloud ist eine oeffentlich zugaengliche Plattform fuer sicheres Hosting elektronischer Formulare mit dynamischer Auswertung. Als Webanwendung im Gesundheitsbereich orientiert sich das System an folgenden Standards:

WCAG 2.1 Level AA — Web Content Accessibility Guidelines des W3C
BITV 2.0 — Barrierefreie-Informationstechnik-Verordnung (Deutschland)
EN 301 549 — Europaeischer Standard fuer digitale Barrierefreiheit

Ziel ist es, dass alle Nutzerinnen und Nutzer — unabhaengig von Einschraenkungen — das Meldeformular vollstaendig und selbststaendig bedienen koennen.

2. Wahrnehmbar (Perceivable)

Textalternativen (WCAG 1.1.1)

Element	Datei	Status
Logo (linkes Header-Logo)	`AppHeader.vue`	OK Dynamischer `alt`-Text aus Layout-Einstellungen
Logo (rechtes Header-Logo)	`AppHeader.vue`	Behoben Dynamischer `alt`-Text aus Layout-Einstellungen

Info und Beziehungen (WCAG 1.3.1)

Alle Formulargruppen verwenden <fieldset> und <legend>
Checkbox-Gruppen haben role="group" und aria-labelledby
Tabellen-Header verwenden scope="col"
Labels sind konsequent mit for-Attributen an Eingabefelder gebunden

Farbkontrast (WCAG 1.4.3)

Element	Vordergrund	Hintergrund	Kontrast	Status
Haupttext	`#0b0b0b`	`#ffffff`	19.4:1	OK
Gedaempfter Text	`#6b7280`	`#ffffff`	4.6:1	OK
Admin-Sidebar Text	`rgba(255,255,255,0.8)`	`#0b3b8c`	~5.5:1	Behoben
Buttons (weiss auf blau)	`#ffffff`	`#0b3b8c`	9.8:1	OK

3. Bedienbar (Operable)

Tastaturzugaenglichkeit (WCAG 2.1.1)

Alle Formularfelder, Buttons und Links sind per Tastatur erreichbar
Klickbare Tabellenzeilen (Admin-Meldungsliste) haben tabindex="0" und @keydown.enter
Toggle-Switch im Admin-Bereich ist per Tastatur bedienbar

Skip-Link (WCAG 2.4.1)

Beide Layouts (default.vue und admin.vue) enthalten einen Skip-Link „Zum Inhalt springen“, der bei Tastaturfokus sichtbar wird und direkt zum Hauptinhalt (#main-content) springt.

Seitentitel (WCAG 2.4.2)

Jede Seite setzt einen individuellen Titel ueber useHead({ title: ... }). Beispiele:

eforms.cloud - Hinweise
eforms.cloud - Formular
eforms.cloud Admin - Einreichungen

Fokus sichtbar (WCAG 2.4.7)

Alle interaktiven Elemente haben sichtbare :focus-visible-Styles:

Buttons: 3px blauer Outline mit 2px Offset
Formularfelder: Blauer Rand mit Box-Shadow
Links: 3px blauer Outline

4. Verstaendlich (Understandable)

Sprache der Seite (WCAG 3.1.1)

Das lang="de"-Attribut ist in nuxt.config.ts global gesetzt (htmlAttrs: { lang: 'de' }).

Fehlererkennung (WCAG 3.3.1)

Die ValidationErrors.vue-Komponente zeigt fehlende Pflichtfelder als Liste an
Fehlerhafte Felder werden visuell mit rotem Rand hervorgehoben (.field-error)
Der Fehlerbereich hat role="alert" und aria-live="assertive", damit Screenreader Fehler sofort vorlesen
Pflichtfelder sind mit aria-required="true" und aria-invalid (dynamisch) ausgezeichnet

Beschriftungen und Anweisungen (WCAG 3.3.2)

Alle Formularfelder haben beschreibende Labels. Pflichtfelder sind zusaetzlich mit einem visuellen Stern (*) und dem ARIA-Attribut aria-required="true" gekennzeichnet.

5. Robust

Name, Rolle, Wert (WCAG 4.1.2)

Element	Massnahme
Pflichtfelder	`aria-required="true"` auf bundesland, landkreis, datumVorfall, berufsgruppe, consent
Fehlerhafte Felder	`:aria-invalid="fieldErrors.includes('...')"` (dynamisch)
Checkbox-Gruppen	`role="group"` mit `aria-labelledby`
Klickbare Tabellenzeilen	`role="link"`, `tabindex="0"`, `aria-label`
Toggle-Switch	`aria-label="Wartungsmodus"` auf dem versteckten Checkbox-Input
Fehlermeldungen	`role="alert"` und `aria-live="assertive"`
Admin-Sidebar	`aria-label="Admin-Navigation"` auf `<aside>`, `<nav>`-Element mit `aria-label`

6. Umgesetzte Massnahmen (Zusammenfassung)

Massnahme	Betroffene Dateien	WCAG-Kriterium
Skip-Link hinzugefuegt	`layouts/default.vue`, `layouts/admin.vue`	2.4.1
Focus-Visible-Styles fuer Buttons und Links	`assets/css/main.css`	2.4.7
Farbkontrast in Admin-Sidebar verbessert	`assets/css/main.css`	1.4.3
`aria-required` und `aria-invalid` auf Pflichtfeldern	`components/forms/OrtFieldset.vue`, `ZeitpunktFieldset.vue`, `BerichtendeFieldset.vue`, `ConsentSection.vue`	4.1.2, 3.3.1
`role="group"` und `aria-labelledby` auf Checkbox-Gruppen	`components/forms/*.vue`, `pages/meldung/[slug].vue`	1.3.1, 4.1.2
`role="alert"` und `aria-live` auf Fehlermeldungen	`components/forms/ValidationErrors.vue`	3.3.1, 4.1.3
Alt-Text des Partnerlogos verbessert	`components/AppHeader.vue`	1.1.1
`scope="col"` auf Tabellen-Header	`pages/admin/meldungen/index.vue`, `pages/admin/benutzer.vue`	1.3.1
Klickbare Tabellenzeilen per Tastatur bedienbar	`pages/admin/meldungen/index.vue`	2.1.1
Toggle-Switch mit ARIA-Label	`pages/admin/einstellungen.vue`	4.1.2
Externe Links: `rel="noopener"` und SR-Hinweis	`components/AppFooter.vue`, `pages/meldung/[slug].vue`	2.4.4
Screenreader-only CSS-Klasse (`.sr-only`)	`assets/css/main.css`	—
Semantische Navigation im Admin-Layout	`layouts/admin.vue`	1.3.1

7. Testen der Barrierefreiheit

Automatisierte Tests

Lighthouse Accessibility Audit: Im Chrome DevTools unter „Lighthouse“ > „Accessibility“
axe DevTools: Browser-Extension fuer automatisierten WCAG-Check
WAVE: Web Accessibility Evaluation Tool (Browser-Extension)

Manuelle Tests

Tastaturnavigation: Mit Tab, Enter und Escape durch alle Seiten navigieren
Screenreader: NVDA (Windows) oder VoiceOver (macOS) zum Pruefen der Formular- und Tabellenstruktur
Kontrastpruefung: WebAIM Contrast Checker fuer alle Farbkombinationen
Zoom-Test: Seite auf 200% vergroessern und pruefen, ob alle Inhalte nutzbar bleiben

Checkliste fuer neue Features

Hat jedes Formularfeld ein zugehoeriges <label>?
Sind Pflichtfelder mit aria-required="true" markiert?
Haben interaktive Elemente sichtbare Fokus-Styles?
Sind Bilder mit beschreibendem alt-Text versehen?
Oeffnen externe Links mit target="_blank" auch rel="noopener" und einen Screenreader-Hinweis?
Sind Checkbox-/Radio-Gruppen mit role="group" und aria-labelledby versehen?
Ist das Feature per Tastatur vollstaendig bedienbar?

Barrierefreiheit (Accessibility)

Inhalt