Kategorien
Design HTML/CSS Responsive Design UI/UX Webdesign

Design für Alle: Fünf Richtlinien für barrierearme Websites

Menschen mit Behinderungen sind überdurchschnittlich oft im Internet unterwegs und dabei manchmal auf spezielle Aufbereitungen der Webangebote angewiesen. Diese Aufbereitung geht über die übliche Darstellung am Bildschirm hinaus. Menschen mit einer Einschränkung des Sehvermögens lassen sich Websites oftmals mittels Screenreader vorlesen oder auch in Braille-Schrift ausgeben.

Anzeige

Doch Barrierefreiheit meint auch die plattformunabhängige Darstellung auf allen möglichen Geräten, und nicht nur auf einem normalen PC-Bildschirm. Somit sind (gut gemachte) responsive Websites bereits als barrierearm zu betrachten, denn sie funktionieren auf jedem Ausgabegerät.

Die Zugänglichkeitsrichtlinien des W3C

Das von Tim Berners Lee geführte World Wide Web Consortium (W3C) hat sich im Bereich “Barrierefreies Webdesign” sehr verdient gemacht und bringt seit einiger Zeit die Web Content Accessibility Guidelines heraus, nach denen sich Designer und Entwickler richten können, um eine zugängliche Website zu entwickeln. Die Guidelines sind sowohl für Profis als auch für Amateur-Entwickler relativ einfach zu beachten. Wir werfen einen Blick darauf, wie du alle Menschen bei der Entwicklung einer Website berücksichtigen kannst.

1. Erweiterte Zugänglichkeit

Viele eingeschränkte Nutzer greifen auf unterstützende Technologien wie Screenreader zurück. Diese verwenden eine Reihe innovativer Technologien, um eine gesprochene Version einer Website auszugeben – oder auch Brailleschrift, je nach Gusto des Nutzers. Screenreader arbeiten sich entgegen den “normalen” Nutzern linear durch den Inhalt – oder besser gesagt – durch den Quelltext einer Website.

Mit wenigen kleinen Schritten in der Entwicklung einer Website erreichen wir bereits sehr viel für die Nutzung mit Screenreadern. Zum Beispiel sollten stets die richtigen Titel-Tags verwendet werden. Eine <h1> sollte nur für die Überschrift einer Seite Verwendung finden. Man sollte ebenfalls darauf achten, keine Ebenen zu überspringen, also nicht von einer <h1> direkt zu einer <h4> wechseln. Ein Screenreader könnte ansonsten durcheinander kommen, weil angenommen wird, dass Inhalte fehlen. Also sollte man stets die Title-Tags korrekt einsetzen, eine <h2> folgt auf eine <h1>, danach setzt man eine <h3>, und so weiter…

Wichtig ist der richtige Alt-Text für Bilder. Dieser Text sollte immer beschreiben, was sich auf dem Bild befindet, oder wofür es steht. Ohne einen korrekten Alt-Text kann ein Screenreader ein Foto nicht interpretieren. Aus dem gleichen Grund sind Links immer logisch zu beschriften. Zumindest sollte ein Link einen beschreibenden Titel besitzen. Falls deine Website Formulare enthält, sorge für eine klare und eindeutige Namensgebung. Diese hier bis jetzt angesprochenen Dinge gehören jedoch zu einem qualitativ guten Webdesign und werden daher (hoffentlich) ohnehin so umgesetzt.

Anzeige
Aktion-Mensch
Die Website der Aktion Mensch ist ein hervorragendes Beispiel für eine barrierefreie Website.

 2. Gute Kontraste

Das zurzeit aktuelle minimalistische Design kommt Menschen mit eingeschränktem Sehvermögen sehr entgegen, denn es bietet dem Betrachter gute Kontraste und ist daher sehr gut lesbar. Viele Menschen mit Seheinschränkungen kämpfen mit Farben, daher sind gute Kontraste immer viel wert. Schwarze Texte auf einem weißen Hintergrund sind für jeden Menschen gut lesbar.

Doch auch farbige Seiten können einen hohen Kontrast aufweisen und sehr gut funktionieren. Ein gutes Beispiel für eine farbige, barrierefreie Website mit hohem Kontrast ist die Website des SOS-Kinderdorfs.

SOS-Kinderdorf

Ob deine Website Probleme mit zu schwachen Kontrasten hat, kannst du ganz leicht mit einem Online-Tool feststellen. Check my Colours prüft deine Website genau und gibt auch die fehlerhaften Stellen aus.

3. Kräftige Farben und einfache, intuitive Navigationen

Nicht nur seheingeschränkte Menschen sollen mit einem barrierearmen Webdesign bedacht werden, sondern auch Leser mit kognitiven Schwächen, denen das Lesen deiner Website schwer fallen könnte.

Lingonberry-Theme-Anders-Noren

Die Verwendung von satten, kontrastierenden Farben mit einer klaren, einfachen Navigation kommt auch diesen Menschen sehr entgegen. Das Lingonberry-Theme von Anders Norén ist ein gutes Beispiel hierfür. Grundsätzlich sollte man sich in den Navigations-Menüs mit der Kombination von Text und Icons zurückhalten, denn das könnte zu Problemen für potentielle Leser mit Sehschwächen führen.

4. Die Verwendung von Icons

