In einer digitalisierten Welt, in der das Internet ein integraler Bestandteil unseres Alltags ist, ist es von entscheidender Bedeutung, dass alle Menschen Zugang zu Online-Inhalten haben. Unabhängig von ihren individuellen Fähigkeiten und Einschränkungen.

In diesem Blogbeitrag zeigen wir auf, was Barrierefreiheit im Internet bedeutet und stellen praktische Tipps vor, um Webseiten zugänglich zu gestalten.

Was bedeutet Accessbility und Barrierefreiheit?

Beim Thema «Accessibility» oder auf Deutsch «Barrierefreiheit» geht es darum, Produkte oder Anwendungen auch für Personen mit Einschränkungen nutzbar zu machen. Einschränkungen können sowohl permanent sein (z.B. angeborene, alters- oder unfallbedingte Einschränkungen) oder temporär (z.B. durch akute Krankheit oder störende Umgebung).

Zudem kann unterschieden werden, welche Sinne, bzw. Fähigkeiten von der Einschränkung betroffen sind:

Gute Gründe für Accessibility

Du fragst dich, ob Barrierefreiheit überhaupt relevant ist für dein Projekt? Oder du suchst nach Argumenten, um das Thema deinen Arbeitskolleg:innen näherzubringen? Hier einige Argumente:

Viele Menschen sind betroffen

Gemäss Schätzungen der der Weltgesundheitsorganisation leben weltweit 1,3 Milliarden Menschen mit Behinderung, was ca. 16% der Bevölkerung entspricht. (Quelle: WHO). In der Schweiz sind sogar etwa 20% der Bevölkerung (ca. 1.7 Millionen Menschen). (Quelle: Bundesamt für Statistik)

Neben diesen permanenten Behinderungen gibt es, wie oben erwähnt, auch temporäre und situationsbedingte Einschränkungen. Dadurch können noch mehr Menschen von barrierefreien Webseiten profitieren, als in der Behinderten-Statistik ausgewiesen sind. Wer also möglichst viele Menschen erreichen möchte, tut gut daran, sich mit Barrierefreiheit zu beschäftigen.

Rechtliche Anforderungen

Seit 2008 gibt es die UN-Behindertenrechtskonventionen, denen die Schweiz 2014 beigetreten ist. Die Schweiz verpflichtet sich damit zu einer inklusiven Gesellschaft. Im Accessibility Standard (V3.0) der Schweiz werden die Accessibility-Richtlinien für Webseiten definiert. Verpflichtend sind diese Richtlinien im Moment nur für das Gemeinwesen, wie z.B. Behörden und Ämter. Die Umsetzung der Richtlinien kann mittels Klage eingefordert werden. Auch die EU hat seit 2018 Accessibility-Richtlinien, welche die Barrierefreiheit von wichtigen Produkten und Services erfordert.

Inklusion & Corporate Social Responsibility (CSR)

Auf Basis von Wertvorstellungen wie sozialer Gerechtigkeit kann man argumentieren, dass es ethisch korrekt ist, nach Inklusion von allen Menschen zu streben. Viele Unternehmen haben dies erkannt und «Coporate Social Responsibility (CSR)» oder «Diversität & Inklusion» Programme entwickelt. Wer sich als Organisation zu diesen Werten bekennt, wird konsequenterweise auch bei der Entwicklung von Produkten und Webauftritten auf Barrierefreiheit achten.

Auffindbarkeit von Suchmaschinen (SEO)

Ein zusätzlicher Vorteil von der Einhaltung von Accessibility-Standards im Web, ist die bessere Auffindbarkeit von Suchmaschinen (SEO = Search Engine Optimization). Suchmaschinen verwenden die gleichen Meta-Informationen um Inhalte zu “interpretieren”, die auch für Screenreader relevant sind.

Einschränkungen im Alltag

Um zu verdeutlichen, wie verschiedene Einschränkungen den Alltag beeinflussen, stellen wir euch drei fiktive Personen vor. Diese Geschichten zeigen die Bandbreite der Herausforderungen, mit denen Menschen mit Einschränkungen im Internet konfrontiert sind.

Blinder Mann mit dunkler Brille liest ein Buch

Markus ist 28 Jahre alt und seit seiner Geburt blind. Er arbeitet als Journalist und braucht das Internet häufig für Recherchen. Dafür verwendet er eine Screenreader-Software, die ihm die Texte vorliest. Markus hat auf vielen Webseiten Mühe, die gesuchten Informationen zu finden und mit der Seite zu interagieren. Er wünscht sich, dass Webinhalte sinnvoll strukturiert sind und mit semantischen Informationen versehen werden. PDF’s machen ihm besonders zu schaffen, da diese häufig nicht für Screenreader optimiert sind.

