Zugänglichkeitsrichtlinien für ein gelungenes Seitenkonzept
Die Umsetzung eines Webseitenlayouts vom ersten Entwurf auf dem Papier bis hin zur Fertigstellung auf dem Screen in HTML und CSS lässt gerade bei Anfängern Gedanken an die Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) vermissen. Oft werden auch elementare Dinge des Webauthorings außer Acht gelassen. Ein Webautor neigt sehr schnell dazu, von seiner eigenen Testumgebung und seinen eigenen Surfgewohnheiten auszugehen und von seinen eigenen Möglichkeiten und seiner eigenen technischen Ausstattung auf die der potentiellen Besucher seiner Website zu schließen. Jedoch gibt es viele Möglichkeiten, in welcher Weise ein User eingeschränkt sein könnte:
- Er ist sehbehindert und daher nur dann in der Lage, Text auf dem Bildschirm wahrzunehmen, wenn dieser groß genug ist.
- Er ist nicht in der Lage, Farben voneinander zu unterscheiden.
- Er ist womöglich nicht in der Lage, von einer Maus Gebrauch zu machen.
- Er verfügt nicht über einen Grafikbrowser, sondern ist auf einen Textbrowser wie z. B. Lynx angewiesen.
- Der User nutzt einen anderen Browser, einen alten Browser, oder ein völlig anderes Betriebssystem. Womöglich surft er über eine Konsole oder über das Fernsehgerät.
- Er hat womöglich nur einen sehr kleinen Bildschirm mit sehr niedriger Auflösung.
- Die Internetverbindung ist sehr langsam.
- Die Umgebung, in der der User sich befindet, lässt eine ruhige Aufnahme der gebotenen Information nicht ohne Probleme zu (Straßenbahn).
Die Frage ist nun: Was muss ich bei der Erstellung meines Seitenlayouts und bei dessen Umsetzung beachten, um all diesen Bedürfnissen am besten zu entsprechen?
Das W3C (World Wide Web Consortium) hat am 5. Mai 1999 seine Empfehlung "Web Content
Accessibility Guidelines 1.0" veröffentlicht, die als "Zugänglichkeitsrichtlinien
für Web-Inhalte 1.0" übersetzt und unter:
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
veröffentlicht worden sind. Diese Richtlinien erläutern, wie Web-Inhalte zugänglich
gemacht werden können. Diese FAQ ist eine erläuternde Zusammenfassung dieses
Artikels, ergänzt durch einige weitere Links.
Richtlinien:
-
Trenne Struktur ("Markup" -> HTML) und Layout ("Styling" -> CSS).
Im Laufe der Jahre wurde HTML immer komplexer und durch proprietäre Elemente und Attribute durchsetzt, so dass eine einwandfreie Zugänglichkeit von Webseiten nicht mehr auf jedem System gegeben war. Die Einführung von CSS als Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente und die Reduzierung von (X)HTML auf das reine Markup soll den problemlosen Informationsaustausch wieder gewährleisten. Zudem vereinfacht eine Trennung von Markup und Layout die Webseitenerstellung erheblich. -
Schreibe korrektes HTML und korrektes Markup.
HTML-Elemente sollten ihrer logischen Bedeutung entsprechend eingesetzt werden. Ein großer Fehler ist es, Listen nicht mit Elemente wie 'ul' und 'li' oder Tabellen nicht als Konstruktionen mit 'table', 'tr' und 'td' zu gestalten, sondern normale Absätze oder preformatierten Text zu verwenden. Nutze logische Textauszeichnung ihrem logischen Sinn entsprechend und verzichte auf Elemente wie 'code' oder 'cite', wenn es dir nur auf die optische Darstellung des Textes ankommt. Versuche eine korrekte Dokumentenstruktur mit Elementen wie überschriften ('h1', 'h2' usw.) hierarchisch aufzubauen. So ist es gewährleistet, dass Browser, die kein CSS darstellen können oder rein textbasierend sind, trotzdem die logischen Strukturen der Webseite erkennen und verdeutlichen können. -
Halte dich an die W3C-Spezifikationen.
Ein Kriterium für die browserunabhängige Darstellung deiner Webseite ist auch eine Validierung des HTML-Quellcodes und des CSS-Stylesheets. Mehr dazu unter Sinn von validem Code .
Welche Validatoren du nutzen kannst, erfährst du unter Validatoren-Liste. -
Kennzeichne Links ganz eindeutig als solche und mache klar, wo der Navigationsbereich deiner Webseite ist und wie die Navigation funktioniert. Belasse die Navigation immer an der gleichen Stelle und ermögliche es dem Benutzer, durch einen einzigen Klick immer auf die Hauptseite zurückzukehren. Informationen über die Gestaltung von Links findet ihr unter http://www.mywebresource.de/html/guides/hlinks.htm.
Langsam sollte man auch dem 'link'-Element in HTML ein wenig mehr Beachtung schenken. Auf der Seite http://gutfeldt.ch/matthias/translation/LINK/
findet ihr eine übersetzung von Matthias Gutfeld eines sehr guten Artikel von Sander Tekelenburg. zum Thema. -
Sorge dafür, dass Farben eine Seite strukturieren und ihre Benutzbarkeit unterstützen.
Nach welchen Gesichtspunkten Farben auf der Webseite ausgewählt werden, habe ich in http://www.mywebresource.de/html/guides/webfarben.html versucht, deutlich zu machen.
Bedenke dabei auch, dass die Seite auch dann funktionieren soll, wenn der User die Farben nicht wahrnehmen kann. Besonders wenn Vorder- und Hintergrundfarbe sich im Farbton zu sehr ähneln, kann es Menschen mit Störungen des Farbensehens unmöglich sein, das entsprechende Element noch wahrzunehmen. Interessant in diesem Zusammenhang sind die sogenannten Ishihara-Tafeln: http://www.roost-optik.ch/farben-t.htm. Bedenke auch noch, dass es noch Schwarz-Weiß-Monitore gibt, die nur Kontraste und Helligkeiten, nicht aber Farben unterscheiden können. -
Halte die Webseite frei skalierbar und verzichte auf eine feste Vorgabe eines Seitenlayouts in Pixeln oder dergleichen absoluter Angaben.
Je nach Bildschirmauflösung oder Sehvermögen des Users kann eine Seite durch absolute Angaben, z. B. bei Schriftgrößendeklarationen, unbrauchbar werden. In jedem Browser kann man die Schriftgröße frei skalieren. Im Internet Explorer funktioniert dies zum Beispiel unter 'Ansicht -> Schriftgrad'. Werden feste Schriftgrößenangaben (wie z. B. 12px) festgelegt, ist es dem User nicht mehr möglich zu entscheiden, in welchen Größenrelationen er sich die Webseite ansehen möchte. Gerade sehbehinderten Menschen könnte so die Seite völlig unzugänglich gemacht werden.
Auch für das Seitenlayout sollten feste Größenangaben vermieden werden, da es sonst je nach Fenstergröße und Auflösung zu Darstellungsproblemen kommen kann.
Welche Einheiten für Größenangeben es gibt, hat Björn Höhrmann in dem Artikel richtige Schriftgröße erläutert. -
Verzichte auf spezielle Techniken wie Javascript oder Flash, wenn diese die Zugänglichkeit der Seite erschweren, wie z. B. bei der Seitennavigation.
-
Lasse keine Pop-Ups erscheinen und wechsele das aktuelle Fenster (z. B. durch Attribute wie 'target="_blank"') nicht, ohne den Benutzer darüber zu informieren.
-
Sorge dafür, dass bewegte, scrollende oder andere sich automatisch ändernde Objekte oder Seiten angehalten oder gestoppt werden können. Dies gilt auch für Töne auf der Seite, wie zum Beispiel Hintergrundmusik, da diese den Besucher belästigen könnten.
-
Verzichte auf Frames. Michael Nahrath hat dies auf http://www.subotnik.net/html/frames.html näher erläutert.
-
Erstelle die Dokumente so, dass sie nicht von einem bestimmten Browser, einem bestimmten Betriebssystem (Windows) oder einer bestimmen technischen Ausstattung (Javascript, Flash, DSL-Flatrate) abhängig sind.
-
überprüfe deine Seite daher immer in mehren Browsern. Wer modernes HTML schreibt, kommt nicht an intensiven Tests auf unterschiedlichen Systemen vorbei. Zur Zeit sollte man seine Seiten immer in den folgenden Browsern auf Zugänglichkeit und Benutzbarkeit testen: IE4, IE5.5, NN4, NN6 (bzw. Mozilla 0.9), Opera5.x, Lynx, und dabei am besten auf unterschiedlichen Betriebssystemen wie Windows NT, Windows 98 oder MacOS. Einen Lynx-Viewer findet ihr unter http://www.delorie.com/web/lynxview.html.
Gerade der NN4 macht viele Probleme, wenn es um moderne CSS-Techniken geht. Eine Entscheidungshilfe, inwiefern auf den NN4 noch Rücksicht genommen werden sollte, findet ihr unter http://www.mywebresource.de/html/guides/nn4.htm. Informationen darüber, inwieweit Browser CSS unterstützen erhaltet ihr unter http://css.nu/pointers/bugs.html und http://www.webreview.com/style/css1/charts/mastergrid.shtml. -
Stelle Text bereit oder nutze Text-äquivalente. "Text-äquivalente" sind Bestandteile von HTML wie z. B. das 'alt'-Attribut für Bilder. Text-äquivalente werden angezeigt, wenn der User-Agent (der Browser) das Nicht-Text-Element (wie z. B. Flash-Animationen, Bilder oder Audiodateien) nicht darstellen kann. Wichtig ist diese Alternative unter anderem für sehbehinderte Menschen, deren Browser eine Sprachausgabe hat, die dann auf Text-äquivalente zurückgreift. Vergleiche dazu:
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#gl-provide-equivalents
Weitere Literaturtipps:
-
Jakob Nielsens Usability-Website:
http://www.useit.com/ -
Webdesign - Kunst und der Zen von Websites:
http://www.ingroup.de/webzen.html -
Zugänglichkeitsmythen:
http://www.andreas-hollmann.de/netztips/zugaenglichkeit.html -
"Diese Seite ist optimiert für..." - Mit Kunden diskutieren:
http://www.andreas-hollmann.de/netztips/seite_optimiert_fuer.html -
Informationen zum Thema Softwareergonomie:
http://www.benutzerfreundlichkeit.de/ -
Einige Links zur Arbeit mit Cascading Style Sheets:
http://www.bjoernsworld.de/css/bookmarks.html
