WebAIM: Inhalt vor Screenreadern verstecken: Update

WebAIM hat heute auf ein sehr interessantes Problem hingewiesen: Hiding content for screen readers. Gängige Praxis ist es ja, Inhalte für Screenreader zu verstecken, sie aus dem sichtbaren Bereich der Webseite zu schieben.

Per CSS wird der Bereich dafür gemeinhin nach links (left: - 1000px) und nach oben in den Minusbereich (top: -1000px) verschoben. Enthält dieser versteckte Bereich etwa einen Link, wird dieser angesprungen, wenn man mit der Tastatur navigiert. Das bewirkt dann jedoch, dass der Browser bei jedem versteckten Link, der den Fokus erhält, wieder ganz nach oben springt.

Zuerst wollte ich das nicht glauben, aber ich habe es an diversen Webseiten tatsächlich positiv testen können. Zum besseren Verständnis habe ich einen Testcase dafür erstellt. Tabbed man durch die Links 1 und 2, gelangt man auf den versteckten Link, sofort scrollt der Browser wieder ganz nach oben. Um den folgenden Link 4 zu fokussieren, geht der Browserfokus wieder ganz nach unten. Ein unangenehmes Zickzack-Szenario also.

WebAIM schlägt nun vor, dass man per CSS auf top: auto ausweicht und das scheint auch wirklich zu funktionieren – ich habe dazu einen weiteren Testcase erstellt. Tabbed man nun zu Link 3 erhält er zwar den Fokus, der Browser springt aber nicht mehr nach oben, bleibt quasi auf einer Fokuslinie.

Die Frage, die sich mir stellt, war das immer schon so? Man müsste sich ältere Browserversionen ansehen. Getestet sind die beiden Testcases auf Firefox 3, Opera 10 und Safari 3.2.1. Und es ist klar, dass es keine gängige Praxis sein sollte, Links zu verstecken. Diese Probleme treffen eher jene Techniken, die Sprungmarken auf der ganzen Webseite anbieten, etwa um größere Bereiche wie Tabellen oder lange Listen zu überspringen. Hierbei kann es dann mit der Angabe top und Minuswerten wirklich zu einem extremen Zickzack-Kurs kommen.