Barrierefreiheit umsetzen: Wie gestalte ich Webinhalte barrierefrei?

Laut einer Studie von Aktion Mensch sind gerade Menschen mit Behinderungen überdurchschnittlich viel im Internet. 4 von 5 Personen nutzen das Internet und auch Senioren sind immer mehr online. Einige sind beim Surfen jedoch auf bestimmte Darstellungsweisen der Webinhalte angewiesen. Hinzu kommt, dass das Internet, oder zumindest der Computer für einen Großteil der Arbeitsplätze unentbehrlich geworden ist. Ein barrierefreier Zugang zu digitalen Inhalten und Dienstleistungen wird deshalb immer wichtiger, damit niemand von der digitalen Welt ausgegrenzt wird. Doch wie erstellt man eigentlich eine barrierefreie Website und was bedeutet das?

Der Begriff „barrierefrei” bezieht sich nicht zwangsläufig auf Senioren und Menschen mit Behinderung, sondern betrifft alle Menschen. Er besagt einfach, dass das Internet „für jeden zugänglich” sein sollte. Dies umfasst z.B auch technische- und Sprachhindernisse. Wer eine möglichst barrierefreie Website anbieten möchte, sollte diese also, wenn möglich, in mehreren Sprachen, oder zumindest auf Englisch anbieten, damit die Inhalte von einem größtmöglichen Publikum verstanden werden. Es sollte ebenfalls darauf geachtet werden, dass die Inhalte auf allen Bildschirmformaten (PC, Tablet, Smartphone) nutzbar und von Betriebssystem und Software unabhängig sind.

In diesem Artikel geht es jedoch hauptsächlich um Barrieren für Senioren und Menschen mit Behinderung. Auch das Wort Behinderung umfasst ein weites Feld an verschiedenen Einschränkungen, die jeweils andere Darstellungsweisen einer Website benötigen, darunter:

• Gehörlosigkeit und Schwerhörigkeit
• Blindheit und Sehbehinderung
• motorische Behinderung
• Lernbehinderung

Barrierefreie Website den Normen entsprechend

Zur barrierefreien Gestaltung von Webinhalten gelten verschiedene Richtlinien, die in den Web Content Accessibility Guidelines, kurz WCAG 2.0 des World Wide Web Consortiums (W3C ) zusammengefasst sind. Die Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0 ist quasi die deutsche Version der WCAG, mit dem Unterschied, dass in der BITV zwei weitere Anforderungen enthalten sind. So müssen Informationen ebenfalls in Gebärdensprache und in leichter Sprache zur Verfügung stehen.

Die WCAG 2.0 basieren auf 4 Prinzipien:

1. Wahrnehmbar: Achten Sie darauf, Nicht-Text-Inhalte auch in Textform zur Verfügung zu stellen, sodass diese vom Nutzer, seinen Bedürfnissen entsprechend, umgewandelt werden kann in Großschrift, Braillen Symbole, weniger komplexe Sprache, etc. Denken Sie bei Videos daran, diese mit Untertiteln bereitzustellen. Geben Sie die Möglichkeit zur veränderbaren Darstellung, Skalierbarkeit der Schriftgröße etc.
2. Bedienbar: Sorgen Sie dafür, dass alle Funktionen ihrer Website auch ohne Maus, d.h. per Tastatur bedienbar sind. Geben Sie dem Nutzer außerdem genügend Zeit zum Ausfüllen von Online-Formularen etc. Meiden Sie eine zu aggressive Gestaltung mit blinkenden Elementen etc., da diese zu Anfällen führen kann.
3. Verständlich: Gestalten Sie Ihre Inhalte gut lesbar und verständlich. Das Textniveau sollte dem Inhalt entsprechen und zu lange Sätze sollten vermieden werden. Eine intuitive Navigation ist ebenfalls wichtig.
4. Robust: Robust steht hier für Kompatibilität. Die Inhalten sollten kompatibel mit Browsern und Hilfsmitteln sein, also auch für assistierende Techniken, sodass der Inhalt von einer Vielzahl an Geräten interpretiert werden kann.

Was bedeutet dies konkret:

• Trennung von Inhalt und Design: Verwenden Sie CSS Stylesheets
• Verwenden Sie die HTML-Tags <h1> bis <h6>, um Überschriften zu markieren, anstatt für Titel nur die Schriftgröße zu ändern. Span-Elemente werden von Screenreadern für Blinde beispielsweise als normaler Text interpretiert, was zu Verwirrung führen kann.
• Vermeiden Sie Tabellen: Assistierende Techniken haben oft Schwierigkeiten, diese darzustellen , oder interpretieren sie als normalen Text
• Relative Schriftgröße: Nutzen Sie zur Definierung der Schriftgröße keine absoluten Schriftgrößen in Pixel (px) sondern geben Sie diese in der Maßeinheit (em) an.
• Achten Sie auf genügenden Farbkontrast
• Denken Sie daran, den title-Tag für Links auszufüllen, damit der Nutzer weiß, wohin her gelangt, wenn er auf den Link klickt. Dies erleichtert die Navigation.
• Füllen Sie unbedingt die alt-Tags für Bilder aus, damit Menschen mit Sehbehinderung, die das Bild nicht wahrnehmen können, wissen, was auf dem Bild zu sehen ist. Alt-Tags kommen übrigens allen zu Gute, da es immer mal passieren kann, dass ein Bild nicht richtig angezeigt werden kann, oder nicht geladen wird. In dem Fall erscheint der alt-Tag für den Nutzer.

Barrierefreiheit und SEO

Eine barrierefreie Website kommt übrigens nicht nur den Nutzern zu Gute, sondern wirkt sich auch positiv auf das Google-Ranking aus, da barrierefrei erstellte Inhalte vom Suchmaschinen besser lesbar sind!