Barrierefreiheit & Usability – Schlüsselkomponenten für gutes Webdesign

Usability und Barrierefreiheit sind zwei der wichtigsten Komponenten für erfolgreiches Webdesign und doch sind es die zwei am meisten vernachlässigten Bereiche bei der Umsetzung von Webprojekten. Die meisten Websites werden mit dem alleinigen Zweck der Verbreitung von Informationen über ein Produkt oder eine Dienstleistung entwickelt.

User-Szenarien werden dabei oftmals ignoriert, als ob alle Besucher der Webseite über perfekte körperliche oder kognitive Fähigkeiten und hervorragende Rechnerleistung mit bester Breitbandverbindung zum Internet verfügen. Nachfolgend möchte ich euch Orientierungsmöglichkeiten aufzeigen, Webseiten zu erstellen, die sowohl für jeden zugänglich als auch einfach zu bedienen sind.

Sprungmarken:

1. Prinzipien der Barrierefreiheit
2. Barrierefreie Seitengestaltung
3. Prinzipien der Benutzerfreundlichkeit
4. Verhaltensmuster der Benutzer
5. Usability-Heuristiken
6. Barrierefreiheit und Benutzerfreundlichkeit testen

1. Prinzipien der Barrierefreiheit

Jeder Internetnutzer, ob auf irgendeine Art beeinträchtigt oder nicht, verlangt nach einer individuellen Zugangsweise zu Webseiten und Informationen. Barrierefrei kann deshalb für jeden etwas anderes bedeuten. Um hier als Webentwickler nicht den Überblick zu verlieren, gibt es internationale Standards, an denen sich jeder, der eine Webseite programmiert, grundlegend orientieren kann.

Barrierefreiheit lässt sich zunächst auf zwei Seiten ermöglichen:

1. Das ist zum Einen die Seite der Technologien, die unterschiedlichen Menschen den Umgang mit dem Computer erleichtern. Dazu gehören zum Beispiel Screenreader für Sehbehinderte oder Texteinblender während einer Videokonferenz für Gehörlose.
2. Zum Anderen muss Barrierefreiheit bei der Gestaltung von Webseiten bedacht werden. Hier geht es darum, die Seite durch ein universelles Design allen Nutzern zu öffnen und nach Möglichkeit für den Zugang mit verschiedenen Sinneskanälen (z. B. nur sehen oder nur hören) zu erstellen.

1.1 Vorgaben des W3-Consortium (W3C)

Das international agierende W3C hat für die Erstellung von barrierefreien Webseiten Richtlinien erarbeitet (Web Content Accessibility Guidelines, kurz WCAG), die es seit 2009 in deutscher Übersetzung gibt.

Hier sind vier Prinzipien formuliert, die den Überlegungen zur Gestaltung einer Webseite zugrunde gelegt werden sollten:

1. Erstens muss die Seite wahrnehmbar sein, d. h. auch außerhalb der normalen menschlichen Wahrnehmung, die zu 80 % visuell erfolgt.
2. Zweitens muss eine Seite bedienbar sein, und zwar auch dann, wenn eine Computermaus aufgrund einer Behinderung nicht verwendet werden kann.
3. Drittens sollten die Informationen verständlich sein, und zwar nicht nur in ihrer Formulierung, sondern auch in ihrer Struktur.
4. Viertens muss eine Webseite robust sein, d. h., auch wenn sich die Technik entwickelt, muss eine Webseite noch denen dienen, die mit veraltetem Material darauf zugreifen.

1.2 Vorteile der barrierefreien und standardkonformen Seitengestaltung

Eine barrierefreie Webseite hat nicht nur Vorteile aufseiten der Nutzer. Sie ermöglicht es Webdesignern, von Anfang an gute Strukturen zu entwickeln, die zu einer stabilen und benutzerfreundlichen Seite führen. Gut gebaute Webseiten können ein größeres Publikum erreichen und steigern den Traffic auf die Seite.

Weiterhin sind Überlegungen zur Barrierefreiheit auch Überlegungen zur Suchmaschinenoptimierung, denn eine Suchmaschine kann ebenfalls als Wesen mit besonderen Bedürfnissen des Zugangs zu einer Webseite gesehen werden. Durch die klare Struktur der barrierefreien Webseite wird auch Suchmaschinen das Auffinden einer Seite erleichtert.

