Online-Marketing-Tutorial Thema barrierefreies Webdesign

Warum eigentlich barrierefreies Webdesign und was hat das mit Marketing zu tun?
So ca. 19% der Bevölkerung sind in irgendeiner Form behindert. Da ich mich ja in diesem Tutorial hier kurz fassen will, reicht das an sich bereits als Antwort, denn Sie würden all diese 19% von Ihren Internetseiten automatisch aussperren, wenn Sie Ihre Webseiten nicht wenigstens weitgehend barrierefrei gestalten.

Durch barrierefreies Webdesign können Sie mit Ihrer Webpräsenz also auch mit der Gruppe der in irgendeiner Form beeinträchtigten Besucher kommunizieren. Darüberhinaus ergeben sich auch Vorteile für Sie bei den Serps (Ergebnisseite) der Suchmaschinen, da barrierefreie HTML-Dokumente schlankeren Code enthalten.

Eine ausführliche Darstellung der Anforderungen an barrierefreies Webdesign finden Sie auf der Seite der Aktion Mensch unter einfach-fuer-alle.de

 

Eine kurze Zusammenfassung der wesentlichen Punkte:

• Sauberen d.h. validen HTML-Code verwenden
• Tabellenloses Layout
• Schriften skalierbar (mit em oder %)
• Farben und Kontraste
• Formulare
• Navigation Linktexte Tilte-Attribut keine Redundanz
• Seiten auch nutzbar bei deaktivierten Stylesheets
• Blinkenden Inhalt oder Graphiken vermeiden
• Alternativen zu Flash und Co. anbieten oder ganz darauf verzichten
• Auf Frames verzichten

 

⇑Tabellen:
Zahlenmässig am stärksten vertreten ist sicherlich die Gruppe der sehbehinderten Menschen, die bei der Nutzung des Internets auf Hilfsmittel wie Screenreader angewiesen sind, die Ihnen die Webseiten vorlesen bzw. in Braille-Schrift ausgeben.

Diese Software kommt in der Regel mit Tabellen-Layout nicht zurecht, dem sehbehinderten User wird der Logische Aufbau des Inhalts einer Webseite nicht so dargestellt, wie er sich dem Sehenden auf dem Bildschirm präsentiert. Das liegt an dem Aufbau der kompliziert ineinander verschachtelten Tabellen, denn mit einfachen Tabellen kommen neuere Versionen der Software sehr wohl klar.

Zum tabellenlosen Layout wurde bereits im Bereich Webdesign einiges gesagt, auch wird dort ein kleines Beispiel zum Herunterladen gegeben.

Tabellen sollten nur dann zur Auszeichnung genutzt werden, wenn sie der tabellarischen Darstellung von zusammen gehörenden Inhalten dienen und mit entsprechenden Attributen versehen wurden. Ein kleines Beispiel:

⇑Schriften:
Schriften sind dann skalierbar, wenn sich die grösse durch den Besucher über seine Browsereinstellungen ändern lässt.
(Menü --> Ansicht --> Schriftgrad)
Möglich wird das, indem man in den CSS-Definitionen die Schriftgrösse statt in pixel in em oder % angibt:
Die relative Angabe der Schriftgrösse bezieht sich dabei auf das Elternelement, d.h. wenn man bei diesem Beispiel bei weiteren Bereichen innerhalb des Bodys 0.9em angibt, verkleinert sich die Schrift entsprechend.

⇑Farben und Kontraste:
Einige der Besucher Ihrer Webseite haben eine Farbsehschwäche, vor allem im Bereich rot-grün, aber auch blau-gelb oder blau-rot.
Die Informationen auf Ihrer Webseite einschliesslich der Graphiken sollten so gehalten sein (kontrastreich), dass sie auch mit einem Schwarz-Weiss-Monitor wahrnehmbar sind.

⇑Formulare:
Formulare sind keine tabellarischen Daten, d.h. die formatierung von Formularen sollte nicht mittels Tabellen, sondern ausschließlich mittels CSS erfolgen! Ein Beispiel-Formular finden Sie hier:
Beispiel-Formular inklusive Zweispalten-Layout.

⇑Navigation:
Wieso wird die Hauptnavigation eigentlich immer noch in Tabellen gepackt? Das geht viel einfacher und mit viel weniger Code mit <ul><li></li></ul>:

Ein Linkziel sollte immer ein title-Attribut haben, im Text sollte aber nicht einfach der Linktext wiederholt werden, da das eine Redundanz darstellt.
Bei externen Verweisen (Verweise auf Seiten auf einer anderen Domain) sollte man immer darauf hinweisen, dass es sich um einen externen Link handelt:

Wird fortgesetzt ...

Buchempfehlungen:

Einführung in XHTML, CSS und Webdesign: Standardkonforme, moderne und barrierefreie Websites erstellen
von Michael Jendryschik

Detailbeschreibung lesen

 

Modernes Webdesign: Gestaltungsprinzipien, Webstandards, Praxis
von Manuela Hoffmann

Detailbeschreibung lesen

 

weiter zum Thema Usability