fix(a11y): Seite bleibt bei Bewegungsreduktion leer bis zum Scrollen #67

New issue

Open

opened 2026-09-06 21:12:44 +00:00 by Phil · 0 comments

Phil commented

2026-09-06 21:12:44 +00:00

Owner

Symptom

Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat, bekommt die Startseite fast leer ausgeliefert. AOS (src/main.js:18, AOS.init({ startEvent: "load" })) setzt seine Elemente per CSS auf opacity: 0 und deckt sie erst beim Scrollen auf — unabhaengig von prefers-reduced-motion. Wer nicht scrollt, sieht den Inhalt nie.

Beleg

Gemessen am 2026-09-06 gegen die lokale Instanz, Viewport 390x844, Playwright-Kontext mit reducedMotion: 'reduce', Zustand nach 1 s ohne Scroll:

aosGesamt:          50
verstecktGesamt:    50     (opacity < 0.9)

Alle 50 AOS-Elemente der Startseite sind unsichtbar. Die neue Video-Testimonial-Sektion (PR #65) ist als Gegenprobe voll sichtbar (opacity: 1) — sie nutzt kein AOS und hat unter Bewegungsreduktion animation: none.

Das Gate reduced_motion der design-gates meldet deshalb dauerhaft FAIL; der Messwert schwankt nur damit, wie viele AOS-Sektionen gerade unterhalb des Anfangsfensters liegen.

Warum das ein eigener Vorgang ist

Ein globaler Eingriff waehrend PR #65 wurde versucht und wieder zurueckgenommen, weil er es messbar verschlimmert:

AOS.init({ disable: () => matchMedia('(prefers-reduced-motion: reduce)').matches }) verhindert nur das Animieren, nicht das Verstecken. Gemessen: fehlende Tinte stieg von 2,4 % auf 20 %.
[data-aos] { opacity: 1 !important; transform: none !important } global ueberschreibt auch legitime Dauer-Transformationen anderer Sektionen und veraendert deren Darstellung gegenueber dem Normalzustand. Ebenfalls 16-20 %.

Der richtige Weg braucht eine eigene Runde: entweder die data-aos-Attribute serverseitig/beim Start entfernen, bevor AOS sein CSS anwendet, oder AOS unter Bewegungsreduktion gar nicht erst laden. Beides mit Sichtpruefung ueber alle Sektionen, nicht nur ueber das Gate.

Abnahmekriterien

Unter prefers-reduced-motion: reduce ist nach 1 s ohne Scroll jedes Element sichtbar (opacity >= 0.9)
Der Normalzustand (ohne Bewegungsreduktion) sieht unveraendert aus — Sichtpruefung aller Sektionen bei 1440x900 und 390x844
reduced_motion der design-gates PASS auf beiden Viewports

## Symptom Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat, bekommt die Startseite fast leer ausgeliefert. AOS (`src/main.js:18`, `AOS.init({ startEvent: "load" })`) setzt seine Elemente per CSS auf `opacity: 0` und deckt sie erst beim Scrollen auf — unabhaengig von `prefers-reduced-motion`. Wer nicht scrollt, sieht den Inhalt nie. ## Beleg Gemessen am 2026-09-06 gegen die lokale Instanz, Viewport 390x844, Playwright-Kontext mit `reducedMotion: 'reduce'`, Zustand nach 1 s ohne Scroll: ``` aosGesamt: 50 verstecktGesamt: 50 (opacity < 0.9) ``` **Alle** 50 AOS-Elemente der Startseite sind unsichtbar. Die neue Video-Testimonial-Sektion (PR #65) ist als Gegenprobe voll sichtbar (`opacity: 1`) — sie nutzt kein AOS und hat unter Bewegungsreduktion `animation: none`. Das Gate `reduced_motion` der design-gates meldet deshalb dauerhaft FAIL; der Messwert schwankt nur damit, wie viele AOS-Sektionen gerade unterhalb des Anfangsfensters liegen. ## Warum das ein eigener Vorgang ist Ein globaler Eingriff waehrend PR #65 wurde versucht und wieder zurueckgenommen, weil er es messbar verschlimmert: - `AOS.init({ disable: () => matchMedia('(prefers-reduced-motion: reduce)').matches })` verhindert nur das Animieren, nicht das Verstecken. Gemessen: fehlende Tinte stieg von 2,4 % auf 20 %. - `[data-aos] { opacity: 1 !important; transform: none !important }` global ueberschreibt auch legitime Dauer-Transformationen anderer Sektionen und veraendert deren Darstellung gegenueber dem Normalzustand. Ebenfalls 16-20 %. Der richtige Weg braucht eine eigene Runde: entweder die `data-aos`-Attribute serverseitig/beim Start entfernen, bevor AOS sein CSS anwendet, oder AOS unter Bewegungsreduktion gar nicht erst laden. Beides mit Sichtpruefung ueber alle Sektionen, nicht nur ueber das Gate. ## Abnahmekriterien - [ ] Unter `prefers-reduced-motion: reduce` ist nach 1 s ohne Scroll jedes Element sichtbar (`opacity >= 0.9`) - [ ] Der Normalzustand (ohne Bewegungsreduktion) sieht unveraendert aus — Sichtpruefung aller Sektionen bei 1440x900 und 390x844 - [ ] `reduced_motion` der design-gates PASS auf beiden Viewports

Phil referenced this issue

2026-09-06 21:13:54 +00:00

feat(startseite): Video-Testimonials von Kai und Wolfgang live bringen #65

No labels

No milestone

No project

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

Phil/philflow.io#67

No description provided.

Rows
Columns