Barrierefreies Webdesign heisst, dass wir bei der Gestaltung und Umsetzung die Bed\u00fcrfnisse sehbeeintr\u00e4chtigter und blinder Menschen miteinbeziehen. Wir versuchen durch unsere Gestaltung all die Dinge zu vermeiden, die eine Benutzung der Website f\u00fcr diese Menschen schwieriger gestaltet. Kurz: Die Accessibility einschr\u00e4nkt.<\/p>\n
Wer noch nie ein barrierefreies Design erstellt hat ist vielleicht zun\u00e4chst ratlos und wirft Google an. Dort erf\u00e4hrt man schnell, dass verschiedenste Standards und Guidelines (W3C, WACG, HTML5) einzuhalten sind und das \u201cbetrifft in erster Linie die technische Umsetzung\u201d. Wichtig ist auch, dass vor allem die Erstellung semantisch korrekter Inhalte entscheidend ist.<\/p>\n
schlecht: hier klicken gut: mehr Informationen zum Thema XY<\/p>\n
Wenn es doch Tabellen sein m\u00fcssen, verwenden wir Zeilen- und Spalten\u00fcberschriften, sowie im Idealfall eine Kurzzusammenfassung des Tabelleninhalts.<\/p>\n
Last but not least: Jedes Bild ben\u00f6tigt einen \u201ealt\u201c-Tag, der den Bildinhalt ausf\u00fchrlich und sinnvoll beschreibt.<\/p>\n
Es geht um die Inhalte. Das Design soll nat\u00fcrlich ansprechend wirken, aber \u00fcbertriebene CSS-Animationen, Parallax Scrolling oder \u00e4hnliches erschweren den Zugriff.<\/p>\n
Ja bitte und eigentlich sowieso immer! Das Interaktionsdesign sollte so angedacht sein, dass es auf jedem Endger\u00e4t perfekt aussieht. Auch sehbehinderte Menschen haben coole iPad Minis.<\/p>\n
Wir gestalten klar und \u00fcbersichtlich. Ein klares und leicht verst\u00e4ndliches Layout ist ein Must! Wei\u00dfraum ist unser Freund. Das Men\u00fc sollte m\u00f6glichst wenige Ebenen (maximal 3) und eine klare Navigation aufweisen. Auf keinen Fall sollte es ein ausfahrendes Mouseover Men\u00fc sein! Die Seite sollte zus\u00e4tzlich auch Breadcrumbs verwenden.<\/p>\n
Mein Lieblingsthema. Ich geh\u00f6re zu den Designerinnen, die davon \u00fcberzeugt sind, dass Serifen der besseren Erkennbarkeit des Schriftbilds dienen und vor allem Kinderb\u00fccher in Serifenschriften gesetzt werden sollten. Die sehbehinderten Kollegen, die uns bei der Umsetzung mehrerer Projekte unterst\u00fctzt haben sehen das allerdings anders. Unbedingt serifenlos muss es sein! Denn oft wird m\u00fchsam jeder einzelne Buchstabe f\u00fcr sich identifiziert. Im Idealfall sind Arial oder Verdana zu w\u00e4hlen, da vor allem letztere sich durch gro\u00dfe Punzengr\u00f6\u00dfen und eine gro\u00dfe x-H\u00f6he auszeichnet, was vor allem auf Bildschirmen sehr gut lesbar ist.<\/p>\n
Links d\u00fcrfen nicht nur allein durch eine andere Farbe ausgezeichnet werden. Das hei\u00dft wir k\u00f6nnen zus\u00e4tzlich: unterstreichen, den Schriftschnitt \u00e4ndern (Bold, Kursiv), oder ein Element davorsetzen wie zum Beispiel einen Pfeil. Ach ja: Und nat\u00fcrlich ist die Schriftart nicht zu klein zu w\u00e4hlen, mindestens 14px gro\u00df.<\/p>\n
Es gilt wie \u00fcberall im Webdesign: Kein Blocksatz. Lasst mich das wiederholen: KEIN BLOCKSATZ. Im Idealfall ist das Design durch die Bank linksb\u00fcndig. Auch zentrierter Text ist problematisch, da der Beginn der n\u00e4chsten Zeile aufgest\u00f6bert werden muss. Dieser befindet sich ja nicht immer an der selben Stelle.<\/p>\n
Beim Gestalten d\u00fcrfen die Hilfestellungen nicht vergessen werden. Zentrale Fragestellungen dabei: Wo platzieren wir diese und wie sollen sie aussehen? Welche Hilfestellungen gibt es \u00fcberhaupt?<\/p>\n
 Wie das aussehen kann und funktioniert, k\u00f6nnt ihr euch auf\u00a0www.augengesundheit.at<\/a>\u00a0und\u00a0www.hilfsgemeinschaft.at<\/a>\u00a0ansehen.<\/p>\n Ein schwieriges Thema! Rot und Gr\u00fcn sollten nicht zusammen vorkommen und es mu\u00df immer an ausreichend Kontrast gedacht werden. Um bei diesem heiklen Punkt nicht ins Fettn\u00e4pfchen zu treten, gibt es ein wunderbar einfaches Tool, das uns dabei hilft unsere Farbwahl auf Herz und Nieren zu \u00fcberpr\u00fcfen\u00a0WebAim<\/a>\u00a0Hier k\u00f6nnt ihr konkret sehen ob die Schriftfarbe auf der Hintergrundfarbe funktioniert und wie gro\u00df der Text sein mu\u00df, damit es doch klappt.<\/p>\n6. FARBEN<\/h3>\n