Barrierefreiheit: keine aria-Attribute, kein :focus, kein prefers-reduced-motion #9

New issue

Open

opened 2026-10-18 23:23:35 +02:00 by gilli · 0 comments

gilli commented

2026-10-18 23:23:35 +02:00

Owner

Problem

Die Oberfläche ist rein visuell.

index.html enthält kein aria- und kein role=.
Die drei Instrumente (max-Q, max-G, Stabilität) sind leere <i>-Balken in .meter (styles.css:131-135); der Zahlenwert steht daneben, gehört aber nicht zum Balken.
:focus ist nicht gestylt — styles.css:56-63 definiert nur :hover, :disabled, .primary, .ghost. Tastaturnutzung ist damit kaum sichtbar.
prefers-reduced-motion fehlt. Der Kamera-Shake (src/render.js:489-492) setzt die Kameraposition pro Frame zufällig, genau der Fall, den die Abfrage beruhigen will.

Vorschlag

role="meter" plus aria-valuenow/aria-valuemax auf den Balken, oder aria-hidden auf den Balken, wenn die Zahl daneben schon reicht.
:focus-visible mit der bestehenden --accent-Kante.
Shake bei prefers-reduced-motion: reduce auf 0 setzen.

Prüfung

Tabber durch die Builder-Schaltflächen und sieht eindeutig, welche den Fokus hält. Screenshots mit und ohne prefers-reduced-motion zeigen keinen Kameraversatz.

## Problem Die Oberfläche ist rein visuell. - `index.html` enthält kein `aria-` und kein `role=`. - Die drei Instrumente (max-Q, max-G, Stabilität) sind leere `<i>`-Balken in `.meter` (`styles.css:131-135`); der Zahlenwert steht daneben, gehört aber nicht zum Balken. - `:focus` ist nicht gestylt — `styles.css:56-63` definiert nur `:hover`, `:disabled`, `.primary`, `.ghost`. Tastaturnutzung ist damit kaum sichtbar. - `prefers-reduced-motion` fehlt. Der Kamera-Shake (`src/render.js:489-492`) setzt die Kameraposition pro Frame zufällig, genau der Fall, den die Abfrage beruhigen will. ## Vorschlag - `role="meter"` plus `aria-valuenow`/`aria-valuemax` auf den Balken, oder `aria-hidden` auf den Balken, wenn die Zahl daneben schon reicht. - `:focus-visible` mit der bestehenden `--accent`-Kante. - Shake bei `prefers-reduced-motion: reduce` auf 0 setzen. ## Prüfung Tabber durch die Builder-Schaltflächen und sieht eindeutig, welche den Fokus hält. Screenshots mit und ohne `prefers-reduced-motion` zeigen keinen Kameraversatz.

gilli added the

a11y

label

2026-10-18 23:23:35 +02:00