Navigation

Darstellung anpassen

Service-Menü

Sprachversionen

Suche



Inhalt

Infothek

Praxisbeispiel
Einführung von Barrierefreiheit am Beispiel des Relaunchs von theologisches-seminar-elstal.de

12.12.2005

Worauf muss man bei der Planung und Entwicklung einer zugänglichen Website achten? Dieser Praxisbericht veranschaulicht einige wichtige Aspekte der Barrierefreiheit anhand der Realisierung eines Fachhochschul-Auftritts, den die Hamburger Agentur feld.wald.wiese im Auftrag des Theologischen Seminars Elstal (FH) entwickelt hat.

Planung: Klare Ziele vereinbaren

Wie misst man Zugänglichkeit? Wie kann ein Auftraggeber beurteilen, ob er tatsächlich eine barrierefreie Website erhalten hat? Als Maßstab verständigten sich Auftraggeber und Agentur auf die Zielvorgabe von mindestens 95 Punkten im vom Projekt BIK (barrierefrei informieren und kommunizieren) entwickelten BITV-Test. In diesem Test können maximal 100 Punkte erreicht werden. Ab einem Ergebnis von 95 Punkten gilt eine Website als sehr gut zugänglich, ab 90 Punkte als gut zugänglich. Mithilfe der webbasierten BITV-Selbstbewertung kann der Stand der Zugänglichkeit projektbegleitend auf Basis eines "Selbstbewertungsfragebogens" durch die Agentur selbst eingeschätzt werden. Zum Abschluss kann das Ergebnis durch einen BIK-Berater überprüft werden.

BITV-Test:

Der BITV-Test ist ein Prüfverfahren, mit dem die Zugänglichkeit von Webangeboten zuverlässig und mit überschaubarem Aufwand eingeschätzt werden kann. Das Verfahren ist offen gelegt, die 52 Prüfschritte werden detailliert beschrieben. Wer die Prüfschritte durchführen möchte, braucht einen Rechner mit Windows als Betriebssystem sowie einige kostenlose, im Internet zum Download erhältliche Programme (hauptsächlich verschiedene Browser und Plugins).

BITV-Selbstbewertung:

Die BITV-Selbstbewertung ist ein webbasiertes Werkzeug für alle, die barrierefreie Webangebote entwickeln und sich dabei an den Vorgaben des BITV-Tests orientieren wollen. Auf Basis eines Fragebogens mit 52 Prüfschritten kann der Stand der Zugänglichkeit einer Website eingeschätzt werden. Der Fragebogen stützt sich auf das Verfahren des BITV-Tests. Die Zuverlässigkeit der Ergebnisse hängt davon ab, wie gut sich der Anwender mit den Prüfschritten des BITV-Tests vertraut macht.

Gestaltung: barrierefrei ohne Sack und Asche

Barrierefreiheit heißt nicht, dass auf eine ansprechende und ästhetische Gestaltung verzichtet werden muss. Wichtig ist zunächst vor allem, dass das Konzept der Trennung von Inhalt (HTML) und Gestaltung (CSS) konsequent angewendet wird. Dann kann der Benutzer die Gestaltung seinen Bedürfnissen entsprechend anpassen - etwa indem er in einem Benutzer-Stylesheet für ihn angenehme Schriftgrößen und Farben festlegt, die die Schrift- und Farbvorgaben des Anbieters überschreiben. Trotzdem sollte die vom Anbieter vorgesehene Gestaltung von vornherein für so viele Benutzer wie möglich benutzbar sein. Wichtige Kriterien für barrierefreies Screendesign:

  • Kontrastreiche Farben
  • Skalierbarkeit der Schriften und ein Layout, das auch bei sehr großen Schriften benutzbar bleibt
  • Keine Vermittlung von Information nur über die Farbe

Screenshot der Website mit Standard-Schriftgrößeneinstellung

Abbildung 1: Standardansicht bei 100 Prozent.

Farben

Für die Webseiten des Theologischen Seminars Elstal wurde auf Basis der Corporate-Design-Farben ein geeignetes Farbschema entwickelt. Alle Seitenelemente mit Ausnahme des Logos erfüllen die im BITV-Test geforderte Helligkeitsdifferenz zwischen Vorder- und Hintergrundfarbe. Für die Ermittlung der Differenzwerte eignet sich beispielsweise das kleine Windows-Programm Farbkontrast-Analyser oder auch ein Online-Dienst wie der von Juicy Studio.

Skalierbarkeit

Für die Schriftformatierung wurde bei der Kodierung die relative Maßeinheit em verwendet, damit auch Benutzer des Internet Explorers die Schriftgröße über Ansicht > Schriftgröße anpassen können. Die Skalierbarkeit der Schriften allein reicht aber noch nicht. Das Layout muss bei großen Schriften auch brauchbar bleiben, es darf nicht zu überlappungen oder abgeschnittenen Inhalten kommen. Um den Prüfschritt Schriftgröße variabel im BITV-Test zu bestehen, muss das Layout in Firefox eine Vergrößerung um zwei Stufen aushalten (Abbildung 1 und 2). Die Elstal-Seiten bleiben auch bei einer weiteren Vergrößerung auf 200 Prozent noch problemlos nutzbar.

Screenshot der Website mit einer Schriftgröße von 200 Prozent

Abbildung 2: Auch bei einer Schriftgröße von 200 Prozent bleibt alles lesbar, es gibt keine überlappungen.

Farbe nicht als einziges Unterscheidungsmerkmal

