Accessibility nach Vorschrift: Wenn Web-Entwickler zu Bürokraten werden

von Heike Edinger & Timo Wirth / 26. Februar 2006 /

Hermes ConradAbstempeln reicht nicht. Wenn die Vorschriften der BITV bürokratisch und unreflektiert angewandt werden, entstehen seltsame Code-Effekte und große Usability-Probleme. - Eine Dekonstruktion von eigensinnigen Accessibility-Techniken.

Fry ist entsetzt. Morgan Proctor, Bürokratin Stufe 19, hat Benders Gehirn entfernt.

  1. Fry: Hey, was hast du mit ihm gemacht?
  2. Morgan: Ich habe sein Gehirn runtergeladen. Der gesamte Bender ist jetzt hier drauf: Sein Verstand, seine Erinnerungen und seine gesamte Streitsucht.
  3. Bender: (mechanisch) Ich bin Bender. Bitte Diskette einlegen.
  4. Fry: Aber bitte! Bender braucht sein Gehirn … um … wieder klug zu werden. Was hast du denn jetzt gemacht? Hör sofort auf damit.
  5. Morgan: Ich hab die Diskette an die Bürokratie-Zentrale geschickt. Ich hab getan, was ich tun muss. Er ist ein böser Roboter.
  6. Fry: Nein, er war nur ein böser Freund. Ich will ihn sofort wieder haben.
  7. Morgan: Da hättest du vor 20 Jahren einen Antrag stellen müssen.
  8. Fry: Ich hab dich satt und deine ganze Bürokratie!
  9. – Futurama, 2. Staffel, Folge “Die Rhythmus-Rückerstattung”

Futurama Folge: Die Rhythmus-Rückerstattung

Dank Subversion in “New” New York und entlarvender Doppel-Ironie geht bei Futurama in der Folge “Die Rhythmus-Rückerstattung” alles gut aus. Hermes Conrad, Jamaikaner und Bürokrat Stufe 37, legt in der Bürokratie-Zentrale eine spektakulär groovige Sortier-Leistung hin. Der rhythmisch-heroische Einsatz des unexotisch-gewissenhaften Limbo-Champions rettet den Tag: Alle Akten sind sauber abgelegt und Bender bekommt seinen Verstand zurück.

Die Bürokratie hat gesiegt. Regeln und Standards sind gut. Solange wir selbstkritisch die Regeln hinterfragen und uns ab und zu mit einem rhythmischen Limbo-Tanz den Verstand zurückholen.

Kommen wir zur Akte “Barrierefreiheit”.

Die Akte “Barrierefreiheit”

Regeln und Richtlinien sind im Bereich Accessibility durchaus sinnvoll. Die Empfehlungen der WCAG (Web Content Accessibility Guidelines) und der BITV (Barrierefreie Informationstechnik-Verordnung) sind ein unverzichtbarer Leitfaden bei der Gestaltung von barrierefreien Websites. Sie sind eine Art Gebrauchsanweisung von Experten für Entwickler und können die Standardisierung vorantreiben.

Techniques and guidelines are important because they represent an attempt to define and standardize what Web accessibility means. They represent a consensus, or at least majority opinion, about the best practices and methods for achieving Web accessibility.
– Webaim: Putting People at the Center of the Process

Doch das bloße Halten an die technische Spezifikation (”Das müssen wir beachten”) garantiert noch lange keine Barrierefreiheit. Die Entwickler müssen auch die Motive verstehen (”Warum müssen wir das beachten?”), um die Regeln reflektiert anwenden zu können. Nur wer mit den Regeln vertraut ist und die Motive kennt, kann nachhaltig Zugangshürden abbauen.

The guidelines are an excellent foundation [...] but unless the developers understand the reasons behind the guidelines, they might apply the guidelines incorrectly or inefficiently.
– Webaim. Putting People at the Center of the Process

