Barrierefreies Webdesign

Inhaltsverzeichnis

1 Vorwort

2 Barrierefreies Webdesign
2.1 Aufgabenstellung
2.2 Durchgeführte Arbeiten
2.3 Weitere durchgeführte Arbeiten
2.4 Ergebnis
2.5 Nützliche Links

Quellen

1 Vorwort

Diese Arbeit entstand im Rahmen des Seminars Network Services, welches im Wintersemester 2005/2006 an der Hochschule der Medien (HdM) in Stuttgart durchgeführt wurde. Die Arbeiten der anderen Seminarteilnehmer sind nicht Bestandteil dieser Veröffentlichung. Sie werden an der HdM gesondert als Sammelband herausgegeben.

2 Barrierefreies Webdesign

Dieses Kapitel befasst sich mit dem Thema Barrierefreies Webdesign nach dem Standard des World Wide Web Consortium (W3C). Das W3C legt eine Reihe von Richtlinien fest, welche eine Website erfüllen muss bzw. sollte, will sie als barrierefrei gelten. Diese Richtlinien lassen sich, je nach Wichtigkeit, in drei Teile (Priorität 1, 2 und 3) gliedern. An dieser Stelle sei nur die Priorität 2 genannt, welche für dieses Projekt von Bedeutung ist:

„Priorität 2: Ein Entwickler von Web-Inhalten sollte diesen Checkpunkt erfüllen. Andernfalls wird es für eine oder mehrere Gruppen schwierig sein, auf die Information im Dokument zuzugreifen. Die Erfüllung dieses Checkpunkts beseitigt signifikante Hindernisse für den Zugriff auf Web-Dokumente.“ (Chisholm et al. (1999))

Das W3C definiert weiterhin 3 Konformitätsstufen:

„ Konformität Stufe "A": Alle Checkpunkte der Priorität 1 sind erfüllt;

Konformität Stufe "Double-A ": Alle Checkpunkte der Priorität 1 und 2 sind erfüllt;

Konformität Stufe "Triple-A ": Alle Checkpunkte der Priorität 1, 2 und 3 sind erfüllt;“ (Chisholm et al. (1999))“

Erhebt eine Website Anspruch auf Konformität kann dies mittels eines Icons oder in Textform geschehen, welche in die Seite eingebunden werden.

2.1 Aufgabenstellung

Die zu lösende Aufgabe befasste sich damit, die Barrierefreiheit der WLAN-Seiten der Fakulät Iuk (Information und Kommunikation)noch weiter zu erhöhen. Vor Beginn des Re-Designs war die Konformitätsstufe A (WAI-A) bereits erfüllt, d.h. alle Checkpunkte der Priorität 1 bereits abgehackt. Ziel war es nun die Konformitätsstufe Double-A (WAI-AA) zu erfüllen. Dies bedeutete, dass nun alle Checkpunkte der Priorität 2 abgearbeitet werden mussten. Dies jedoch natürlich nur insoweit, als das die Website diese Punkte nicht bereits berücksichtigte. Es folgt eine kurze Auflistung der Checkpunkte der Priorität 2, welche bereits gegeben waren:

- Wenn eine angemessene Markup-Sprache existiert, verwenden Sie Markup anstelle von Bildern, um Information darzustellen.

- Erstellen Sie Dokumente, die gegen veröffentlichte formale Grammatiken validieren.

- Verwenden Sie Stylesheets, um Layout und Präsentation zu beeinflussen.

- Verwenden Sie Markup für Zitate. Verwenden Sie keinen Markup, der für Zitate gedacht ist, um visuelle Effekte wie Einrückung zu erzielen.

- Sorgen Sie dafür, dass dynamischer Inhalt zugänglich ist oder stellen Sie eine alternative Präsentation oder Seite bereit.

- Bis Benutzeragenten eine Kontrolle über das Blinken ermöglichen, vermeiden Sie es, Inhalt blinken zu lassen (d.h. die Präsentation regelmäßig zu ändern, z.B. ab- und einzuschalten).

- Bis Benutzeragenten es zulassen, den Refresh zu stoppen, erstellen Sie keine Seiten mit automatischer periodischer Aktualisierung.

