ilimitado Web Entwickler Blog

Was muss man denn nun eigentlich so alles beachten um barrierefreies Webdesign zu betreiben? liest man die Regeln für barrierefreies Webdesign (WCAG 2) oder diverse Artikel über barrierefreies Webdesign, liest man stets, welche Barrieren eine Homepage haben kann und welche Zielgruppe diese betreffen und was man alles einhalten soll, damit eine Homepage als barrierefreies Webdesign umgesetzt ist.

Was heisst das nun konkret für den XHTML Markup bzw. die Programmierung einer barrierefreien Homepage?

• 1. Graphiken und Bilder für barrierefreies Webdesign
  • Jedes Bild sollte im möglichst kleinsten Format gespeichert werden. Maximal sollten 60 bis 120 Kilobyte pro Seite einer Homepage Bilder sein.
  • Für Graphiken benutzt man nach XHTML 1.0 das <img> Tag
  • Das alt Attribute muss eine kurze Beschreibung enthalten, was auf dem Bild zu sehen ist
  • Das optionale longdesc Attribut enthält eine lange und ausführliche Beschreibung des Bildes oder einen Link zu einer Datei mit der Beschreibung
  • Das title Attribut enthält eine ganz kurze Informationen zur Funktion des Bildes, einen sprechenden Titel eben
  • Die Attribute width und height enthalten die Maße des Bildes in Pixel
  • Beispiel: <img src=”bild-barrierefreies-webdesign.png” alt=”Blauer Schriftzug barrierefreies Webdesign” title=”Werbebanner barrierefreies Webdesign” widht=”250″ height=”50″ />
• 2. Links für barrierefreies Webdesign
  • Links auf Phrasen wie “hier klicken” oder “hier” oder “weiteres” vermeiden
  • Der Text, um den ein Link gelegt ist sollte zudem noch aussagekräftig sein
  • Das title Attribut beschreibt kurz was die gelinkte Seite bietet
  • Links sollten sich einheitlich vom Rest der Seite farblich oder durch Textformatierungen abheben
  • Es wir zusätzlich dringend empfohlen Links zu unterstreichen
  • Links besitzen kein _target Attribut, ein Besucher der Homepage will selber entscheiden (klick durch mittlere Maustaste, Mausrad) ob sich ein neues Fenster öffnet oder nicht
  • Beispiel: Im Internet findet man viele <a href=”barrierefreies-webdesign.html” title=”Informatione über barrierefreies Webdesign”>barrierefreie Homepages</a>
  • Mit dem link Tag im Header einer XHTML Datei, kann man außer einer CSS Datei auch hilfreiche Links angeben. Diese werden zwar von Browserm wie dem Firefox nicht dargestellt, von Screenreadern oder Textbrowsern (Lynx) verarbeitet. Diese zusätzliche Navigationshilfen können auf home, prev oder next zeigen, also auf die Startseite, die nächste und die vorherige Seite einer Homepage, Syntax: <link rel=”prev” src=”webdesign-tübingen.php”>
• 3. Navigationsmenüs für barrierefreies Webdesign
  • Dürfen Bilder enthalten
  • Müssen gut gegliedert und Aussagekräftig sein
  • Werden am besten in Listen gehalten
  • Können durch display:block und float:left oder display:inline und list-style-type:none beliebig positioniert und formatiert werden
  • Umfangreiche Homepages sollten zudem eine eigene Seite mit einer Sitemap enthalten, welche wiederum in einer Liste darstellt, welche Seiten alle in welcher Tiefe verfügbar sind
  • Subnavigationen sollten nah der Hauptavigation platziert sein, getreu dem Prinzip der kurzen Wege
  • Ebenfalls extrem Hilfreich ist eine Breadcrumb, welche Anzeigt wo ich derzeit auf der Homepage mich befinde, vorallem auf Homepages mit vielen Unterpunkten und Themenbereichen
  • Aktive Links sollten im Navigationsmenü hervorgehoben werden, damit man sieht wo man sich gerade befindet.
  • Hover Effekte etc. unbedingt mit CSS lösen, die Navigation muss ohne Javascript funktionieren
