Komplettguide Barrierefreiheit

Was ist Barrierefreiheit?

Barrierefreiheit bei Websites heißt, dass auch Menschen mit Beeinträchtigungen eine Website verwenden können. Dafür sollte die Website mit technischen Hilfsmittel, die beeinträchtigte Menschen verwenden, kompatibel sein, für Menschen mit Sehbehinderungen, wie zum Beispiel Farbenblindheit, trotzdem verwendbar sein und auf Menschen für Hörbeeinträchtigungen Alternativen zu Audiomaterial bieten.

Was sind technische Hilfsmittel?

Wer sich bisher noch gar nicht mit dem Thema Hilfsmittel für beeinträchtige Menschen befasst hat, wird sich höchstwahrscheinlich gar nichts darunter vorstellen können. Was sind also diese Hilfsmittel konkret, und wie funktionieren diese?

Es gibt grundsätzlich zwei Kategorien von technischen Hilfsmitteln im digitalen Bereich.

1. Hilfsmittel für Menschen mit Sehbeeinträchtigungen. Hier kommen so genannte Screenreader am häufigsten zum Einsatz. Das ist eine Software, die den Inhalt des Bildschirms vorliest. So können auch blinde Menschen den Inhalt von deiner Website erfassen. Es gibt auch noch weitere Software, oder Softwareeinstellungen in dieser Kategorie, wie zum Beispiel die Möglichkeit Text im Browser größer darstellen zu lassen.

2. Hilfsmittel für Menschen mit Bewegungseinschränkungen. Gelähmte Personen, oder Personen, die sich nur teilweise bewegen können, verwenden eigens für sie gebaute Werkzeuge, Mausersätze, Tastaturen und Controller, mit denen sie den Computer steuern können. Die Geräte können dabei so verschieden und individuell sein, wie die Personen, die sie verwenden. Ich kann hier ein interessantes Dokument von Lifetool empfehlen. Unten stehend finden sie weitere Beispiele für diese Geräte findest du weiter unten.

‍

Warum Barrierefreiheit dir auch hilft.

Warum solltest du also darauf achten, dass deine Website barrierefrei ist? Das ganze Unterfangen erscheint manchmal etwas komplex und da ist die Frage berechtigt, ob es sich für einen lohnt das Ganze umzusetzen.

1. Du hilfst beeinträchtigten Menschen mehr am Leben teilzunehmen. Dazu kommt, dass Maßnahmen für Barrierefreiheit Websites auch für ältere Menschen leichter zugänglich machen. Das an sich ist schon mal toll. Du bekommst abgesehen davon noch zwei positive Nebeneffekte dazu. Du verbesserst dein Image, da du für mehr Inklusion sorgst und deiner sozialen Verantwortung als Unternehmer nachkommst. Und du erweiterst deine Zielgruppe.
2. Nachgehend besprochene Maßnahmen sorgen für alle Nutzer für eine höhere Nutzerfreundlichkeit und Performance.
3. Ebenfalls führen die Maßnahmen zu einer besseren Suchmaschinenoptimierung. Google und andere Suchmaschinen bevorzugen barrierefreie Websites und zeigen sie weiter oben in den Suchergebnissen an. Außerdem führt Barrierefreiheit auch dazu, dass die Suchmaschinen selbst den Inhalt der Website besser verstehen. So wird deine Website eher bei relevanten Suchergebnissen angezeigt.
4. Ab dem 28. Juni 2025 sind Unternehmen verpflichtet ihre Websites und Webshops barrierefrei anzubieten. Dementsprechend kommt auf viele eine rechtlich verankerte Pflicht hinzu. Mehr dazu unten im dazugehörigen Artikel

Rechtliche Grundlage

Wichtig 1: Ich bin kein Jurist. Nichts im folgenden Abschnitt ist eine rechtliche Beratung. Ich habe mich aber intensiv mit den Gesetzestexten auseinandergesetzt und das für mich Relevante zusammengefasst. Unten findest du die Quellen, auf die ich mich beziehe.

Wichtig 2: Das Gesetz umfasst einige Bereiche, die nichts mit Websites zu tun haben. Ich lasse diese aus.

Wichtig 3: Auch wenn die Grundlage eine EU-Verordnung ist und sich vor allem bei den technischen Anforderungen auf internationale Standards bezogen wird, gehe ich nur auf die österreichische Gesetzeslage ein.

‍

