Digitale Barrierefreiheit: Besteht eure Website den Check?

Der Begriff der Barrierefreiheit ist auch im Kontext des Internets schon länger ein Thema. Aber mal Hand aufs Herz: Für die meisten User, aber auch Web-Entwickler und Designer hat er bisher keine wirkliche Bedeutung. Dabei werden barrierefreie Anwendungen immer wichtiger und sinnvoller. Vermutlich fällt jedem, der einmal kurz darüber nachdenkt, eine Person aus dem Umfeld ein, der eine barrierefreie Website oder App helfen würde.

[.c-text-green-bg]Öffentliche Stellen sind seit 2021 sogar verpflichtet[.c-text-green-bg], ihre Websites und Apps barrierefrei zu gestalten. Dies wird geregelt durch die Normen EN 301 549 sowie BITV 2.0.

An wen richten sich barrierefreie Websites?

Barrierefreie Anwendungen sind gemacht für eine Vielzahl an Menschen: Personen mit kognitiven Einschränkungen, mit eingeschränktem Gehör oder Sehvermögen oder mit eingeschränkten motorischen Fähigkeiten. Der demographische Wandel lässt grüßen: Geht man davon aus, dass Menschen über 65 Jahren weniger gut sehen und die schlechter die Maus bedienen können, so sind wir schon bei 20% der deutschen Bevölkerung. Die Zielgruppe ist also weitaus größer, als man vermuten könnte.

Folgende Arten der Beeinträchtigung sollten beachtet werden:

• Eingeschränkte Sehkraft: Rot-Grün-Schwäche, verletztes oder entzündetes Auge, Blindheit, Sehschwäche (schwach bis stark), Weitsichtigkeit
• Eingeschränktes Hören: Taubheit oder eingeschränkte Hörkraft
• Motorische Einschränkung: fehlende, schmerzende oder verletzte Körperteile wie z.B. die Hand

‍

Exkurs: Wie funktionieren Websites für blinde Personen?

Können Blinde und Menschen mit geringer Sehkraft überhaupt Websites nutzen? Mithilfe bestimmter Tools ist das möglich. Zum einen gibt es Screenreader, das sind Programme, die Inhalte in Sprachausgabe umwandeln. Bei der Eingabe kann eine sogenannte Braillezeile verwendet werden. Das kleine Gerät lässt sich an den Computer anschließen. Über kleine Stifte wird damit haptische Braille-Schrift abgebildet, die sich wiederum mit den Händen "lesen" lässt.

Was zeichnet eine barrierefreie Website aus?

Welche Faktoren erfüllt sein müssen, um als barrierefreie Website zu gelten, definiert ein internationaler Standard namens WCAG (Web Content Accessibility Guidelines). Damit ihr diesen Katalog nicht durcharbeiten müsst, listen wir euch hier ein paar handfeste und relativ einfach umzusetzende Punkte auf. Vielleicht könnt ihr den ein oder anderen direkt umsetzen?

Tipp 1: Alt-Texte

Jedes Bild im Internet kann mit einem Alternativtext ausgestattet werden, kurz Alt-Text. Das ist eine kurze Beschreibung, die in Textform erklärt, was das Bild zeigt. Wichtig ist das für Personen, die auf Sprachausgabe zurückgreifen: Bildschirmleseprogramme können über Sprache den Inhalt von Websites vermitteln, doch Bilder und Grafiken stellen eine Herausforderung dar. Hier kommen die Alt-Texte ins Spiel: Die Sprachausgabe greift hier auf die Beschreibung im Alt-Text zurück. Umso verständlicher dieser formuliert ist, umso besser finden sich seheingeschränkte Personen zurecht.

Tipp 2: Bedienbarkeit mit der Tastatur

Für Menschen mit eingeschränkter Motorik kann die Tastatur ein wichtiges Hilfsmittel darstellen. Wer Probleme hat, die Maus zu bedienen, kann sich bei barrierefreien Websites mithilfe der Tabulator-Taste durch die Seite navigieren. Natürlich müssen Schaltflächen dementsprechend codiert sein.

Tipp 3: Große Schaltflächen

Gerade auf kleineren Devices begegnen uns im Web öfter Websites mit zu kleinen Schaltflächen. Gerade in Formularen ist es schwierig, die gewünschte Option anzuwählen, wenn die Abstände zwischen den Schaltflächen zu klein sind.

Tipp 4: Lesbarkeit optimieren

Eigentlich selbsterklärend: Schriften sollten sich mit hohem Kontrast von ihrer Hintergrundfarbe absetzen. Zu kleine Schrift wird zum Problem für seheingeschränkte oder ältere Personen. Bei der Font-Auswahl sollte man bedenken, dass Menschen mit Leseschwäche oder seheingeschränkte Personen von einer gut lesbaren, klaren Typografie profitieren. Texte sollten nur im Notfall auf Bildern platziert werden. Auch hilfreich ist, Fließtext-Spalten nicht zu breit zu gestalten, um einen angenehmen Lesefluss zu ermöglichen.

Tipp 5: Semantisch sinnvolle Strukturen

Websites sind aufgebaut aus Struktur-Elementen. So gibt es einen Block, der die Navigation definiert und einen für den Seiten-Content. In diesem Block wiederum werden Headlines, Fließtexte, Bilder oder Tabellen erstellt. Es ist wichtig, diese Strukturen semantisch zu kennzeichnen und nicht einfach per CSS optisch erkenntlich zu machen. Nur so können Screenreader den Inhalt Menschen mit Sehbehinderung logisch korrekt vorlesen.

Was Barrierefreiheit mit SEO zu tun hat

Wer sich schon einmal mit SEO (Suchmaschinenoptimierung) beschäftigt hat, dem werden einige der genannten Punkte bekannt vorkommen: Beispielsweise belohnt auch Google eine semantisch sinnvoll aufgebaute Website oder die Nutzung von Alt-Texten mit einer guten Platzierung in den Suchergebnissen. Diese Tipps umzusetzen, lohnt sich also doppelt.

Barrierefreies Webdesign umsetzen

Ihr sucht einen Dienstleister, der Eure Website auf den neuesten Stand in punkto Barrierefreiheit bringt? Kontaktiert uns einfach, wir beraten Euch gerne.