CSS kann Screenreader beeinflussen

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ben Myers behandelt einige klare Beispiele, bei denen CSS die Ankündigungen einiger Screenreader völlig verändert. Zum Beispiel lesen einige Screenreader bei `text-transform: uppercase;` auf einer Schaltflächenbeschriftung wie „Add“ diese als Abkürzung vor: „A.D.D.“.

Diese Fälle, in denen CSS unsere Screenreader-Ankündigungen beeinflusst, sind zunächst schockierend, verwirrend und vielleicht sogar erschreckend. Schließlich scheinen sie im Widerspruch zu unserem mentalen Modell von CSS zu stehen, einem Modell, das uns wahrscheinlich seit Beginn unserer Webentwicklungsreise vermittelt wurde: HTML ist für den Inhalt, und CSS ist für das visuelle Erscheinungsbild. Es ist die Trennung von Inhalt und Präsentation. Hier fühlt es sich an, als würde CSS in das Inhaltsgebiet eindringen, indem es ändert, was Screenreader ankündigen.

Dies ist ein weiterer Beweis dafür, dass wir Dinge tatsächlich testen müssen. Ich habe das obige Beispiel mit VoiceOver getestet, und tatsächlich: „A.D.D.“

Direkter Link →