Webdesign ist keine Verwaltungstätigkeit

Es ist leicht, sich an technische Verordnungen zu halten und Checkpunkte abzuhaken. Doch Webdesign ist keine Verwaltungstätigkeit. Dienst nach Vorschrift reicht nicht aus. Die Seiten sollten nicht aus technischer Sicht barrierefrei sein, sondern aus Sicht der Nutzer.

When developers focus on technical specifications, they may achieve technical accessibility, but they may not achieve usable accessibility.
– Webaim. Putting People at the Center of the Process

Einige Elemente, die zum Abbau von Barrieren beitragen sollen — wie eine Skip-Navigation, Title-Texte oder Navigations-Icons — werden mittlerweile rein mechanisch eingesetzt. An das ursprüngliche Motiv wird dabei nicht mehr gedacht. Die Folge: Beim gut gemeinten Streben nach Barrierefreiheit kommt die Benutzerführung zu kurz.

Even sites that are theoretically accessible often have low usability for people with disabilities.
– Jakob Nielsen. 2001:3. Beyond Alt Text.

Warum übernehmen wir somit gutgläubig — und auch ein bisschen faul — vermeintlich nützliche Praktiken, die bei genauem Hinsehen mehr Barrieren schaffen als Barrieren abzubauen? Vielleicht weil die Vorschriften teils zu vage, teils zu detailliert sind (Clark 2003:51)? Zugegeben, WCAG und BITV — formuliert in objektiver Amtssprache — sind manchmal keine große Hilfe, wenn es darum geht, Probleme in der Praxis zu lösen.

Aber den Bestimmungen selbst kann man nicht die Schuld geben. Vielmehr fehlt oft — siehe Rettung von Benders Gehirn — die Frage nach dem “warum”, nach den Beweggründen. Es ist somit wichtig, das eigentliche Ziel im Blick zu haben: Die Website leichter bedienbar zu machen.

When you want to improve your website for users with disabilities, remember the real goal: to help them better use the site.
– Jakob Nielsen. Accessibility is not enough.

Das Dilemma ist, dass sich die Vorschriften der Bürokratiezentrale — einmal in Umlauf — gerne verselbständigen. Aus sinnvollen kontextspezifischen Lösungen, die sich auf allgemeine Regeln beziehen, werden bei unreflektierter Anwendung (”Vorschrift ist Vorschrift”), allgemein gültige korrekte Methoden (”so wird’s barrierefrei”), die durch den wiederholten ungeprüften Einsatz (”das machen alle barrierefreien Websites so”) legitimiert werden. Und wer stellt schon — wo kämen wir hin — korrekte Verfahren in Frage?

Die verinnerlichten Techniken, können somit — trotz gut gemeinter Absicht die Accessibility zu verbessern — schnell zum Usability-Problem werden.

Es gibt aber einen Ausweg aus dem Dilemma: Die Perspektive wechseln und an den Nutzer denken. Web-Entwickler sind keine Sachbearbeiter und all diese Techniken für barrierefreies Webdesign wurden nicht erfunden, um den Entwicklern das Leben schwer zu machen. Es ist nicht noch eine Liste, die abgearbeitet werden muss. Es sind Techniken, die den Nutzern den Web-Alltag einfacher machen sollen.

The techniques and guidelines of Web accessibility were not invented to make life hard for Web developers. They were invented to make life easier for people with disabilities.
– Webaim. Putting People at the Center of the Process.

Im Folgenden sollen eigenwillige Praktiken in barrierefreiem Webdesign aufgezeigt und eingeschliffene Muster entlarvt werden. Statt Vorschriften abzuhaken, sollen durch kritisches Hinterfragen reale Probleme gelöst werden.

Many web developers and designers still view accessibility as an issue and matter of compliance rather than as part of their chosen professional craft and platform for creater flexibility.
– Andy Clarke. Accessibility and a society of control.

1. Zu viele Skip-Links