• 4. Access Keys für barrierefreies Webdesign
  • Man kann durch das Attribut accesskey einem Link einen Tastatur Short Cut zuweisen
  • Das ist aber nur bedingt sinnvoll, da 20 Shortcuts pro Seite sich sowieso niemand merken kann
  • Es gibt eine Art offenen Standard, wo man sich einfach bediehnen sollte und die relevanten Access Keys definieren – mehr nicht
• 5. Tab Index für barrierefreies Webdesign
  • durch das Attribut tabindex in Links kann man die Reihenfolge, in der Links oder auch Form Elemente, durch die Tabulator
    Taste angesprochen werden beeinflussen
  • Elemente ohne Tabindex werden einfach in der Reihenfolge wie sie im Quelltext stehen angesprochen
  • Oftmals macht es Sinn, diese “natürlich” Reihenfolge einfach beizubehalten
  • Beim Einsatz des Tabindexes sollte darauf geachtet werden, nicht Verwirrung, sondern wenn dann eine Navigationserleichterung zu schaffen
• 6. Hidden Tags und Skiplinks für barrierefreies Webdesign
  • Durch Überschriften mit dem CSS Attribut display:none kann man Struktur in eine Homepage bringen, ohne störende Überschriften wie “Navigationsbereich” oder “Header” etc. zu erzeugen
  • Es gibt auch die alternative Möglichkeit per position:absolute mit left:-1000 und overflow:hidden die Element einfach ausserhalb des Browser zu positionieren, wo sie auch nicht mehr sichtbar sind
  • Diese Elemente werden nun nur noch von Vorlesebrowsern erfasst.
  • Je nach Zielgruppe macht es aber auch Sinn, diese Elemente sichtbar zu gestalten und ins Design der Seite aufzunehmen
  • Sogenannte Skiplinks (interne Links zu Bereichen, meistens “divs” der Homepage) Helfen vorallem Blinden und Surfer mit Textbrowsern wie Lynx beim Navigieren, auch sie können durch hidden Tags für sonstige Besucher der Seite versteckt werden
  • Was eine Barrierefreie Homeapage auf jeden Fall bieten sollte, sind zwei Sichtbare Links ganz oben auf jeder Homepage, einen direkt zum Inhalt, einen direkt zum Navigationsmenü, sodass Besucher der Homepage diese per Tastatur leicht ansteuern können
• 7. Überschriften für barrierefreies Webdesign
  • Vorneweg, in den Header einer XHTML Datei gehört ein aussagekräftiges title Tag mit einem individuellen Titel für jede Seite der Homepage
  • Wichtig ist, dass jeder Bereich (div) einer Homepage eine Überschrift erhält, welche diesen Bereich beschreibt, bzw. kennzeichnet
  • Auch sollte die Reihenfolge der Überschriften Tags eingehalten werden, nach H1 kommt H2 und so weiter.
  • Jede Homepage enthält genau eine H1, diese steht an oberster Stelle und trägt den jeweiligen Titel der aktuellen Seite der Homepage, sie muss aber nicht die optisch Größte sein, sondern kann auch ganz klein oder in einer Breadcrumb realisiert werden.
  • Überschriften H1 bis H3 können für Strukturzwecke als Hidden Tags umgesetzt werden
  • Überschriften können auch durch Graphiken ersetzt werden, dazu setzt man innerhalb der H1-6 Tags ein img Tag.
    Allerdings sollte man dann noch treffendere alt Tags vergeben, da dieser Text ja die alternative Überschrift darstellt.
