Zugänglichkeit mit Links zum Inhalt verbessern

Das Thema „Zugänglichkeit“ ist mir schon seit vielen Jahren wichtig, weshalb ich bei meiner Website auch darauf achte, dass die Inhalte unabhängig vom verwendeten Browser und Endgerät nutzbar sind.

Einen Aspekt habe ich allerdings bisher übersehen: Wer blind ist oder Computer aus körperlichen Gründen nur sehr eingeschränkt bedienen kann, hat ein Problem, wenn die Website ein umfangreiches Menü über dem Inhalt darstellt.

Zur Beurteilung der Situation ist Lynx – ein textbasierter Browser – gut geeignet. Hier am Beispiel des Artikels „USB-WLAN-Adapter am RasPi nutzen“, einmal in Firefox:

arnowelzel.de in Firefox

Und zum Vergleich die textbasierte Version in Lynx in einem Konsolenfenster mit der Größe von 120×50 Zeichen:

arnowelzel.de in Lynx ohne „Zum Inhalt springen“

Man erkennt schnell das Problem: In grafischen Browsern ist das Hauptmenü lediglich ein Balken mit aufklappbaren Untermenüs am oberen Rand. In der Textversion nehmen die Menüpunkte aber einen Großteil der Darstellung ein. Diese Punkte müssen alle übersprungen werden, um an den eigentlichen Artikel zu gelangen – mehr als 25 Einträge.

Aber auch wenn die grafische Darstellung auf den ersten Blick gut aussieht – wer sich sich mit der [Tab]-Taste durch die Seite bewegt, um vorhandene Links im Artikel auf weiterführende Informationen auszuwählen, merkt schnell, dass man viele Male die Taste drücken muss, bevor man zum eigentlichen Artikel gelangt.

Link zum Inhalt

Auf WebAIM habe ich eine sehr elegante Lösung des Problems gefunden.

Für Nutzer, die nicht auf einfache Weise das Menü überspringen können, ist ein Link am Anfang des Dokumentes sinnvoll, der zum auf den eigentlichen Inhalt springt, etwa auf folgende Weise:

<a href="#content">Zum Inhalt springen</a>

<div id="menu">
Hier ist das Menü.
</div>

<div id="content">
Hier ist der eigentliche Inhalt des angezeigten Beitrags.
</div>

Aus gestalterischen Gesichtspunkten möchte man aber nicht, das der Link in einem grafischen Browser, wie Firefox, immer erscheint, sondern nur dann, wenn er bei der Benutzung der [Tab]-Taste den Fokus erhält. Gleichzeitig soll er aber auch nicht unsichtbar für Screen-Reader sein.  Dies kann man mit folgenden CSS-Regeln erreichen:

a.skip {
    padding:0.5em;
    position:absolute;
    top:-4em;
    left:0px;
    color:white;
    border-right:1px solid white;
    border-bottom:1px solid white;
    border-bottom-right-radius:0.5em;
    background:#bf1722;
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 100;
}

a.skip:focus {
    position:absolute;
    left:0px;
    top:0px;
    outline-style: none;
    -webkit-transition: top .1s ease-in;
    transition: top .1s ease-in;
}

Entsprechend wird der Link mit der CSS-Klasse eingebunden:

<a class="skip" href="#content">Zum Inhalt springen</a>

Zur Erläuterung:

Die Anforderung „soll nicht sichtbar erscheinen“ würde man mit display:none umsetzen. Solche Regeln verbergen Elemente aber nicht nur optisch, sondern auch für Screenreader. Der „Hack“ besteht nur darin, das Element außerhalb des Viewports zu positionieren, hier konkret mit den Regeln position:absolute; top:-4em; left;0px;. Die negative Angabe für top sorgt dafür, dass das Element oberhalb des Viewports ausgegeben wird, womit optisch der selbe Effekt wie mit display:none erreicht wird, das Element aber für Screenreader, die den Inhalt des Dokumentes nutzen, sichtbar bleibt.

Die zweite Regel für die fokussierte Darstellung a.skip:focus blendet das Element sichtbar links oben im Viewport ein. Damit es bei schneller Betätigung der [Tab]-Taste nicht sofort wieder verschwindet und dabei übersehen wird, enthält a.skip eine Animation von einer Sekunde Dauer.

In Firefox erscheint dadurch die Website wie zuvor – bis man einmal die [Tab]-Taste betätigt und so den zuvor unsichtbaren Link zum Inhalt fokussiert, der nun angezeigt wird:

In Lynx erscheint dieser Link immer, direkt nach den Meta-Links aus dem Header, die Lynx immer oben anzeigt (wie vorheriges/nächstes Dokument oder RSS-Feed). Statt über 25 Einträgen muss man jetzt aber nur noch vier Einträge überspringen und kann dann direkt zum Inhalt springen:

arnowelzel.de in Lynx

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.