Anna ist 81 Jahre alt, verwitwet, lebt alleine und hat 2 Enkelkinder. Anna nutzt das Internet regelmässig um Nachrichten zu lesen, Videos zu schauen, Ausflüge zu planen und sie bestellt auch ab und zu Geschenke über das Internet. Sie hat keine Behinderung im engeren Sinn, jedoch hat sie mit altersbedingten Einschränkungen zu kämpfen. Sie sieht nicht mehr so gut, sie vergisst Dinge schneller und ist nicht mehr so geschickt mit den Händen. Für Anna sind Webseiten mit kleiner Schrift oder geringen Kontrasten sehr schwer zu lesen. Vor allem überladene Webseiten und komplizierte Bestellprozesse machen ihr zu schaffen.

Alex ist 43 Jahre alt, als Jurist tätig und farbenblind. Er nutzt das Internet beruflich und privat intensiv für Recherchen und sieht sich Statistiken an. Er hat Schwierigkeiten, wenn Informationen ausschliesslich durch Farben vermittelt werden. Er betont die Notwendigkeit, Farben mit anderen visuellen Elementen wie Symbolen oder Text zu kombinieren, um eine klare Kommunikation für Menschen mit Farbsehstörungen zu gewährleisten.

Tipps zur Verbesserung der Barrierefreiheit im Internet

Wer bei einem Neu- oder Redesign-Projekt einer Webseite das Thema Accessibility bereits von Anfang einplant, kann späteren Anpassungsaufwand sparen. Aber auch bei bestehenden Webseiten gibt es noch sinnvolle Optimierungsmöglichkeiten.

Hier findest du die wichtigsten Merkpunkte und Tipps, wie du eine Webseite bezüglich Accsessibility fit machen kannst. Neben einigen grundsätzlichen Hinweisen, gibt es

Tipps für Software-Entwickelnde und Webmaster, die sich auf die Struktur der Webseite beziehen
Tipps für Content Manager:innen, die sich auf die Inhalte beziehen

Grundsätzliche Hinweise

Barrierefreiheit durch nutzerzentrierte Entwicklung

Menschen mit Einschränkungen leiden meist besonders unter einer schlechten Usability (=Nutzungsfreundlichkeit). Umgekehrt profitieren alle Nutzenden von einer guten Usability. Darum lohnt es umso mehr, bei der Konzeption oder Überarbeitung einer Webseite darauf zu achten. Um eine gute Usability und User Experience sicherzustellen, hilft ein nutzerzentriertes Vorgehen bei der Erstellung oder dem Redesign.

Lesbarkeit von Texten

Damit Texte gut lesbar sind - insbesondere für ältere Menschen oder Personen mit Sehschwäche - braucht es genügend Kontrast zwischen Text und Hintergrund. Wie findet man heraus, wieviel Kontrast genügt? Dafür gibt es Hilfsmittel wie z.B. den Colour Contrast Analyzer oder die Chrome Extension. Dieses Tool hilft, passende Farbkombinationen mit genügend Kontrast zu finden.

Webseite mit Color Contrast Analyzer — Beispiel einer Webseite, die mit dem “Color Contrast Analyzer” Tool auf genügend Farbkontrast geprüft wird.

Die Lesbarkeit von Texten wird zudem von einer genügend grossen Schriftgrösse begünstigt. Das World Wide Web Consortium W3.org empfiehlt für Fliesstext eine Grösse von mindestens 16px = 12 pt = 1em. Es sollten jedoch relative statt fixe Schriftgrössen verwendet werden (das heisst: em statt px), damit Menschen mit Sehschwächen die Schriftgrössen individuell vergrössern können.

Tipps für Entwickler & Webmaster

Screenreader-Lesbarkeit

Damit eine blinde Person eine Webseite verstehen kann, verwendet sie Screenreader-Software, welche die Inhalte vorliest. (z.B. NVA Access oder auf vielen Apple-Geräten sind diese standardmässig vorhanden). Damit die Inhalte richtig interpretiert werden können, braucht der Screenreader Hinweise zur Struktur und Semantik, welche über HTML-Tags vermittelt werden:

Beispiel HTML Tags — Beispiel eines Webseiten-Ausschnitts (oben) und der dazugehörige HTML-Code (unten) mit den H1 und H2 Titel Tags markiert.

Für interaktive Elemente - wie z.B. Overlays und Widgets - verwenden Webseiten häufig Javascript-Elemente, die für Screenreader schwierig erfassbar sein können. Die ARIA (Accessible Rich Internet Application) Richtlinien beschreiben, wie die Semantik der Barrierefreiheit auf gängige Designpatterns und Widgets angewendet werden kann.

Tastaturbedienbarkeit

Menschen mit motorischen Einschränkungen und Sehbehinderte verwenden zum Navigieren oft die Tastatur statt eine Computermaus. Mittels der Tab-Taste wird das jeweils nächste interaktive Element angewählt. Um die Navigation mit der Tastatur zu erleichtern, sind zwei Punkte zu beachten:

Sprunglinks werden an den Anfang einer Webseite gesetzt, um direkt zu bestimmten Seiteninhalten zu gelangen und z.B. die Navigation zu überspringen.