- Bis Benutzeragenten es zulassen, die automatische Weiterleitung (Redirect) zu stoppen, verwenden Sie keinen Markup, um eine Weiterleitung zu erzielen. Konfigurieren Sie stattdessen den Server so, dass er eine Weiterleitung ausführt.

- Lassen Sie keine Pop-Ups oder andere Fenster erscheinen und wechseln Sie das aktuelle Fenster nicht, ohne den Benutzer zu informieren, bis Benutzeragenten es gestatten, die Erzeugung neuer Fenster zu unterbinden.

- Vermeiden Sie überholte Features von W3C-Technologien.

- Unterteilen Sie große Informationsblöcke in leichter zu handhabende Gruppen, wo angebracht.

- Identifizieren Sie das Ziel jedes Links auf klare Weise.

- Stellen Sie Metadaten bereit, um semantische Information zu Seiten und Sites hinzuzufügen.

- Verwenden Sie Navigationsmechanismen in konsistenter Weise.

2.2 Durchgeführte Arbeiten

Es folgt eine Auflistung der durchgeführten Änderungen. Vorangestellt ist jeweils die zugrunde liegende Richtlinie (Chisholm et al. (1999)). Die Ziffer in Klammern bezeichnet die Nummer Richtlinie in der Spezifikation des W3C.

2.2.1 Farben

(2.2) Sorgen Sie dafür, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe ausreichend kontrastieren, wenn sie von jemandem betrachtet werden, dessen Farbensehen beeinträchtigt ist, oder wenn sie mit einem Schwarzweißbildschirm betrachtet werden.

Die Seite map.php bietet Übersichtskarten der Stockwerke. Hier wird mittels Farben die Signalstärke des Funknetzes dargestellt. Ein starkes Signal wird rot dargestellt, schwächere Signale grün oder gelb. Für Menschen mit einer Sehschwäche (Rotgrünblindheit) ist dieser Kontrast schwer oder gar nicht erkennbar. Deswegen sollte ein anderes Farbschema gewählt werden. Die Seite http://www.vischeck.com bietet eine Applikation (daltonize), welche nicht nur eine passende Alternativversion generieren kann, sondern auch darstellt, wie ein rotgrünblinder Mensch die eingegebene Seite wahrnimmt. Die Abbildung zeigt dies am Beispiel der Karte w32_4og.png. Die oberen beiden Bilder zeigen das Original, sowie die empfohlene Alternativversion. Unten ist zusehen, wie diese beiden Abbildungen für eine Person mit Rotgrünblindheit aussehen. Die Alternativversion muss nicht genau auf diese Weise umgesetzt werden, sondern dient als Vorschlag.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: w32_4og.png (daltonized)

2.2.2 Einheiten

(3.4) Verwenden Sie relative anstelle von absoluten Einheiten in den Attributwerten der Markup-Sprache und Stylesheet-Property-Werten.

In der Datei wlan.css wurden absolute Einheiten für Überschriften und Absätze in Relative geändert.

2.2.3 Seitenstruktur und Listen

(3.5) Verwenden Sie Überschriften-Elemente, um die Struktur eines Dokuments darzustellen und verwenden Sie sie gemäß der Spezifikation.

(3.6) Verwenden Sie korrekten Markup für Listen und Listenelemente.

Dieser Punkt dient vor allem dazu, damit Screen-Reader die Struktur einer Seite entschlüsseln zu können. Überschriften-Elemente müssen an der richtigen Stelle eingesetzt und auch korrekt verschachtelt werde. D. h. ein <h1>-Element enthält immer <h2>-Elemente, diese wiederum <h3>-Elemente, usw.

Änderungen:

index.php: Ein <h2>-tag enthielt ein <h4>-tag, welches auch keine Überschrift einschloss, sondern einen Hinweis. <h4> wurde in ein Absatz-tag (<p>) umgewandelt, welches mittels CSS entsprechend formatiert wurde (font-size, font-weight).

news.php: Die Auflistung der News wurde mittels Überschriften-Elementen (<h4>) formatiert, welche auch noch von einem <h2>-tag eingeschlossen wurden. Da es sich jedoch um eine Liste handelt, wurde sie in eine ebensolche umgewandelt (<ul> und <li>-tags).

