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>

docs/SPEC.md

@@ -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)
 
 ```

docs/TASKS.md

@@ -31,7 +31,12 @@ Abhaken beim Erledigen; neue Aufgaben unten anfügen.
       Phase 2 (`unknownStatus`). `tests/warnings.test.js`.
 
 ## Phase 2 — Qualität
-- [ ] Barrierefreiheit: Fokusreihenfolge, aria-Labels für Status/Größe/Tags.
+- [x] Barrierefreiheit: Fokusreihenfolge, aria-Labels für Status/Größe/Tags.
+      → je Knoten ein sprechender `aria-label` (Label+Status+Aufwand+Zuständige+
+      Link, lokalisiert, neue `a11y*`-Keys in allen 9 Sprachen); visuelle Badges
+      `aria-hidden`; Knoten `tabindex="0"` (Fokus = Lesereihenfolge) mit
+      `:focus-visible`-Rahmen; `#warn` als Live-Region (`role=status`,
+      `aria-live=polite`). Snapshots aktualisiert.
 - [ ] Druck-Stylesheet (Diagramm ohne Editor-Panel).
 - [ ] Fehlertolerantes Parsen weiter ausbauen (unbekannte Statuszeichen melden).