• 8. Schriftgröße und Styleswitch für barrierefreies Webdesign
  • Homepages mit vielen Farben oder wenig Kontrast, sollten alternativ ein Schwarz/Weiss design anbieten
  • Basierend auf einer Standardgröße des body von z.B. 10px (62,5%) sollte eine Homepage per CSS so designed werden, dass sie skalierbar ist beim Vergrößern der Schriftart.
  • Alles, was skalieren soll wird in em (bei 62,5% sind 1em gleich 10px)angegeben, was fix bleiben soll als px.
  • Dann kann man ein kleine Skript bauen, welches die Schriftgröße auf z.B. auf 100% setzt und so die Seite perfekt skalieren wird.
  • Der Firefox Browser z.B. kann auch ohne so ein Script mit den Tasten strg + + und strg + - eine Homepage skalieren
• 9. Sprache für barrierefreies Webdesign
  • In jedem Fall muss die Sprache im Quelltext angegeben werden
  • Das attribut lang nimmt Länderkurzel wie de oder en entgegen
  • Das sollte einemal im html Tag global bestimmt werden und in Tags, welche Inhalt anderer Sprache enthalten dann individuell gesetzt werden
  • Es ist eine der Zielgruppe angepasste Sprache und Sprachstil zu verwenden, eine Homepage mit technischem Know How sollte auf Fachsprache setzen, eine allgemein gehaltene Seite eher auf leicht Verständliches mit vielen Erklärungen.
• 10. Textauszeichnungen für barrierefreies Webdesign
  • Abkürzungen, welche man nicht liest wie sie dastehen, z.B. XML spricht man “ix em ell” oder z.B. für “zum Beispiel” sollten in das Tag abbr gepackt werden. Mit dem attribut title wird dann die ausgeschrieben Version präsentiert Beispiel: <abbr title=”barrierefreies Webdesign”>b.W.</abbr>
  • Acronyme sind wie Abkürzungen, haben jedoch noch einen erklärenden Charackter. z.B. <acronym title=”eXtensible Markup Language – Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien”>XML</acronym>
  • Acronyme sind den sematisch eng verwandten Abkürzungen vorzuziehen, da der Internet Explorer das abbr Tag nicht kennt
  • Quellcode kann durch das Tag code gekennzeichnet werden, dies ist standardmäßig ein inline Element
  • Zitate werden durch das block element blockquote dargestellt. für kleinere Zitete gibt es das inline element q welches als attribut cite den Autor oder einen Quellink aufnehmen kann.
    Das blockquote element kennt hingegen ein Tag cite mit selber Semantik
  • Mit dem Tag kbd kann man Tastenanschläge auszeichnen. Beispiel: drücken sie <kbd>strg</kbd> + <kbd>D</kbd>
• 11. Tabellen für barrierefreies Webdesign
  • Man darf und soll Tabellen natürlich auch für barrierefreies Webdesign benutzen, allerdings nicht zu Struckturzwecken, dafür gibt es divs
    sondern eben da, wo die Semantik eine Tabelle ergibt.
  • Jede Tabelle sollte ein Tag caption enthalten, welches die Überschrift der Tabelle darstellt
    und ein Attribut summary mit einer Beschreibung des Inhalts.
  • Der Tabellen Kopf, also die Überschriften der Spalten stehen in einem thead Bereich und wird durch th, nicht durch td repräsentiert
  • Ein tfoot Bereich enthält zum Beispiel Zellem mit Zusammenfassungen der Spalten…
  • im tbody Tag stehen die Tabellen Inhalte
  • mit dem Attribut scope beschreibt man den Bezug eines th Tags, nämlich ob es eine Überschrift einer Spalte (scope=”col”) eine Zeile (row) oder evtl einer gruppierten Zelle (colgroup, rowgroup) handelt
  • komlexe Tabellen enthalten in jedem th Tag ein id Attrinut und in den td Tags ein headers Attribute mit einer Anreihung (Leerzeichen getrennt) von zugeordneten th Tags
  • Tabbelen barrierefrei bzw. einfach mit korrekter Semantik zu gestallten ist zwar aufwendig und etwas stressig, mit einem einmal angelegten Template, vorallem auch mit zugehöriger CSS Datei, ist es aber allemale die Mühe Wert.
