In 5 Schritten zu einer barrierearmen Website
Achtung: Dieser Beitrag ist schon etwas älter.
Es kann sein, dass sein Inhalt nicht mehr aktuell ist, Links veraltet sind oder dass auch niemand mehr auf neue Kommentare antwortet.
Hinweis: Dieser Artikel erscheint im Rahmen der Accessibility Blog Parade 2007. Bitte beachten Sie auch die weiteren Artikel, die im Rahmen dieser Parade entstanden sind.
Viele Artikel über die Umsetzung von Barrierefreiheit auf Websites gehen von dem Idealzustand – eine noch nicht erstellte Website – aus. Doch nur selten steht ein Webdesigner vor diesem Idealzustand. Viel eher ist die Aufgabenstellung, eine bestehende und meistens barrierereiche Website barriereärmer zu gestalten. Zudem ist es nur in den wenigsten Fällen möglich, im Hintergrund an einer neuen Version der Website zu arbeiten, sondern die Änderungen müssen »Live« durchgeführt werden. In diesem Beitrag möchte ich in fünf Schritten zeigen, wie die Realisierung einer barrierearmen Website in der Praxis organisiert und realisiert werden kann.
Schritt 1: Nicht alles auf einmal
Bei einem ersten prüfendem Blick einer Website, zeigen sich in den meisten Fällen relativ schnell die ersten Barrieren und man merkt, wie viel doch eigentlich an dieser Website zu tun ist. Hier ist es wichtig denn Überblick zu behalten und nicht alles auf einmal erledigen zu wollen. Anstatt die Accessibility-Problematik nach dem Motto: »Ein paar Alternativtexte hier und ein paar Label hier« anzugehen, empfiehlt es sich, die Änderungen im Vorfeld genauestens zu planen und zu koordinieren.
Definieren Sie zu Beginn Ihrer Arbeit die Ziele, die Sie mit der Umstrukturierung in Bezug auf die Barrierefreiheit erreichen wollen. Einige mögliche Punkte hierfür könnten sein:
- Alle Bilder und eingebundenen Elemente besitzen einen Alternativ-Text (beispielsweise in Form von
-Attributen)alt
- Der Inhalt ist entscheidend und nicht das Design oder die Fenstergröße des Browsers
- Valider und Standardisierter Quellcode
- Keine Link-Bezeichnungen die sich wiederholen (beispielsweise mehrfache »mehr…«-Links)
- Alle Formularelemente sind mit dem
-Attribut ausgezeichnetlabel
Schritt 2: Entwickeln Sie einen Schritt-für-Schritt-Plan
Nachdem Sie sich nun entschlossen haben was Sie erreichen möchten, ist der nächste Schritt zu entscheiden, wo Sie als erstes mit der Arbeit beginnen und in welcher Reihenfolge Sie die Punkte erledigen möchten. Ein möglicher Plan dafür könnte wie folgt aussehen:
Seitennavigation
Die Navigation ist für die meisten Benutzer der Ausgangspunkt für ihre Recherche auf einer Website. Daher sollte mit der Optimierung auch an dieser Stelle begonnen werden. Zudem sind die Änderungen an der Navigation meistens recht einfach durchzuführen und können zeitgleich sehr effektiv sein. Stellen Sie sich bei der Beurteilung der Navigation die Fragen: Verwendet meine Navigation Grafiken? Bleibt die Navigation auch noch benutzbar, wenn die Anzeige von Grafiken deaktiviert ist? Sind die Menüpunkte auch noch aus weiter Ferne eindeutig erkenn- und unterscheidbar (z.B. für Menschen die schlecht sehen können)?Populäre Seiten
Als nächstes sind die Populären Seiten an der Reihe. Welche das sind, können Sie leicht über ein Statistik-Programm herausfinden. Ziel ist es bei dieser Optimierung, mit wenigen Änderungen an den entscheidenden Stellen das größtmögliche Publikum zu erreichen.Inhaltsseiten
Weit wichtiger als die Startseite, sind die Inhaltsseiten einer Website. Denn die wenigsten Besucher betreten eine Website über die Startseite, sondern landen viel wahrscheinlicher durch Suchmaschinen mitten in Ihrem Angebot. Daher sollte als nächstes die Priorität der Accessibility-Optimierung bei den Inhaltsseiten liegen.Sonstige Seiten
Nachdem wir die Arbeiten an allen vorrangigeren Bereichen abgeschlossen haben, können wir uns nun um die restlichen Seiten im Ihrem Webangebot kümmern. Hier ist es egal in welcher Reihenfolge Sie vorgehen. Sie können dies in thematischen Bereichen gegliedert oder in alphabetischer Reihenfolge tun. Wichtig ist nur, dass Sie dokumentieren, welche Bereiche noch eine Überarbeitung benötigen und welche Sie schon abgearbeitet haben.
Schritt 3: Benutzertests
Sobald Sie mit der Arbeit oder einem Teil fertig sind, führen Sie ausreichend Benutzertests durch. Programme zur Validierung des Quellcodes reichen dabei bei weitem nicht aus. Eine Website die gegen XHTML 1.0 Strict und CSS zu 100 Prozent validiert, muss noch lange keine perfekte Website im Sinne der Barrierefreiheit sein. Daher verzichten Sie nicht auf Tests mit echten Benutzern. Dies können Freunde, Ihre Familie oder aber auch die »normalen« Besucher Ihrer Website sein. Mehr dazu im folgenden Schritt.
Schritt 4: Sagen Sie Ihren Besuchern was Sie tun
Bei der Überarbeitung Ihrer Website haben Sie zwei Möglichkeiten: Sie können die überarbeitete Website mit einmal oder aber in Teilschritten veröffentlichen. Die zweite Möglichkeit hat dabei eindeutig Vorteile: Sie müssen nicht erst eine Mammut-Aufgabe bewältigen, sondern können sie in Teilschritten abarbeiten und erhalten schneller vorzeigbare Ergebnisse und Rückmelden seitens der Besucher. Die Rückmeldungen die Sie dabei erhalten sind sehr wertvoll und können Sie bei der weiteren Arbeit sehr unterstützen, sowie einen Teil der Benutzertests darstellen. Schließlich sind es die Benutzer, die mit Ihrer Website später »arbeiten« müssen. Aus diesem Grund sollten Sie noch vor den geplanten Optimierungsarbeiten die Benutzer Ihrer Website über die geplanten Arbeiten informieren. Zudem bringen Ihre Besucher dadurch sicherlich mehr Verständnis auf, wenn es – bedingt durch die Arbeiten – zu zeitweisen Ausfällen der Website kommt.
Schritt 5: Zeigen Sie Fortschritte
Sofern Sie die Website in einzelnen Teilschritten barrierefreier gestalten, sollten Sie Ihre Besucher darüber aufklären, was Sie schon getan haben und warum. Ihre Besucher werden dadurch erkennen, dass es wirkliche Fortschritte gibt und Ihre Ankündigung von Schritt 4 nicht nur als Lippenbekenntnis aufzufassen ist.
Abonniere den RSS-Feed für weitere Webdesign Tutorials und Artikel.
Artikel bei del.icio.us speichern, Kommentar-Feed, Trackback-URL
Bisher 3 Kommentare
Diddy 01 Nov 07
Hallo Christian,
es wurde hier schon mal irgendwo gesagt: die Schriftgröße hier im Komnmentar-Textfeld ist einfach zu klein (FF 2.0.0.8) -
Dein erster Schritt für den Barrierenabbau. :-)
Nun zu deinem Beitrag:
Ich finde, dass so eine Umsetzung am scharfen System nur bei wenigen großen Projekten mit bleibendem Inhalt nötig ist. Kleinere und mittlere Websites, die sowieso inhaltlich erneuert werden, sollten für die Zeit der Überarbeitung nicht zuletzt aus SEO-Sicht auf eine Hinweisseite mit den wichtigsten Infos und Kontakt usw. beschränkt werden. Alle ehemaligen Dateien/Seiten werden mit mod_rewrite und 301 auf diese eine Seite weiter geleitet. Beispielsweise kann so eine vorherige Struktur mit untauglichen Dateinamen glattgebügelt werden und der Unterseiten-PageRank vererbt sich auf die Startseite. Das habe ich so schon bei etlichen Websites erfolgreich getan.
LG Diddy
Matthias Mauch 04 Nov 07
Der Artikel erscheint mir etwas schwer zu fassen. Gerade eine bestehende Webseite zu überarbeiten kann nicht in kleinen Schritten vollzogen werden ohne das Gesamtbild zu gefährden:
Beispiel:
MobilePhone oder PDA Skip-Links
Screenreader Skip Links
Womit man visuelle und eventuell unsichtbare (Screenreader/Braille Zelle) Skip-Links einsetzen muss, was am Layout doch einige Änderungen erfordert.
Im weiteren, was bringt mir ein Benutzertest, wenn ich nicht vorher mit allen möglichen Browsern und Betriebssystemen getestet habe. Screenreader User nutzen zum Teil noch ältere Browser Versionen, also ein wichtiger Punkt.
Auch zum Punkt “Zeigen Sie Fortschritte” sollte man eigentlich davon ausgehen, das eine überarbeitete Webseite eigentlich selbsterklärend sein sollte und der Benutzer nicht erst darauf hingewiesen werden muss.
Dieses Thema ist so vielfältig, das ich mit 5 Schritten das alles gar nicht abdecken kann.
Christian Beier 20 Nov 07
Da ich leider in der letzten Zeit ziemlich krank war und die restlichen Tage die aufgestaute Arbeit erledigen musste, kann ich leider erst jetzt auf die Kommentare antworten.
@Diddy
Vielen Dank für den Tipp mit der Schriftgröße. Ich habe da zwar schon einmal dran geschraubt gehabt und bei mir sieht auch komischerweise alles in Ordnung aus, aber ich werde es mir trotzdem noch einmal genauer anschauen.
@Matthias
Gerade eine bestehende Webseite zu überarbeiten kann nicht in kleinen Schritten vollzogen werden ohne das Gesamtbild zu gefährden
Da inzwischen wohl die meisten modernen Websites mittels Content Management Systemen verwaltet werden, lassen sich solche “globalen” Änderungen wie Skip-Links mit wenigen Handgriffen auf allen Seiten einbinden.
Anders sieht es aber aus, wenn es um die Anpassung einzelner Inhalts-Seiten geht (worüber mein Beitrag hauptsächlich handelt). Wenn hier erst alle Seiten optimiert werden sollen, vergeht ziemlich viel Zeit. Besser ist es hier in einzelnen (logischen) Teilschritten vorzugehen und so schneller Zwischenergebnisse zu erhalten. Und vielleicht meldet sich ja bei diesem Prozess der eine oder andere Benutzer und gibt noch Tipps für die weitere Verbesserung. Diese Erkenntnisse können dann noch bei der weiteren Optimierung berücksichtigt werden.
Im weiteren, was bringt mir ein Benutzertest, wenn ich nicht vorher mit allen möglichen Browsern und Betriebssystemen getestet habe.
Da hast du Recht Matthias, allerdings bin ich der Meinung, dass dies sowieso gemacht werden muss und daher unabhängig von einer Optimierung der Behindertenfreundlichkeit ist. Daher habe ich in diesem Beitrag diesen Punkt der Browsertests nicht extra mit aufgeführt, da er eigentlich selbstverständlich sein sollte.
Auch zum Punkt “Zeigen Sie Fortschritte” sollte man eigentlich davon ausgehen, das eine überarbeitete Webseite eigentlich selbsterklärend sein sollte und der Benutzer nicht erst darauf hingewiesen werden muss.
Ich muss zugeben, dass dieser Schritt hauptsächlich bei Websites Sinn machen, die auf die Kommunikation mit dem Benutzer ausgelegt sind. Durch die Erklärung wird der Besucher mit in den Prozess eingebunden und er kann vielleicht weitere und interessante Impulse geben. Zudem sind viele Besucher gegenüber Veränderungen eher skeptisch eingestellt und die Skepsis kann auf diesem Weg wieder abgebaut werden, wenn der Nutzer den genauen Grund kennt.
