Lektion 2 „Webdesign für Menschen mit Farbfehlwahrnehmungen“
Klicken Sie bitte rechts oben auf dem Bildschirm das Icon der Barrierefreiheit, um die einzelnen Lektionen auch tatsächlich barrierefrei wahrnehmen zu können.
HTML5 Audio-Player mit Quellen in mehreren Formaten
Webdesign für Menschen mit Farbfehlwahrnehmungen
Um ein Webdesign für Sehbehinderte mit einer Farbfehlwahrnehmung zu entwickeln, empfiehlt es sich folgende Farbwerte (RGB-Werte) zu nutzen:
Schwarz: 0, 0, 0
Orange: 230,159, 0
Himmelblau: 86, 180, 233
Blaugrün: 0,158,115
Gelb: 240,228,66
Blau: 0, 114, 178
Vermillion: 213, 94, 0
Rotpurpur: 204, 121, 167
Siehe dazu auch folgenden Hyperlink: Https://jifly.uni-koeln.de/color/#Palette
Selbstlernvideo
Bitte sehen Sie sich diesen Video an, zwecks besseren Verständnis der Thematik!
Barrierefreie Bilder oder Grafiken
Barrierefreie Bilder oder Grafiken könnten beispielsweise in Schwarz/Weiß gehalten werden plus ein oder zwei Schmuckfarben vergleichbar des früheren Duplexdruck- oder Triplexdruckverfahren, das leider heute kaum mehr Anwendung findet in der Druckindustrie. Ebenso muss der Kontrast zwischen Vorder- und Hintergrundfarben möglichst kräftig ausfallen. Längere Websites mit mehreren Bildschirmhöhen sind als problematisch zu betrachten (vgl. J. Nielsen, S. 302).
Durch <H>-Tags wird die Website lesbarer für Sprachsoftware und zugleich übersichtlich gegliedert. Der <H>-Tag unterteilt den <H1>-Tag, der <H3>-Tag unterteilt den <H2>-Tag usw.. (vgl. J. Nielsen, S. 302).
Planung der Website
Bei der Planung der Website ist es optimal, großen Schriftarten den Vorzug zu geben. Ein Vorschlag wäre es, zuvor verschiedene Schriften mit dem selben Blindtext bei gleicher Größe einmal auszudrucken, um den direkten Vergleich zu haben. Es bieten sich hier die Googlefonts an.
Bei der Codierung mittels des XHTML-Codes sollten relative Schriftgrößen verwand werden, also Prozentwerte. (Vgl. Jakob Nielsen, S. 303). Die Seite sollte getestet werden in den Größen 10, 12 und 14 Punkt. es ist ratsam, weitere Tests durchzuführen mit 18 und 24 Punkt. Der sich dadurch einstellende Effektiv auch nützlich für Normalsehende (Vgl. J. Nielsen, S. 303)
Das Attribut ‚Alt‘
Das Attribut ‚Alt‘ ist eine nützliche Beschreibung, welche die Bedeutung oder die Rolle des Bildes im Gesamtbild der Seite eindeutig zeigt: Was soll das Bild aussagen und was geschieht, wenn man es anklickt? Die Beschreibungen sollten sinnvoll und nützlich sein, zum Beispiel empfiehlt es sich einem Logo nicht den alt-text ‚Logo‘ zuzuordnen, da ein Blinder das Logo so oder so nicht sieht. (Vgl. J. Nielsen, S. 305).
Auch ist es von Vorteil besser einen leeren ‚Alt‘-String als gar keinen Alt=„”-String zu nutzen. (Vgl. J. Nielsen, S. 307). es eignet sich ferner ein unsichtbares gif-Bild mit einem alt_text ideal für längere Beschreibungen. (Vgl. J. Nielsen, S. 308)
Fünfteiliges Quiz
Bitte nehmen Sie zwecks Überprüfung Ihres Wissens an diesem Quiz teil!