• 12. Formulare für barrierefreies Webdesign
  • Formulare sind einfach zu halten, sind viele Informationen nötig, dann sind diese auf jeden Fall in fieldset Gruppen zu ordnen
  • in jedem fieldset ist ein legend Tag anzugeben als Überschrift
  • Besser noch wäre in mehrern Schritten, auf mehreren Seiten die Daten abzufragen
  • jedem input oder select Tag ist eine id und ein name Attribut zuzuweisen, damit ein entsprechendes label Tag mit for Attribut dieses Element bechreiben kann
  • Für noch mehr Verständnis kann jedem input Tag ein Attribut title zugewiesen werden, mit einer genauren Beschreibung dieses Eingabfeldes
  • noch besser sind kleine Fragezeichen, Symbole oder ähnliches, welche man anklicken, oder per CSS gesteuertem Mausover aktivieren kann, mit einer jeweiligen Hilfestellung zum Element (besser, da hier CSS Formatierungen gemacht werden können im Gegensatz zum nur durch den Browser angezeigten title Attribut)
  • Auch wenn es der Internet Explorer nicht kann, sollte mit dem CSS Selector :focus gearbeitet werden, um Formular Felder, in welche man geklickt hat optisch hervorzuheben
  • Ganz wichtig sind auch aussagekräftige Fehlermeldungen. Wenn ein Besucher der Homepage falsche Eingaben macht. Perfekt ist, wenn Felder mit Fehleingaben im Formaular markiert werden und darunter eine Erklärung zum Fehler angezeigt wird.
  • Die Formular Verarbeitung darf ruhig, und sollte auch auf jeden Fall, per AJAX geschehen, natürlich muss das Formular aber auch ohne JavaScript funktionieren
  • Ein Formular sollte gegen Spambots und so natürlich gegen Spam über einen Spamfilter geschützt werden. Ein sogennantes Captcha ist allerdings nicht die beste Variante. Zunächst ist es dank OCR Software auch nicht 100% sicher, zudem braucht selbst ein Mensch mit scharfen Augen meist 2 oder 3 Versuche diese Captachs zu lesen. Barrierefreie Spamfilter bauen mehr auf das Lösen von Aufgaben, wie der ilimitado barrierefreie Spamfilter. Er stellt einfache Rechenaufgaben, die als Text gestellt und von jedem Menschen lösbar sind.
• 13. JavaScript, Flash, Filme etc. für barrierefreies Webdesign
  • Flash lässt sich nicht barrierefrei gestalten. Alle Inhalte, welche in Flash präsentiert werden sind weder dynamisch anpassbar, noch sind sie als reine Textversion verfügbar, nicht einmal ein Suchmaschinen Robot kann eine Flash Homeapage crawlen
  • Wenn mann Flash braucht, kann man also keine barrierefreie Homepage anbieten. Es sei denn, man präsentiert den Flash Inhalt alternativ in barrierefreiem XHTML (nicht als Plain Text Datei)
  • Filme können von Blinden selbstverständlich nicht gesehen werden, von Tauben Menschen nicht gehört werden etc… es ist im Einzelfall zu entscheiden, ob es Sinn macht Inhalte in alternativen Formen anzubieten. Vorallem Intervies kann man leicht auch in XHTML präsentieren und so mehr Leuten noch zugänglich machen
  • JavaScript ist prinzipiell mal ein Barrierefreiheit Killer… durch AJAX Technologieen kann eine Homepage Clientseitig nach dem Laden sogar ohne zutun des Surfers verändert werden. Dies bedeutet nicht, dass man auf AJAX und JavaScript verzichten muss, denn für einen Großteil der Surfer und Homepage Besucher stellt AJAX und JavaScript ja einen hohen Komfort bereit. Man muss nur sicherstellen, dass die Homepage eben auch ohne JavaScript funktioniert und leicht bediehnbar bleibt. Es ist aber auch klar, dass Web Applikationen wie Google Maps nicht ohne JavaScript funktionieren und das auch nicht müssen, da hier das Zielpuplikum deffinitiv JavaScript zur Verfügung hat.
