Benutzerfreundliche und barrierefreie Websiten
Bahn frei

Leichter Zugang

Benutzerfreundliche und barrierefreie Websiten

In Deutschland haben acht Prozent der Menschen ein Handicap, das ihnen den Zugang zum Internet erschwert. Aber nicht nur für diese besondere Zielgruppe sollten Webseiten angepasst werden. Auch Otto Normalsurfer hat individuelle Anforderungen und Schwierigkeiten, angefangen vom Einsatz verschiedener Browser bis hin zu unterschiedlicher Computer-Erfahrung, die die frustfreie Navigation im Web zur Hürde macht. Der Artikel erklärt, worauf Webdesigner achten müssen, um allen Besuchern eine intuitive Bedienung und barrierefreie Erfahrung ihrer Website zu erlauben. Die Grundlage dafür ist, dass technische Standards und wichtige Gestaltungsregeln eingehalten werden und die Site insgesamt durchdacht und bis ins Detail ausgearbeitet ist.

Usability und Accessibility

Benutzerfreundliche und barrierefreie Websiten

Viele Webdesigner begehen den Fehler, ihre persönlichen Vorlieben oder Vorstellungen zu verallgemeinern. Richtig ist jedoch der umgekehrte Weg: Wer erfolgreiche Webseiten erstellen will, muss sich zunächst in die Lage seiner Anwender versetzen und sich fragen, was diese Anwender praktisch und unpraktisch finden, was sie stört und was nicht und was sie bereit sind zu akzeptieren und was nicht. Am einfachsten ist es dabei, sich das eigene Verhalten als Anwender vor Augen zu führen, wenn man auf einer Website landet und dort beispielsweise nach bestimmten Informationen sucht, etwas einkaufen will oder nach Gleichgesinnten sucht.

Auch in Anwender mit Handicaps wie einer Sehschwäche oder Körperbehinderungen sollte man sich versuchen hineinzuversetzen. Dabei hilft es, beispielsweise einmal mit einem Screenreader das Web und natürlich auch die eigene Website zu erforschen oder ein Tool wie Vischeck (www.vischeck.com) zu benutzen, um die Wahrnehmung von Grafiken und Farbsätzen mit einer Farbenblindheit zu simulieren. Nur durch solche Tests werden Sie Problemen bei der Leserlichkeit oder Navigation Ihrer Site auf die Spur kommen.

Es existieren mittlerweile auch Richtlinien für zugängliche Webseiten. In Deutschland ist dies die Barrierefreie Informationstechnikverordnung (BITV), die für Bundesbehörden und öffentliche Organisationen, die vom Bund finanziert werden, bereits Pflicht ist. Es ist zu erwarten, dass sich die Verpflichtung auch auf andere Anbieter ausdehnt.

Für die beiden Aspekte haben sich die Schlagwörter Usability und Accessibility etabliert. Die folgenden Abschnitte gehen auf die genauere Bedeutung dieser beiden Schlagwörter ein.

Bedienbarkeit von Websites

Benutzerfreundliche und barrierefreie Websiten

Wenn ein Anwender und eine Webseite aufeinander treffen, kommt es meistens zur Kollision zweier Intentionen: Der Anwender sucht etwas oder möchte etwas tun und die Webseite möchte etwas mitteilen oder anbieten. Der Anwender möchte sein Ziel möglichst schnell und bequem erreichen und die Website möchte den Anwender einerseits zufrieden stellen, andererseits möglichst lange halten.

Erfolgreiche Websites geben in diesem Konflikt einfach nach und versuchen nur eines: es dem Anwender so bequem wie nur möglich zu machen. Er soll sein Ziel so schnell wie möglich erreichen, selbst wenn er dadurch doppelt so schnell wieder verschwindet. Er wird dafür aber wiederkommen, denn er weiß es zu schätzen, wenn er wirklich einmal genau das bekommt, was er sich gewünscht hat.

Usability ist Barrierefreiheit

Benutzerfreundliche und barrierefreie Websiten

