Barrierefreies Webdesign heisst, dass wir bei der Gestaltung und Umsetzung die Bedürfnisse sehbeeinträchtigter und blinder Menschen miteinbeziehen. Wir versuchen durch unsere Gestaltung all die Dinge zu vermeiden, die eine Benutzung der Website für diese Menschen schwieriger gestaltet. Kurz: Die Accessibility einschränkt.
Wer noch nie ein barrierefreies Design erstellt hat ist vielleicht zunächst ratlos und wirft Google an. Dort erfährt man schnell, dass verschiedenste Standards und Guidelines (W3C, WACG, HTML5) einzuhalten sind und das “betrifft in erster Linie die technische Umsetzung”. Wichtig ist auch, dass vor allem die Erstellung semantisch korrekter Inhalte entscheidend ist.
3 einfache inhaltliche Richtlinien:
1. BESCHREIBENDE LINKS VERWENDEN
schlecht: hier klicken gut: mehr Informationen zum Thema XY
2. KEINE TABELLEN
Wenn es doch Tabellen sein müssen, verwenden wir Zeilen- und Spaltenüberschriften, sowie im Idealfall eine Kurzzusammenfassung des Tabelleninhalts.
3. ALTERNATIVE BILDBESCHREIBUNG
Last but not least: Jedes Bild benötigt einen „alt“-Tag, der den Bildinhalt ausführlich und sinnvoll beschreibt.
Design: Jetzt gehts ans Eingemachte
1. KEIN PIPIFAX
Es geht um die Inhalte. Das Design soll natürlich ansprechend wirken, aber übertriebene CSS-Animationen, Parallax Scrolling oder ähnliches erschweren den Zugriff.
2. RESPONSIVE DESIGN
Ja bitte und eigentlich sowieso immer! Das Interaktionsdesign sollte so angedacht sein, dass es auf jedem Endgerät perfekt aussieht. Auch sehbehinderte Menschen haben coole iPad Minis.
3. KLARE STRUKTUR
Wir gestalten klar und übersichtlich. Ein klares und leicht verständliches Layout ist ein Must! Weißraum ist unser Freund. Das Menü sollte möglichst wenige Ebenen (maximal 3) und eine klare Navigation aufweisen. Auf keinen Fall sollte es ein ausfahrendes Mouseover Menü sein! Die Seite sollte zusätzlich auch Breadcrumbs verwenden.
4. SCHRIFTEN
Mein Lieblingsthema. Ich gehöre zu den Designerinnen, die davon überzeugt sind, dass Serifen der besseren Erkennbarkeit des Schriftbilds dienen und vor allem Kinderbücher in Serifenschriften gesetzt werden sollten. Die sehbehinderten Kollegen, die uns bei der Umsetzung mehrerer Projekte unterstützt haben sehen das allerdings anders. Unbedingt serifenlos muss es sein! Denn oft wird mühsam jeder einzelne Buchstabe für sich identifiziert. Im Idealfall sind Arial oder Verdana zu wählen, da vor allem letztere sich durch große Punzengrößen und eine große x-Höhe auszeichnet, was vor allem auf Bildschirmen sehr gut lesbar ist.
Links dürfen nicht nur allein durch eine andere Farbe ausgezeichnet werden. Das heißt wir können zusätzlich: unterstreichen, den Schriftschnitt ändern (Bold, Kursiv), oder ein Element davorsetzen wie zum Beispiel einen Pfeil. Ach ja: Und natürlich ist die Schriftart nicht zu klein zu wählen, mindestens 14px groß.
Es gilt wie überall im Webdesign: Kein Blocksatz. Lasst mich das wiederholen: KEIN BLOCKSATZ. Im Idealfall ist das Design durch die Bank linksbündig. Auch zentrierter Text ist problematisch, da der Beginn der nächsten Zeile aufgestöbert werden muss. Dieser befindet sich ja nicht immer an der selben Stelle.
5. HILFESTELLUNGEN
Beim Gestalten dürfen die Hilfestellungen nicht vergessen werden. Zentrale Fragestellungen dabei: Wo platzieren wir diese und wie sollen sie aussehen? Welche Hilfestellungen gibt es überhaupt?
- Die Schriftgrößeneinstellungen dürften den meisten bekannt sein.
- Farbkontrasteinstellungen (davon gibt es standardmäßig 6)
- Bedienungsanleitung der Website mit Tastatur
 Wie das aussehen kann und funktioniert, könnt ihr euch auf www.augengesundheit.at und www.hilfsgemeinschaft.at ansehen.
6. FARBEN
Ein schwieriges Thema! Rot und Grün sollten nicht zusammen vorkommen und es muß immer an ausreichend Kontrast gedacht werden. Um bei diesem heiklen Punkt nicht ins Fettnäpfchen zu treten, gibt es ein wunderbar einfaches Tool, das uns dabei hilft unsere Farbwahl auf Herz und Nieren zu überprüfen WebAim Hier könnt ihr konkret sehen ob die Schriftfarbe auf der Hintergrundfarbe funktioniert und wie groß der Text sein muß, damit es doch klappt.
Noch ein Hinweis: Programmierer können die fertige Seite mit WAVE auf Fehler überprüfen.
Wenn ihr selbst noch weitere Tipps und Erfahrungen zum barrierefreien Webdesign habt, lasst es mich bitte in den Kommentaren wissen. Man lernt nie aus 🙂