• 14. CSS und XHTML für barrierefreies Webdesign
  • Es sollte eingltich klar sein, dass sämtliche Formatierungen des Inhalts in eine externe CSS Datei gehören und die XHTML Datei nur den semantischen Markup in XHTML enthält. Dazu gehört auch ein korrekter DOCTYPE
  • Genauso verhält es sich mit JavaScript. Alle Scripts sind auszulagern und es sind keine Handler (onklick oder Ähnliches) im Markup zu verwenden, sondern zum Beispiel durch Behaviour auszulagern
  • eine Homepage ist nich barrierefrei, wenn sie Fehler im Markup enthält. Jede einzelen Seite einer Homepage muss W3C XHTML und W3C CSS valid sein
  • CSS Angaben und XHTML Markup sind so zu gestalten, dass in allen Browsern das gleiche Erscheinungsbild vorliegt, im größten Notfall muss durch eine Browserweiche für einzelen Browser spezielle CSS Angaben zur Korrektur gemacht werden. Das ist aber selten notwendig und trifft meistens nur den Internet Explorer, welcher in Version 6 und Abwärts viele Bugs und abweichende Standards hat. Mehr Informationen, wie CSS in allen Browsern gleich gestaltet werden kann gibts hier.
• 15. Was sonst noch zu barrierefreies Webdesign zählt
  • Die Homepage sollte eine klare übersichtliche Aufteilung haben und auf keinen Fall aus diesem Design herrausspringen
  • Dank CSS können Navigation und Inhalt im Quellcode ganz oben stehen und Sidebars, Footer, Werbung etc. darunter, so werden in Screenreadern die wichtigsten und relevanten Inhalte zuerst vorgelesen und nicht erst eher uninteressante Zusatzinformationen.
  • Listen oder divs können und sollten ein title Attribut mit einer kleinen Funktionsbeschreibung enthalten
  • Jede Homepage ist ein individuelles Produkt und muss daher stets individuell betrachtet werden. Manchmal müssen Regeln angepasst oder gar “gebrochen” werden da so mehr Barrieren verhindert als erzeugt werden.
  • Zu guter letzt gehört zur Barrierefreiheit auch das Verständniss, dass barrierefreies Webdesign bei der Entwicklung von XHTML und anderen Techniken wie AJAX überhaupt nicht vorgesehen war, sondern ein sehr junges Produkt ist, ja viel mehr noch sogar ein neues Verständnis und eine neue Auffassung des Internets an sich. Barrierefreies Webdesign macht vieles Möglich, alle diese Tipps und Regeln erleichtern behinderten oder eingeschränkten Menschen des Surfen ungemein. Die Zukunft wird mit Techniken wie dem semantischen Web (manchmal auch Web3.0 genannt) das alles noch auf eine ganz andere Ebende stellen.
  • Barrierefreies Webdesign ist also nicht die perfekte Lösung, aber ein sehr gute Übergangstechnologie hin zu semantischem Web

So, ich hoffe diese Checkliste für barrierefreies Webdesign hilft dabei barrierefreie Homepages zu gestalten und vor allem Kleinigkeiten nicht zu vergessen. Falls hier noch was wichtiges fehlt freu ich mich auf Rückmeldungen, Tipps und Kommentare.

Weiterführende Links über barrierefreies Webdesign:
Web Accessibility Initiative des W3C
Bachelor-Thesis “Barrierefreie Gestaltung von Internetseiten”
Liste von Vorlesebrowsern
Webportal mit Schwerpunkt barrierefreies Webdesign
Brandneu: Lesezeichen der ilimitado OHG bei Mr Wong zum Tag barrierefreies

Weiterführende Literatur über barrierefreies Webdesign: