thiel/fobu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Barrierefreiheit: axe auf allen Bereichen, Tastaturabläufe, Prüfliste #50

Merged
thiel merged 1 commit from a11y into main 2026-10-09 23:31:21 +00:00
Conversation 0 Commits 1 Files changed 16 +399 -23
thiel commented 2026-10-09 23:14:40 +00:00
Owner
Copy link

UX-Punkt aus docs/08: Barrierefreiheit über die Startseiten hinaus prüfen.

Neu: automatische Prüfung aller Bereiche (e2e/tests/a11y-screens.spec.ts)

  • axe-core mit WCAG 2.2 AA und Best Practices, hell und dunkel.
  • Abgedeckt:
    • Übersicht, Bibliothek, Freigaben, Konto
    • alle 8 Admin-Bereiche
    • Editor mit Frage, Logik, Design, Verbinden, Einstellungen, Zahlung, Übersetzungen, Versionen, Teilen und Vorschau
    • Dialoge „Neues Formular“ und „Veröffentlichen“
    • Auswertung, Einzelantworten mit Detail
    • Smartphone-Ansicht
    • Formular mit Fehlerliste, Gesprächsmodus nach dem ersten Schritt, Endseite
    • Selbstverwaltung (auch beim Bearbeiten) und geteilte Ergebnisse
  • Läuft nur in Chromium, weil axe unabhängig von der Engine misst.

Neu: Tastaturabläufe in Chromium und WebKit (e2e/tests/keyboard.spec.ts)

  • Formular: Fehlerliste mit Fokus, Sprung ins Feld, Pfeiltasten und Leertaste für alle Feldarten, Absenden mit Fokus auf der Endseite.
  • Gesprächsmodus: Enter geht weiter, Fehler bleiben am Feld.
  • Editor: Frage anlegen, Bereich wechseln.
  • Antworten: Zeile öffnen, Escape schließt und gibt den Fokus zurück.

Behoben

  • Formular ohne main-Bereich: Inhalte lagen außerhalb jeder Landmarke. Der Renderer-Root ist jetzt main, innere main sind zu div geworden.
  • Gesprächsmodus ohne h1: Der Formulartitel ist jetzt eine Überschrift.
  • Doppeltes main in den Admin-Bereichen System und Datenschutz.
  • Kontrast der Fehlerliste und von „storniert“ lag bei 4,1:1. Jetzt mit der Textfarbe abgedunkelt, über 7:1.
  • Klickflächen im Editor unter 24 px (Fragetitel, Beschreibung, „Antwort einsetzen“) haben jetzt eine Mindesthöhe (WCAG 2.5.8).
  • In der Antwortliste sagte der Öffnen-Knopf nur das Datum an, jetzt „Antwort vom … öffnen“.

Neu: Prüfliste für Screenreader und echte Geräte (docs/09-pruefliste-barrierefreiheit.md)

  • NVDA, VoiceOver (Mac und iPhone), TalkBack.
  • Smartphone ohne Screenreader, Selbstverwaltung und Zahlung, Verwaltung.
  • Ergebnistabelle zum Ausfüllen.

Geprüft: typecheck, alle Unit-Tests, Build (Renderer 44,7 kB), e2e Chromium 115/115, Tastatur- und a11y-Tests zusätzlich in WebKit.

🤖 Generated with Claude Code

https://claude.ai/code/session_015z57Agxa5kZg6szB3zFN3x

UX-Punkt aus docs/08: Barrierefreiheit über die Startseiten hinaus prüfen. **Neu: automatische Prüfung aller Bereiche** (`e2e/tests/a11y-screens.spec.ts`) - axe-core mit WCAG 2.2 AA und Best Practices, hell und dunkel. - Abgedeckt: - Übersicht, Bibliothek, Freigaben, Konto - alle 8 Admin-Bereiche - Editor mit Frage, Logik, Design, Verbinden, Einstellungen, Zahlung, Übersetzungen, Versionen, Teilen und Vorschau - Dialoge „Neues Formular“ und „Veröffentlichen“ - Auswertung, Einzelantworten mit Detail - Smartphone-Ansicht - Formular mit Fehlerliste, Gesprächsmodus nach dem ersten Schritt, Endseite - Selbstverwaltung (auch beim Bearbeiten) und geteilte Ergebnisse - Läuft nur in Chromium, weil axe unabhängig von der Engine misst. **Neu: Tastaturabläufe in Chromium und WebKit** (`e2e/tests/keyboard.spec.ts`) - Formular: Fehlerliste mit Fokus, Sprung ins Feld, Pfeiltasten und Leertaste für alle Feldarten, Absenden mit Fokus auf der Endseite. - Gesprächsmodus: Enter geht weiter, Fehler bleiben am Feld. - Editor: Frage anlegen, Bereich wechseln. - Antworten: Zeile öffnen, Escape schließt und gibt den Fokus zurück. **Behoben** - Formular ohne `main`-Bereich: Inhalte lagen außerhalb jeder Landmarke. Der Renderer-Root ist jetzt `main`, innere `main` sind zu `div` geworden. - Gesprächsmodus ohne `h1`: Der Formulartitel ist jetzt eine Überschrift. - Doppeltes `main` in den Admin-Bereichen System und Datenschutz. - Kontrast der Fehlerliste und von „storniert“ lag bei 4,1:1. Jetzt mit der Textfarbe abgedunkelt, über 7:1. - Klickflächen im Editor unter 24 px (Fragetitel, Beschreibung, „Antwort einsetzen“) haben jetzt eine Mindesthöhe (WCAG 2.5.8). - In der Antwortliste sagte der Öffnen-Knopf nur das Datum an, jetzt „Antwort vom … öffnen“. **Neu: Prüfliste für Screenreader und echte Geräte** (`docs/09-pruefliste-barrierefreiheit.md`) - NVDA, VoiceOver (Mac und iPhone), TalkBack. - Smartphone ohne Screenreader, Selbstverwaltung und Zahlung, Verwaltung. - Ergebnistabelle zum Ausfüllen. Geprüft: typecheck, alle Unit-Tests, Build (Renderer 44,7 kB), e2e Chromium 115/115, Tastatur- und a11y-Tests zusätzlich in WebKit. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_015z57Agxa5kZg6szB3zFN3x
Barrierefreiheit: axe auf allen Bereichen, Tastaturabläufe, Landmarken, Kontrast, Zielgrößen
All checks were successful
check / verify (pull_request) Successful in 16m33s
Details
6238a4581e
 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015z57Agxa5kZg6szB3zFN3x
thiel merged commit 8b8646f4fc into main 2026-10-09 23:31:21 +00:00
thiel deleted branch a11y 2026-10-09 23:31:21 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
thiel/fobu!50
No description provided.