Die Verwendung von recht großen Icons kann eine Website durchaus deutlich aufwerten und ein Vorteil für alle Benutzer sein. Die Symbole könnten hierbei eine Art von zusätzlicher Navigation übernehmen. Für diesen Einsatzbereich gibt es eine klare wissenschaftliche Grundlage, doch die Logik dahinter dürfte klar sein. Die meisten Betriebssysteme nutzen heute Icons zur Unterstützung in navigationstechnischen Aufgaben. Papierkörbe, Order-Symbole und vieles mehr begegnen uns täglich im Umgang mit unserem Mac oder PC.

Für Menschen mit bestimmten Einschränkungen kann es der einzige Weg sein, sich innerhalb einer Website sicher bewegen zu können. Mittels Icon-Fonts, wie zum Beispiel Font Awesome,  lassen sich solche unterstützenden Navigationen gut realisieren. Hier ein Beispiel für eine unterstützende Navigation mit Icons:

Beispiel für unterstützende Icon-Navigation

5. Die Freiheit der Wahl

Es ist durchaus verständlich, dass wir unsere Nutzer direkt in die von uns ersonnene Web-Erfahrung katapultieren möchten. Doch das ist nicht immer das, was ein Leser auch wirklich will. Diejenigen unter den Nutzern, die mit bestimmten Einschränkungen leben müssen, können schnell verwirrt von automatisch anlaufenden Slidern, Videos oder Audio-Dateien sein. Daher wäre es vorteilhaft, wenn Designer ihren Usern die Wahl lassen, ob sie die angebotenen Medien starten möchten. Slider können so eingestellt werden, dass sie die Inhalte nur manuell wechseln.

Eingebettete Videos von YouTube oder Vimeo können so integriert werden, dass sie nicht sofort abspielen, wenn eine Seite fertig aufgebaut wurde.

Barrierefreiheit ist auch ein Thema in den Nicht-HTML-Komponenten deiner Seiten. Bei Office-Dateien oder PDFs kannst du bereits im Vorfeld prüfen, ob nicht eine HTML-Seite für den Inhalt geeigneter wäre. Nicht immer muss ein separates Dokument besser sein als eine eigene Seite innerhalb der Website.

Eine inhaltsreiche und vorbildliche Website ist die Homepage der BBC Great Britain. Die Website ist zugänglich, klar und mit guten Kontrasten versehen. Videos, Musik, interaktive Inhalte und Symbole sind so verwendet, dass alle Elemente zugänglich sind.

Fazit

Das Erstellen einer zugänglichen Website muss nicht immer einen großen Mehraufwand von Zeit und Geld bedeuten. Wenn wir uns an die Webstandards halten, haben wir bereits einiges an Zugänglichkeit automatisch implementiert. Einfache und klare Inhalte, gute Kontraste und Medien, die nur manuell anlaufen, sind erste Schritte zur Barrierefreiheit. Wenn du eine Website entwickelst, ist es empfehlenswert, an alle Besuchergruppen zu denken. Natürlich kann ein solcher Artikel wie dieser hier das umfassende Thema der Barrierefreiheit immer nur knapp anreißen. Willst du mehr darüber erfahren, wirfg gerne einen Blick in die von mir verlinkten Quellen.

Links zum Beitrag

(Beitragsbild: Gerd Altmann / Pixabay)

(Der Beitrag erschien erstmals im Frühjahr 2015 und wurde zuletzt im Juni 2019 aktualisiert.)

1 Kommentar zu “Design für Alle: Fünf Richtlinien für barrierearme Websites”

Meine Erstkontakt mit Barrierefreiheit fürs Web war so um 2005 und ich war sofort begeistert davon. Ich begann sofort die paar Websites, welche damals in meiner Verwaltung waren, umzustellen. Dabei war auch eine öffentliche Site einer Gemeinde und jene wurde in der Folge die erste echt barrierefreie Website der öffentlichen Verwaltung in Österreich.
Dies ca. ein Jahr, bevor man diese Attribute öffentlicher Sites 2008 auch gesetzlich vorschrieb.
Weitere Websites wurden umgebaut und es war ein Segen: verstellbare Schrift, Navi ohne JS, Bilder mit Titel, Alt, das Ende der Layouttabelle usw.
Doch eines Tages begann der Hype um Webbaukästen und Standardscripts wie WP & Co. Die hatten es anfangs überhaupt nicht auf Barrierefreiheit angelegt und dennoch verschwanden zu viele der früher manuell gebastelten, fehlerlos nach WCAG gecodeten Sites.
Als diese Webbaukästen die ersten Probleme lösen konnten, die damit gebauten Sites optimaler wurden – begann der nächste Hype mit der mobilen Darstellung. Was wir schon zuvor mit WAP lösten, war plötzlich out, denn dann kamen die Smartphones und jeder Kunde wollte, dass seine Site auf diesen Dingern gut aussieht.
Das war meiner Meinung nach das Ende der echten Barrierefreiheit im Web. Sicher, jeder baute nun endlich mit DIV’s und responsive Darstellung ist ja auch irgendwo eine Freiheit.
Manches ist heute anders gewichtet, andere Kriterien sind heute wichtiger – sind es auch die richtigen?
Nur gibt es heute noch Websites, welche ohne JS funktionieren? Nein. Blockt man eins der zig Scripts, geht nichts mehr, sieht man nichts mehr. Kein Fallback über PHP oder so fängt das auf. Ok, heute muss jedes Endgerät Scripte ausführen, sonst geht nichts mehr.
Ist das noch wirklich Barrierefrei?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.