Die Gesetzesgrundlage bildet das BaFG das Barrierefreiheitsgesetz. Es wurde am 19. Juli 2023 beschlossen und ist ab dem 28. Juni 2025 aktiv.

Wen betrifft das Gesetz?

Hier kann ich direkt Entwarnung geben. Denn höchstwahrscheinlich fällst du gar nicht unter die Anforderungskriterien, um diesem Gesetz nachkommen zu müssen.

Das Gesetz betrifft im Dienstleistungssektor, alle Unternehmen, die die drei folgenden Punkte erfüllen.

1. Das Unternehmen betreibt eine Website, oder einen Webshop im Kontext von B2C-Geschäften (richtet sich also an Verbraucher). Oder das Unternehmen stellt E-Books und dafür verwendete Software bereit.
2. Das Unternehmen beschäftigt 10 oder mehr Angestellte.
3. Das Unternehmen erzielt einen Jahresumsatz von 2 Mio. Euro oder hat eine Jahresbilanzsumme von mehr als 2 Mio. Euro.

Welche Ansprüche werden an deine Website gestellt?

Die österreichische Wirtschaftskammer verweist bei dieser Frage auf ihre Website und ein eigenes Informationsblatt zum Thema Barrierefreiheit von Websites.

‍Basierend auf dem Referenzwerk WCAG 2.0 (Web Content Accessiblity Guidelines 2.0) werden in dem Informationsblatt 4 Prinzipien definiert, auf die man achten sollte bei seiner Website. Jede dieser Prinzipien hat wiederum Richtlinien. Insgesamt sind das folgende:

• Prinzip 1: Wahrnehmbarkeit
  • Richtlinie 1: Textalternativen - Für Bilder und Grafiken sollten beschreibende Textalternativen bereitgestellt werden.
  • Richtlinie 2: Zeitbasierte Medien - Für z.B. Videos oder Audios sollte eine Alternative, wie ein Transkript oder Untertitel zur Verfügung gestellt werden.
  • Richtlinie 3: Anpassbar - Hier geht es vor allem um die Struktur der Website. Was gemeint ist, ist dass der Inhalt zum Beispiel in einem simpleren Layout, ohne Farben, immer noch verständlich ist. Diese Anforderung geht vor allem auf Screenreader zurück, Software, die Sehbeeinträchtigte verwenden, um sich Websites vorlesen zu lassen. Diese  können nämlich nur den Text der Website lesen, aber nicht die Farben und das Layout erkennen.
  • Richtlinie 4: Unterscheidbar - Der Vorder- und Hintergrund sollen sich klar von einander unterscheiden lassen. Zum Beispiel durch einen hohen Kontrast.
• Prinzip 2: Bedienbarkeit - Die Website muss einfach bedienbar
  • Richtlinie 5: Per Tastatur bedienbar - Alle Funktionen und Bereiche der Website sollten nur per Tastatur verfügbar sein
  • Richtlinie 6: Ausreichend Zeit - Benutzer sollen genug Zeit haben den Inhalt zu lesen, ohne dass sie automatisch an andere Seiten weitergeleitet werden.
  • Richtlinie 7: Vorsorge für Anfälle - Inhalte sollen nicht zu epileptischen Anfällen führen (zum Beispiel bei mehr als 3 Blitzen pro Sekunde)
  • Richtlinie 8: Navigierbar - Sehr simpel-es geht darum die Website so einfach zu verwenden, wie nur möglich zu machen. Das heißt einfache Struktur, standardisierte Navigationsleiste, keine programmatischen Blocks und so weiter.
• Prinzip 3: Verständlichkeit
  • Richtlinie 9: Lesbar - Die Inhalte sollen lesbar, verständlich und ohne lange Wortkreationen sein.
  • Richtlinie 10: Vorhersehbar - Die Website sollte vorhersehbar sein. Das heißt es sollen z.B. keine automatisch aufgehenden Fenster da sein.
  • Richtlinie 11: Hilfestellung bei der Eingabe - Einfaches Feedback, wenn der Nutzer etwas falsch macht. Das beste Beispiel ist, wenn man sich auf einer Website einloggt und eine Fehlermeldung bekommt, dass das Passwort falsch ist. Es geht aber auch um Beschreibungen, was der Nutzer gerade machen muss.
• Prinzip 4: Robustheit
  • Richtlinie 12: Kompatibilität - Die Website soll mit so vielen Geräten und Assistenzsystemen kompatibel sein.