Eigentlich gehört das Schlagwort Barrierefreiheit eher in den Zusammenhang, der im nächsten Abschnitt in Bezug auf Accessibility angesprochen wird. Doch das Ziel von Usability ist letztlich auch nichts anderes als das Ausräumen möglichst vieler Hindernisse. Usability ist aus Anwendersicht auch das, was durch den Begriff Flow ausgedrückt wird: Alles funktioniert wie geschmiert und alles reagiert so wie erwartet.

Zugänglichkeit von Websites

Benutzerfreundliche und barrierefreie Websiten

Das W3-Konsortium sorgt nicht nur für die Standardisierung von Sprachen wie HTML und CSS, sondern hat auch eine Initiative für die Zugänglichkeit im Web gegründet: die Web Accessibility Initiative (WAI, www.w3.org/WAI). Ziel dieser Initiative ist es, unter Webdesignern das allgemeine Bewusstsein dafür zu schaffen, dass Webseiten auch für Menschen mit eingeschränkten Zugangsfähigkeiten erreichbar sein sollten.

Über das Ausmaß der eingeschränkten Zugangsfähigkeit lässt sich natürlich trefflich streiten. Sehbehinderte oder völlig erblindete Menschen erfahren im Web ganz offensichtlich Einschränkungen. Doch eine eingeschränkte Zugangsfähigkeit kann in einem weiter gefassten Sinn auch schon Menschen betreffen, die keine DSL-Flatrate und keinen Pentium-4-PC ihr eigen nennen, sondern aus finanziellen Gründen oder wohnortbedingt mit einem alten PC über eine Modemverbindung mit teurem Zeittakt ins Internet gehen.

Menschen mit Sehschwächen erleiden andere Einschränkungen als Menschen mit Hörschwächen und wieder andere als Menschen mit motorischen Störungen. Dennoch wird mit gutem Grund versucht, für Websites ähnliche Richtlinien für die Behindertengleichstellung zu schaffen, wie es sie für öffentliche Orte und Gebäude bereits gibt.

Die Richtlinien der WAI-Initiative sind in dem Dokument Web Content Accessibility Guidelines zusammengefasst, das in Fassung 1.0 unter www.w3.org/TR/WCAG10 zu finden ist. Unter www.w3c.de/Trans/WAI/webinhalt.html wird eine deutsche Übersetzung angeboten. Zusammengefasst werden in diesem maßgeblichen Dokument 14 Richtlinien aufgestellt.

Richtlinien: 1-5

Benutzerfreundliche und barrierefreie Websiten

1. Stellen Sie äquivalente Alternativen für Audio- und visuellen Inhalt bereit. Der Aufwand, um etwa eine audiovisuelle, in Flash realisierte Sprachlernübung alternativ in reiner Textform bereitzustellen, ist sicherlich nicht gering, und Abstriche bei der Wirkung werden sich kaum vermeiden lassen. Für Betroffene erzielt Ihre Site dadurch jedoch einen entscheidenden Mehrwert.

2. Verlassen Sie sich nicht auf Farbe allein. Das bedeutet vor allem, dass stets auf ausreichenden Kontrastreichtum von Hinter- und Vordergrundfarben geachtet werden sollte. Schwache Kontraste gelten unter manchen Designern als edel, doch wenn sie nur von Menschen mit hundertprozentiger Sehfähigkeit wahrnehmbar sind, wirken sie überheblich und arrogant.

3. Verwenden Sie Markup und Stylesheets und tun Sie dies auf korrekte Weise. Dies richtet sich vor allem an Designer, die wild verschachtelte Tabellen benutzen, um ihr Seitenlayout zu realisieren, oder die eine Auszeichnung wie die für Blockzitate benutzen, um Absätze einzurücken, bei denen es sich gar nicht um ein Zitat handelt. HTML-Code sollte syntaktisch fehlerfrei und strukturell sinnvoll sein. Für die Optik sollte allein CSS zum Einsatz kommen. Nicht skalierbare Größen sollten vermieden werden.

