WCAG in der Praxis: Barrierefreiheit auf deiner Website

WCAG

Kontraste

Umsetzung

Die WCAG-Richtlinien (Web Content Accessibility Guidelines) sind internationale Standards, damit Websites und Apps barrierefrei für alle Menschen sind: auch mit visuellen, auditiven, motorischen oder kognitiven Einschränkungen (dauerhaft oder situativ).

Weltweit betrifft das über 1 Milliarde Menschen (ca. 15% der Weltbevölkerung).
In der Schweiz leben rund 1,8 Millionen Menschen mit einer anerkannten Behinderung. Dazu kommen viele weitere mit alters- oder situationsbedingten Einschränkungen.

Barrierefreiheit bedeutet also nicht «Randgruppe», es betrifft einen grossen Teil unserer Nutzenden. Wir zeigen dir, was hinter den Richtlinien steckt und wie wir Barrierefreiheit technisch in deiner Website umsetzen.

Zuletzt aktualisiert: 31. Juli 2026

Darum gehts

Das wichtigste in Kürze

Was ist Barrierefreiheit?

Barrierefreiheit (Accessibility) bedeutet, dass eine Website von möglichst allen Menschen genutzt werden kann, unabhängig von Einschränkungen. Die WCAG-Richtlinien sind dabei der international anerkannte Standard.

Die 4 WCAG-Prinzipien

Wahrnehmbar (Perceivable)
Bedienbar (Operable)
Verständlich (Understandable)
Robust (Robust)

Diese vier Prinzipien (kurz POUR) bilden das Fundament jeder barrierefreien Website und leiten alle konkreten Massnahmen ab.

Konformitätsstufe AA

Die WCAG kennt drei Stufen: A, AA und AAA. Stufe AA hat sich in der Praxis als Standard etabliert und ist auch gesetzliche Referenz in EU und Schweiz.

Kontraste und Farben

Ein Text muss sich ausreichend vom Hintergrund abheben, damit er auch bei Sehschwäche oder auf hellem Display gut lesbar bleibt. Überprüfe die Kontrastwerte bereits im Designprozess.

Tastatur und Screenreader

Eine barrierefreie Website muss sich vollständig ohne Maus bedienen lassen und für Screenreader klar strukturiert sein. Das betrifft Fokus-Sichtbarkeit, Reihenfolge und Formularbeschriftungen.

Was cmsbox bereits mitbringt

Unser CMS bringt viele Grundlagen für Barrierefreiheit von Haus aus mit, etwa semantisches HTML, Tastaturbedienung und Alt-Text-Felder. Der andere Teil der Umsetzung liegt aber auch in der Verantwortung der Grafikagentur und redaktionellen Verantwortung.

Was ist Barrierefreiheit (WCAG)?

Barrierefreiheit im Web bedeutet, dass eine Website so gestaltet und gebaut ist, dass sie von möglichst allen Menschen genutzt werden kann. Unabhängig von körperlichen, kognitiven oder situativen Einschränkungen. Der international anerkannte Standard dafür sind die WCAG (Web Content Accessibility Guidelines), herausgegeben vom World Wide Web Consortium (W3C).

Die WCAG basieren auf vier Prinzipien, kurz POUR genannt:

Wahrnehmbar (Perceivable) – Inhalte müssen über mindestens einen Sinneskanal wahrnehmbar sein, z.B. Text-Alternativen für Bilder oder Untertitel für Videos.
Bedienbar (Operable) – Alle Funktionen müssen auch ohne Maus bedienbar sein, z.B. vollständig per Tastatur.
Verständlich (Understandable) – Inhalt und Bedienung müssen klar und nachvollziehbar sein, z.B. durch verständliche Sprache und vorhersehbares Verhalten.
Robust (Robust) – Inhalte müssen von verschiedenster Software zuverlässig interpretiert werden können, insbesondere von Screenreadern und anderen Hilfsmitteln.

Die WCAG kennen drei Konformitätsstufen:

Stufe A – Grundlegende Anforderungen, die minimale Zugänglichkeit sicherstellen.
Stufe AA – Der in der Praxis relevante Standard, auch gesetzliche Referenz in EU und Schweiz.
Stufe AAA – Höchste Stufe, in der Praxis oft nur für einzelne Inhalte realistisch umsetzbar.

