Peter Rozek

Gerne greife ich bei dieser Gelegenheit zur Tastatur und schreibe ein paar Zeilen zur Tab-Parade.

Accessibility Preisfrage: Warum ist der deutliche Fokus bei der Tastaturnavigation wichtig? Antwort: Ein Internetangebot soll auch ohne die Computermaus wahrnehmbar, bedienbar und verständlich sein! Die Robustheit in der Technik regeln wir über ein wenig CSS.

Die Navigation einer Website und dazu zählen auch die Textlinks müssen beim Aktuellen-Fokus sowohl mit der Maus als auch über die Tastatur wahrnehmbar sein. Warum der deutliche Fokus so wichtig ist, zeigt ein Blick über den „eigenen Maus Rand“. Es gibt eine ganz Reihe von Nutzern, die bei der Navigation auf die Tastatur oder andere Spezialgeräte angewiesen sind. Das sind zum Beispiel Menschen mit motorischen Behinderungen oder Personen mit einer Sehnenscheidenentzündung die vorübergehend keine Computermaus bedienen können. Die Bedienbarkeit einer Website über den Tastaturfokus ist darüber hinaus ein Beitrag zur Geräteunabhängigkeit.

Die Deutlichkeit des Tastaturfokus ist auch in Bezug auf Usability wichtig! Grundsätzlich kann man bei einer Website von einer Orientierung und Bewegungsrichtung in einer „Raum“ sprechen. Damit der Nutzer weiß, wo er sich gerade befindet, braucht es bei der Navigation eine deutliche Wegmarkierung, den Tastaturfokus!

Zum Mitschreiben:

Wo bin ich?
(Where am I?)
Was kann ich hier tun?
(What can I do here?)
Wie bin ich hierher gelangt?
(How did I get here?)
Wohin kann ich gelangen und wie kann ich dorthin gelangen?
(Where can I go and how do I get there?)
(Nievergelt u. Weydert 1980)

Man kann es eigentlich nicht genug sagen, viele Webseiten sind über die Tastatur oder andere Hilfemittel nur schwer oder fast gar nicht navigierbar. Es fehlt und das nicht zu selten, der deutlich sichtbare Tastaturfokus. Warum dies immer wieder vernachlässigt wird, kann ich mir nicht wirklich erklären. Entweder ist es reine Unwissenheit, was nicht so schlimm ist oder es ist reine Ignoranz und Faulheit.

Demnach bedeutet der gewollte Verzicht auf den Tastaturfokus:

„Behinderung ist die mangelnde Fähigkeit mit schlechtem CSS umgehen zu können.“
Kleine Abwandlung eines Zitats von Thomas Caspers.

Machen wirs kurz (Quick and Dirty)

Merke die WCAG 2.0 ist Proposed Recommendation! Dies bedeutet, dass die normativen und technischen Teile der Richtlinie vollständig sind und die Umsetzbarkeit jeder einzelnen Richtlinie nachgewiesen wurde.

Richtlinien der WCAG 2.0

Die WCAG 2.0 ist in dieser Hinsicht nicht nur eindeutig, sondern auch erklärend zugleich, wenn es um Navigation und Focus geht.

Guideline 2.4 Navigable:

Provide ways to help users navigate, find content and determine where they are.

Succes Criterium:

• 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
• 2.4.8 Location: Information about the user's location within a set of Web pages is available.

Techniques:

• C15: Using CSS to change the presentation of a user interface component when it receives focus (CSS).
• G128: Indicating current location within navigation bars.

Praktische Anwendung:

The easy way: Mit der Pseudoklasse :hover erreichen wir, dass der Link beim berühren mit der Maus die Farbe ändert. Das alleine ist für eine barrierefreie Navigation nicht ausrechend. Es fehlt der deutlich sichtbare Tastaturfokus, wenn wir die Website über die Tastatur navigieren. Mit der Pseudoklasse :focus haben wir das Problem gelöst. Der Link erhält einen deutlich sichtbaren Tastaturfokus, wenn der Link angesteuert wird.

a:focus {
	background: #333;   
	color: #fff;
	}

Mit der Pseudoklasse :active können wir zudem das Verhalten eines gerade angeklickten Elements bestimmen. Wenn wir zum Beispiel dem Selektor die Werte position: relative; und top: 1px; zuweisen können wir dem Nutzer optisch anzeigen, wenn das Element angeklickt wird.

a:active {
      background: #333;
      color: #fff;
      position: #relative;
      top: #1px;
      }

Zum Schluss wollen wir das ganze noch schon wohlgeformt, gut organisiert und so kurz wie möglich in unsere CSS-Datei eintragen:

Nachtrag: Matthias Koch, geschätzer Kollege von mir, hat mich noch darauf aufmerksam gemacht, das es bei der Notierung der Pseudoklassen (:hover, :focus und :active) auf die Reihenfolge im Stylessheet-Dokument ankommt. Sollte eigentlich logisch sein, aber an dieser Stelle wird es nochmal erwähnt.

 a {
      background: #fff;
      color: #333;
      text-decoration: underline;
      }
      a:hover, a:focus, a:active {
      background: #333;
      color: #fff;
      }
      a:active {
      position: #relative;
      top: #1px;
      }

Zusammenfassung

Der deutliche Tastaturfokus ist aus mehreren Gründen wichtig und ein zwingender Bestandteil einer guten, barrierefreien und nachhaltigen Website.

Es geht im Kern um:

• Wahrnehmbarkeit,
• Bedienbarkeit,
• Verständlichkeit
• und Robustheit in der Technik.

Die Umsetzung in CSS ist weder kompliziert noch erfordert sie einen großen Eingriff.

Links:

• Techniques and Failures for Web Content Accessibility Guidelines 2.0
• Web Content Accessibility Guidelines (WCAG) 2.0
• Die vier Prinzipien der Web Content Accessibility Guidelines 2.0
• Ein Herz für Tastaturnutzer
• Dynamische Pseudoklassen und benannte Anker

nach oben