Barrierefreie Webseiten

„Barrierefreie Websites“ sind für alle da.

Alte Menschen, Hörschwächen, Sehschwächen, keine Hände zur Verfügung, kleines Display, Müdigkeit usw können eine Barriere darstellen
Es gibt viele Gründe die den Zugang zu Websites erschweren.

Erwähne ich das Wort „Barrierefrei“ bekomme ich oft zu hören: „Websites für Blinde? Die kaufen bei uns nicht ein.“ Das mag manchmal stimmen, aber man könnte in vielen Fällen auch sagen: „die kaufen bei uns noch nicht“. Denn in den letzten Jahren haben sich die Bedingungen für sehbeeinträchtigte Personen in unserer Gesellschaft immer weiter verbessert und man sollte diese Zielgruppe auf keinen Fall vernachlässigen. 

Aber Menschen mit Sehschwächen sind nicht die einzigen, die Probleme bekommen können eine Website zu nutzen. Jeder hat schon mal erlebt, dass nur eine Hand frei, ist während man den Computer bedient, oder man hat unterwegs keine schnelle Internetverbindung, bzw. nur ein kleines Display zur Verfügung, auf dem nicht alle Informationen sichtbar sind. Vielleicht gibt es rundherum gerade Lärm und man kann sich nicht auf den Text der Website konzentrieren oder es war eine lange Nacht und man ist nur bedingt aufnahmefähig. Beobachten Sie einmal einen siebzig- oder achtzigjährigen Verwandten, der versucht etwas über einen Onlineshop zu bestellen, da gibt es oft Schwierigkeiten mit Elementen umzugehen, die für geübte User selbsterklärend sind.

Bei barrierefreien Webseiten geht es darum Seiten zur Verfügung zu stellen, die nicht nur vor dem Desktop PC mit schneller Internetverbindung und ohne körperlicher Beeinträchtigung genutzt werden können, sondern in vielen unterschiedlichen Situationen und Lebenslagen. Natürlich kann nicht jede Gegebenheit berücksichtigt werden, aber man kann – abhängig von der Zielgruppe – doch einige Punkte beachten, die es einfacher machen eine Website zu bedienen.

 

Layout

Schriftgroessen und Kontraste beachten bei barrierefreien Webseiten
Schriften müssen groß genug und Kontraste stark genug sein.

Große Schriften und gute Farbkontraste helfen sehbeeinträchtigten Personen eine Seite leichter lesen zu können. Mittlerweile bietet jeder Browser die Möglichkeit an die Seiten beliebig vergrößern und verkleinern zu können, sofern das Layout der Website mitspielt und eine dynamische Größenänderung zulässt.

Für Menschen mit Rot-Grün Schwäche und stärker sehbeeinträchtigten Menschen wird ein höherer Kontrast zwischen Elementen, die informieren (vor allem Text), und den umgebenden Hintergründen benötigt. Rote und grüne Elemente sollten nicht in Konkurrenz zu einander stehen. Ein rot-grünes Ampelsystem z.B. kann ein Problem darstellen, wenn nicht irgendwie anders gekennzeichnet ist, was gerade ausgewählt ist.

Texte und Beschreibungen

Gut strukturierte Texte sind leichter zu erfassen.
Gut strukturierte Texte sind leichter zu erfassen.

Neben ausreichend großer Schrift ist es auch wichtig verständliche Texte anzubieten, die gut und strukturiert aufbereitet sind. Der durchschnittliche User hat wenig Zeit und möchte in ein paar Sekunden erfassen können, worum es hier geht. Auch Menschen, die gerade nicht ausreichend aufnahmefähig sind oder über geringe Schulbildung verfügen oder andere Handicaps haben, sollten diese Inhalte erfassen können.

Nicht zu vergessen sind auch alternative Texte für Bilder und Videos. Blinde Menschen werden natürlich keine Bilder oder Videoclips ansehen können. Deshalb muss man ihnen eine Beschreibung der Inhalte zur Verfügung stellen. Das wiederum kann Google brauchen um beides in die Bildersuchergebnisse aufzunehmen.

Nutzerführung

Das Menü muss schnell erkennbar sein.
Für eine rasche Benutzerführung muss das Menü leicht zu erkennen sein.

Das Menü ist ein beliebtes Experimentierfeld für Webdesigner und es gibt wirklich sehr schöne und ausgefallene Lösungen. Eine barrierefreie Navigation ist einfach und intuitiv zu bedienen. Am übersichtlichsten ist es natürlich, wenn man das Menü auf einen Blick erfassen kann – egal ob eine horizontale oder eine vertikale Menüführung. Auf mobilen Geräten hat sich eine Kennzeichnung mit drei Strichen bewährt.

Kurzum – man sollte gleich sehen wo sich das Menü befindet und mit sowenig Klicks wie möglich an sein Ziel kommen. Nicht jeder möchte und kann suchen, um in einer Website weiter zu kommen und zudem nervt es nach einiger Zeit, wenn man mehrere Klicks braucht, um im Hauptmenü zum nächsten Punkt zu gelangen.

Um Blinden die Navigation zu ermöglichen, sollte das Menü mit bestimmten Attributen im Sourcecode gekennzeichnet sein. Zudem muss es sich (vor allem im Code) an oberster Stelle befinden. Ob links, rechts oder in der Mitte ist eher Geschmacksache bzw. auch ein bisschen Trendsache. In den ersten Jahren des Webdesigns wurde das Menü gerne links angeordnet. Man fängt links zu lesen an, und es ist etwas leichter auffindbar für den ungeübten User, aber mittlerweile haben sich sämtliche Varianten etabliert. Es muss schlüssig sein für das Konzept der Website und leicht zu finden.