Bei der Skip-Navigation geht der Trend in Richtung Burger-King-Prahlerei: “Bigger, better, barrierefrei”. Auf vielen barrierefreien Websites findet man nicht nur einen “Direkt zum Inhalt”-Link, sondern gleich fünf und mehr Skip-Links. Mehr drauf, mehr drin. Die Überlegung scheint zu sein: Je mehr Sprungmarken am Anfang der Seite stehen, mit denen die Nutzer direkt zu den einzelnen Bereichen einer Seite springen können, desto leistungsfähiger ist die Skip-Navigation. Nach dem Motto: Wenn ein Link gut für blinde und motorisch eingeschränkte Menschen ist, dann sind zwei Links doppelt so gut, drei Links dreimal so gut, vier Links viermal so gut …

Skip-Navigation bei heute.de
Verstehensprobleme bei heute.de

Bei heute.de bietet man den Nutzern folgende fünf Sprung-Möglichkeiten an: Zum Inhalt der Seite, zu den Kontext-Informationen der Seite, zur Hauptnavigation, zur Globalnavigation und zum Fuß der Seite.

Im Online-Shop von Logiway stehen Usern, die mit Screenreader oder Textbrowser surfen, am Anfang der Seite gleich neun Skip-Links zur Auswahl.

Skipnavigation von Logiway
Neun Skip-Links bei Logiway

Problem: Statt körperlich eingeschränkte Menschen bei der Navigation zu unterstützen, erschweren die unzähligen Sprung-Möglichkeiten die Orientierung. Aus einem Link “Direkt zum Inhalt springen” oder “Navigation überspringen” wird eine hochkomplizierte Alternativ-Beschilderung. Das ist zwar gut gemeint, aber paradox — sollte ein Skip Link nicht dabei behilflich sein, lange Navigationsmenüs zu überspringen?

Joe Clark fasst das Problem der Skip-Navigation radikal zusammen und fordert zum Nachdenken auf:

Or think about it this way: If you need to skip navigation, do you maybe have too much navigation? Simplify, man!
– Joe Clark. Ten Questions for Joe Clark

Mehr Probleme: Nicht nur die schiere Menge an Links ist ein Problem, sondern auch die Formulierung des Linktexts. Die Links sind oft am Nutzer vorbei getextet. Wo komme ich hin, wenn ich auf “Kontext-Informationen der Seite” klicke? Was bedeutet der Link “zur Globalnavigation” — sollte diese nicht gerade übersprungen werden und was ist der Unterschied zwischen Globalnavigation und Hauptnavigation?

Accessibility-Studien zeigen, dass blinde Besucher zwar tatsächlich das Bedürfnis haben, direkt zum Inhalt einer Seite zu springen, doch wissen sie oft nicht, wie eine Skip-Navigation funktioniert und vertrauen ihr aufgrund unbekannter Begriffe nicht.

Our participants desperately wanted to not listen to the navigation each time they got to a page. They wanted to get right to the content. But only half of our participants knew what “skip navigation” means. [...] Some jumped to the bottom of each page and scanned back up the pages to avoid the “stuff” at the top.
– Frances & Redish. Guidelines for Accessible and Usable Web Sites

Ziel: Eine Skip-Navigation ist dafür da, die Navigation zu überspringen und schnell zu den Inhalten zu gelangen.

Die BITV sagt zu Skip-Links:

Inhaltlich verwandte oder zusammenhängende Hyperlinks sind zu gruppieren. Die Gruppen sind eindeutig zu benennen und müssen einen Mechanismus enthalten, der das Umgehen der Gruppe ermöglicht.
– BITV 13.6