Unsere Empfehlung

Stufe AA ist für die meisten Websites das sinnvolle Ziel: Sie deckt die relevanten Anforderungen ab, ohne unverhältnismässigen Aufwand zu verursachen.

Rechtliche Einordnung

Barrierefreiheit ist längst nicht mehr nur ein «Nice-to-have», die rechtliche Situation entwickelt sich klar in Richtung verbindlicher Standards.

In der Schweiz ist das Behindertengleichstellungsgesetz (BehiG) für Bundesbehörden und viele öffentliche Stellen bindend, ihre Websites müssen die WCAG-Stufe AA erfüllen. Für private Unternehmen besteht (Stand 2026) noch keine explizite gesetzliche Pflicht.

Auf EU-Ebene gilt seit Juni 2025 der European Accessibility Act (EAA). Er verpflichtet unter anderem E-Commerce-Anbieter und Unternehmen mit digitalen Dienstleistungen für den EU-Markt zu barrierefreien Websites. Das betrifft auch Schweizer Firmen, sofern sie Kundschaft in der EU bedienen oder einen Onlineshop mit EU-Versand betreiben.

Unsere Einschätzung

Auch ohne aktuelle Pflicht für private Schweizer Websites lohnt sich Barrierefreiheit schon heute: als Vorbereitung auf künftige Regulierung, aus Verantwortung gegenüber allen Nutzenden und weil viele Massnahmen gleichzeitig SEO und Usability verbessern.

Technische Umsetzung und worauf wir achten

Barrierefreiheit ist kein einzelnes Feature, sondern das Resultat vieler Entscheidungen von Technik und Design bis und mit dem Editieren der Inhalte. Im Folgenden zeigen wir dir, worauf wir bei der Umsetzung achten.

Semantisches HTML und Struktur

Eine barrierefreie Website beginnt mit sauberem, semantischem HTML. Das bedeutet: Überschriften, Absätze, Listen und Navigationselemente werden mit den dafür vorgesehenen HTML-Tags ausgezeichnet, statt alles nur optisch nachzubauen.

Besonders wichtig ist eine korrekte Überschriftenhierarchie: Auf jeder Seite gibt es genau eine H1, darauf folgen H2 und H3 in logischer Reihenfolge, ohne Ebenen zu überspringen. Screenreader nutzen diese Struktur, um Nutzenden eine Navigation durch die Seite zu ermöglichen, ähnlich einem Inhaltsverzeichnis.

Zusätzlich setzen wir sogenannte Landmarks ein, HTML5-Elemente wie <nav>, <main> oder <footer>, die den Aufbau einer Seite für Hilfsmittel klar erkennbar machen.

Unsere Empfehlung

In unserem CMS ist die Grundstruktur bereits sauber angelegt. Wichtig ist, dass auch redaktionell die Überschriften-Hierarchie eingehalten wird, also nicht einfach Text grösser formatieren, sondern die richtige Überschriften-Ebene wählen.

Kontraste und Farben

Ausreichender Kontrast zwischen Text und Hintergrund ist zentral, damit Inhalte auch bei Sehschwäche, Farbfehlsichtigkeit oder auf hellem Display in der Sonne lesbar bleiben. Die WCAG-Stufe AA verlangt ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für grosse Schrift (ab 24px bzw. 19px fett).

Die Farbwahl und damit die Kontrastwerte liegen im Designprozess in der Verantwortung der Grafikagentur. Bei Bedarf geben wir Hinweise und zeigen Vorgehensweisen auf, wie sich Kontrastwerte prüfen und einhalten lassen, die laufende Kontrolle während des Designprozesses ist aber nicht automatisch Teil unserer technischen Umsetzung.

Farben und Kontraste lassen sich ebenfalls hervorragend im Web checken. Dazu kannst du z.B. den Browser Firefox verwenden. Öffne per Rechtsklick «Barrierefreiheit-Eigenschaften untersuchen» auf der Website und simuliere jeweilige Sehschwächen.

Prüfung der Farben und Kontraste im Browser Firefox.

Wichtig dabei: Kontrast betrifft nicht nur Fliesstext, sondern auch Buttons, Formularfelder, Icons mit Informationsgehalt und Placeholder-Texte in Formularen. Gerade Placeholder werden oft zu hell gesetzt und dann fälschlicherweise als Label-Ersatz verwendet, was gleich zwei Probleme auf einmal schafft. Mehr zu Placeholdern in Formularen erfährst du weiter unten.

Unsere Empfehlung

Kontrastprüfung gehört so früh wie möglich in den Designprozess, nicht erst kurz vor Go-Live. Tools wie der WebAIM Contrast Checker helfen, das schon im Entwurf zu verifizieren.

Alt-Texte für Bilder

Alt-Texte (alternative Textbeschreibungen) sorgen dafür, dass Screenreader Bildinhalte vorlesen können und Bilder auch bei fehlendem Ladevorgang verständlich bleiben. Ein guter Alt-Text beschreibt, was auf dem Bild inhaltlich relevant ist, nicht was technisch drauf ist.

Team von cmsbox bei einer Besprechung im Büro.

Ein Beispiel macht den Unterschied deutlich:

Schlecht: «Bild1234.jpg» oder «Foto»
Besser: «Team von cmsbox bei einer Besprechung im Büro»

Rein dekorative Bilder (z.B. Hintergrundmuster ohne Informationsgehalt) erhalten einen leeren Alt-Text (alt=""), damit Screenreader sie überspringen, statt sinnlose Dateinamen vorzulesen. Das entscheidet sich im Einzelfall: Ein Icon neben einem Link ist meist dekorativ. Ein Diagramm mit Informationsgehalt braucht eine Beschreibung. Wenn du kein Alt-Text in das Feld eingibst, ist dieses automatisch leer.

In unserem CMS ist für jedes Bild ein Alt-Text-Feld vorhanden. Das Setzen und Pflegen der Alt-Texte liegt aber in der redaktionellen Verantwortung, da nur die Redaktion weiss, was inhaltlich relevant ist. Klicke im cmsbox-Editor direkt auf ein Bild und in der Sidebar erscheint das Feld «Alt Text».

Unsere Empfehlung

Nimm dir bei jedem neuen Bild kurz Zeit für einen aussagekräftigen Alt-Text. Das dauert Sekunden, hilft aber Screenreader-Nutzenden erheblich und wirkt sich zusätzlich positiv auf die Bilder-SEO aus.

Kontaktiere uns

Brauchst du einen Webentwicklungs Partner?

Kontaktiere uns

Tastaturbedienbarkeit und Fokus-Sichtbarkeit

Nicht alle Nutzenden bedienen eine Website mit der Maus. Menschen mit motorischen Einschränkungen, aber auch viele Power-User, navigieren ausschliesslich mit der Tastatur, meist mit der Tab-Taste. Eine barrierefreie Website muss darum vollständig ohne Maus bedienbar sein.

Zwei Aspekte sind dabei zentral:

Logische Tab-Reihenfolge
Beim Drücken der Tab-Taste sollte der Fokus in einer sinnvollen, nachvollziehbaren Reihenfolge durch die Seite wandern, meist von oben nach unten und von links nach rechts. Springt der Fokus unvorhersehbar, verlieren Nutzende die Orientierung.

Sichtbarer Fokus-Indikator

Wenn ein Element per Tastatur fokussiert wird (Link, Button, Formularfeld), muss klar erkennbar sein, welches Element das ist, meist durch einen sichtbaren Rahmen oder Umriss (Focus Ring). Ein häufiger Fehler ist das Entfernen dieses Rahmens aus rein optischen Gründen, ohne einen gleichwertigen Ersatz zu definieren. Das macht die Tastaturnavigation faktisch unbrauchbar.

Wichtig ist zudem, dass interaktive Elemente wie Buttons und Links auch tatsächlich als solche im HTML ausgezeichnet sind (<button>, <a>), statt z.B. ein <div> per JavaScript klickbar zu machen. Nur echte interaktive Elemente sind automatisch per Tastatur fokussierbar.

Unsere Empfehlung

Teste deine Website gelegentlich selbst nur mit der Tastatur: Tab-Taste drücken und schauen, ob du erkennst, wo du dich gerade befindest und ob du alle Funktionen erreichst. Eine Tab-Navigation ist immer standardmässig bei jeder neu entwickelten Website von uns dabei. Tipp: Probiere es gleich auf unserer Website aus!

Formulare und Labels

Formulare gehören zu den häufigsten Stolpersteinen bei der Barrierefreiheit, gerade weil sie oft rein visuell gestaltet werden, ohne die technische Struktur mitzudenken.

Jedes Feld braucht ein echtes Label

Ein <label>-Element muss mit dem zugehörigen Eingabefeld verknüpft sein. Nur so weiss ein Screenreader, wofür ein Feld steht, wenn es fokussiert wird. Ein rein visuell danebenstehender Text ohne diese Verknüpfung reicht nicht aus.

Placeholder ersetzen kein Label

Ein häufiger Fehler ist, nur ein Placeholder-Text im Feld («Name eingeben») zu setzen, aber kein echtes Label. Sobald etwas eingetippt wird, verschwindet der Placeholder und Screenreader-Nutzende wissen nicht mehr, welches Feld sie gerade ausfüllen. Placeholder sind höchstens eine Ergänzung, nie ein Ersatz.

Beispiel eines Formularfeldes mit Label und Placeholder oder nur mit Placeholder.

Fehlermeldungen klar zuordnen
Wird ein Formular mit Fehlern abgeschickt, muss klar sein, welches Feld betroffen ist und warum. Eine Fehlermeldung nur in Rot ohne Textbeschreibung reicht nicht, Farbe allein darf nie die einzige Information sein (auch relevant bei Rot-Grün-Sehschwäche).

Pflichtfelder klar kennzeichnen

Ein Sternchen (*) allein reicht nicht aus, wenn seine Bedeutung nicht auch textlich erklärt wird (z.B. «Pflichtfeld» im Formular-Titel oder pro Feld als zusätzlicher Hinweis).

Unsere Empfehlung

Formulare sind in unserem CMS technisch sauber mit Labels umgesetzt. Zusätzlich können ausgewählte Felder mit Placeholder-Text ergänzt werden. Pflichfelder können mit einem Text oberhalb des Formulars frei ergänzt werden. Beim erfassen eines Formulars wird ein Label vom System immer zwingend vorausgesetzt, damit du stets ein Barrierefreies-Formular hast.

Screenreader-Kompatibilität

Screenreader lesen Websites vor, indem sie sich an der HTML-Struktur orientieren. Je sauberer diese Struktur ist, desto besser funktioniert das automatisch, ganz ohne Zusatzaufwand.

ARIA sparsam einsetzen

ARIA (Accessible Rich Internet Applications) ist ein Zusatzstandard, der HTML-Elemente mit zusätzlichen Informationen für Screenreader anreichert, etwa Rollen, Zustände oder Beschriftungen. Die wichtigste Regel dazu lautet: Die beste ARIA-Regel ist keine ARIA-Regel. Ein natives <button> ist automatisch für Screenreader verständlich, ein <div> mit role="button" braucht zusätzlich manuell nachgebaute Tastatursteuerung und Zustände. Native HTML-Elemente sind fast immer die robustere Lösung.

Sinnvoller Einsatz von ARIA

Es gibt Fälle, in denen ARIA echten Mehrwert bringt, etwa bei komplexen UI-Komponenten ohne natives HTML-Äquivalent (z.B. Tabs, Akkordeons). Hier ergänzt ARIA gezielt, was HTML allein nicht ausdrücken kann.

Häufiger Fehler: zu viel ARIA

Falsch oder übermässig eingesetztes ARIA kann die Zugänglichkeit sogar verschlechtern, etwa wenn Rollen und native Semantik widersprüchlich gesetzt werden. Im Zweifel gilt: lieber natives, semantisches HTML statt ARIA-Nachbau.

Unsere Empfehlung

Unser CMS setzt auf semantisches HTML als Grundlage. ARIA-Attribute kommen gezielt nur dort zum Einsatz, wo native HTML-Elemente an ihre Grenzen stossen.

PDFs und Dokumente

Auch Dokumente zum Download, etwa PDFs, fallen unter Barrierefreiheit, werden aber oft vergessen. Ein gescanntes PDF ohne Texterkennung ist für Screenreader unlesbar, eine reine Bilddatei mit Text ebenso.

Für barrierefreie PDFs braucht es unter anderem eine korrekte Dokumentstruktur (Tags), hinterlegten Text statt reinen Bildinhalt und eine sinnvolle Lesereihenfolge. Das lässt sich in der Regel direkt beim Erstellen in Word oder InDesign mit den entsprechenden Exportoptionen sicherstellen.

Unsere Empfehlung

Prüfe insbesondere zentrale Dokumente wie Broschüren, AGB oder Formulare zum Herunterladen auf Barrierefreiheit. Für die technische Umsetzung auf der Website selbst sind wir zuständig, für barrierefreie Dokumente braucht es meist eine Anpassung im Ursprungsprogramm.

Eine gemeinsame Aufgabe

Barrierefreiheit ist eine gemeinsame Aufgabe zwischen Technik und Design bis und mit Editieren der Website. Ein Teil der Grundlagen ist im cmsbox-System bereits fest eingebaut, ein anderer Teil liegt in der Verantwortung der Grafikagentur oder der Redaktion.

cmsbox

Technische Entwicklung der Website

Barrierefreie Websites und Komponenten entwickeln (semantisches HTML, ARIA-Rollen korrekt einsetzen, CSS-Regeln so gestalten, dass die Überschriftenhierarchie eingehalten werden kann).
Sicherstellen, dass alle Funktionen tastaturbedienbar sind (Navigation, Formularelemente, Dialoge).
Regelmässige Tests mit Screenreadern und Accessibility-Tools durchführen.

Grafikagentur

Konzept und Design

Barrierefreie Farben und Kontraste auswählen.
Schriftgrössen und -arten so wählen, dass sie gut lesbar sind.
Designs übersichtlich und klar strukturiert gestalten (klare Hierarchie, keine überladenen Seiten).
Klare Navigationskonzepte entwerfen (einfach zu verstehen und bedienen).
Sicherstellen, dass das Design auf verschiedenen Geräten und mit Assistenztechnologien funktioniert.

Editieren und Redaktion

Content-Erstellung und Pflege

Inhalte korrekt strukturieren (Überschriftenhierarchie einhalten, Absätze verwenden).
Für alle Bilder aussagekräftige Alt-Texte hinterlegen.
Formulare mit klaren Labels und Hilfetexten erstellen.
Inhalte verständlich und möglichst einfach formulieren (einfache Sprache).
Regelmässig prüfen, ob Inhalte barrierefrei bleiben (z.B. keine rein farbliche Kennzeichnung ohne Text).
Barrierefreiheit von Dokumenten auf der Website wie PDFs prüfen.

Unsere Empfehlung

Sprich Barrierefreiheit schon im Kickoff eines Projekts an. Wir unterstützen gerne bei Fragen zu technischen Möglichkeiten. So lässt sie sich von Anfang an mitdenken, statt sie nachträglich und aufwändiger nachzubessern.

Kontaktiere uns

Fragen zu Barrierefreiheit auf deiner Website?

Kontaktiere uns

Unsere Handlungsempfehlungen

Barrierefreiheit wirkt auf den ersten Blick komplex, lässt sich aber mit ein paar gezielten Schritten gut in den Griff bekommen:

Thema früh ansprechen – Bring Barrierefreiheit bereits im Kickoff ein, nicht erst kurz vor Go-Live.
Kontraste im Design prüfen – Nutze Tools wie den WebAIM Contrast Checker, um Text- und Hintergrundfarben schon im Entwurf zu verifizieren.
Alt-Texte konsequent pflegen – Nimm dir bei jedem neuen Bild kurz Zeit für eine aussagekräftige Beschreibung.
Überschriften-Hierarchie einhalten – Wähle bei der Texterfassung die richtige Überschriften-Ebene (H1–H3), statt Text nur optisch grösser zu formatieren.
Tastaturtest machen – Navigiere deine Website gelegentlich nur mit der Tab-Taste, um Lücken zu erkennen. Kontaktiere uns um die Tab-Navigation zu verbessern.
Dokumente nicht vergessen – Prüfe zentrale PDFs wie AGB oder Broschüren auf barrierefreie Struktur.