Die Markierung aktiver Elemente hilft (für Sehende) schnell zu erkennen, welches Element mit der Tastatur gerade ausgewählt ist. Dies kann man z.B. mit einem Rahmen kennzeichnen.

Beispiel stadt-zürich.ch für gute Tastaturbedienbarkeit — Beispiel für gute Tastaturbedienbarkeit (stadt-zürich.ch): Sprunglink zum Inhalt (oben) und visuelle Markierung des ausgewählten Elementes (unten)

Tipps für Content Manager

Leicht verständliche Texte

Die Verwendung der sogenannten «leichten Sprache» ist insbesondere für Menschen mit kognitiven Behinderungen und «Nicht-Muttersprachler» hilfreich. Eine verständliche Sprache kommt schlussendlich allen Lesenden zugute. Die leichte Sprache verwendet möglichst kurze Sätze und vermeidet komplizierte, lange Wörter.

Der “LIX-Index” berechnet, wie komplex ein Text ist. Es gibt auch hier Tools, die helfen, einen bestehenden Text zu analysieren und zu verbessern, z.B. von Supertext oder Psychometrica.

Die Sache mit den PDFs

Standard PDF-Dateien können von den üblichen Screenreadern nicht vorgelesen werden und sind daher für Blinde nicht zugänglich. Wenn eine Webseite viele PDFs enthält, gibt es zwei Möglichkeiten, um die Barrierefreiheit zu verbessern. Erstens, die Umwandlung der PDF-Inhalte in eine HTML-Seite. Falls dies nicht möglich ist, können die PDFs auch strukturell optimiert und in ein «barrierefreies PDF» umgewandelt werden. Zur Prüfung gibt es den PDF-Accessibility-Checker und mehr Details zum Thema PDF’s gibt’s bei der Stiftung Zugang für alle.

Einsatz von Farben

Farben können auf Webseiten nicht nur für Branding und Verschönerung verwendet werden, sondern auch um Informationen hervorzuheben oder zu gruppieren. Allerdings ist darauf zu achten, Farben nicht als alleiniges Unterscheidungsmerkmal zu verwenden, sonst können für Farbenblinde wichtige Informationen verloren gehen. Indem man zusätzlich mit Kontrasten (Hell-Dunkel), Formen, Icons oder Texthinweise als Unterscheidungsmerkmale arbeitet, kann man dem Abhilfe schaffen.

Die am häufigsten verbreitete Art der Farbenblindheit ist übrigens die Rot-Grün Sehschwäche, von der ca. 9% der Männer (und 0.5% der Frauen) betroffen sind. (Quelle: Wikipedia)

Mit dem Color Oracle Tool kann eine Farbenblindheit simuliert und geprüft werden, ob die Inhalte immer noch verständlich sind.

Zwei Bilder einer Ampel: links Ansicht ohne Sehbehinderung, rechts Ansicht wie mit Rot-Grün-Sehschwäche — Vergleich ohne und mit Rot-Grün-Sehschwäche. Links: Ansicht ohne Sehbehinderung, rechts: Ansicht wie mit Rot-Grün-Sehschwäche (Foto von pexels, Version rechts erstellt mittels Color Oracle Tool)

Bilder und Videos

Um die Inhalte von Bildern zu verstehen, sind Blinde darauf angewiesen dass diese in Textform beschrieben werden. So kann ein Screenreader diese vorlesen. Diese Bild-Beschreibungen sind im Normalfall nicht notwendig und daher “versteckt” in den Metadaten des Bildes, konktret im sogenannten Alt-Text. Die Verwendung von Alt-Texten kommt (wie weiter oben bereits erwähnt) auch der Auffindbarkeit in Suchmaschinen zugute.

Beim Einsatz von Videos mit Ton ist auf Verwendung von Untertiteln für Gehörlose zu achten.

Wo beginnen?

Vielleicht fragst du dich, wo du überhaupt anfangen sollst, deine Webseite bezüglich Barrierefreiheit zu verbessern.

Starte dafür am besten mit einer Analyse und identifiziere, wo aktuell die grössten Schwachstellen sind. Dabei kann zum Beispiel auch die WAVE Browser Extension helfen.

Darauf basierend kannst du Verbesserungsmassnahmen definieren und diese nach Aufwand und Wirkung bewerten. Dann starte mit den Massnahmen mit der grössten Wirkung und dem geringsten Aufwand.

Wenn du Unterstützung dabei suchst, helfen wir dir gerne weiter. Zusammen mit den Expert:innen der Stiftung Zugang für alle bringen wir deine Webseite bezüglich Usability und Accessibility auf Vordermann.

Quellen & weiterführende Ressourcen

Möchtest du deine Webseite bezüglich Barrierefreiheit und Usability verbessern? Wir unterstützen dich gerne!

Kontakt aufnehmen

Web-Accessibility: Tipps für barrierefreie Webseiten

Was bedeutet Accessbility und Barrierefreiheit?