Bewertung

All diese Richtlinien haben noch Unterpunkte, so genannte Erfolgskriterien. Je nachdem wie gut man diese erfüllt kann man eine Bewertung der Website vornehmen. Es gibt folgende Stufen:

Stufe 1: A - 25 Erfolgskriterien wurden erfüllt.

Stufe 2: AA - Alle Kriterien von Stufe 1 + 13 Erfolgskriterien wurden erfüllt.

Stufe 3: AAA - Alle Kriterien von Stufe 2 + 23 Erfolgskriterien wurden erfüllt. Bestmögliche Barrierefreiheit.

Laut dem Dokument der Wirtschaftskammer verlangt das Gesetz eine Barrierefreiheit von Stufe 2, damit die Website als barrierefrei gesehen wird.

Wer sich zu dem Thema Bewertung und Erfolgskriterien noch genauer einlesen möchte, kann das hier auf der offiziellen WCAG Seite machen.

Quelle

https://www.wko.at/ce-kennzeichnung-normen/informationen-zum-barrierefreiheitsgesetz#heading_das_gesetz_umfasst_folgende_massnahmen

https://www.wko.at/oe/tourismus-freizeitwirtschaft/barrierefreiheit-websites-und-dokumente.pdf

https://ris.bka.gv.at/Dokumente/BgblAuth/BGBLA_2023_I_76/BGBLA_2023_I_76.html

https://www.w3.org/TR/WCAG20/#content-structure-separation

‍

‍

Barrierefreiheit garantieren - Qualität optimieren

Wenn du bis hierher gelesen hast, siehst du, dass das Thema Barrierefreiheit doch kompliziert werden kann. Deshalb hier mein Prozess, den ich jedes Mal durchlaufe, wenn ich Websites gestalte.

Schritt 1: Farben festlegen UND TESTEN

Bevor ich überhaupt anfange mit der Website lege ich meine Farben fest und teste diese. Dabei teste ich hauptsächlich zwei Dinge:

Farbenblindheit

Hierbei geht es darum zu checken, ob Farben auch für Menschen mit Farbenblindheit unterscheidbar sind. Wenn zwei Farben nicht unterscheidbar sind, verwende ich diese entweder nicht, oder behalte im Hinterkopf, dass ich diese nicht als Vorder- und Hintergrund beim selben Element verwende.

Der Test, den ich verwende ist der von Coolors. Dieser ist kostenfrei.

Kontrast