Lösung: Ein Link “Direkt zum Inhalt springen” — schlicht und einfach. Bei vielen Angeboten ist ein zweiter Link “Direkt zur Suche” sinnvoll. Der Link sollte verständlich getextet sein und kein Fachvokabular (Global-Navigation, Kontext-Informationen, etc.) enthalten. Gut sind auch kontextspezifisch getextete Sprung-Links, bei denen sich die Formulierung direkt auf den Inhalt einer Seite bezieht. Auf einer Kontaktseite würde der Skip-Link lauten “Direkt zum Kontaktformular springen”, auf einer Nachrichten-Seite “Direkt zu den Nachrichten springen”.

2. Druckbare Zeichen in Linklisten

Navigation von Greenpeace Berlin
Ohne Stylesheet sieht man es deutlich: Hinter dem Link schließt bei Greenpeace Berlin ein unverlinkter Punkt den Listeneintrag ab.

Er ist immer häufiger zu finden, der unsichtbare Punkt hinter verlinkten Menüpunkten. Der Punkt ist nicht verlinkt und schließt einen Listeneintrag ab. Im Code steht er zwischen schließendem a href und schließendem li.

<ul>
<li><a href="/themen/">Themen</a><span>.</span></li>
<li><a href="/termine/">Termine</a><span>.</span></li>
</ul>

Zu sehen bekommt man ihn nur, wenn man das Stylesheet deaktiviert, denn er wird per CSS unsichtbar gemacht. Was macht bloß dieser Punkt?

Die Vorgabe der BITV gibt einen Anhaltspunkt:

Nebeneinander liegende Hyperlinks sind durch von Leerzeichen umgebene, druckbare Zeichen zu trennen.
– BITV 10.5

In der amerikanischen WCAG ist dieser Sachverhalt folgendermaßen formuliert:

Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.
– WCAG

Ziel: Das Ziel ist es, Textlinks oder Navigationselemente klar von einander zu trennen.

Navigation von Greenpeace Berlin
Greenpeace Berlin schließt jeden Menüpunkt mit einem Punkt ab

Problem: Ein Problem gibt es hier eigentlich nicht, denn wenn die Links in einer Navigationsliste als Liste <ul> ausgezeichnet sind, sind alle Links klar voneinander getrennt. Der unverlinkte Punkt sollte ursprünglich ganz alten Screenreadern helfen, direkt nebeneinander stehende Hyperlinks zu unterscheiden, die nur von einem a-Element umschlossen sind. Die Vorschrift trägt in der WCAG-Version den Zusatz “until user agents …”, der in der deutschen BITV fehlt. Folgt man Joe Clark, war die Regel schon immer äußerst angestaubt, weil Ausgabegeräte, die kein HTML 2.0 verstehen, kaum in Gebrauch sind.

This guideline is clearly unnecessary and caters to broken user agents. The sequence <a></a><a></a>, with or without spaces or printable characters (not that we’re printing anyway), is perfectly delineated and does not need dressing up. If your user agent cannot understand HTML 2.0, get a better user agent.
– Joe Clark. WCAG Bugzilla

Navigation von Ihre Vorsorge
Auch Ihre-Vorsorge.de macht den Punkt

Lösung: Wenn man Navigationsmenüs als Listen <ul> auszeichnet, ist eine Trennung durch druckbare Zeichen überflüssig. Jeder Menüpunkt ist ein einzelner Listeneintrag <li>. Damit hat kein Screenreader Probleme — auch nicht die ältesten. Die Links werden bedeutsam gruppiert. Die semantische Auszeichnung erleichtert die Navigation mit Screenreadern und macht die Gestaltung per CSS einfach.

Chris Heilmann bringt es auf den Punkt:

If you use a list for your links, you won’t need characters in between them:

<ul>
<li><a href="#">foo</a> </li>
<li><a href="#">bar</a> </li>
</ul>

Just ensure that, if you use a CSS technique to make them appear in one line , there is still enough space between them so that users with low visibility can still distinguish them.
– Chris Heilmann. css-discuss

3. Rätselhafte Icons

Landtag NRW
Viele unklare Icons beim Landtag NRW