anmeldung.php: <h1>-tag folgt auf <h1>-tag. Weiterhin fehlt der Hinweis, auf welcher Seite sich der Nutzer gerade befindet. Dieser wurde eingefügt (mittels <h2>-Element). Das <h1>-Element wurde in <h3> geändert. Der Link auf die Hilfe war mit einem <h3>-tag eingeschlossen. Da dies auch keine Überschrift ist, wurde es durch ein <p>-tag ersetzt, welches mittels CSS formatiert wurde.

faq.php: Die FAQs wurden mittels <h4>-Elementen dargestellt. Diese wurden in eine nummerierte Liste geändert (<ol>,<li>).

2.2.4 Neueste W3C-Technologien

11.1 Verwenden Sie W3C-Technologien, wenn sie verfügbar und der Aufgabe angemessen sind und benutzen Sie die neueste Version, wenn sie unterstützt wird.

Der Doctype wurde von html4.1 in xhtml1 geändert. Zusätzlich wurde ein xml -statement eingefügt. Die nötige Änderung im Markup betraf solche tags, welche nicht geschlossen werden, wie z.B. <br>. Um xhtml -konform zu sein, müssen diese sich selbst schließen. Beispiele: <br> wird zu <br />, <img src=“#“> wird zu <img src=“#“ />. Auch ist es nötig alle tags kleinzuschreiben. Diese Änderung wurde ebenfalls vorgenommen.

2.2.5 Tabellen

(5.3)Verwenden Sie keine Tabellen für Layout, wenn diese in linearisierter Form keinen Sinn ergeben. Ansonsten, wenn die Tabelle keinen Sinn ergibt, stellen Sie ein alternatives Äquivalent bereit (das eine linearisierte Version sein kann).

Die Seite kontakt.php enthielt eine Tabelle zur Darstellung der Kontaktdaten des WLAN-Teams, sowie deren Bilder. Die Tabelle wurde durch verschachtelte div-Klassen ersetzt, deren Layout in die Datei wlan.css geschrieben wurde:

div.tbl {} div.spacer { clear:both; } div.pic { float:left; margin-left:1.0em; margin-top:1.0em; } div.pic p { font-size:0.9em; text-align:left; margin-bottom:0px; }

Hier der HTML-Code für eine Tabellenreihe. Der Inhalt wurde aus Platzgründen weggelassen:

<div class="tbl">

<div class="spacer"> &nbsp; </div> <div class="pic"> (An dieser Stelle kann das Bild eingefügt werden.) <p> (An dieser Stelle kann der Text zum Bild eingefügt werden.) </p> </div> <div class="spacer"> &nbsp; </div> </div>

Die Klasse tbl kann noch mit Layoutangaben (z.B. Rahmen, etc.) gefüllt werden.

2.2.6 Inhaltsverzeichnis

(13.3) Stellen Sie Informationen zum allgemeinen Layout einer Site bereit (z.B. über eine Sitemap oder ein Inhaltsverzeichnis).

Diese Informationen sind bereits über die Navigationsleiste erhältlich. Da die Navigationsstruktur schon ohnehin sehr flach ist, ist eine Sitemap oder Inhaltsverzeichnis nicht nötig.

2.3 Weitere durchgeführte Arbeiten

Es wurden weitere Änderungen vorgenommen, welche nicht zur Erfüllung der Priorität 2 dienen, oder nicht unmittelbar mit dem Thema Barrierefreiheit in Zusammenhang stehen.

1. Es wurde eine CSS-Druckversion (print.css) erstellt. Die Unterschiede zur wlan.css sind:

- Die Schriftgröße wird auf 12pt gesetzt. Verwendet wird eine Serifenschrift.
- Abstände im body werden auf 0 gesetzt, um die volle Breite des Papiers auszunutzen.
- Nach einem Absatz wird die erste Zeile eingerückt.
- Der Inhalt der Links wird angezeigt (Dynamischer Content).
- Nach Überschriften werden Seitenumbrüche vermieden.
- Die Schriftart der Überschriften wird lesefreundlicher.