4. Verdeutlichen Sie die Verwendung natürlicher Sprache. HTML sieht Möglichkeiten vor, anzugeben, in welcher natürlichen Sprache welcher Text geschrieben ist. Dies erleichtert es akustischen Ausgabesystemen, die Texte korrekt vorzulesen. Auch Abkürzungen sollten als solche mit den dafür vorgesehenen HTML-Elementen ausgezeichnet werden, um akustischen Ausgabesystemen die Arbeit zu erleichtern.

5. Erstellen Sie Tabellen, die problemlos transformieren. Tabellen, die für nichttabellarische Zwecke verwendet werden (zum Beispiel für Seitenlayouts), sollten in linearisierter Form eine sinnvolle inhaltliche Reihenfolge ergeben. Linearisiert bedeutet Zelle für Zelle hintere
inander als Absätze gedacht, in der Reihenfolge, wie die Zellen im Code notiert sind. Ferner gehört die korrekte Auszeichnung von Kopf- und Datenzellen dazu sowie die Verwendung weiterer logischer Tabellenelemente wie Spaltengruppen, Kopf-, Körper- und Fußbereich.

Richtlinien: 6-10

Benutzerfreundliche und barrierefreie Websiten

6. Sorgen Sie dafür, dass Seiten, die neue Techniken verwenden, problemlos transformieren. Damit ist gemeint, dass ein HTML-Dokument auch dann gut lesbar ist, wenn das schicke Stylesheet nicht angezeigt werden kann oder wenn Javascript deaktiviert ist. Der Inhalt sollte auf keinen Fall von zusätzlichen Techniken für Optik oder Dynamik abhängig sein. Falls doch, sollte eine Alternativversion bereitgestellt werden, die auf zusätzliche Techniken verzichtet.

7. Geben Sie dem Benutzer die Kontrolle über zeitgesteuerte Änderungen des Inhalts. Bewegliche Abläufe, Filme oder Sounds sollten nicht ohne Eingriffsmöglichkeit des Anwenders durchlaufen oder gar in Endlosschleife wiederholt werden. Alles, was in der Zeit abgespielt wird, sollte über eine Pause- und Stopp-Funktion verfügen.

8. Sorgen Sie für direkte Zugänglichkeit eingebetteter Benutzerschnittstellen. Eingebettete Multimedia-Objekte oder Java-Applets sollen entweder selbst den Richtlinien für Zugänglichkeit folgen, oder die einbettende Webseite muss dafür sorgen, dass eine solche Zugänglichkeit gegeben ist.

9. Wählen Sie ein geräteunabhängiges Design. Die Website sollte sowohl über die Tastatur als auch per Maus oder über andere Eingabeformen wie Sprache oder spezielle Zeigegeräte bedienbar sein. Vieles davon nehmen Ihnen bereits Betriebssystemoberfläche und Browser ab. Doch sollten Hyperlinks auf die dafür vorgesehene Weise ausgezeichnet werden. Von Möglichkeiten, wichtige Links oder Schaltflächen mit einem Tastatur-Hotkey zu belegen, sollte Gebrauch gemacht werden.

10. Verwenden Sie Interimslösungen. Damit ist die Rückwärtskompatibilität zu älteren Browsern und anderer Zugangs-Software gemeint. So wird etwa empfohlen, Inhalte nicht ohne Not auf mehrere Fenster zu verteilen.

Richtlinien: 11-14

Benutzerfreundliche und barrierefreie Websiten

11. Verwenden Sie W3C-Techniken und -Richtlinien. Diese Richtlinie besagt, dass die Techniken des W3-Konsortiums beim Erstellen von Webseiten den Vorzug vor anderen Techniken erhalten sollten. Damit wird der Unsitte mancher Webdesigner, eine reine Flash-Lösung für ihre Website zu bevorzugen und eine HTML-Lösung nur noch als belächelte Alternative zur Verfügung zu stellen, eine klare Absage erteilt.Auch PDF-Dokumente sollten nicht anstelle von HTML und CSS eingesetzt werden, sondern nur als ergänzendes Material oder als Komfortfunktion, etwa um eine optimierte Druckversion eines Artikels anzubieten.

