Stellen Sie sicher, dass alle Funktionalitäten über die Tastatur in logischer Reihenfolge zugänglich und steuerbar sind

Webseiten müssen nur mit der Tastatur vollständig nutzbar sein. Stellen Sie also sicher, dass alle Teile über die Tastatur zugänglich sind und Sie nicht an irgendeiner Stelle hängen bleiben, wenn Sie nur mit der Tastatur navigieren. Achten Sie auch darauf, dass Sie sehen können, wo Sie sich befinden und dass die Reihenfolge der Navigation logisch bleibt.

Wie wendet man das an?

Alles ist über die Tastatur zugänglich und steuerbar

Stellen Sie sicher, dass alle Funktionen auf einer Webseite über die Tastatur oder eine Tastaturschnittstelle zugänglich und steuerbar sind. Zum Beispiel die Suchfunktion, Navigationsmenüs, Links im Lauftext, Media-Player, Formulare, usw. Es spielt keine Rolle, ob eine Funktion mit der Tastatur anders funktioniert, solange das gleiche Ziel erreicht werden kann.

Dies erreichen Sie weitgehend, indem Sie einfach die richtigen HTML-Elemente richtig verwenden, z.B. für Links und Formulare. Außerdem müssen Sie darauf achten, dass bestimmte Funktionen und Effekte nicht nur an eine Maus gebunden sind. Wenn Skripte verwendet werden, um Aktionen auszuführen, müssen diese Skripte (auch) auf Aktionen mit der Tastatur reagieren. Und Effekte, die auftreten, wenn ein Besucher mit der Maus über ein Teil fährt, können auch angewendet werden, wenn das Teil über die Tastatur fokussiert wird.

Keine Tastaturfalle

Eine Tastaturfalle bezieht sich auf einen Bereich der Webseite, zu dem Sie mit der Tastatur navigieren können, aber nicht von irgendwo anders. Sie werden nicht weiter kommen. Dies kann vorkommen, wenn Plugins wie Flash, Silverlight oder Java verwendet werden. Selbst wenn die Anwendung, für die das Plugin benötigt wird, mit der Tastatur gesteuert werden kann, kann der Besucher möglicherweise nicht weiter navigieren, um den Rest der Seite zu nutzen. Er müsste dann mit der Maus außerhalb der Anwendung klicken. Da nicht jeder Besucher eine Maus benutzt, sollte dies auch nur mit der Tastatur möglich sein.

Logische Fokussierung

Die Reihenfolge, in der Teile der Webseite beim Navigieren eines Besuchers mit der Tastatur fokussiert werden, muss logisch sein. Mit anderen Worten: Die Bedeutung des Inhalts darf nicht verloren gehen, da die Reihenfolge, in der sich die Teile konzentrieren und die Teile nutzbar sind, bleiben muss.

Die Standard-Fokusreihenfolge in HTML wird durch die Reihenfolge bestimmt, in der die Teile im Quellcode platziert sind, sofern Sie sie nicht mit Zusatzcode oder Skript ändern. Wenn die visuelle Reihenfolge der Teile mit der Reihenfolge im Quellcode übereinstimmt, dann ist die Fokusreihenfolge oft sinnvoll. Angenommen, das Navigationsmenü befindet sich oben auf der Seite, dann können Sie dies mit der Tastatur als eines der ersten Elemente erreichen. In Situationen, in denen die Reihenfolge im Quellcode nicht gleich der visuellen Ordnung ist, muss die Fokussierungsreihenfolge dennoch logisch sein.

Ein- und Ausblenden von Teilen

Selbst wenn Sie Skripte verwenden, um Elemente ein- und auszublenden, wenn der Besucher auf einen Link oder eine Schaltfläche klickt, sollten Sie die Reihenfolge der Fokussierung im Auge behalten. Denken Sie zum Beispiel an ein Dropdown-Menü, oder ein Popup, das über der Website platziert wird. Verwenden Sie diese Technik wie folgt:

1. Verwenden Sie immer einen Link (<a> Element) oder ein HTML-Formularelement (z.B. <select>, <input> type="checkbox">, <input type="button">, <button>, <input type="submit">), um Anzeigen/Verbergen zu aktivieren. Diese Elemente können in Browsern standardmäßig fokussiert werden. In Skripten müssen Sie das „onClick“-Ereignis dieser Elemente verwenden.
2. Platzieren Sie den angezeigten Inhalt, indem Sie auf den Link, oder das Formular-Element direkt nach dem Link, oder das Element im Quellcode klicken. Sie können das HTML-Element, das den neuen Inhalt enthält, an dieser Stelle im Code vorher platzieren und mit CSS ('display:none') ausblenden, oder erst bei Aktivierung einfügen.
   • Im ersten Fall müssen Sie nur die Sichtbarkeit ('display:block') mit dem Skript ändern.
   • Im zweiten Fall fügen Sie den neuen Inhalt selbst mit einem Skript hinzu. Wenn Sie es nach dem aktivierenden Element platzieren, wird der neue Inhalt zum nächsten Element, das den Fokus erhält

Fokussierung sichtbar machen

Wenn ein Element auf der Seite den Fokus hat, sollte es sichtbar sein. Browser haben standardmäßig bereits einen Fokus-Indikator eingebaut, der auf allen Standard-HTML-Elementen angezeigt wird, die den Fokus erhalten (z.B. die Felder in einem Formular). Wenn Sie also keinen zusätzlichen CSS-Code oder Skript hinzufügen und nur Standard-HTML-Elemente verwenden, erfüllen Sie diese Anforderung bereits. Ein Vorteil ist, dass Besucher, die es mit eigenen Programmen benötigen, die Standard-Fokusanzeige z.B. durch eine sichtbarere ersetzen können.

Was Sie in der obigen Situation nicht tun sollten, ist, die Fokuslinie (Outline) der aktiven Teile mit CSS zu entfernen. Wenn Sie dies tun, müssen Sie Ihre eigenen CSS-Stile für den Fokus von Elementen erstellen oder ein Skript dafür verwenden.

Beispiele

Bieten Sie alternative Optionen für Tastaturbenutzer an

Im Falle einer Liste, die durch Ziehen und Ablegen mit der Maus sortiert werden kann, können Sie Schaltflächen hinzufügen, die es Besuchern, die die Tastatur verwenden, ermöglichen, die Elemente nach oben oder unten zu verschieben. Das Ziel (Sortieren der Liste) kann auf verschiedene Weise erreicht werden. Es ist wichtig, dass sich die Reihenfolge nicht nur optisch, sondern auch im Quellcode (per Skript) ändert.

Logische Fokussierung

Bei einer Webseite, auf der zwei Formulare nebeneinander platziert sind, muss die Fokussierreihenfolge der logischen Lesereihenfolge folgen. Das bedeutet, dass Sie mit der Tastatur durch das erste Formular navigieren können müssen und erst dann durch das zweite Formular.

Fokussierung sichtbar machen

Der folgende CSS-Code ändert die Hintergrund- und Vordergrundfarbe eines Links (das <a> Element) mit Maus- und Tastaturfokus.

a:hover, a:active, a:focus {
background-color: #DCFFFF;
color: #000066;
}

 

Für Entwickler

Der Entwickler muss sicherstellen, dass alle Teile der Webseite mit der Tastatur, in einer logischen Reihenfolge und mit sichtbarem Fokus erreicht und bedient werden können.