Mit Farben kann man differenzieren und hervorheben - zum Beispiel kann die aktuell gewählte Menü-Option durch eine andere Text- und/oder Hintergrundfarbe markiert werden. Allerdings dürfen Farben nicht als einziges Unterscheidungsmerkmal eingesetzt werden, da sonst Benutzern, die sie nicht oder verfälscht wahrnehmen, Informationen vorenthalten bleiben. Auf den Seiten des Theologischen Seminars Elstal wird zur Kennzeichnung der ausgewählten Menü-Option zusätzlich zur farblichen Hervorhebung eine fette Schrift verwendet.

Für sehbehinderte Benutzer, die in ihrem Browser ein eigenes Farbschema eingestellt haben, sind ausgewählte Menüpunkte außerdem gut an der mit der CSS-Eigenschaft border realisierten, dicken Rahmenlinie an der linken Kante erkennbar.

Zwei Screenshots des Menüs - einmal in der Standardansicht, einmal mit benutzerdefinierten Farben

Abbildung 3: Sowohl in der Standardansicht (links) als auch bei benutzerdefinierten Farben (rechts) zeigt die Gestaltung deutlich, welche Menü-Option ausgewählt ist.

Strukturierung: für eine variable Ausgabe

Das Rückgrat einer barrierefreien Webseite ist die Strukturierung, insbesondere mit den Überschriftenelementen (h1 bis h6). Mit Überschriften kann die durch Spalten, Kästen, Linien und Farben geschaffene visuelle Ordnung auch strukturell abgebildet werden. So wird diese Ordnung auch für Menschen nutzbar, die sie nicht sehen können. Sehende erkennen aufgrund der Gestaltung sofort, dass die Elstal-Seiten einen Kopfbereich mit Menüleiste, eine linke Spalte mit dem Hauptmenü und eine rechte Spalte mit den eigentlichen Inhalten bieten. Diesen schnellen überblick können sich Dank der (teils versteckten) Überschriften auch blinde Benutzer verschaffen. Screenreader bieten die Möglichkeit, alle Überschriften gesammelt anzuzeigen - so entsteht ein Inhaltsverzeichnis der Seite, über das jeder Bereich gezielt angesteuert werden kann.

Die Überschriftenstruktur der Elstal-Seiten:

  • h1: Navigation
    • h4: Servicemenü
    • h4: Suche
    • h4: Hauptmenü
    • h4: Bereichsmenü
  • h1: Hauptüberschrift des Inhaltsbereichs

Der konsequente Einsatz auch der weiteren HTML-Strukturelemente beispielsweise für Listen, Absätze und Zitate ermöglicht die variable Ausgabe der Inhalte. So bleiben die Seiten auch ohne die im Stylesheet definierte visuelle Gestaltung problemlos nutzbar (siehe Abbildung 4).

Screenshot der Website mit deaktiviertem Stylesheet

Abbildung 4: Ansicht mit deaktiviertem Stylesheet - auch mit der rudimentären browsereigenen Gestaltung bleiben die Inhalte übersichtlich.

Geräteunabängigkeit: bequem navigieren auch ohne Maus

Ein oft etwas vernachlässigter Aspekt der Barrierefreiheit ist die Bedienbarkeit ohne Maus. Nicht nur Blinde, sondern auch viele motorisch behinderte Benutzer bedienen ihren Computer über die Tastatur. Damit Webseiten bequem mit der Tastatur genutzt werden können,

  • sollte die Reihenfolge, in der Links mit der Tabulatortaste angesteuert werden, schlüssig sein;
  • sollten Links visuell hervorgehoben werden, wenn sie im Fokus sind (im Fokus ist ein Link, der gerade mit der Tabulatortaste angesteuert wurde und nun entweder mit der Eingabetaste aktiviert oder durch ein weiteres Drücken der Tabulatortaste wieder verlassen werden kann);
  • sollten versteckte Sprunglinks sichtbar werden, wenn sie im Fokus sind.

Screenshot des Hauptmenüs mit eingeblendetem Sprunglink

Abbildung 5: Der sonst versteckte Link zum Überspringen des Hauptmenüs wird eingeblendet, wenn er mit der Tabulatortaste angesteuert wird.

Qualitätskontrolle: Prüfschritt für Prüfschritt mit der BITV-Selbstbewertung

Es gibt zahlreiche weitere Anforderungen an Barrierefreiheit - zum Beispiel aussagekräftige Alternativtexte für Bilder und grafische Bedienelemente, valides HTML und die Auszeichnung von fremdsprachigen Wörtern. Auf der Grundlage der 52 Prüfschritte des BITV-Tests und mithilfe der BITV-Selbstbewertung kann die Einhaltung aller wichtigen Anforderungen der BITV systematisch überprüft werden, um eine möglichst hohe Zugänglichkeit zu gewährleisten.

Der Internetauftritt des Theologischen Seminars Elstal wurde für die Agenturliste 95plus eingereicht. Die sehr gute Zugänglichkeit wurde in der Nachprüfung bestätigt. Am 9. Dezember 2005 wurde das Webangebot mit einem BIENE-Award in Gold ausgezeichnet.

Autorin: Tiffany Wyatt
Veröffentlichung am: 12.12.2005 mit kleinen Änderungen gegenüber der Veröffentlichung in Ausgabe 8-2005 der Zeitschrift "iwp - Information, Wissenschaft & Praxis" der DGI (Deutsche Gesellschaft für Informationswissenschaft und Informationspraxis e.V.)