• hier optimiert noch der Chef
  • individuelle Beratung
  • keine Vertragslaufzeiten

Barrierefreies Webdesign

Uneingeschränkte Nutzbarkeit von Systemen bezeichnet den Begriff der Barrierefreiheit. Die Definition Barrierefreiheit wird im englischen oft mit Accessibility (deutsch: Erreichbarkeit, Zugriff) dargestellt. Sämtliche Informationen als auch Funktionen sollen somit für alle Nutzer zugänglich oder bedienbar sein, unabhängig von körperlichen, mentalen oder technischen Situationen und deren Behinderungen.

Barrierefreies Webdesign in einem Video erklärt

Barrierefreies Webdesign einfach und verständlich erklärt

In diesem Video erklären wir den Begriff „Barrierefreies Webdesign“

Infografik zum Begriff Barrierefreies Webdesign

Barrierefreies Webdesign

Infografik zum Begriff „Barrierefreies Webdesign“

Web Accessibility Initiative sowie EU Richtlinien

1997 wurde die Web Accessibility Initiative (kurz: WAI) vom World Wide Web Konsortium (W3C) gegründet, um Anforderungen zur Barrierefreiheit im Internet zu definieren. Diese stellten Kriterien zur Webseitenprogrammierung, Inhaltsarchitekturen, Layout-Grundlagen sowie technische Verwendung auf. Diese Richtlinen gelten als elementarer Standard zu weitergehend aufbauenden Richtlinen dar. Seitens der EU wurde beispielsweise am 26.10.2016 die EU Richtlinie zur Regelung barrierefreien Zugangs zu Homepages und mobilen Anwendungen öffentlicher Stellen (Krankenhäuser, Ämter, Gemeinden) verabschiedet. Öffentliche Einrichtungen sind somit verpflichtet die vier Grundprinzipien der WCAG Web-Content-Accessbility-Guidelines 2.0 (deutsch: Richtlinie für barrierefreie Webinhalte) einzuhalten. Diese lauten wie folgt:

  • Wahrnehmbar: Informationen und Bestandteile müssen dem Nutzer so präsentiert werden, dass dieser diese wahrnehmen kann.
  • Bedienbar: Bestandteile der Benutzerschnittstelle und Navigation dieser, müssen bedienbar sein.
  • Verständlich: Informationen und Bedienbarkeit müssen verständlich sein.
  • Robust: Inhalte müssen robust genug sein, damit diese zuverlässig von einer großen Auswahl von Benutzeragenten, einschließlich assistierender Techniken, interpretiert werden können

Visuell bedingte Barrieren

Optische Reize gelangen vom Auge zum Gehirn, Blinde oder Menschen mit Sehbehinderung sollen in der Nutzung einer Website nicht eingeschränkt sein. Es gilt somit einige Optimierungsmaßnahmen zu beachten:

  • Rot-Grün-Schwäche: Von der Rot-Grün-Schwäche oder -Blindheit sind etwa 9% aller Männer und 0,8% der Frauen betroffen. Betroffene können zwischen den Farbtönen nicht differenzieren. Informationen sollten somit in einem hohen Kontrast und angemessener Schriftgröße dargestellt werden.
  • Alt-Text (Alternativer Text): Bei starker Sehbehinderung werden sogenannte Screen Reader, spezielle Bildschirmleseprogramme, eingesetzt, die imstande sind mittels des Quelltexts einer Internetseite dessen Inhalte für den betroffenen Nutzer auszulesen. Da diese Screen Reader keine Möglichkeit besitzen Bilder oder Grafiken auszulesen, sollte in der Programmierung einer Website der sogenannte Alt-Tag eingesetzt werden, dieser Alternativ-Text beschreibt in bis zu 3 Worten den Inhalt oder die Bedeutung der Visualisierung. Sofern eine längere Beschreibung notwendig ist, sollte der sogenannte Description-Link (D-Link) eingesetzt werden, die auf eine gesonderte Seite führt, die die Grafik ausführlich erläutert.
  • Layout
  • Tabellen: Eine sinnvolle, systematische Anordnung der Zelleninhalte ist innerhalb einer Verwendung von Tabellen von hoher Bedeutung, da Screen Reader immer nur eine einzige Zelle erfassen können. Eine Lesbarkeit der Zellen von Zeile zu Zeile von links nach rechts vereinfacht die Lesbarkeit dieser.
  • Transparente Grafiken: Die Nutzung von transparenten Grafiken, zur Schaffung von Abständen in Textteilen, sollte vermieden werden, da diese im Lesefluss keine Aussage darüber geben, ob sich wichtige Inhalte hinter der Grafik befinden.
  • Heading Tags: Auf Seiten mit langem Inhalt ist es wichtig, einen klaren Überblick mittels Überschriften zu schaffen. Mittels HTML Auszeichnungen (H1 – H6) kann eine klare Gliederung geschaffen werden.
  • Frames: Auf den Einsatz von Frames sollte in der Programmierung weitestgehend verzichtet werden. Ist der Einsatz von Frames notwendig, so sind diese mit einem aussagekräftigen Titel wie „Menü“ oder „Kontakt“ zu versehen. Für Browser, die keine Frames unterstützen, sollte das <noframes> Tag Verwendung finden um Inhalte zu beschreiben.

Barrierefreies Webdesign für sehbehinderte Menschen

  • gute Farbkontraste und lesbare Schriftgrößen
  • geradliniges und logisches Layout
  • Bildbeschreibungen mittels ALT-Texte
  • mittels HTML5 strukturierte Daten
  • beschreibende Linktexte

Motorisch bedingte Barrieren

