Webdesign - Barrierefreiheit und Bedienungen mit der Tastatur

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Erleichtern von Bedienungen, so wird es programmiert

13Jun2018

Barrierefreiheit und Bedienungen mit der Tastatur


Haben Sie auch manchmal das Bedürfnis den Computer ohne Maus zu bedienen, weil Ihnen die Hand schmerzt? Sie haben also den sogenannten "Mausarm" und wollen eine Website nur mit der Tastatur bedienen. Für viele Menschen ist es die einzige Möglichkeit, auf einer Website zu navigieren, und sei es auch nur wegen einer kurzzeitigen Einschränkung in der Motorik. Sie sind auf die Tastatur angewiesen!

Nun, ein wesentliches Bedienelement des Computers ist die Tastatur!

Aber haben Sie das schon mal probiert?
Sie tabben mittels Tastatur (Tabulator-Taste) auf einer Website von einem Verweis (Hyperlink) zum nächsten. Nur der Hyperlink den Sie erreichen wollen, eben noch auf dem Bildschirm zu sehen, ist plötzlich meilenweit entfernt. Vielleicht war er längst angetabbt und fokussiert, und Sie haben es nicht mitbekommen, weil er nicht visuell hervorgehoben wurde.

Das sind alles Dinge, die man vermeiden kann.

Die Bedienung unserer Website muss auch ohne Maus funktionieren!

Außerdem ist es manchmal praktisch, und vielleicht auch schneller, die Bedienung mit der Tastatur auszuführen.
Und dazu geben wir Ihnen hier ein paar Hilfestellungen.


Zum nächsten Bildschirm-Ausschnitt springen

  • [Leer-Taste] - Bildschirm-Ausschnitt geht nach unten
  • [Shift-Taste und Leer-Taste] - Bildschirm-Ausschnitt geht nach oben

Von einer Seite zur nächsten springen - ["Alt"-Taste]

Man kann natürlich nur dann eine Seite zurückspringen, wenn man vorher schon auf einer anderen Seite war. Und eine Seite vorspringen funktioniert auch nur dann, wenn man vorher zurückgesprungen ist.

  • [Alt-Taste und Rechtspfeil] - zur nächsten Seite vorspringen
  • [Alt-Taste und Linkspfeil] - eine Seite zurückspringen

Kontextmenü öffnen, Ersatz rechte Maustaste

Einen Ersatz für die rechte Maus-Taste, mit der man das Kontextmenü öffnet, gibt es auch. Zuerst den Verweis mit der [Tab-Taste] fokussieren und dann:

  • [Applikations-Taste] - Auf der Taste befindet sich ein Navigationssymbol und befindet sich neben der rechten [Strg-Taste], oder
  • [Shift-Taste und "F10"-Taste]

Vollbildmodus für eine bessere Ansicht

Wie kann ich die Website mit noch mehr Genuss betrachten?
Im Internet Explorer oder im Mozilla Firefox können Sie mit der ["F11"-Taste] Ihr Browser-Fenster vergrößern. Der Browser schaltet dabei in den Vollbild-Modus und blendet weniger wichtige Bildschirm-Inhalte aus. Mit erneutem Drücken der ["F11"-Taste] schalten Sie wieder in die normale Ansicht zurück. Dies ist besonders nützlich, wenn Sie die Website über einen kleinen Bildschirm betrachten.


Minimieren aller Fenster - ["D"-Taste]

Wie kann ich am schnellsten ein neues Programm vom Desktop öffnen?
Die Tastenkombination [Windows-Taste und "D"-Taste] minimiert alle Fenster und zeigt den Windows Desktop. Dies ist eine nützliche Tastenkombination für alle, die zum Beispiel Programme vom Desktop starten wollen und besonders hilfreich, wenn viele Fenster geöffnet sind und vor dem Desktop liegen.


Die Tabulatortaste - ["Tab"-Taste]

Mit Hilfe der Tabulatortaste [Tab-Taste] können Sie von einem Navigationspunkt zum nächsten springen. Die meisten Browser zeigen dabei um den fokussierten Hyperlink eine Kontur (gestrichelte Linie).
Durch Betätigen der Enter-Taste, auch Eingabe-Taste genannt, wird der Verweis oder die Verzweigung angesprungen.

  • [Tab-Taste] - es geht vorwärts
  • [Shift-Taste und Tab-Taste] - es geht rückwärts

Die Tabulatortaste finden Sie auf Ihrer Tastatur links neben der ["Q"-Taste] und die Umschalttaste [Shift-Taste] ist zwei Reihen darunter.


tabindex

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.


Skip-Link

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 Λ