Webdesign - Barrierefreiheit und Bedienungen mit der Tastatur

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Erleichtern von Bedienungen, so wird es programmiert

17Okt2015

Barrierefreiheit und Bedienungen mit der Tastatur


Die Bedienung mit der Tastatur ist ein wichtiges Kriterium, um eine Webseite zugänglicher zu gestalten. Gerade für mobile Endgeräte ist die Bedienung mit der Tastatur unumgänglich, da sie keine Maus zur Verfügung haben. Eine Hilfestellung bei der Bedienung einer Webseite ist dabei das Attribut tabindex.
Bei wiederholtem Betätigen der Tabulatortaste werden normalerweise die Verweise in der Reihenfolge angesprungen, in der sie im Quelltext der Webseite geschrieben sind. Das wäre aber nicht besonders effektiv, da dann jedes Mal zuerst durch die ganze Seite navigiert wird, bevor der Leser zu dem Untermenü in der Fußzeile gelangen. Oder aber beim Kontaktformular möchte man in einer bestimmten Reihenfolge die Eingabefelder anspringen.

Hier kann man sich helfen, indem man die Tabulatorreihenfolge im HTML (HyperText Markup Language)-Quelltext festlegt. Und die Grenzen werden so schnell nicht erreicht, denn für das "tabindex-Attribut" sind Zahlen zwischen 0 und 32767 erlaubt.

Vorgehensweise beim tabindex:

Bei dem nachfolgenden Beispiel erreicht man zuerst den "Link2" und danach"Link4", "Link1" und zum Schluss "Link3".

<a href="sprungziel1.php" tabindex="3">Link1</a>
<a href="sprungziel2.php" tabindex="1">Link2</a>
<a href="sprungziel3.php" tabindex="4">Link3</a>
<a href="sprungziel4.php" tabindex="2">Link4</a>

Tipp für das Springen auf einer Webseite:

Testen Sie Ihre Webseiten einmal selber, in dem sie vorwärts [Tab-Taste] oder auch rückwärts [Shift-Taste und Tab-Taste] durch Ihre Seiten navigieren.


Mit einem sogenannten Skip-Link (englisch: Skip - überspringen) werden größere Bereiche einer Webseite bequem übersprungen. Wer sich zum Beispiel mit einem Screen-Reader eine Seite vorlesen lässt, ist froh, wenn er sich nicht auf jeder Seite zuerst die Navigation anhören muss, bevor er zum eigentlichen Inhalt der Webseite kommt.
Skiplinks gehören zu den grundlegenden Navigationshilfen, welche die Zugänglichkeit umfangreicher Webseiten verbessern können, indem sie es dem Benutzer erlauben, wichtige Elemente einer Webseite schnell zu erreichen.

Wenn Sie eine meiner Seiten aufrufen und dann direkt die Tabulatortaste [Tab-Taste] betätigen, erscheint als erstes oben in der Kopfzeile der Sprungbefehl "Zum Inhalt springen"

Damit haben Sie die Möglichkeit, mit dem ersten Betätigen der Tabulatortaste [Tab-Taste] und anschließender Bestätigung durch die [Enter-Taste], direkt im Inhaltsbereich der Webseite weiter mit der Tabulatortaste zu navigieren. Die Benutzerfreundlichkeit einer Webseite wird hiermit also nochmals verbessert.

Vorgehensweise beim Skip-Link:

Ich schreibe im Kopfbereich "<header>", der für jede Seite gleich ist, folgendes:

<ol>
    <li>
        <a href="#skip" title="Direkt zum Inhalt springen" tabindex="1">
            Zum Inhalt springen
        </a>
    </li>
</ol>

Mit dem "tabindex 1" könnte ich noch festlegen, dass dieser Verweis als erstes angesprungen wird. Aber da die Anweisung direkt im Kopfbereich geschrieben ist, kann ich hierauf auch verzichten.

Im Anker, direkt nach dem Kopfbereich "</header>" bevor der Artikel beginnt, ist dann folgendes eingegeben:

<div id="skip"> </div>

