a11y and mobile regressions

[openmindculture]

Die Seite ist echt schön geworden :)
Bzgl. a11y fallen mir noch ein paar Dinge auf (z.B. Skip to Content Button, oder Aria Labels bei den Termin Buchen Buttons, oder die doppelten Links bei den Blogbeiträgen).

• Skip to Content Button
• contact form checkboxes not visibly focused during tab navigation
• Aria Labels bei den Termin Buchen Buttons
• doppelten Links bei den Blogbeiträgen (fixed with news hover improvement News hover improvement #57)

[openmindculture]

• hilfreich wäre eventuell noch, das mobile Menü zu schließen, wenn außerhalb der Links geklickt wird

[openmindculture]

• auf iPhone 6 bleibe ich beim vertikalen runter Scrollen an den Stories hängen bzw. scheint die Seite dort zu enden.

Unten scheint ein weißer Streifen nicht nutzbar zu sein und zwar ziemlich genau in der Höhe der oberen Adressleiste, aber nur solange die Tastatur eingeblendet ist. Ansonsten geht der Seiteninhalt schon bis unten. Auch beim seitlich scrollbaren Insta Preview bleibt das Scrolling hängen, hier nur in Form von Stocken, aber es geht weiter. Vielleicht weil es weniger Höhe beansprucht.

Scrolltransparenz funktioniert auf dem Gerät auch nicht , wohl aber der Parallax-Effekt an sich. Wäre aber zu überlegen, ältere Geräte grundsätzlich wie reduced-motion zu behandeln und/oder moderne Properties wie dvh von einer supports Feature Query abhängig zu machen.

Über den Menüpunkt "Kontakt" und die "Termin buchen" Buttons ist der Teil der Seite unterhalb der Stories aber schon erreichbar, sichtbar und benutzbar.

[openmindculture]

• Titel H1 etwas breiter ermöglichen wegen englischer Umformulierung?

Erledigt durch korrektes Einsetzen bisher fehlender Leerzeichen vor und nach dem Gedankenstrich. Breitte bleibt unverändert. Beide Sprachen nun wieder dreizeilig ohne einzelne Wörter (Widows) in der untersten Zeile.

[openmindculture]

• defekter Insta-Preview: Race Condition? Egal ob Preview mit oder ohne geladenem Bild oder echter Juicer Feed, wegen Overlay und gegen Layout Shift muss die ganze Sektion / Container immer die gleiche (Mindest-) Höhe haben (bisher vor allem auf Desktop, nicht nur auf Safari, aufgetreten) => missing insta preview when social section stuck on "Juicer Problem" (net::ERR_CONNECTION_RESET) #61

[openmindculture]

• Aria Labels bei den Termin Buchen Buttons

Warum? Es sind Links, im optischen Stil eines Buttons, aber normale Links mit A HREF und der accessible Name ist der sichtbare Text, den auch sehende Besucher lesen. Was sollte noch anderes im Aria Label stehen?

[openmindculture]

• Skip to Content Button

Warum Button? Unser Skip-to-Content-Link sollte der Anleitung bei CSS-Tricks entsprechen und dem populären WordPress-Theme aus dem er übernommen wurde.

Wie kann ich den validieren?

[openmindculture]

• leere Links laut WAVE-Audit: 2x in der Druck-/PDF-Version vorzeitig geschlossen

[openmindculture]

• E.: ggf. (mobil) direkt zu den Story Testimonial Texten springen, nicht zu den Bildern

Das würde ich nicht machen, weil inkosistent und ich jetzt schon ahne, wie jemand später genau das Gegenteil vorschlagen wird.

[openmindculture]

• N.: Text ist unscharf (nachgefragt: welches Gerät?)

Unschärfe auch im Local Preview in Chrome/Vivaldi, wenn es dort skaliert angezeigt wird.

Bei 100% Zoom sieht das nicht so komisch aus.

[openmindculture]

• normalize testimonials on mobile if not equal height images

No original requirement, but if we can't or don't want to make sure that authors always upload images in the expected geometry, we should add constraints or adjustments to ensure expected frontend layout. Desktop is already normalized to equal heights, but mobile isn't.

[openmindculture]

• Aria Labels bei den Termin Buchen Buttons
  Warum? Es sind Links, im optischen Stil eines Buttons, aber normale Links mit A HREF und der accessible Name ist der sichtbare Text, den auch sehende Besucher lesen. Was sollte noch anderes im Aria Label stehen?

fehlte dem Screenreader der Kontext, weil 3 mal hintereinander "Termin Buchen" vorgelesen wird.

[openmindculture]

• decoration covers content on iPhone 7 Safari 12

Discovered accidentally when trying to reproduce the iPhone 6 scroll stop issue on a remote controlled iPhone 7 via BrowserStack.

When scrolling further down, everything gets back in order.

Scrolling back up, the problem reappears, so it's tied to scroll position (detection).

Prevent wasting time for legacy devices that even Apple doesn't give a shit about and simply don't enable progressive enhancements below a certain Safari version, to be detected by a capability hack. Only apply this change to "critical" enhancements connected to scrolling and decoration perspective.
We might treat older mobile Safari agents like they're set to prefer reduced motion to solve a lot of perceived and possible problems with little effort and code change.

Scroll stop problem is reproducible up to iPhone 8 Safari 12.

Decoration layer glitch is reproducible up to iPhone 8 Safari 12.

No such problems on iPhone 8 Safari 13.

Safari 12 seems to be the latest update for iPhone 7, but iPhone 8 can update to Safari 15, released in 2021 and last updated in 2022.

[openmindculture]

• Phantomrechteck Wiedergänger

[openmindculture]

Unresolved aspects

• scroll block on old iPhone restrict progressive enhancement, improve social media fallback #59 #61 #60
• decoration z-index on old iPhone restrict progressive enhancement, improve social media fallback #59 #61 #60
• missing insta preview possible race condition missing insta preview when social section stuck on "Juicer Problem" (net::ERR_CONNECTION_RESET) #61
• blurry testimonial text blurry testimonial text #62
• phantom rectangle Phantom Rectangle in Vivaldi #50

[openmindculture]

everything either fixed or following up in a distinct issue