Bei diesem Test geht es um den Kontrast zwischen zwei Farben. Dieser wird in einem Verhältnis wie: 7:1 angegeben und der Unterschied zwischen den zwei Zahlen soll möglichst hoch sein. Der Kontrast zwischen dem tiefsten Schwarz (#000000) und dem hellsten Weiß (#ffffff) ist zum Beispiel 21:1, also der höchstmögliche Kontrast zwischen den Farben. Im Gegensatz dazu ist der niedrigste Kontrast (also zum Beispiel zwischen Weiß und Weiß) 1:1.

Für ein WCAG 2.0 AA Rating muss ein Verhältnis von mindestens 4.5:1 erreicht werden. Alles darunter ist nicht akzeptabel. Empfohlen wird ein Kontrast von 7:1.

Hier gilt auch, wenn zwei Farben keinen hohen Kontrast haben, kann man diese trotzdem in der selben Website verwenden, nur nicht als Vorder- und Hintergrund.

Als Tool zum Berechnen der Farben verwende ich Webaim. Dieser ist ebenfalls kostenfrei.

Mehr Infos zu Kontrasten im Bezug auf WCAG 2.0 AA gibt es hier:

Contrast (Minimum)

Contrast (Maximum)

Non-Text Contrast

Schritt 2: Schriften festlegen

Hier kann man im Bezug auf Accessability nicht viel falsch machen. Befolge einfach folgende Empfehlungen:

Nicht abheben - Lesbarkeit ist besser als Style. Das heißt bleib lieber bei klar lesbaren und seriösen Schriftarten. Ich empfehle immer Schriftarten wie "Roboto", "Montserrat", "Raleway", "Poppins".

16px ist ein guter Startpunkt für deinen normalen Text. Das ist nur eine Richtlinie und du kannst davon abweichen.

Verwende wiederkehrende Schriftgrößen und Styles. Es sollen auf gut deutsch nicht 25 unterschiedliche Schriftgrößen und Schriftartkombinationen verfügbar sein.

Verwende relative Einheiten, wie "em", "rem" und "%" anstatt von fixen Maßeinheiten als Pixel. Dadurch stellst du sicher, dass dein Websitetext überall gleich groß angezeigt wird.

Schritt 3: Struktur

Sorge dafür, dass deine Struktur und Inhalte einfach verständlich und strukturiert sind. Wenn du dir unsicher bist, frage Freunde und Familie, ob sie nochmal drüber lesen können und verstehen, was du sagen möchtest.

Wenn du Grafiken einbindest, versehe diese immer mit einem alt-Text. Dieser Alternativtext sollte das Bild möglichst gut beschreiben und sorgt dafür dass Nutzer von Screenreadern das Bild genauso verstehen. Außerdem ist das gut fürs SEO.

Überlege, ob du bei Video- und Audiomaterial Transkripte oder Untertitel hinterlegen kannst.

Schritt 4: Responsiveness und Kompatibilität

Designe deine Website so, dass sie für alle Geräte verwendbar (responsiv) ist. Ich verwende immer 4 Breakpoints. Das heißt ich gestalte die Website immer für 4 Gerätetypen: Desktop, Tablet, Handy (wenn man es horizontal hält) und Handy (wenn man es vertikal hält).

Das ist meiner Meinung nach der wichtigste Schritt. Heutzutage ist es unerlässlich, dass deine Website überall funktioniert. Über 60% der Nutzer besuchen deine Website mit Mobilgeräten. Suchmaschinen bevorzugen responsive Websites immens. Und es ist unfassbar wichtig im Bereich Barrierefreiheit.

In diesem Kontext muss man auch das Thema Kompatibilität erwähnen. Manche Funktionen deiner Website könnten eventuell nicht funktionieren, weil sie entweder zu alt oder zu neu für die meisten Browser sind. Manche Browser deaktivieren auch ganze Funktionen aus Sicherheitsgründen. Lösungsansätze:

Wichtige Funktionen nicht komplett von JavaScript abhängig machen (wenn möglich).

Alternativen zu komplexen Animationen oder Funktionen anbieten.  Das Ziel sollte sein, dass deine Website auch JavaScript und aufwendige CSS Animationen funktioniert.

Nicht alle Browser unterstützen die selben Funktionen. W3Schools haben eine nützliche Ressource hier verlinkt. Du solltest auch, wo vorhanden Browser Prefixes, wie "-moz-transition" im CSS verwenden, um maximale Kompatibilität zu garantieren.

Schritt 5: Testen Testen Testen

Wenn alles im Grunde fertig ist, geht es ans Testen. Mein Prozess sieht folgendermaßen aus:

Testen auf mehreren Geräten und Betriebssystemen. Wichtig: Teste auf allen Breakpoints und vor allem auf Apple-Geräten (die haben manchmal ihre Eigenheiten). Nutze Emulatoren (Software, die unterschiedliche Geräte simulieren können). Diese sind in allen modernen Browsern eingebaut.

CMS-Systeme, wie Webflow haben eigene interne Auditsysteme. Nutze diese, wenn du kannst.

Überprüfe, ob alle Bilder und Fotos einen Alternativtext haben.

Es gibt eine Vielzahl von Tools zum Testen deiner Website. Nachstehend findest du die, die ich verwende. Alle sind komplett kostenlos

Arbeite meine Checkliste (siehe unten) durch.

‍

‍

Hilfreiche Tools Zum Testen von Barrierefreiheit

WAVE - Web Accessibility Evaluation Tool

WAVE ist eine Sammlung von Werkzeugen, die dir direktes Feedback zu deiner Website geben kann. Dazu gibst rufst du einfach deren offizielle Website auf und fügst den Link zu deiner Website ein.

Danach erhältst du alle Empfehlungen und Fehler, die gefunden wurden, kategorisiert nach Wichtigkeit und Schwere des Fehlers. Du bekommst auch wichtige Rückmeldungen und Tipps, was du verbessern musst. Ein ziemlicher Allrounder also und mein Startpunkt beim Testing.

NVDA Screenreader

Der NVDA (Non Visual Desktop Access) Screenreader ist einer der bekanntesten open source Screenreader. Er ist absolut kostenlos und sehr gut zum Testen deiner Website, um zu sehen, wie sich diese bei Screenreadern verhält.

Google Lighthouse

Google Lighthouse ist ein Open-Source-Tool von Google, das zur Analyse und Optimierung von Webanwendungen und Websites verwendet wird. Es führt automatisierte Checks und Bewertungen deiner Website durch, um die Leistung, Barrierefreiheit, SEO und Best Practices einer Webseite zu bewerten. Es ist kostenlos und sehr hilfreich. Du findest es unter anderem in den Chrome Dev Tools.

Du findest diese Einstellung mit: Rechtsklick -> Untersuchen -> Auf die zwei Pfeile nach rechts klicken -> Lighthouse -> Analyze Page Load

‍

Chrome DevTools

Die Dev Tools von Chrome sind Werkzeuge für die Webentwicklung und Analyse von Websites. Es hat viele unterschiedliche Anwendungsgebiete, aber hier möchte ich explizit auf eine Funktion eingehen. Nämlich der Möglichkeit Farbenblindheit und Sehschwäche auf der Website zu simulieren.

Du findest diese Einstellung mit: Rechtsklick -> Untersuchen -> Auf die drei Punkte rechts oben klicken -> More Tools -> Rendering -> Emulate Visual Deficiencies

‍

Checkliste

Ich habe zu dem Blogeintrag auch ein E-Book zum Download. Darin enthalten ist eine Checkliste für deine Website. Du kannst es unten downloaden.

‍

Zusammenfassung

Was ist Barrierefreiheit?

Barrierefreiheit auf Websites bedeutet, dass diese auch von Menschen mit Beeinträchtigungen genutzt werden können. Das umfasst Kompatibilität mit Hilfsmitteln wie Screenreadern für Sehbeeinträchtigte und Alternativen zu Audioinhalten für Hörbeeinträchtigte.

Es gibt zwei Hauptkategorien von Hilfsmitteln: Screenreader und Vergrößerungsoptionen für Menschen mit Sehbeeinträchtigungen sowie spezielle Eingabegeräte für Menschen mit Bewegungseinschränkungen.

Wie Barrierefreiheit auch dir hilft:

Sie fördert Inklusion und macht Websites auch für ältere Menschen zugänglich.

Sie steigert die Nutzerfreundlichkeit und Performance für alle.

Barrierefreiheit verbessert die Suchmaschinenoptimierung.

Ab 28. Juni 2025 sind barrierefreie Websites gesetzlich vorgeschrieben.

Rechtliche Grundlage:

Das österreichische Barrierefreiheitsgesetz (BaFG) verpflichtet ab dem 28. Juni 2025 bestimmte Unternehmen zur Barrierefreiheit. Unternehmen im Dienstleistungssektor fallen nur darunter, wenn sie die folgenden Punkte erfüllen.

Sie betreiben eine Website oder einen Webshop für B2C-Geschäfte oder stellen E-Books bzw. zugehörige Software bereit.

Sie haben 10 oder mehr Angestellte.

Sie erzielen einen Jahresumsatz von mindestens 2 Mio. Euro oder eine Jahresbilanzsumme von mehr als 2 Mio. Euro.

Für kleinere Unternehmen gibt es also meist keine gesetzliche Verpflichtung zur Barrierefreiheit.

Ansprüche an deine Website

Es gibt vier Prinzipien, basierend auf den WCAG 2.0 (Web Content Accessibility Guidelines), die deine Website erfüllen sollte:

Wahrnehmbarkeit: Inhalte sollen für alle Nutzer sichtbar und verständlich sein, einschließlich Alternativtexte und gutem Kontrast.

Bedienbarkeit: Die Website soll einfach und ohne Maus nutzbar sein, ohne automatische Weiterleitungen und ohne Inhalte, die Anfälle auslösen könnten.

Verständlichkeit: Die Inhalte sollen leicht verständlich, vorhersagbar und mit Eingabehilfen versehen sein.

Robustheit: Die Website muss auf verschiedenen Geräten und mit Assistenzsystemen funktionieren.

Mein Prozess für Barrierefreiheit ist:

Farben testen: Farbenblindheit und Kontrast prüfen.

Lesbare Schriften: Klare Schriftarten und relative Einheiten verwenden.

Klare Struktur: Alt-Texte für Bilder und Transkripte für Medien nutzen.

Responsive und kompatibel: Für verschiedene Geräte und Browser optimieren.

Gründlich testen: Auf mehreren Geräten prüfen und Checkliste durchgehen.

‍

‍

‍

Download

Hier kannst du das komplette Handbuch mit Checkliste downloaden.