12. Stellen Sie Informationen zum Kontext und zur Orientierung bereit. Dazu gehört beispielsweise, komplexe Formulare in Fieldsets aufzuteilen, also in logische Gruppen. Wichtig ist aber auch, Textwüsten mit ausreichend vielen Zwischenüberschriften zu versehen, um»Haltestellen« einzurichten. Frame-Fenster, Grafiken und Ähnliches sollten mit sprechenden Titeln und Alternativtexten versehen werden.

13. Stellen Sie klare Navigationsmechanismen bereit. HTML enthält, abgesehen vom link-Element, keine richtige Funktionalität zur Realisierung einer Site-Navigation. Deshalb sind Webdesigner angehalten, ein Set von Links durch Position, Beschriftung und andere Merkmale als erkennbare Site-Navigation zu definieren. Die Navigation sollte Website-weit konsistent sein. Link-Ziele sollten mit Hilfe der verschiedenen Möglichkeiten, die HTML dazu bereitstellt, möglichst genau beschrieben werden.

14. Sorgen Sie dafür, dass Dokumente klar und einfach gehalten sind. Wenn möglich, sollte eine einfache, klare Sprache gewählt werden. Nicht nur Muttersprachler lesen eine Webseite, und auch Menschen mit Leseschwierigkeiten gehören zur Benutzergruppe.

Von der Mitte nach links oben

Benutzerfreundliche und barrierefreie Websiten

Jede Webseite wird von den Anwendern, die sie aufrufen, wahrgenommen. Das bedeutet, es laufen vorwiegend unterbewusste Prozesse ab, die zum Beispiel bestimmen, welche Elemente der Seite überhaupt beachtet werden und welche nicht, was zuerst beachtet wird und was erst später oder was spontan als störend oder ablenkend empfunden wird.

Webseiten erscheinen im Anzeigefenster eines Browsers. Der Blick des Anwenders ist beim Aufbau einer neuen Seite in der Regel zunächst auf die Fenstermitte gerichtet, wandert dann aber, wenn der Inhalt erscheint, nach oben links. Was aus der Fenstermitte her gesehen nord-westlich liegt, wird demnach tendenziell am ehesten wahrgenommen und alles, was südöstlich liegt, am ehesten überhaupt nicht.

Allerdings lässt sich diese Aussage nicht verallgemeinern. So genannte Eye-Catcher wie bewegte Elemente oder alleinstehende Grafiken können dazu führen, dass die Wahrnehmung schnell einer anderen Richtung folgt.

Eye-Catcher-Overkill

Benutzerfreundliche und barrierefreie Websiten

Eye-Catcher sind gut, solange sie einzeln auftreten. Ein wohlplatzierter Eye-Catcher lenkt die Aufmerksamkeit in eine vom Anbieter gewünschte Richtung und kann sie von ihrer Default-Nordwest-Route abbringen.
Eine Webseite jedoch, auf der mehrere Eye-Catcher um die sofortige Aufmerksamkeit buhlen, sorgt beim Anwender für eine unterbewusste Panik, die umso stärker ist, je weiter die Eye-Catcher auseinander liegen. Dieser Effekt entsteht vor allem auf Seiten, die voll mit teilweise animierter Werbung sind und wo die Werbeflächen oben, links und rechts zu finden sind. Der eigentliche Inhalt verkommt dabei zur Marginalie.

Bei geübten Anwendern hat man aber noch eine andere Reaktion festgestellt: Das typische, 468 x 60 Pixel große Werbebanner, das von vielen werbefinanzierten Websites vermeintlich prominent oben mittig platziert ist, wird oftmals gar nicht mehr wahrgenommen, genauer gesagt, unterbewusst automatisch ausgeblendet. Der Effekt wird auch als Banner-Blindheit bezeichnet. Das Phänomen dürfte sich auf alle Werbeflächen erstrecken, die der Anwender bereits vor Aufruf einer Webseite erwartet.

Standardkonformität

Benutzerfreundliche und barrierefreie Websiten

