frontend: Barrierefreiheit — aria-Labels, Fokusreihenfolge, Live-Region
TASKS Phase 2. Jeder Diagramm-Knoten bekommt in render.js (nodeAria) einen sprechenden, lokalisierten aria-label: Label + Status + Aufwand (inkl. „(angenommen)" beim impliziten M) + Zuständige + Link. Die rein visuellen Badges (Größe, Tags, ↗) sind aria-hidden, damit der Screenreader nicht „M", „anna", „↗" kryptisch doppelt vorliest. Neue a11y*-i18n-Keys in allen 9 Sprachen. Alle Knoten sind fokussierbar (tabindex=0 bzw. der Link) in Dokument-/Lese- reihenfolge; sichtbarer :focus-visible-Rahmen (Petrol). #warn ist eine Live-Region (role=status, aria-live=polite) — neue Warnungen werden angesagt. Verifiziert: aria-label folgt dem Sprachwechsel (DE/EN), Badges aria-hidden, keine visuelle Regression, keine Konsolenfehler. Renderer-Snapshots aktualisiert (29 Tests grün). SPEC §9 (Barrierefreiheit) + CLAUDE ergänzt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
32a02021ed
commit
15699c321c
@@ -222,6 +222,19 @@ Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen
|
||||
- Es wird genau die **sichtbare** Struktur exportiert (der „verworfene
|
||||
einblenden“-Filter wirkt auch hier).
|
||||
|
||||
### Barrierefreiheit
|
||||
Die visuell codierten Knoten-Eigenschaften werden für Screenreader in einem
|
||||
sprechenden **`aria-label`** je Knoten zusammengefasst — Label, Status, Aufwand
|
||||
(inkl. „(angenommen)“ beim impliziten M), Zuständige und ob der Knoten verlinkt
|
||||
ist —, alles in der aktuellen UI-Sprache. Die rein visuellen Beiwerke
|
||||
(Größen-Badge, Tags, ↗-Pfeil) sind `aria-hidden`, damit sie nicht kryptisch
|
||||
doppelt vorgelesen werden. **Alle** Knoten sind fokussierbar (`tabindex="0"`
|
||||
bzw. der Link selbst); die **Fokusreihenfolge entspricht der Dokument-/
|
||||
Lesereihenfolge** (Wurzeln, dann Kinder in Tiefe). Ein sichtbarer
|
||||
`:focus-visible`-Rahmen (Petrol) zeigt den Tastaturfokus. Der Warnungsbereich
|
||||
ist eine **Live-Region** (`role="status"`, `aria-live="polite"`), sodass neue
|
||||
Warnungen (z. B. gemischte Gates) angesagt werden.
|
||||
|
||||
## 10. Beispiel (kanonisch)
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user