Eine Webseite, die nach den Standards zur Barrierefreiheit gestalten ist, ist deshalb eine lohnende Investition, denn sie schlägt gewissermaßen mehrere Fliegen mit einer Klappe.

2. Barrierefreie Seitengestaltung

Auch der barrierefreien Webseitengestaltung sind vier Prinzipien zugrunde gelegt, die eine erste Orientierung ermöglichen. Zu den sogenannten „HTML best practices“ gehört, dass der Quellcode vorteilhaft für Menschen mit Behinderung geschrieben ist, gleichzeitig vorteilhaft für Webentwickler ist und auch allen anderen Nutzer Vorteile bringt. Außerdem sollten automatisierte Tests an Webseiten unterstützt werden.

2.1 Grundlegende Richtlinien

Grundsätzlich gilt, dass alle Nutzer mit einer Webseite etwas anfangen können, die klar strukturiert und verständlich aufgebaut ist. Dieses Ergebnis kann auf verschiedenen Wegen erreicht werden, doch eignen sich hier einige besser als andere.

• Zunächst gehören zu einer guten Webseite sinnvolle Metadaten, die den Nutzern angeben, wie die Seite heißt, was sie beinhaltet und wer sie veröffentlicht hat.
• Für den Aufbau der Seite empfiehlt sich die strikte Trennung von Struktur und Design durch HTML und CSS.
• In der HTML-Datei sollte mit div-Containern gearbeitet werden, um Objekte anzuordnen und nach Möglichkeit nicht mit Tabellen und Frames.
• Die Navigation auf der Seite sollte auch ohne CSS oder Java-Script möglich sein und deshalb getrennt vom Inhalt aufgebaut werden.

Für den Nutzer sollte stets erkennbar sein, wo er sich auf der Webseite befindet:

• Für die Bedienung mit einer Tastatur ist der Einsatz von Sprunglinks sinnvoll.
• Das Kennzeichnen von Überschriften mit den entsprechenden HTML-Tags erleichtert es Screenreadern, die Informationen strukturiert auszulesen.
• Für die optische Gestaltung gilt es, gute Farbkontraste zu wählen, damit Text und Hintergrund gut erkennbar sind.

Darüber hinaus gibt es bei der Erstellung von Webinhalten weitere einfache Schritte zu beachten um die Orientierung des Users und Lesbarkeit von Webseiten zu verbessern.

2.2 Zugänglichkeit in der Praxis

Wie barrierefrei der Zugang zu einer Webseite in der Praxis tatsächlich ist, kann auf verschiedene Weise geprüft werden:

• Hier gibt es verschiedene freie oder kostenpflichtige Online-Tools und Programme, die automatisierte Tests durchführen, bei denen sie Tastatureingaben protokollieren oder Mausbewegungen aufzeichnen und untersuchen.
• Auch eine sogenannte Accessibity-Checkliste kann für den Anfang hilfreich sein. Um möglichst konform zu arbeiten, sollte sich jeder Webseitengestalter an den Vorgaben des W3C orientieren und daraus eine Checkliste, die in Verbindung mit der erwarteten Zielgruppe steht, ableiten.
• Weitere Methoden der Überprüfung von Barrierefreiheit sind Online-Tests, wie die HTML-Validation oder die Accessibility Validation des W3C.
• Gründlicher ist hier auch die Überprüfung im Rahmen einer Webseiten-Zertifizierung durch ein unabhängiges Institut.

3. Prinzipien der Benutzerfreundlichkeit

Das Thema Usability, zu deutsch Benutzerfreundlichkeit, geht einher mit der zuvor betrachteten Barrierefreiheit von Webseiten. Bei der Usability geht es dabei noch mehr um die positive Annahme von Webseiten durch User und den dadurch generierten Traffic, der zum Beispiel für den Erfolg eines Online-Shops wichtig ist. Aus diesem Grund setzen sich viele Marketingabteilungen mit der gewinnbringenden Gestaltung der Benutzerfreundlichkeit von Webseiten auseinander.

Wieso ist Usability wichtig?

• Aus der Sicht des Benutzers ist Usability deshalb so wichtig, weil der Benutzer seine Aufgabe entweder richtig und vollständig mit dem System erledigen kann oder nicht. Er kann den Arbeitsprozess entweder gerne vollziehen oder frustriert sein, weil es nicht funktioniert.
• Aus Entwicklersicht ist Usability deshalb so wichtig weil es den Erfolg oder Misserfolg eines Systems bestimmt. Fehlende Benutzerfreundlichkeit kostet Zeit und Aufwand und bestimmt über den Erfolg eines Systems. Gibt man den Benutzern die Wahl, würden sie immer dazu tendieren ein benutzerfreundliches System zu kaufen.

