ToDo's für barrierefreies Webdesign Ansprechendes Design, und behindertengerechtes Design sind nicht vereinbar. Das ist die Meinung der meisten Webdesigner. Doch in dieser Hinsicht irren die meisten. Schon das halten an einige kleine Grundsätze macht ihre Webseite barrierefrei.

1. Kompatibilität

Nicht jeder ihrer Besucher hat den neuesten InternetExplorer, und schon gar nicht jeder surft mit diesem. Nur weil Sie auf ihrem Rechner die anscheinend beste Konfiguration haben, muss ein Besucher nicht die gleiche haben. Das kann zur Folge haben, das ihre Seite wirklich entstellt dasteht.

2. Konformheit

Sie sagen sich, das Sie HTML können? Weit gefehlt. Fast auf jeder Website lassen sich HTML Fehler entdecken. Spüren Sie diese Fehler auf, und vermeiden Sie diese. Ein HTML Dokument, welches nicht dem Standard konform ist, macht den meisten Ausleseprogrammen für Sehbehinderte Probleme.

3. Inhalt & Design

Der Inhalt ihrer Seite sollte konsequent vom Design getrennt sein. Ein Sehbehinderter sollte die Möglichkeit haben, eine Seite auch in Druckansicht zu sehen, in der die unwichtigen Bilder ausgeblendet werden. Allgemein sollten Sie ihren Besuchern die Möglichkeit geben, ihre Seite ohne Werbebanner und andere Grafiken auszudrucken.
Die Verwendung von CSS ist sehr zu empfehlen, da z.B. viele unnötige <font> Tags eingespart werden könnten.

4. Groß und Klein

Anstatt von festen Angaben der Schriftgröße sollten Sie auf Prozentwerte oder em Maße zurückgreifen. Ist die Schriftgröße auf 100% gesetzt, entspricht dies dem Standard, welcher der Besucher eingestellt hat. Ist die Schriftgröße dagegen explizit in Pixel angegeben, hat der Schriftgrad meist keinen Einfluss auf die tatsächliche Größe.

5. Logische Textauszeichnungen

Verwenden Sie logische Textauszeichnungen für den Inhalt. Ein Text der mit dem Element <code> ausgezeichnet ist, besagt, das das ganze irgendein Quellcode z.B. für eine Programmiersprache ist. Der Besucher muss sich folglich nicht mehr wundern, was dort plötzlich für ein Text auftaucht. Zudem sollten Sie auf den <font> Tag komplett verzichten, und nur mit normalen Überschriften (von <h1> - <h6>) verwenden. Der Besucher kann so eine feste Struktur in dem Inhalt anhand der Über-, und Unterüberschriften entdecken. Diese Überschriften können Sie ja wiederum über CSS an ihr Design anpassen.

6. Bilder und Multimedia

Dem Webdesigner stört es wohl kaum, wenn eine Grafik mal kein alt-Attribut hat. Doch von einem solchen alternativen Text sind viele Sehbehinderte abhängig. Was soll er sich denn als Bild vorstellen?! Ein alternativer Text gibt hier Abhilfe. Mit dem HTML 4 Standard können Sie zudem neben dem alt-Attribut das Attribut longdesc verwenden. Mit ihm können Sie eine längere Beschreibung festlegen. Der Alternative Text, und die Beschreibung sollten eindeutig sein.

Basiert ihre Website auf Flash, sollten Sie immer noch eine HTML Version anbieten. Viele Behinderte Surfer haben zum einen gar kein Flash-Plugin, zum anderen können Ausleseprogramme mit Flash gar nichts anfangen.

7. Ein Schema

Ihre Seite sollte ein festes Schema haben. Zu einem Menü sollen nicht auf einmal 10 neue Punkte auftauchen. Dies verwirrt den Besucher um so mehr. Die Navigationselemente, und auch die Links sollten mit title-Attributen ausgestattet sein. Diese entsprechen in etwa den alt-Attributen bei Bildern. Die Linktexte sollten eindeutig sein. Ein Link wie "mehr Infos gibt es hier", wobei "hier" der Link ist, ist wohl kaum informativ.

8. Farbwahl

Die Behindertengerechte Farbwahl ist wohl eines der schwierigsten Aspekte Es ist hierbei wichtig, das Sie immer genug Kontraste setzten, wie Schwarz auf Weiß usw. Zudem sollten Sie beachten das 10% der männlichen Bevölkerung eine Rot-Grün Schwäche haben. Diese Kombinationen sollten Sie auf jeden Fall vermeiden.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: