Andreas Hecht 27. Juni 2015

Ein 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. 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.

barrierearmeswebdesign-teaser_DE

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 Sie alle Menschen bei der Entwicklung einer Website berücksichtigen können.

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 Titel-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 Ihre Website Formulare enthält, sorgen Sie 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.

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

 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 vielen Farben, daher sind gute Kontraste immer viel wert. Schwarze Texte auf einem weißen Hintergrund sind für jeden Menschen gut lesbar.

Dr. Web

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 Ihre Website Probleme mit zu schwachen Kontrasten hat, können Sie ganz leicht mit einem Online-Tool feststellen. Check my Colours prüft Ihre Website genau und gibt auch die fehlerhaften Stellen aus.

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 Ihrer 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.

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 oder den neuen Fonticons 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

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 die 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 Ihrer Seiten. Bei Office-Dateien oder PDFs können Sie 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.

BBC Great Britain

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 Sie eine Website entwickeln, 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, wer von Ihnen mehr darüber erfahren möchte, darf gerne einen Blick in die von mir verlinkten Quellen werfen.

Links zum Beitrag

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

3 Kommentare

  1. Guten Tag,

    Keine Hilfstechnologie parst den Quelltext einer Seite. Man bedient sich iA2, DOM und anderer Möglichkeiten, je nach Browser und Screenreader.

    Auf drweb.de fehlen mir Überschriften, um zu den Kategorien, Kommentaren und so weiter springen zu können.

    In dem Artikel wird darauf hingewiesen, für Bilder alt-Texte zu hinterlegen, aber drweb.de selbst hat das leider noch nicht durchgängig realisiert.

    Auf meinem Bloghttp://www.VeitshoechheimIsstBesser.de habe ich mit Hilfe eines barrierefreien Themes als vollblinder Computeranwender selbständig ein privates WordPress-Projekt umgesetzt.

    Viele Grüße
    Rainer Brell

    • Hallo Rainer,

      darf ich als Kenner fragen, welche Screenreader deiner Meinung nach die größte Verbreitung haben?

      In Artikeln über das Thema Barrierefreiheit fehlen leider immer Infos zu den letzten 10 Prozent der erfolgreichen Optimierung: Realistische Testbedingungen.

      Viele Grüße,
      Marvin

      • Hallo Marvin,

        Es ist historisch bedingt wohl leider „JAWS“. Größte Verbreitung heißt aber noch nicht, bestes Produkt.

        Dennoch hat http://www.nvda-project.org die größten Chancen für die Zukunft und einen super Support für das Web und NVDA ist zum Testen sehr gut geeignet, da es davon auch eine portable Version gibt.

        Gruß
        Rainer Brell

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.