Warum benutze ich einen separaten "div-Container"? Hätte ein Sprung zur Überschrift nicht auch funktioniert?
Ja und Nein! Im Firefox würde es tadellos funktionieren, aber leider benötigt der Internet Explorer mal wieder eine Sonderbehandlung.
Das Sprungziel (der Anker) muss innerhalb eines Elements, also zum Beispiel eines "div-Containers", mit festgelegter Größe liegen. Für diesen "div-Container" wird deshalb im CSS (Cascading Style Sheet) eine beliebige Weite angegeben, die auch wie auf diesen Seiten, Null sein kann. Hauptsache es ist eine Weite definiert.

#skip {
    width: 0;
}

Damit aber der sehende Besucher durch diesen Verweis nicht irritiert wird, mache ich den Skip-Link nur sichtbar, wenn die Tabulatortaste betätigt wurde. Es darf aber dafür keinesfalls die CSS (Cascading Style Sheet)-Eigenschaft "display: none" oder "visibility: hidden" verwendet werden, denn hierdurch ist der Hyperlink für Screen-Reader nicht mehr erreichbar, und somit nutzlos. Also sollten die Eigenschaften "display: none" oder "visibility: hidden" nur dann verwendet werden, wenn Inhalte sowohl am Bildschirm als auch vor Screen-Readern versteckt werden sollen. Das Ausblenden von Skip-Links geschieht deshalb durch eine absolute Positionierung, womit der auszublendende Hyperlink seitlich aus dem sichtbaren Bildschirmbereich verschoben wird.

Die Anweisung "position: absolute" veranlasst den Browser den Hyperlink aus dem Dokumentenfluss zu nehmen und dadurch kann ich ihn individuell positionieren. Mit "left: -9000em" verschiebe ich dann den Inhalt nach links, und damit aus dem sichtbaren Bildschirmbereich. Durch die Angabe "top: auto" bleibt der Inhalt des Hyperlinks vertikal auf derselben Höhe, wo er dann später erscheinen soll. Diese Angabe ist besser geeignet als zum Beispiel "top: -9000em", denn damit wird verhindert, dass der Browser, sobald er den Focus auf den Hyperlink hat, um 9000 em nach oben srollt. Zur Sicherheit wird dem Element noch eine Größe von 0x0 Pixel "height: 0" und "width: 0" mitgegeben. Und alles was darüber hinausgeht, wird mit "overflow: hidden" verborgen. Aber diese Angaben wären nicht unbedingt notwendig.
Sobald nun der Bediener nach dem Aufruf einer Seite die Tabulatortaste drückt, wird der Hyperlink in den sichtbaren Bereich geschoben. Dafür benötige ich die sogenannten Pseudoklassen ":focus" und ":active". Betätigt der Leser dann noch einmal die Tabulatortaste, kehrt der Hyperlink wieder in seinen normalen Zustand zurück, das heißt er wandert wieder aus dem sichtbaren Bildschirmbereich.

header ol a {
    position: absolute;
    height: 0;
    width: 0;
    left: -9000em;
    top: auto;
    overflow: hidden;
}

header ol a:focus {
    font-size: .7em;
    color: #001;
    left: 25em;
    top: .8em;
    height: auto;
    width: auto;
    padding: .2em;
    background: #d0d0d0;
    border: 1px ridge;
    border-color: #000 #fff #fff #000;
}

Tipp für die Skip-Links:

  • Nicht zu viele Skip-Links verwenden, sondern nur die wichtigsten Stellen einer Seite anspringen.
  • Am Ende einer Seite empfiehlt es sich, an den Anfang einer Webseite, also zum Header zu springen. Hierbei bleibt der Skip-Link allerdings für alle sichtbar, und wird nicht ausgeblendet.
  • Oder aber, wie ich es hier realisiert habe, mit einem Button, der immer unten links eingeblendet wird.

Damit habe ich ein wichtiges Kriterium für die Zugänglichkeit und Barrierefreiheit dieser Website erfüllt!

Zum Seitenanfang springen Λ