Woran sieht man, dass eine Website leicht zugänglich ist? Auf den ersten oberflächlichen Blick gar nicht, das ist das Gute. Doch wenn man schon so viele Mühe und Geld in das Webangebot gesteckt hat, um es barrierefrei zu machen, will man das auch zeigen. Das Stilmittel zum barrierefreien Protzen sind Icons.

Jeder Menüpunkt ist mit einem Icon versehen. Der Grundgedanke dahinter ist gut: Eine Kombination aus Text und passendem Icon erhöht die Verständlichkeit und beschleunigt die Navigation. Auf Flughäfen funktioniert dies meist sehr gut: Man findet schneller zu seinem Gepäck, wenn man den Schildern mit dem Koffer folgt, egal ob man den Begriff “Baggage Reclaim” versteht oder nicht.

Die BITV gibt vor:

Text ist mit graphischen Präsentationen zu ergänzen, sofern dies das Verständnis der angebotenen Information fördert.
– BITV 14.2

Icons bei der SPD
Das Icon zur SPD-Bundestagsfraktion ist wenig verständlich. Das Icon bei “Mitglied werden” könnte auch für “bearbeiten” stehen

Problem: Bei vielen barrierefreien Websites ist die Hilfestellung zur lästigen Pflicht geworden. Es müssen Icons her, egal wie verständlich sie sind. Schlechte Icons fördern jedoch weder das Verständnis noch erleichtern sie die Orientierung. Im Gegenteil, sie stiften Verwirrung und erhöhen das Grundrauschen. Jedes schlechte Icon ist ein unverständliches Element mehr, welches kognitiv decodiert werden muss. Es ist meist weder nützlich noch dekorativ.

Lösung: Icons dort einsetzen, wo es sinnvoll sind. Nicht jeder Link braucht ein Icon. Wenn sich kulturelle Konventionen herausgebildet haben, sollte man diesen folgen. Neuartige, vermeintlich kreative Icons, die mit Erwartungen brechen und schwer lernbar sind, verbessern nicht die Benutzerführung.

Icons bei Creative Commons
Icons bei den Creative Commons: Die Medientypen sind gut visualisiert und auch ohne Text verständlich.

4. Redundante Title-Texte

heute.de
Doppelt hält nicht besser — heute.de

Kein Bild ohne Alt-Text. Kein Link ohne Title-Text — könnte man zumindest meinen, wenn man sich das fleißige Title-Text-Getexte von einigen barrierefreien Angeboten anschaut. Bei jedem Hyperlink wird akkurat-gewissenhaft der Link-Text als Title-Text wiederholt. Fährt man mit der Maus über den Text-Link “Aktuelles”, klappt “Aktuelles” als Tooltipp aus. Ganz so, als bräuchten Screenreader eine Lesehilfe, um textbasierte Hyperlinks zu entschlüsseln. Was ist das nur für eine merkwürdige Vorschrift? Haben Title-Texte keine nützlichere Aufgabe?

Gruene.de
Doppelte Themen — Gruene.de

Problem: Die Dopplungen haben keinen Mehrwert und nerven. Im Extremfall führen sie dazu, dass blinde Menschen, die bei ihrem Screenreader das Vorlesen von Title-Texten aktiviert haben, die Funktion wieder abstellen. Kein Mensch will sich Informationen zweimal vorlesen lassen. Title-Texte können aber durchaus nützliche Zusatzinformationen über das Linkziel transportieren.

Ziel: Den Nutzern erklären, wohin der Link führt. Besonders bei Textlinks, die in einen Text eingebettet sind, entstehen häufig Verstehensprobleme. Ist es ein interner oder externer Link? Öffnet sich ein neues Fenster? Welches Angebot erwartet die Nutzer? Gelangen die Nutzer zu einem Text, einem Audio-Beitrag, einem Video, einer Foto-Galerie oder einer Info-Grafik? Welche Infos verbergen sich hinter den Menüpunkten? Lohnt es sich überhaupt zu klicken?

