Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

top: - 9000 ist böse

Samstag, 2. August 2014

Elemente nur für Screen Reader sichtbar machen. Ein Standardverfahren auf barrierefreien Seiten.
Tl;dr - if you're not interested in accessibility

Typische Methode: NEIN, natürlich nicht display:none oder visibility:hidden! Das sollte sich inzwischen herumgesprochen haben. (Hat es leider immer noch nicht!)
Richtig ist vielmehr, das Element aus dem Viewport zu schieben, mit einem Code ähnlich dem folgenden:

.hidden{
position:absolute;
left:-1000px;
top:-1000px;
width:1px;
height:1px;
overflow:hidden;
}

Das funktionierte auch lange Jahre. Bis das iPhone in den Händen zahlloser blinder Nutzer auftauchte, und damit der Screen Reader VoiceOver.
Wenn nämlich (mit aktiviertem VoiceOver) beim Laden einer Seite der Fokus auf einem solchermaßen aus dem Viewport geschobenen Element liegt, nimmt iOS die Anweisung "top:-1000px" wörtlich, und schiebt den Viewport um 1000px nach oben.
Das Resultat: eine leere Seite, auf der die weiter unten (bei "top:0") stehenden Inhalte auch nicht durch Scrollen o. ä. erreicht werden können.

Beispiel gefällig? mp3_player_test (ist natürlich nur mit dem iPhone und VoiceOver sinnvoll.)

Die Lösung:

Wie von WebAIM vorgeschlagen:

top:auto;

Beispiel gefällig? mp3_player_odl



2 Kommentare

  1. Ääh, moment mal, 2 Sachen;
    - böse ist hier doch eigentlich nicht eine etwa 10 Jahre alte Praxis, sondern ein Rendering/ Browsing, dem das völlig egal ist, nee?
    Spannend wäre jetzt noch zu wissen, ob das unter Android genauso ist.
    - Wie bekomme ich (als Blinder) einen Fokus auf ein nicht "sicht"bares Element? Kann es sein, dass das Problem eher akademischer Natur ist? Tab(oder Äquivalent) - Seite sollte da sein.
    (Kann das grad mangels Testumgebungen nicht selbst testen)

    Kommentar von mike — Donnerstag, 7. August 2014 - 22:55 Uhr

  2. @mike

    1. Webworker kämpfen nicht erst seit 10 Jahren mit "eigenartigem Verhalten" von Browsern, und versuchen, auch Browser zu bedienen, die sich nicht standardkonform verhalten. Webworking wäre viel einfacher, wenn es nur einen Standard gäbe, und alle Browser sich daran hielten. Ich nenne nur beispielhaft den Internet Explorer Version 8. Wenn Webworker das abweichende Rendering z. B. des IE 8 nicht berücksichtigen würden, dann wären Benutzer dieses Browsers von der Nutzung vieler Seiten ausgeschlossen.
    Genauso verhält es sich mit dem beschriebenen "Fehler". Wenn ich darauf bestehe, dass iOS Safari mit VoiceOver "meinen" Code gefälligst wunschgemäß zu rendern hat, dann sind meine Seiten eben mit iOS Safari und VoiceOver nicht bedienbar.
    Auf das Problem hat mich übrigens eine blinde iPhone Nutzerin gestoßen. Das Thema ist also keineswegs akademischer, sondern sehr wohl praktischer Natur.

    2. Es gibt (viele) Seiten, die beim Öffnen den Fokus auf ein Element setzen, das aus dem Fokus geschoben ist. Beispiel: Skiplink zum Inhalt. Du musst den Fokus also nicht selbst darauf setzen. Aber du kannst es, z. B. durch Tabben. Unabhängig davon, ob du den Bildschirm siehst oder nicht. Das ist ja gerade der Hintergrund der im Artikel beschriebenen Technik. Das Thema ist also mitnichten akademischer Natur.

    3. Eine Testumgebung wirst du sicher haben. Nämlich einen (beliebigen) Browser und sicher auch einen Screen Reader. Dann gehst du hier auf dieser Seite an den Seitenanfang. Eventuell musst du noch einmal tabben. Der Fokus sollte dann auf einem Link "Sprung zum Inhalt" stehen. Dieser Link ist beim Öffnen der Seite unsichtbar (mittels der hier im Artikel beschriebenen Technik).

    4. Androiden kann ich leider nicht testen. Weil es zum Test des beschriebenen Fehlers einen Androiden mit Screen Reader braucht.

    Kommentar von Fritz — Samstag, 9. August 2014 - 13:08 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE