Barrierefreie Webseiten-Richtlinien: Die wichtigsten Standards für Websites & Online-Shops

Der European Accessibility Act gilt in der Europäischen Union seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen, darunter E-Commerce. Auch Schweizer Unternehmen können betroffen sein, wenn sie entsprechende Angebote im EU-Markt bereitstellen. Unabhängig von gesetzlichen Pflichten profitieren alle Menschen von zugänglichen Websites und Online-Shops. Dieser Beitrag erklärt wichtige Grundlagen der digitalen Barrierefreiheit.

Disclaimer: WCAG-Richtlinien als Basis

Die internationalen Web Content Accessibility Guidelines WCAG 2.2 sind ein anerkannter technischer Standard. Der European Accessibility Act ist eine rechtliche Regelung mit einem definierten Anwendungsbereich und möglichen Ausnahmen. Dieser Beitrag bietet einen Überblick, ersetzt aber keine rechtliche Prüfung. Wer eine barrierefreie Website umsetzen möchte, sollte konkrete WCAG-Erfolgskriterien und die gewünschte Konformitätsstufe festlegen.

1) Tastaturbedienbarkeit

Deine Website oder dein Shop sollte zwingend mit der Tastatur bedient werden können. Hauptsächlich sind dafür folgende Tasten relevant:

Tabulator: mit der Tab-Taste können NutzerInnen mit Beeinträchtigungen ohne Maus durch die Website navigieren.
Enter: Mit der Eingabe-Taste werden Links, Menü-Elemente oder Buttons angeklickt.
Leertaste: Mit der Space-Taste können Untermenüs oder Popups geöffnet werden.
Pfeile: Mit den Pfeiltasten kann durch eine Website gescrollt werden.

Wie kann die Tastaturbedienbarkeit überprüft werden?

Ganz einfach: Öffne deine Website und versuche diese zu bedienen, ohne die Maus zu verwenden. Achte auf die korrekte Reihenfolge der einzelnen Elemente.

2) HTML-Semantik

Der korrekte Aufbau der Website innerhalb der HTML-Struktur ist matchentscheidend für barrierefreie Websites. Denn: die HTML-Semantik liefert assistiven Technologien wie Screenreadern die Befehle, wie die einzelnen Elemente deiner Website gelesen werden sollen. Beispiele:

Überschriften: Überschriften sollten die Inhaltsstruktur logisch abbilden. Pro Seite ist eine klare Hauptüberschrift als h1 empfehlenswert. Darunter folgen h2, h3 und weitere Ebenen ohne willkürliche Sprünge.
Buttons und Links: Aktionen werden als button, Verweise als a umgesetzt. Der sichtbare Text muss den Zweck verständlich machen.
Listen und Navigation: Menüs und Listen werden mit den passenden HTML-Elementen ausgezeichnet. Navigationen erhalten ein nav Element und bei mehreren Navigationen eine verständliche Bezeichnung.
Header und Footer: Kopf- und Fusszeilen gehören in die semantischen Elemente header und footer.

Wie kann die HTML-Semantik überprüft werden?

Benutze am besten ein Chrome-Browser-Add-on wie WAVE. Dieses zeigt dir sofort Fehler in der HTML-Semantik an.

3) Tastatur-Fokus

Wenn deine Website oder dein Webshop mit der Tastatur bedient wird, ist ein sichtbarer Tastatur-Fokus Pflicht. Somit kann der Nutzer sofort erkennen, welches Element der Website aktuell im Fokus ist. Der Tastaturfokus kann für die einzelnen Elemente via CSS und der Pseudoklasse ::focus-visible programmiert werden.

Wie kann der Tastatur-Fokus überprüft werden?

Navigiere mit der Tabulator-Taste auf deiner Tastatur von Anfang bis Schluss durch deine Website. Achte darauf, dass alle Menüs, Links und Buttons einen Fokus haben, und somit gut erkennbar sind.

4) ARIA und aria-labels

ARIA-Elemente (Accessible Rich Internet Applications) verleihen Inhalten eine semantische Bedeutung, sodass Screenreader und andere assistive Hilfsmittel diese besser verstehen. ARIA-Rollen können verwendet werden, um Elemente zu beschreiben, die nicht nativ in HTML existieren oder zwar existieren, aber noch keine vollständige Browserunterstützung haben. Viele Content Management Systeme und Page Builder verwenden ARIA schon korrekt. Wichtige ARIA-Elemente haben wir hier zusammengefasst:

aria-label: Dieses Attribut kann einem Link oder Button einen verständlichen zugänglichen Namen geben, wenn der sichtbare Inhalt nicht ausreicht. Ein passendes Beispiel ist Mehr über Agenza erfahren. Ein aria-label sollte den sichtbaren Text nicht unnötig ersetzen.
aria-hidden: Mit aria-hidden=”true” werden rein dekorative oder redundante Elemente vor assistiven Technologien verborgen. Interaktive oder informative Inhalte dürfen damit nicht versteckt werden.
ARIA-Rollen: Rollen und Zustände ergänzen die Semantik bei komplexen Komponenten. Native HTML-Elemente sind zu bevorzugen, wenn sie den benötigten Zweck bereits erfüllen.

Eine komplette Übersicht über ARIA liefert dieser Guide.

Wie kann ARIA überprüft werden?

Mit dem WAVE Browser-Add-On können ARIA-Elemente überprüft werden. Allfällige Probleme werden sofort angezeigt und können somit behoben werden.

5) Alternativ-Texte für Bilder

Eines der bekanntesten Hilfsmittel für die Barrierefreiheit sind alt-Texte bei Bildern. Sie beschreiben den Zweck des Bildes, damit ein Screenreader diesen entsprechend vorlesen kann. Beispiel: Bild einer Familie auf dem Spielplatz.

Wichtig: Es macht nicht immer Sinn, Alternativ-Texte bei Bildern zu hinterlegen. Wenn das Bild nicht relevant ist, kann der alt-tag auch entfernt werden.

Wie können Alternative-Texte überprüft werden?

Der Accessibility-Checker von Google Page Speed Insights gibt dir sofort an, wenn Alternativtexte bei deinen Bildern fehlen.

6) Farbkontraste

Damit Personen mit Sehschwächen oder Farbfehlsichtigkeiten Inhalte gut erkennen können, sind ausreichende Farbkontraste entscheidend. WCAG 2.2 verlangt auf Stufe AA für normalen Text ein Kontrastverhältnis von mindestens 4,5:1. Für grossen Text gilt mindestens 3:1. Als grosser Text gelten ungefähr 24 Pixel bei normaler Schrift oder 18,5 Pixel bei fetter Schrift.

Wie können Farbkontraste überprüft werden?

Es gibt verschiedene Farbkontrast-Tester, mit denen du deine Farbkombinationen gemäss WCAG-Richtlinien überprüfen kannst.

7) Zoom

Deine Website sollte bis 400% zoombar sein, ohne dass Texte oder Elemente abgeschnitten werden, oder ein unschönes horizontales Scrollen entsteht.

Wie kann der Zoom überprüft werden?

Ganz einfach: Zoome deine Website im Browser auf 400%.

Zusammenfassung

Diese Punkte geben einen ersten Überblick über digitale Barrierefreiheit. Eine belastbare Prüfung berücksichtigt alle relevanten WCAG-2.2-Erfolgskriterien, echte Bedienabläufe und verschiedene assistive Technologien. Bei Fragen zu barrierefreien Websites und Online-Shops unterstützen wir dich gerne.