Peter Rozek | 17.11.2008
Barrierefreiheit, Web Accessibility, Usability, CSS-Technik
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!
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.
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.
Die WCAG 2.0 ist in dieser Hinsicht nicht nur eindeutig, sondern auch erklärend zugleich, wenn es um Navigation und Focus geht.
Provide ways to help users navigate, find content and determine where they are.
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; }
Der deutliche Tastaturfokus ist aus mehreren Gründen wichtig und ein zwingender Bestandteil einer guten, barrierefreien und nachhaltigen Website.
Es geht im Kern um:
Die Umsetzung in CSS ist weder kompliziert noch erfordert sie einen großen Eingriff.
(vom 28.10.2007) Druck-Stylesheets sollten prinzipiell fester Bestandteil einer jeden guten Website sein. Der allgemeine Gebrauchswert einer Website wird gesteigert und sorgt für zufriedene Benutzer.
(vom 10.09.2007) Welche Vorgehensweise beim Layout eignet sich für die Gestaltung von zugänglichen Websites am besten? Jede Layout-Variante bietet Vor- und Nachteile. Wenn Sie eine zugängliche Website erstellen wollen oder müssen, sollte bereits in der Entwurfsphase berücksichtigt werden, mit welchem Layout der Entwurf umgesetzt werden kann.
(vom: 15.07.2007) Sprungmarken bilden ein nützliches Element in Dokumenten und unterstützen vor allem bei komplexen Dokumenten die schnelle Navigation und Zielfindung. Die dargestellten Empfehlungen dienen der Orientierung und dokumentierten einen Schritt in Richtung Usability und Barrierefreiheit zu gehen.
(vom: 01.07.2007) Die Vorteile barrierefreier Webauftritte liegen klar
auf der Hand und sind weitgehend anerkannt. Mit einer Checkliste zur Gestaltung
barrierefreier Webanwendungen und Webauftritte können Auftraggeber
sicherstellen das Vorgaben erfüllt werden und die Agenturauswahl ein
wenig erleichtert wird.
» zur Checkliste