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>

frontend/src/app.js

@@ -561,6 +561,7 @@ const I18N = {
     mixedWarn:"Zeile {line}: Unter „{label}“ sind - und | gemischt — dargestellt nach dem ersten Kind.",
     st_idee:"Idee", st_geplant:"geplant", st_arbeit:"in Arbeit", st_durchstich:"Durchstich",
     st_fertig:"fertig", st_prod:"in Produktion", st_verworfen:"verworfen",
+    a11yStatus:"Status: {status}", a11ySize:"Aufwand: {size}", a11ySizeImplicit:"Aufwand: M (angenommen)", a11yTags:"Zuständig: {names}", a11yLink:"verlinkt",
     hint_indent:"Einrückung (2 Leerzeichen oder Tab) definiert die Hierarchie.",
     hint_all:"Teilpaket, alle erforderlich", hint_any:"Alternative, eine wählen",
     hint_root:"Zeile ohne Zeichen = Wurzelknoten. Geschwister sollten dasselbe Zeichen tragen.",
@@ -598,6 +599,7 @@ const I18N = {
     mixedWarn:"Line {line}: under “{label}”, - and | are mixed — rendered by the first child.",
     st_idee:"idea", st_geplant:"planned", st_arbeit:"in progress", st_durchstich:"walking skeleton",
     st_fertig:"done", st_prod:"in production", st_verworfen:"discarded",
+    a11yStatus:"Status: {status}", a11ySize:"Effort: {size}", a11ySizeImplicit:"Effort: M (assumed)", a11yTags:"Assigned: {names}", a11yLink:"has link",
     hint_indent:"Indentation (2 spaces or a tab) defines the hierarchy.",
     hint_all:"sub-task, all required", hint_any:"alternative, choose one",
     hint_root:"Line without a marker = root node. Siblings should share the same marker.",
@@ -635,6 +637,7 @@ const I18N = {
     mixedWarn:"Línea {line}: bajo «{label}» se mezclan - y | — se representa según el primer hijo.",
     st_idee:"idea", st_geplant:"planificado", st_arbeit:"en curso", st_durchstich:"prototipo funcional",
     st_fertig:"terminado", st_prod:"en producción", st_verworfen:"descartado",
+    a11yStatus:"Estado: {status}", a11ySize:"Esfuerzo: {size}", a11ySizeImplicit:"Esfuerzo: M (asumido)", a11yTags:"Responsable: {names}", a11yLink:"con enlace",
     hint_indent:"La sangría (2 espacios o un tabulador) define la jerarquía.",
     hint_all:"subtarea, todas obligatorias", hint_any:"alternativa, elige una",
     hint_root:"Línea sin marcador = nodo raíz. Los hermanos deberían llevar el mismo marcador.",
@@ -672,6 +675,7 @@ const I18N = {
     mixedWarn:"Ligne {line} : sous « {label} », - et | sont mélangés — rendu selon le premier enfant.",
     st_idee:"idée", st_geplant:"planifié", st_arbeit:"en cours", st_durchstich:"squelette fonctionnel",
     st_fertig:"terminé", st_prod:"en production", st_verworfen:"abandonné",
+    a11yStatus:"Statut : {status}", a11ySize:"Effort : {size}", a11ySizeImplicit:"Effort : M (supposé)", a11yTags:"Responsable : {names}", a11yLink:"avec lien",
     hint_indent:"L'indentation (2 espaces ou une tabulation) définit la hiérarchie.",
     hint_all:"sous-tâche, toutes requises", hint_any:"alternative, en choisir une",
     hint_root:"Ligne sans marqueur = nœud racine. Les frères devraient porter le même marqueur.",
@@ -709,6 +713,7 @@ const I18N = {
     mixedWarn:"Wiersz {line}: pod „{label}” mieszają się - i | — renderowane według pierwszego dziecka.",
     st_idee:"pomysł", st_geplant:"zaplanowane", st_arbeit:"w toku", st_durchstich:"działający szkielet",
     st_fertig:"gotowe", st_prod:"w produkcji", st_verworfen:"odrzucone",
+    a11yStatus:"Status: {status}", a11ySize:"Nakład: {size}", a11ySizeImplicit:"Nakład: M (założony)", a11yTags:"Przypisano: {names}", a11yLink:"z linkiem",
     hint_indent:"Wcięcie (2 spacje lub tabulator) definiuje hierarchię.",
     hint_all:"podzadanie, wszystkie wymagane", hint_any:"alternatywa, wybierz jedną",
     hint_root:"Wiersz bez znacznika = węzeł główny. Rodzeństwo powinno mieć ten sam znacznik.",
@@ -746,6 +751,7 @@ const I18N = {
     mixedWarn:"Строка {line}: под «{label}» смешаны - и | — отображается по первому потомку.",
     st_idee:"идея", st_geplant:"запланировано", st_arbeit:"в работе", st_durchstich:"сквозной прототип",
     st_fertig:"готово", st_prod:"в эксплуатации", st_verworfen:"отклонено",
+    a11yStatus:"Статус: {status}", a11ySize:"Оценка: {size}", a11ySizeImplicit:"Оценка: M (предполагается)", a11yTags:"Ответственные: {names}", a11yLink:"со ссылкой",
     hint_indent:"Отступ (2 пробела или табуляция) задаёт иерархию.",
     hint_all:"подзадача, все обязательны", hint_any:"альтернатива, выберите одну",
     hint_root:"Строка без маркера = корневой узел. У соседних узлов должен быть одинаковый маркер.",
@@ -783,6 +789,7 @@ const I18N = {
     mixedWarn:"पंक्ति {line}: „{label}“ के अंतर्गत - और | मिश्रित हैं — पहले चाइल्ड के अनुसार दिखाया गया।",
     st_idee:"विचार", st_geplant:"नियोजित", st_arbeit:"प्रगति पर", st_durchstich:"कार्यशील ढाँचा",
     st_fertig:"पूर्ण", st_prod:"उत्पादन में", st_verworfen:"अस्वीकृत",
+    a11yStatus:"स्थिति: {status}", a11ySize:"आकार: {size}", a11ySizeImplicit:"आकार: M (अनुमानित)", a11yTags:"जिम्मेदार: {names}", a11yLink:"लिंक सहित",
     hint_indent:"इंडेंट (2 स्पेस या टैब) पदानुक्रम तय करता है।",
     hint_all:"उप-कार्य, सभी आवश्यक", hint_any:"विकल्प, एक चुनें",
     hint_root:"बिना मार्कर वाली पंक्ति = मूल नोड। सहोदर नोड्स का मार्कर समान होना चाहिए।",
@@ -820,6 +827,7 @@ const I18N = {
     mixedWarn:"第 {line} 行：在「{label}」下 - 与 | 混用——按第一个子项渲染。",
     st_idee:"想法", st_geplant:"已计划", st_arbeit:"进行中", st_durchstich:"可运行骨架",
     st_fertig:"已完成", st_prod:"已上线", st_verworfen:"已放弃",
+    a11yStatus:"状态：{status}", a11ySize:"工作量：{size}", a11ySizeImplicit:"工作量：M（假定）", a11yTags:"负责人：{names}", a11yLink:"含链接",
     hint_indent:"缩进（2 个空格或制表符）定义层级。",
     hint_all:"子任务，全部必需", hint_any:"备选项，择其一",
     hint_root:"无标记的行 = 根节点。同级应使用相同的标记。",
@@ -857,6 +865,7 @@ const I18N = {
     mixedWarn:"{line} 行目：「{label}」の下で - と | が混在 — 最初の子に従って表示。",
     st_idee:"アイデア", st_geplant:"計画済み", st_arbeit:"作業中", st_durchstich:"ウォーキングスケルトン",
     st_fertig:"完了", st_prod:"本番稼働", st_verworfen:"破棄",
+    a11yStatus:"ステータス: {status}", a11ySize:"規模: {size}", a11ySizeImplicit:"規模: M（想定）", a11yTags:"担当: {names}", a11yLink:"リンクあり",
     hint_indent:"インデント（スペース2つまたはタブ）で階層を定義します。",
     hint_all:"サブタスク、すべて必須", hint_any:"選択肢、1つを選ぶ",
     hint_root:"マーカーのない行 = ルートノード。兄弟は同じマーカーを使うべきです。",

frontend/src/render.js

@@ -16,29 +16,47 @@ import { gateOf, needsBreakdown, visibleChildren, cheapCls } from './model.js';
 export function esc(s){
   return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }
+/* Escaping für Attributwerte (zusätzlich " -> &quot;). */
+function attr(s){ return esc(String(s)).replace(/"/g,'&quot;'); }
+
+/* Barrierefreier Name eines Knotens: Label + Status + Aufwand + Zuständige +
+   Link. Die visuellen Badges (Größe, Tags, ↗) sind aria-hidden — ihre
+   Information steckt hier, sonst würde der Screenreader Kryptisches („M",
+   „anna", „↗") vorlesen. */
+function nodeAria(n, opts){
+  const { t, cheapPath } = opts;
+  const parts = [n.label];
+  if(n.status) parts.push(t('a11yStatus', {status: t('st_' + n.status.key)}));
+  if(n.size) parts.push(t('a11ySize', {size: n.size}));
+  else if(cheapPath) parts.push(t('a11ySizeImplicit'));
+  if(n.tags && n.tags.length) parts.push(t('a11yTags', {names: n.tags.join(', ')}));
+  if(n.url) parts.push(t('a11yLink'));
+  return parts.join(', ');
+}
 
 function nodeHtml(n, extra, opts){
   const { t, cheapPath } = opts;
   const need = needsBreakdown(n);
   const cls = ['node', extra || '', n.status ? 'st-' + n.status.key : '']
     .filter(Boolean).join(' ');
-  const title = n.status ? ` title="${esc(t('st_' + n.status.key)).replace(/"/g,'&quot;')}"` : '';
+  const title = n.status ? ` title="${attr(t('st_' + n.status.key))}"` : '';
   const tagsHtml = n.tags && n.tags.length
-    ? `<span class="tags">${n.tags.map(tag => `<span class="tag">${esc(tag)}</span>`).join('')}</span>`
+    ? `<span class="tags" aria-hidden="true">${n.tags.map(tag => `<span class="tag">${esc(tag)}</span>`).join('')}</span>`
     : '';
-  const implicitTip = esc(t('implicitSizeTooltip')).replace(/"/g,'&quot;');
+  const implicitTip = attr(t('implicitSizeTooltip'));
   const sizeBadge = n.size
-    ? `<span class="size">${n.size}</span>`
-    : (cheapPath ? `<span class="size implicit" title="${implicitTip}">M</span>` : '');
+    ? `<span class="size" aria-hidden="true">${n.size}</span>`
+    : (cheapPath ? `<span class="size implicit" aria-hidden="true" title="${implicitTip}">M</span>` : '');
   const inner = esc(n.label) +
-                (n.url ? '<span class="ext">↗</span>' : '') +
+                (n.url ? '<span class="ext" aria-hidden="true">↗</span>' : '') +
                 sizeBadge +
                 tagsHtml;
+  const aria = ` aria-label="${attr(nodeAria(n, opts))}"`;
   const html = n.url
-    ? `<a class="${cls}" href="${esc(n.url).replace(/"/g,'&quot;')}" target="_blank" rel="noopener"${title}>${inner}</a>`
-    : `<div class="${cls}"${title}>${inner}</div>`;
-  const ghostTip = esc(t('ghostTooltip')).replace(/"/g,'&quot;');
-  const ghost = `<div class="ghost-node" title="${ghostTip}">${esc(t('ghost'))}</div>`;
+    ? `<a class="${cls}" href="${attr(n.url)}" target="_blank" rel="noopener"${aria}${title}>${inner}</a>`
+    : `<div class="${cls}" tabindex="0"${aria}${title}>${inner}</div>`;
+  const ghostTip = attr(t('ghostTooltip'));
+  const ghost = `<div class="ghost-node" aria-label="${ghostTip}" title="${ghostTip}">${esc(t('ghost'))}</div>`;
   return html + (need ? ghost : '');
 }
 

frontend/src/style.css

@@ -324,6 +324,9 @@
   }
   a.node{text-decoration:none;cursor:pointer}
   a.node:hover{box-shadow:0 2px 8px rgba(36,52,71,.22)}
+  /* Sichtbarer Tastatur-Fokus (Knoten sind fokussierbar: Fokusreihenfolge =
+     Lese-/Dokumentreihenfolge; Screenreader liest den aria-label). */
+  .node:focus-visible{outline:2px solid var(--or);outline-offset:2px;box-shadow:0 2px 8px rgba(36,52,71,.22)}
   .ext{font-size:.72em;margin-left:5px;opacity:.55}
   .size{
     position:absolute;top:-9px;right:-9px;