Es ist beim Erstellen von professionellen Websites unbedingt erforderlich, diese mit verschiedenen Browsern auszutesten. Der Grund ist, dass die Basistechniken des Web zwar produktunabhängige Standards sind, die aber von den einzelnen Browsern in ihren verschiedenen Produktversionen unterschiedlich vollständig und auch nicht in jedem Fall korrekt umgesetzt werden.

Daran sind allerdings nicht die Browser-Hersteller allein schuld. Die Standardisierung der Basissprachen HTML und CSS ist selbst noch nicht endgültig abgeschlossen, sondern ein weiter voranschreitender Prozess. Damit kein völliges Chaos entsteht, gibt es Sprachversionen. Immerhin liegen die für gegenwärtiges Webdesign maßgeblichen Sprachversionen HTML 4.01, XHTML 1.0, CSS 1.0 und 2.0 mittlerweile seit Jahren vor. Gleichzeitig ist das allgemeine Bewusstsein um die Bedeutung dieser Standards geschärft worden. So konnte sich der Software-Markt auf die Unterstützung dieser Sprachversionen allmählich einstellen.

IE: technisch veraltet

Benutzerfreundliche und barrierefreie Websiten

Das größte Problem ist derzeit der MS Internet Explorer, der sich dank der Integration ins Windows-Betriebssystem einen fast monopolistischen Marktanteil von über 90 Prozent gesichert hat, aber seit Jahren in der Version 6.0 vorliegt und die gesamte Weiterentwicklung verschlafen hat. Verglichen mit Browsern wie Firefox 1.0 oder neueren Opera-Versionen ist der MS Internet Explorer 6.0 nicht nur funktionsarm, umständlich und wegen der Systemintegration stets ein
potenzielles Sicherheitsrisiko für den PC, sondern er ist auch technisch leicht veraltet.

Dass trotzdem einige Sites mit diesem Browser am besten (oder schlimmer noch: überhaupt nur mit diesem Browser) funktionieren, liegt daran, dass die Entwickler nie über den Tellerrand des Internet Explorers geschaut haben, die Webstandards nicht berücksichtigen und einfach so lange herumtüfteln, bis ihre Seiten im Windows-Default-Browser so aussehen wie gewünscht.

Wer so denkt, untergräbt jedoch alle Standardisierungsbemühungen und huldigt letztlich nur einem Monopolisten. Zwar hat sich dieser seine Stellung selbst erarbeitet, was aber nichts daran ändert, dass jegliche Monokultur schädlich ist.

Immerhin ist der Marktanteil des Internet Explorers seit der Zeit leicht gesunken, als die Spread-Firefox-Initiative gegründet wurde (www.spreadfirefox.com).

Abgehakt: Netsape

Benutzerfreundliche und barrierefreie Websiten

Kein Thema mehr ist Netscape in der Version 4.x. Noch lange Jahre nach seinem Erscheinen 1997 gab es eine hartnäckige Benutzergemeinde, die den Netscape-Browser in einer 4er-Version einsetzte, zum Entsetzen vieler Webdesigner, da dieser Browser kaum noch mit modernen Standards kompatibel war und jede Menge Extraarbeit erforderte. Diese Verrenkungen nimmt heute glücklicherweise fast niemand mehr auf sich.

Die 1,11 Prozent Marktanteil für Netscape beziehen sich vor allem auf die neueren Versionen 6.x und 7.x, die wie Firefox und Mozilla auf der Gecko-Engine basieren und die modernen Standards weitestgehend unterstützen.

Testphase

Benutzerfreundliche und barrierefreie Websiten

Zwischen Fertigstellung und offiziellem Launch einer Website sollte auf jeden Fall eine ausreichend lange Testphase eingeplant werden. In dieser Phase sollte sich die Site bereits auf einem Server befinden, der so geschützt ist, dass nur autorisierte Benutzer Zugang haben.Für den Test sollten auch andere Personen als nur die Entwickler gewonnen werden. Wenn möglich, sollten ausgewählte Echtbenutzer in die Tests integriert werden. Für Entwickler ist es oft erstaunlich bis erschreckend, wie viele Unstimmigkeiten, Unschönheiten, aber auch kleine und große Programmierfehler bei solchen Tests noch gefunden werden.