Barrierefreiheit ist kein einmaliges Projekt. Es ist eine Denkweise, die sich mit der Zeit in Design- und Redaktionsprozesse einspielt.

Hilfreiche Links und Guidlines

W3C WAI (Web Accessibility Initiative)

Übergeordnete Organisation mit vielen Guides, Tools & Ressourcen.

W3C WAI aufrufen

W3C WCAG 2

Der offizielle Standard, sehr detailliert, mit praktischen Beispielen.

W3C Standards & Beispiele aufrufen

Stiftung Zugang für alle (CH)

Überichtliche Checkliste zur Barrierenfreiheit.

Checkliste aufrufen

FAQ

Häufig gestellte Fragen zur Barrierefreiheit im Web

Was bedeutet Barrierefreiheit im Web?

Barrierefreiheit bedeutet, dass eine Website von möglichst allen Menschen genutzt werden kann, unabhängig von körperlichen, kognitiven oder situativen Einschränkungen. Der international anerkannte Standard dafür sind die WCAG-Richtlinien.

Was ist der Unterschied zwischen den WCAG-Stufen A, AA und AAA?

Stufe A deckt grundlegende Anforderungen ab, Stufe AA ist der in der Praxis relevante Standard und auch gesetzliche Referenz in EU und Schweiz. Stufe AAA ist die höchste Stufe, aber oft nur für einzelne Inhalte realistisch umsetzbar.

Ist Barrierefreiheit in der Schweiz gesetzlich vorgeschrieben?

Für Bundesbehörden und viele öffentliche Stellen ja, über das Behindertengleichstellungsgesetz (BehiG). Für private Unternehmen besteht (Stand 2026) noch keine explizite Pflicht, auf EU-Ebene verpflichtet aber der European Accessibility Act seit Juni 2025 bestimmte Anbieter mit EU-Kundschaft.

Wer ist für die Kontrastwerte auf meiner Website verantwortlich?

Die Farbwahl und damit die Kontrastwerte liegen im Designprozess in der Verantwortung der Grafikagentur. Gerne geben wir Hinweise und zeigen Vorgehensweisen, wie sich Kontrastwerte prüfen lassen.

Was muss ich bei Alt-Texten beachten?

Ein guter Alt-Text beschreibt kurz und inhaltlich relevant, was auf dem Bild zu sehen ist, statt nur den Dateinamen zu wiederholen. Rein dekorative Bilder erhalten einen leeren Alt-Text. Das Pflegen der Alt-Texte liegt in der redaktionellen Verantwortung.

Muss meine Website komplett ohne Maus bedienbar sein?

Ja, das ist eine zentrale WCAG-Anforderung. Alle Funktionen müssen per Tastatur erreichbar sein, mit einer logischen Tab-Reihenfolge und einem sichtbar erkennbaren Fokus-Indikator.

Was bringt cmsbox technisch bereits mit?

Unser CMS setzt auf semantisches HTML mit korrekter Grundstruktur, native und tastaturbedienbare Formularelemente mit verknüpften Labels, ein Alt-Text-Feld pro Bild sowie sichtbare Fokus-Indikatoren in der Standard-Auszeichnung.

Sind auch PDFs von Barrierefreiheit betroffen?

Ja. Ein gescanntes PDF ohne Texterkennung ist für Screenreader unlesbar. Barrierefreie PDFs benötigen eine korrekte Dokumentstruktur, hinterlegten Text statt reinen Bildinhalt und eine sinnvolle Lesereihenfolge, meist sichergestellt beim Export aus Word oder InDesign.

Wie starte ich am besten mit dem Thema?

Sprich Barrierefreiheit früh im Projekt an, am besten schon im Kickoff mit deiner Grafikagentur. Prüfe danach schrittweise Kontraste, Alt-Texte, Überschriften-Struktur und die Tastaturbedienbarkeit deiner Website.

Lass uns gemeinsam eine Barrierefreie-Website entwickeln!

Projekt starten

Kontakt aufnehmen

Projekt starten