Title-Texte sind Navigations- und Orientierungshilfen:

The goal of the link title is to help users predict what will happen if they follow a link. [...] Link titles are one of the first enhancements to the Web that actually help people navigate (as opposed to simply making pages look more fancy). Since we know that users have horrible problems finding things on the Web, we should give them all the help we can.
– Jacob Nielsen. Using Link Titles to Help Users Predict Where They Are Going

Die BITV sagt zum Thema Linkkennzeichnung:

Das Ziel jedes Hyperlinks muss auf eindeutige Weise identifizierbar sein.
– BITV 13.1

Eine spezielle Vorschrift “Jeder Link braucht einen Title-Text” gibt es somit nicht. Bei der Anforderung steht die Link-Verständlichkeit im Vordergrund. Hyperlinks sollten so getextet sein, dass sie aus sich heraus eindeutig verstehbar sind. Title-Texte können durch eine hilfreiche Zusatz-Beschreibung diesen Verstehensprozess unterstützen.

Greenpeace
Greenpeace macht es besser

Lösung: Redundanzen vermeiden, damit die Nutzer das Vertrauen in die nützliche Funktion nicht verlieren. Besser Title-Texte weglassen, wenn der Linktext ausreichend klar formuliert ist und keine zusätzlichen Informationen notwendig sind, um das Linkziel zu benennen.

Fazit

Holen wir uns wie Hermes Conrad, Bürokrat Stufe 37, den Groove zurück. Die Regeln der Bürokratie-Zentrale sollten mit Sinn und Verstand angewandt werden. Ein barrierefreies Webangebot zeichnet sich nicht durch mechanische Regelbefolgung aus, sondern durch durchdachte Usability und Accessibility für alle Nutzer.

I assure you, Mrs. Buttle, the Ministry is very scrupulous about following up and eradicating any error. If you have any complaints which you’d like to make, I’d be more than happy to send you the appropriate forms.
– Sam Lowry, in: Brazil. 1985

Bibliografie

Einfach für alle. BITV Anlage 1.
Die Vorschriften.
Einfach für alle. BITV für Alle — Die Verordnung in 14 handlichen Schritten.
Die Vorschriften verständlich erklärt. Bei EfA lernt man in 14 Tagen die Anforderungen der BITV kennen und erfährt viel über Motive und Techniken.
Frances & Redish. Guidelines for Accessible and Usable Web Sites.
Es gibt ihn nicht, den typischen Screenreader-User. Das Nutzerverhalten von blinden Nutzern ist heterogen und komplex.
Jakob Nielsen. Accessibility is not enough.
Ein barrierefreie Website ist nicht automatisch auch eine gut bedienbare Website. Nielsen mahnt schonungslos reinen Accessibility-Fetischismus an.
Jakob Nielsen. 2001. Beyond Alt Text.
Accessibility ist mehr als nur Alt-Text. Durch Grundlagenforschung gestützte Guidelines der Nielsen Norman Group für bessere Websites.
Joe Clark. Interview: Ten Questions for Joe Clark.
Engagiert und unnachahmlich kommentiert Joe Clark gängige Accessibility-Techniken.
Webaim. Putting People at the Center of the Process.
Webaim stellt die User in den Mittelpunkt.

Suche

About

"Vorsprung durch Webstandards" ist ein Webzine zu Webstandards, Barrierefreiheit und Usability. In loser Folge erscheinen hier theoretische Texte, praktische Tipps und hilfreiche Links zum Thema.

Twitter

Follow Vorsprung on Twitter

Classics

Falling in love with CSS

I love CSS

alle Interviews

Updates

Feed Neue Texte als RSS-Feed

Autoren

Heike Edinger, heike.edinger at gmail.com

Timo Wirth, timo.wirth at gmail.com