Verlinkungen und Buttons sollten selbsterklärend sein. Icons machen eine Seite sympathischer, sparsam eingesetzt sind sie aber sinnvoller als zuviel verwendet.  Entweder sie werden mit gewohnten Zeichen versehen oder erhalten eine zusätzliche Beschreibung.

Navigieren mit der Tastatur ist ein nettes Zusatzfeature, das Websites anbieten können und das hilfreich sein kann, hat man nicht beide Hände zur Verfügung. Man darf nicht vergessen, dass es Menschen gibt, die auf diese Art der Navigation angewiesen sind. Ist der Sourcecode gut gemacht, klappt das auch meistens, dass die Elemente in der richtigen Reihenfolge mit der Tabulatortaste angesprungen werden können. Vorausgesetzt, man stellt seinen Computer so ein, dass diese Art der Navigation zugelassen wird (auf Apple Geräten). Vor allem bei Formularen sollte man aber auf jeden Fall darauf achten, dass die Seite Tab-Navigation zulässt. Formulare werden mit der Tastatur ausgefüllt, und wenn es schnell gehen soll, greift man nicht immer zur Maus um weiter zu springen, sondern drückt einfach die Tab-Taste.

Responsive Design

Responsive Design
Das Design passt sich an die Mediengröße an. Die hier angegebenen Größen sind nur Richtwerte. Jede Marke und jedes Modell hat seine eigenen Größen.

Wie eingangs erwähnt, kommen nicht immer große Desktop-PCs zum Einsatz, sondern auch andere Medien wie Tabletts und Smartphones, die weit weniger Platz bieten zur Darstellung von Inhalten. Idealerweise sollte auf jedem Medium die passende Information im passenden Layout ausgegeben werden. Diese „Reaktion“ auf das jeweilige Medium nennt man „Responsive Design“.

Das kann auf zwei Wegen gelöst werden: Floating Design: hier wird ein Raster entwickelt, der mit steigender Mediengröße erweitert wird und immer mehr Information preis gibt oder es wird für jedes Medium ein eigenes Layout entwickelt. Die erste Lösung ist weniger arbeitsintensiv und damit günstiger. Beim zweiten Weg kann man besser auf die einzelnen Medien eingehen und auch teilweise andere Informationen ausgeben bzw. mit unterschiedlichen Nutzerführungen arbeiten.
Mehr über „Responsive Design“ können Sie in diesem Blogbeitrag lesen.

Alte Browser

weltweite Browserstatistik, Jänner 2017
Eine Browserstatistik alleine ist nicht aussagekräftig ob die Browser für eine Website noch relevant sind oder nicht.

Auch ältere Browser stellen eine Barriere dar. Klar, heutzutage daten die Browser von selber up – aber nur wenn man sie lässt. Stellen Sie sich vor, Ihre User suchen Sie über eine öffentliche Bibliothek oder über einen Schulcomputer. Solche Institutionen haben diese Updates aus Sicherheitsgründen untersagt. Und nicht immer gibt es Ressourcen, dass Techniker regelmäßig vorbei kommen um die neuesten Versionen einzuspielen. Oft sind das sogar ziemlich alte Browser, die neuere Versionen von HTML und CSS gar nicht oder nur unvollständig interpretieren können. Das gibt immer wieder Stoff zu regen Diskussionen unter Webdesginer- und ProgrammiererInnen. Es gibt zwar Statistiken, wie häufig Browser genutzt werden, aber man soll sich davon nicht täuschen lassen. Es gibt immer wieder Kundenkreise, die auf ältere Browser in gewissen Situationen angewiesen sind.

Barrierefrei Standards und Gesetze

Seit einigen Jahren unternimmt der österreichische Staat Anstrengungen, um Chancengleichheit für beeinträchtigte Menschen zu gewährleisten. Einer der wichtigsten Punkte ist ein Gesetz, das 2016 in Kraft getreten ist, das Gleichstellung für alle Menschen mit Behinderungen im öffentlichen Leben vorschreibt. Das betrifft auch alle öffentlich zugänglichen Websites.

W3C, das World Wide Web Consortium hat einen unverbindlichen Standard mit drei Stufen (A, AA, AAA) entwickelt. Er bietet eine gute Richtlinie, möchte man eine Website weitgehend barrierefrei entwickeln. Nicht jede Website muss alle diese Empfehlungen erfüllen, das erreichte Level sollte aber so hoch wie möglich sein. Allerdings wird der höchste Level AAA in den wenigsten Fällen erreicht.

Weiter Informationen über diese Standards bekommen Sie hier:
https://www.w3.org/Translations/WCAG20-de/

 

Fazit

Die hier aufgezählten Punkte stellen nur einen Teil der Möglichkeiten dar. Welche Maßnahmen notwendig sind, hängt davon ab, was die Website anbietet, wie bzw. womit sie es anbietet und welche Zielgruppen angesprochen werden sollen.

Eines der Ziele einer Website sollte aber sein, möglichst viele User zu erreichen. Um alle bei der Benützung zufrieden zu stellen und dabei nicht auf die neuesten Technologien verzichten zu müssen, sollten im Vorfeld die genauen Zielgruppen abgeklärt werden und mit welchen Medien und Programmen die Website von ihnen angesurft wird. Danach kann man die notwendigen Maßnahmen planen und umsetzen.


Kommentar verfassen

Die Emailadresse wird nicht veröffentlicht. Benötigte Felder sind mit * gekennzeichnet.

Das Zeitlimit ist abgelaufen. Bitte aktualisieren sie CAPTCHA.

Menü ›