2. Es wurde ein Impressum erstellt (Datei: impressum.php)

3. Es wurde ein favicon erstellt und eingebunden (Datei: wlan.ico)

4. Jede Abkürzung wird bei erstmaliger Nennung auf einer Seite erklärt. Dies geschieht mittels des <abbr>-Elements und des title-Attributs. Diese Änderung entspricht bereits der Priorität 3.

5. Die Websites der HdM (Allgemeine Seiten, sowie Forschung und die einzelnen Fakultäten) wurden auf (x)html-Fehler geprüft (validiert). Zur Validierung wurde der HTML-Validator des W3C verwendet.

Abbildung in dieser Leseprobe nicht enthaltenAbbildung 2: Validierung der HdM-Seiten

Die durchschnittliche Fehlerzahl betrug 32. Damit hat sich die Anzahl im Vergleich zum letzten Test (72 Fehler) mehr als halbiert. Trotzdem besteht der Großteil der Seiten die Prüfung mit dem HTML-Validator nicht. Es bleibt also noch Einiges zu tun.

2.4 Ergebnis

Nach Durchführung aller Änderungen sollte die Website die Konformitätsstufe Double-A erfüllen. Zu verbessern bleibt, die Karten der Gebäude in ein anderes Farbschema zu überführen (s. Kapitel 2.2.1).

Das Tool webxact (siehe Linkliste) validiert eine Website nach den Zugänglichkeitsrichtlinien des W3C. Nach einer Validierung der index.php bot sich dieses Ergebnis:

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 3: Validierung mit webxact

Das Ergebnis zeigt, dass alle Checkpunkte der Priorität 2, bei denen eine automatische Validierung möglich ist, erfüllt wurden. Die Warnungen beziehen sich auf manuelle Checkpunkte. Diese sind z.B. Farbkontrast oder Navigationsstruktur. Diese müssen vom Benutzer selbst abgearbeitet werden, was, wie diese Dokumentation zeigt, geschehen ist. Die Validierung der übrigen Seiten brachte ähnliche Resultate.

2.5 Nützliche Links

- http://webxact.com/

o Service zur Validierung einer Website nach den W3C-Zugänglichkeitsrichtlinien

- http://www.barrierefreies-webdesign.de

o Informationen für Webdesigner

- http://www.einfach-fuer-alle.de/

o Richtlinie BITV und weitere Links

- http://www.validome.org/lang/ge

o Validierungs-Service für HTML / XHTML / WML / XML.

- http://validator.w3.org/

o World Wide Web Consortium (W3C) Markup Validation Service.

- http://www.vischeck.com/

o Vischeck

- http://www.w3.org/TR/WCAG10/

o Web Content Accessibility Guidelines 1.0

- http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html

o Web Content Accessibility Guidelines - Deutsche Übersetzung der WAI

- http://www.freedomsci.de/

o Screenreader Jaws und Screen-Magnifier Magic

- http://www.absv.de/sbs/sbs_intro.html

o Sehbehinderungs-Simulator

- http://www.favicons.de/

o Alles über Favicons: Verwendung, Erstellung, Tipps und Tricks!

Quellen

Caspers, T. (2003): Barrierefrei zum Mitnehmen. Internetquelle: http://www.einfach-fuer-alle.de/artikel/zummitnehmen/. Abgerufen am 04.01.2006.

Chisholm, W.; Vanderheidden, G.; Jacobs, I. (1999): Web Content Accessibility Guidelines 1.0. Internetquelle: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/. Abgerufen am 04.01.2006. Deutsche Übersetzung: http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html. Abgerufen am 04.01.2006.

Ermer, M (2005): Checkliste für barrierefreies Webdesign. Internetquelle: http://www.tu-braunschweig.de/accessibility/checklist. Abgerufen am 04.01.2006.

Kaiser, G. (2004): Print-Stylesheets. Internetquelle: http://www.style-sheets.de/guide/medien/print. Abgerufen am 04.01.2004.

Newhouse, M. (2001): Practical CSS Layout Tips, Tricks, & Techniques. Internet-Quelle: http://alistapart.com/stories/practicalcss/. Abgerufen am 04.01.2006.