Inhalt

Vom Eingabegerät unabhängiger Link-Fokus

Ein Problem im Design mit Cascading Stylesheets (CSS) stellt immer wieder die gleichwertige Darstellung des Tastatur- und des Maus-Fokus dar.

Als Fokus wird in diesem Fall die aktuelle Position des Maus- bzw. Tastaturcursors bezeichnet. Dies ist z. B. der Link, über dem sich zur Zeit die Maus befindet. Beim "Durchtabben" der Seite, ist es analog der Link, bei dem in diesem Moment die Tastaturbedienung ist. Dies wird häufig durch einen farblichen Effekt oder durch Unterstreichungen hervorgehoben, wie in den nachfolgenden Grafiken zu sehen ist. Screenshot des Menus der Seite http://www.wob11.de ohne und mit Link-Fokus

Zur Unterstützung der Benutzer, die nicht die Maus als Eingabegerät nutzen, wird in der Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV) gefordert, dass diese Hervorhebung unabhängig vom Eingabegerät gestaltet wird, also bei allen Geräten gleichwertig ist.

Da z. B. Menschen mit manuell motorischen Einschränkungen und auch viele sehbehinderte Menschen statt mit der Maus mit der Tastatur oder einem Tastaturersatz arbeiten, ist es eine Anforderung an Barrierefreiheit Seiten geräteunabhängig bedienbar zu machen.

Wörtlich steht in Anforderung 9 der BITV:

"Internetangebote sind so zu gestalten, dass Funktionen unabhängig vom Eingabegerät oder Ausgabegerät nutzbar sind."

Und insbesondere in Bedingung 9.3:

"In scripts sind logische anstelle von geräteabhängigen Event-Handlern zu spezifizieren."

Im BITV-Kurztest wird daher in Prüfschritt 9.3.1 "Aktuelle Position des Fokus deutlich" geprüft, ob sowohl im Internet Explorer als auch im Firefox der Effekt, der einen Link hervorhebt, wenn er den Fokus erhält, unabhängig davon ist, ob mit der Maus oder mit der Tastatur durch die Seite navigiert wird.

 

Für eine solche gleichwertige Darstellung ist es notwendig, dass die Pseudoklassen des a-Elements in der folgenden empfohlenen Reihenfolge im Stylesheet definiert werden:

  • link
  • visited
  • focus
  • hover
  • active

Die Definition in dieser Reihenfolge sollte zu einer gleichwertigen Hervorhebung des Fokus sowohl im Internet Explorer als auch im Firefox führen.

Für die weitere Arbeit mit CSS finden Sie Links in unserer Link-Sammlung.