Menschen mit physiologischen Defiziten besitzen eine eingeschränkte Bewegungsfreiheit, die beispielsweise die Steuerung einer Computer Maus problematisch darstellt. Maßnahmen zur Nutzbarkeit Ihrer Website sollten auch hier beachtet werden:

  • Schaltflächen: Weiterführende Links oder Schaltflächen innerhalb einer Navigation sollten in angemessener Größe dargestellt werden, so dass diese leicht geklickt werden können.
  • Navigation mittels Tastatur: Der Einsatz der Tabulatorentaste zur Navigation (statt einem Scrollrad innerhalb der Maus) sollte stimmig sein. Die Möglichkeit die Tastatur als Maus-Ersatz wurde auch bei Java und ActiveX eingeführt.
  • Formulare: Auswahllisten, Drop Down Menü oder Radio-Buttons, stellen im Umgang mit Formularen noch größere Anforderungen dar. Die Steuerung über Radio-Buttons lässt sich kaum über die Eingabe durch die Tastatur verwirklichen, daher sollte dies vereinfacht (z.b. mittels getroffener Vorauswahl) werden. Bei Abfragen von E-Mailadressen sollte das @ Zeichen bereits zwischen zwei getrennten Feldern stehen, um einen Mehrfachtastendruck zu vermeiden. Laut Empfehlung innerhalb der WAI Richtlinie sollten Abfragen eingebaut werden, ob ein User ein ausgefülltes oder unausgefülltes Formular möchte.

Barrierefreies Webdesign für körperlich/motorisch eingeschränkte Menschen

  • Klickbare Elemente großflächig gestalten
  • Nutzung der Website sollte komplett tastatur- und sprachgesteuert möglich sein

Auditiv bedingte Barrieren

Gesprochene Audiodateien (z.b. Interviews, Dokumentationen, Ratgeber) sollten immer auch in Textalternativen für Menschen mit eingeschränktem Hörvermögen zur Verfügung gestellt werden.

Barrierefreies Webdesign für taube oder hörbehinderte Menschen

  • Videos mit Untertitel oder Transkription
  • geradliniges und logisches Layout
  • Kontaktangaben den User wählen lassen, z.b. Mail, Telefon, Whatsapp

Sprachlich bedingte Barrieren

Die Nutzung des WWW mittels Spracheingabe ist noch in Ihrer Entwicklung. Die Voice Browser Working Group des W3C hat mit einem Entwurf der Voice Browser Call Control, die CCXML Version 1.0, veröffentlicht. CCXML ergänzt die Sprache VoiceXML und andere Dialogsysteme mit denen Webseiten über Spracheingabe gesteuert werden können.

Kognitiv bedingte Barrieren

Die WAI Richtlinien setzen generell Kriterien fest, die physische Behinderungen betreffen. Kognitive Barrieren, die durch geistige Einschränkungen bedingt sind, müssen jedoch genauso in einem barrierefreien Webdesign berücksichtigt werden. Es ist wichtig, Inhalte für die breite Masse zu gestalten und auf komplexe Sätze oder Fremdwörter zu verzichten. Ein simpler Aufbau, Hilfestellung zur Position an der sich ein Nutzer befindet oder Links mit klarem Bezug zu dessen Ziel sind hilfreich.

Barrierefreies Webdesign für beispielsweise legasthenische Nutzer

  • Bilder und Diagramme, die den Text ergänzen
  • Inhalte kurz, klar und verständlich aufbereitet

Technisch bedingte Barrieren

Webseiten die einen bestimmten Browser oder dessen Version vorschreiben, führen zur Einschränkung der Nutzer. Die Nutzung von Javascript, Flash sollten hinterfragt werden. Große Datenmengen in Form von langen Ladezeiten sollten vermieden werden.

Barrierefreies Webdesign und Suchmaschinenoptimierung – SEO

Valider Code, im Sinne der Barrierefreiheit, ermöglicht nicht nur die Verarbeitung von technologischen Hilfsmitteln, sondern Inhalte können so von den Robots (Crawlern) der Suchmaschinen einfacher, vollständiger indiziert werden, was zu einem Vorteil innerhalb der SEO führt. Google nimmt somit Websites, die den Anforderungen der Barrierefreiheit entsprechen, positiv auf.

Folgende Faktoren sind wichtig, eine maximale Barrierefreiheit und Lesbarkeit einer Webseite durch Crawler zu schaffen:

  • sauberer und klar strukturierter Quelltext, z.b. Heading Tags, Alt-Tag
  • Struktur durch Absätze, Fettungen oder Kursivschrift
  • Bereitstellung von Inhalten in Text, Bild, Video
  • keine versteckten Inhalte
  • keine technischen Einschränkungen (Javascript, Flash)
  • keine Broken Links (Links auf Zielseiten die nicht mehr existent)
  • Sinnvolle Verwendung von Meta-Angaben wie Title, Description
  • Strukturierte Daten

Fazit

Die Beachtung der Richtlinien zur Barrierefreiheit (Accessibility) ermöglicht Ihnen Zugang zu Ihren Informationen für Menschen mit Behinderung gleichermaßen aufbereitet darzustellen und einen positiven Impuls im Web zu geben. Auch wenn die Umsetzung dieser Richtlinien einen Aufwand darstellt, wird dieser mit hoher Wahrscheinlichkeit seitens Google und anderen Suchmaschinen Crawler belohnt.

Umfassende Sammlung zur Barrierefreiheit und Consulting Leistungen zum Thema: https://www.barrierefreies-webdesign.de/

Kostenloser Screen Reader Demo JAWS: http://www.freedomsci.de/products.htm

Voice Browser Call Control des W3C: https://www.w3.org/TR/ccxml/

WCAG 2.0 Richtlinie zur Barrierefreiheit – Accessibility : https://www.w3.org/WAI/GL/WCAG20/