3.1 Was ist Benutzerfreundlichkeit?

Benutzerfreundlich ist alles, was ergonomisch, also auf die Verrichtung einer bestimmten Arbeit oder Aufgabe optimiert ist. Ein gutes Programm zum Virenschutz arbeitet zuverlässig im Hintergrund, ohne andere Prozesse zu verlangsamen.

Bei der Usability rückt der Nutzer (oder die Vielfalt der Nutzer) in den Vordergrund und es wird überlegt, wie die Webseite so gestaltet werden kann, dass sie optimal zur Wahrnehmung, zur Aufmerksamkeitsspanne oder zu Lesestilen verschiedener Besucher passt. Dabei spielt der Dreiklang aus den Begriffen Effektivität, Effizienz und Zufriedenheit eine große Rolle.

Für den Webseitengestalter bedeutet Benutzerfreundlichkeit, die Disziplin sich mit der Optimierung seiner Arbeit genau zu beschäftigen und das ist eine durchaus komplexe Aufgabe.

3.2 Ziel und Zweck der Usability

Am Anfang steht ein genaues Verständnis davon, wer die Webseite besuchen soll, um was darauf zu tun. Ziel und Zweck der Webseite bestimmen auch Ziel und Zweck der jeweiligen Nutzungsfreundlichkeit.

Ein Behördenwegweiser verfolgt zum Beispiel ein anderes Ziel als ein Online-Shop für Kleidung. Während Ersterer das Ziel einer guten Orientierung durch eine zweckmäßig übersichtliche Struktur erreicht, muss Letzterer mit dem Ziel der Umsatzsteigerung eine zweckmäßig leichte Bedienung des Shop-Systems erlauben, damit Bestellungen einfach abgewickelt werden können.

Je nach Webseitenart geht es bei der Usability immer darum, Benutzer schnell vom jeweiligen Webangebot zu überzeugen und nach Möglichkeit für weitere Besuche zu gewinnen.

Um das zu erreichen, muss die Seite alles bieten, was den Nutzer absolut zufriedenstellt.

3.3 Häufig auftretende Usability-Fehler

Da viele Webseiten sehr vielschichtig und umfangreich sind, stellt die benutzerfreundliche Gestaltung immer eine Herausforderung dar.

• Häufige Usability-Fehler sind zum Beispiel unübersichtliche Strukturen oder eine schwer verständliche Navigation.
• Auch ein Zuviel an Design oder inhaltsleere Spielereien mit Java oder Flash können Benutzer eher frustrieren als erfreuen.
• Zu lange Ladezeiten für aufwendige Grafiken sind ebenso wenig benutzerfreundlich.
• Häufig werden auch Registrierungen verlangt, wo eigentlich keine nötig sind. Hier sollte immer bedacht werden, aus welchem Grund sich Nutzer registrieren sollen und ob der Aufwand, der ihnen durch diesen Prozess entsteht, für das, was sie auf der Seite tun wollen (einen Kommentar hinterlassen, einen Newsletter abonnieren, etwas bestellen), nötig ist.

4. Verhaltensmuster der Benutzer

Zum Bau einer benutzerfreundlichen Seite gehört es auch, sich mit seinen Nutzern und deren Verhalten auf der Seite auseinanderzusetzen. So lässt sich feststellen, welche Inhalte häufig geklickt werden, welche Links oft zu anderen führen oder auch wie lange sich einzelne Nutzer auf der Seite aufhalten.

Hierzu gibt es verschiedene Dienste, die das „Tracken“, also das Verfolgen der Webseitenbesuche zur Analyse speichern. Solche Dienste werden zum Beispiel von Suchmaschinen-Betreibern (z.B. Google Analytics) angeboten und dienen der Sammlung und Auswertung des Besucherverhaltens.

5. Usability-Heuristiken

Usability-Heuristiken wurden zu Beginn der 1990er u. a. von Jakob Nielsen entwickelt und dienen der Klassifizierung von Problemen und Fehlern innerhalb der Benutzerfreundlichkeit.

Insgesamt zehn Punkte können demnach als Checkliste für die grobe Überprüfung einer Webseite auf ihre Usability hin verwendet werden. Dazu gehört u. a. die Transparenz der Vorgänge auf einer Webseite, damit der Nutzer zum Beispiel sieht, dass etwas geladen wird. Weiterhin die Verständlichkeit von Aufbau und Inhalt der Webseite für ein vielfältiges Publikum und die freie Bedienbarkeit von Funktionen, die es dem Nutzer erlaubt, Fehler rückgängig zu machen.

Die zehn Usability-Heuristiken

Checkliste für die grobe Überprüfung einer Webseite auf ihre Usability:

1. Sichtbarkeit des Systemstatus
   Das System sollte den Benutzer immer auf dem Laufenden halten, indem es angemessenes Feedback in einer angemessenen Zeit liefert.
2. Übereinstimmung zwischen dem System und der realen Welt
   Das System sollte die Sprache der Benutzer sprechen und systemorientierte Terminologien vermeiden.
3. Benutzerkontrolle und -freiheit
   Ein System sollte Benutzer nie in Situationen geraten lassen, aus denen sie nicht wieder zurückfinden.
4. Konsistenz und Standards
   Benutzer sollten sich nicht über unterschiedliche Wortwahl für gleiche Situationen oder Aktionen wundern müssen.
5. Fehlerverhütung
   Besser als gute Fehlermeldungen ist ein gutes Design, welches das Eintreten von Fehlern erst gar nicht zulässt.
6. Wiedererkennen statt sich erinnern
   Das Kurzzeitgedächtnis eines Benutzers ist begrenzt. Deshalb sollten sie sich nicht an Informationen erinnern müssen, die in einem ganz anderen Bereich des Dialogs von Bedeutung waren.
7. Flexibilität und Effizienz der Benutzung
   Features, die es einfach machen ein System zu erlernen, sind für den erfahrenen Benutzer häufig lästig. Gut gewählte Abkürzungen, die der Anfänger nicht sieht, können in ein System aufgenommen werden, so dass beide Nutzergruppen zufrieden sind.
8. Ästhetik und minimalistisches Design
   Jegliche Information sollte in einer natürlichen und logischen Ordnung erscheinen.
9. Hilfe beim Erkennen, Diagnostizieren und Beheben von Fehlern
   Gute Fehlermeldungen sind defensiv, präzise und konstruktiv. Präzise Fehlermeldungen geben dem User genaue Informationen über die Ursache des Problems.
10. Hilfe und Dokumentation
    Jede kleine Website sollte ohne Hilfe auskommen.

6. Barrierefreiheit und Benutzerfreundlichkeit testen

Um beide Aspekte auf einer Webseite zu überprüfen, gibt es verschiedene Wege.

• Einer ist die Checkliste, die dem Webdesigner hilft, sich seine Seite unter verschiedenen Gesichtspunkten anzusehen. Mit einer Checkliste ist aber noch kein richtiger Test auf Barrierefreiheit und Benutzerfreundlichkeit getan. Solch eine Prüfung ist ein umfangreiches Verfahren, das eine Webseite von ihrer Entstehung bis zur Überarbeitung begleiten sollte.
• Ein guter Weg ist der Test durch erste Nutzer, die unvoreingenommen auf der Webseite surfen und kommentieren, was ihnen auffällt. Solch einen Test zu planen, kann sehr langwierig und aufwendig sein, führt aber im Ergebnis zu einer optimierten Webseite. Wer diesen Test nicht alleine durchführen will, kann über Dienstleister inzwischen qualitative Testverfahren zu moderaten Preisen buchen. Videokonferenzsysteme, mithilfe derer unabhängige User dann die Funktionen auf einer Seite kommentieren, geben so zum Beispiel live einen Überblick über deren tatsächliche Funktionalität.

Schluss

Wenn wir dafür sorgen, dass eine Webseite flexibel als auch benutzerfreundlich ist und unter so vielen verschiedenen Umständen wie möglich zugänglich ist, bringt das bei unserer Arbeit einen entschiedenen Vorteil. Durch den Einsatz der oben aufgeführten Möglichkeiten zur Verbesserung der Zugänglichkeit von Webseiten und der Usability-Optimierung wird das Erstellen beeindruckender und flexibler Webseiten als auch die Erreichbarkeit im Web entscheidend zum Erfolg des Webauftritts beitragen.

Weiterführendes:

• Möglichkeiten zur Prüfung der Web-Usability