Barrierefreie Website erstellen: Warum Accessibility 2026 Pflicht wird

Stellen Sie sich vor, Sie betreten ein Geschäft — aber die Tür ist zu schmal für Ihren Rollstuhl. Oder Sie möchten eine Speisekarte lesen — aber die Schrift ist so klein, dass Sie nichts erkennen können. Was in der physischen Welt als inakzeptabel gilt, ist im digitalen Raum leider noch immer Alltag. Millionen von Menschen in der Schweiz und weltweit stossen täglich auf Websites, die für sie nicht oder nur eingeschränkt nutzbar sind — wegen fehlender Barrierefreiheit.

Das ändert sich jetzt grundlegend. Mit dem European Accessibility Act (EAA), der am 28. Juni 2025 in der EU in Kraft getreten ist, und den sich verschärfenden Schweizer Regelungen wird digitale Barrierefreiheit von einer freiwilligen Massnahme zu einer gesetzlichen Pflicht. Für Schweizer Unternehmen, die Kunden in der EU bedienen oder einfach allen Menschen den Zugang zu ihren Dienstleistungen ermöglichen wollen, ist es höchste Zeit zu handeln. In diesem Artikel erklären wir, was Barrierefreiheit bedeutet, welche Standards gelten und wie Sie Ihre Website zugänglich machen.

Was bedeutet Web-Accessibility und wen betrifft sie?

Web-Accessibility (digitale Barrierefreiheit) bedeutet, dass Websites und Webanwendungen so gestaltet sind, dass sie von allen Menschen genutzt werden können — unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. Das betrifft weit mehr Menschen, als die meisten denken: In der Schweiz leben rund 1,8 Millionen Menschen mit einer Behinderung, das sind etwa 20 Prozent der Bevölkerung.

Doch Barrierefreiheit geht über die klassischen Behinderungen hinaus. Sie betrifft auch: ältere Menschen mit nachlassender Sehkraft (die Schweiz hat eine der ältesten Bevölkerungen Europas), Personen mit vorübergehenden Einschränkungen (gebrochener Arm, Augenentzündung), Menschen in situativen Einschränkungen (grelles Sonnenlicht auf dem Bildschirm, laute Umgebung), Nutzer mit langsamer Internetverbindung und Personen, die keine Maus verwenden können oder wollen.

Wenn Sie Barrierefreiheit ernst nehmen, verbessern Sie die Nutzererfahrung für alle Besucher — nicht nur für die 20 Prozent mit einer anerkannten Behinderung. Ein gut lesbarer Kontrast hilft jedem, klare Navigationsstrukturen reduzieren die Absprungrate für alle Nutzer, und sauber strukturierter HTML-Code verbessert gleichzeitig Ihre SEO-Rankings. Barrierefreiheit ist kein Nischenthema — es ist gutes Webdesign.

WCAG 2.1: Der internationale Standard erklärt

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Webinhalte, entwickelt vom World Wide Web Consortium (W3C). Die aktuelle Version 2.1 definiert drei Konformitätsstufen: A (Minimum), AA (empfohlen) und AAA (Maximum). Für die meisten gesetzlichen Anforderungen — auch in der Schweiz und der EU — ist die Stufe AA der geforderte Standard.

Die WCAG basieren auf vier Grundprinzipien, die unter dem Akronym POUR zusammengefasst werden. Wahrnehmbar (Perceivable): Alle Informationen und Benutzeroberflächen müssen so dargestellt werden, dass sie von den Nutzern wahrgenommen werden können. Das bedeutet zum Beispiel: Textalternativen für Bilder, Untertitel für Videos und ausreichende Farbkontraste. Bedienbar (Operable): Alle Funktionen müssen über verschiedene Eingabemethoden nutzbar sein — Maus, Tastatur, Touchscreen, Sprachsteuerung oder Augensteuerung.

Verständlich (Understandable): Informationen und Bedienung der Website müssen verständlich sein. Texte sollten klar formuliert sein, Formulare müssen Fehler verständlich kommunizieren, und die Navigation sollte konsistent und vorhersehbar sein. Robust: Die Inhalte müssen von verschiedenen Technologien — einschliesslich assistiver Technologien wie Screenreadern — zuverlässig interpretiert werden können. Das erfordert sauberen, standardkonformen HTML-Code und korrekte ARIA-Attribute (Accessible Rich Internet Applications).

Die WCAG 2.1 enthält insgesamt 78 Erfolgskriterien auf den drei Konformitätsstufen. Für die Stufe AA, die in den meisten Fällen gefordert wird, müssen 50 Kriterien erfüllt sein. Das klingt nach viel, aber viele dieser Kriterien sind grundlegende Webdesign-Prinzipien, die bei einer sauberen Entwicklung automatisch erfüllt werden. Die Herausforderung liegt oft weniger in der Technik als im Bewusstsein: Wer Barrierefreiheit von Anfang an mitdenkt, hat deutlich weniger Aufwand als jemand, der eine bestehende Website nachträglich anpassen muss.

European Accessibility Act und die Schweiz

Der European Accessibility Act (EAA) ist seit dem 28. Juni 2025 in allen EU-Mitgliedstaaten geltendes Recht. Er verpflichtet Unternehmen, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten — darunter Websites, Mobile Apps, E-Commerce-Plattformen, E-Books, Bankdienstleistungen und Ticketsysteme. Verstösse können mit erheblichen Geldstrafen geahndet werden.

Die Schweiz ist zwar kein EU-Mitglied, aber der EAA betrifft Schweizer Unternehmen in mehrfacher Hinsicht. Erstens: Jedes Schweizer Unternehmen, das Produkte oder Dienstleistungen an Kunden in der EU verkauft, muss die EAA-Anforderungen erfüllen. Zweitens: Es ist davon auszugehen, dass die Schweiz die EU-Regulierung über kurz oder lang übernimmt oder eigene, vergleichbare Regelungen einführt — wie es bei vielen EU-Richtlinien der Fall war. Drittens: Das Schweizer Behindertengleichstellungsgesetz (BehiG) verpflichtet bereits heute Bundesbehörden und bundesnahe Betriebe zur digitalen Barrierefreiheit.

Für private Schweizer Unternehmen besteht aktuell keine generelle gesetzliche Pflicht zur Barrierefreiheit ihrer Website. Aber der Trend ist eindeutig: Die eCH-Standards (eCH-0059) empfehlen WCAG 2.1 AA für alle Schweizer Websites, der Bund fordert es für seine eigenen Auftritte, und immer mehr Kantone und Gemeinden übernehmen diese Anforderungen für ihre Auftragnehmer. Unternehmen, die jetzt proaktiv auf Barrierefreiheit setzen, sind auf der sicheren Seite — und verschaffen sich einen Wettbewerbsvorteil gegenüber Konkurrenten, die erst reagieren, wenn es Pflicht wird.

Kontraste und Farbgestaltung richtig umsetzen

Farbkontraste sind eines der häufigsten Accessibility-Probleme auf Schweizer Websites. Hellgrauer Text auf weissem Hintergrund sieht zwar elegant aus, ist aber für Menschen mit Sehbehinderungen — und auch für viele ältere Menschen oder Nutzer in heller Umgebung — schlicht nicht lesbar. Die WCAG 2.1 definiert klare Mindestkontraste: normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 haben, grosser Text (ab 18pt oder 14pt fett) mindestens 3:1.

Das bedeutet nicht, dass Ihre Website langweilig aussehen muss. Es bedeutet lediglich, dass Sie bei der Farbwahl auf ausreichende Kontraste achten müssen. Ein dunkelblauer Text auf weissem Hintergrund hat ein Kontrastverhältnis von über 8:1 — weit über der Mindestanforderung — und sieht gleichzeitig professionell und ansprechend aus. Tools wie der WebAIM Contrast Checker (webaim.org/resources/contrastchecker) berechnen den Kontrastwert für jede Farbkombination in Sekunden.

Ein oft übersehener Aspekt: Informationen dürfen nicht ausschliesslich über Farbe vermittelt werden. Wenn Sie auf einem Formular Pflichtfelder rot markieren, müssen Sie zusätzlich ein Sternchen oder das Wort «Pflichtfeld» verwenden. Wenn ein Link nur durch die Farbe vom umgebenden Text unterscheidbar ist, braucht er zusätzlich eine Unterstreichung. Diagramme und Infografiken, die Datenpunkte nur über Farbe unterscheiden, sind für farbenblinde Nutzer (8 Prozent der Männer, 0,5 Prozent der Frauen) nicht interpretierbar — verwenden Sie zusätzlich Muster, Labels oder Formen.

Bieten Sie wenn möglich verschiedene Farbmodi an: einen hellen Modus, einen dunklen Modus und idealerweise einen Hochkontrastmodus. Moderne CSS-Technologien wie prefers-color-scheme und Custom Properties (CSS-Variablen) machen die Implementierung verschiedener Farbmodi technisch einfach. Für eine professionelle Webentwicklung gehört die Berücksichtigung von Kontrastanforderungen heute zum Standard.

Screenreader-Kompatibilität sicherstellen

Screenreader sind Softwareprogramme, die den Bildschirminhalt vorlesen — unverzichtbar für blinde und stark sehbehinderte Menschen. Die verbreitetsten Screenreader in der Schweiz sind JAWS (Windows), NVDA (Windows, kostenlos), VoiceOver (macOS/iOS) und TalkBack (Android). Damit ein Screenreader Ihre Website korrekt vorlesen kann, muss der HTML-Code sauber strukturiert und semantisch korrekt sein.

Semantisches HTML ist die Grundlage: Verwenden Sie die richtigen HTML-Elemente für ihren Zweck. Überschriften werden mit h1 bis h6 ausgezeichnet (in der richtigen Reihenfolge, ohne Ebenen zu überspringen), Navigationen mit dem nav-Element, Hauptinhalte mit main, Seitenbereiche mit section und footer. Listen werden mit ul/ol und li-Elementen erstellt, nicht mit manuellen Aufzählungszeichen in Absätzen. Tabellen werden mit table, thead, tbody und th-Elementen strukturiert, nicht mit div-Elementen und CSS-Grid.

ARIA-Attribute (Accessible Rich Internet Applications) ergänzen semantisches HTML, wenn die Standard-HTML-Elemente nicht ausreichen. Ein Hamburger-Menü-Button braucht ein aria-label wie «Menü öffnen» und ein aria-expanded-Attribut, das anzeigt, ob das Menü geöffnet oder geschlossen ist. Ein Akkordeon braucht aria-controls, um die Beziehung zwischen Trigger und Inhalt zu kommunizieren. Wichtig: ARIA-Attribute sollten sparsam und korrekt eingesetzt werden — falsch verwendetes ARIA ist schlimmer als gar kein ARIA, da es Screenreader verwirrt.

Testen Sie Ihre Website regelmässig mit einem Screenreader. VoiceOver auf dem Mac (aktivierbar mit Cmd+F5) und NVDA auf Windows (kostenloser Download) sind für jeden zugänglich. Navigieren Sie Ihre Website nur mit der Tastatur und dem Screenreader — ohne auf den Bildschirm zu schauen. Diese Übung ist augenöffnend: Sie werden sofort merken, wo Ihre Website für Screenreader-Nutzer Probleme bereitet.

Tastaturnavigation und Fokus-Management

Nicht alle Nutzer können eine Maus verwenden. Menschen mit motorischen Einschränkungen, Personen die Sprachsteuerung nutzen und viele Power-User navigieren Websites ausschliesslich mit der Tastatur. Ihre Website muss mit der Tab-Taste vollständig navigierbar sein — jeder Link, jeder Button, jedes Formularfeld und jedes interaktive Element muss per Tastatur erreichbar und bedienbar sein.

Der Fokus-Indikator — der visuelle Rahmen, der anzeigt, welches Element gerade ausgewählt ist — darf niemals entfernt werden. Viele Webdesigner eliminieren den Standard-Fokusrahmen aus ästhetischen Gründen mit outline: none in CSS. Das ist ein gravierender Accessibility-Fehler. Gestalten Sie stattdessen einen eigenen, gut sichtbaren Fokus-Indikator, der zu Ihrem Design passt: zum Beispiel einen farbigen Rahmen oder eine Hintergrundfarbe, die deutlich vom Normalzustand abweicht.

Die Tab-Reihenfolge sollte der visuellen Lesereihenfolge entsprechen — von oben nach unten, von links nach rechts. Vermeiden Sie positive tabindex-Werte, die die natürliche Reihenfolge durcheinanderbringen. Bei modalen Dialogen (Pop-ups, Lightboxes) muss der Fokus beim Öffnen in den Dialog wandern und dort bleiben (Focus Trapping), bis der Dialog geschlossen wird. Beim Schliessen sollte der Fokus zum auslösenden Element zurückkehren. Skip-Links — unsichtbare Links am Seitenanfang, die direkt zum Hauptinhalt springen — ermöglichen es Tastaturnutzern, die Navigation zu überspringen und direkt zum Inhalt zu gelangen.

Alt-Texte, Formulare und weitere Content-Anforderungen

Jedes Bild auf Ihrer Website braucht einen Alternativtext (alt-Attribut), der den Inhalt des Bildes beschreibt. Der Alt-Text wird von Screenreadern vorgelesen und erscheint, wenn das Bild nicht geladen werden kann. Gute Alt-Texte beschreiben, was auf dem Bild zu sehen ist, in einem kurzen Satz: «Handwerker installiert Solaranlage auf Ziegeldach» statt «Bild1» oder «DSC_4523.jpg».

Dekorative Bilder — Hintergrundmuster, Trennlinien, rein schmückende Grafiken — brauchen einen leeren Alt-Text (alt=""). So überspringt der Screenreader das Bild, statt «Bild» oder den Dateinamen vorzulesen. Icons, die eine Funktion haben (z. B. ein Lupen-Icon für die Suche), brauchen einen beschreibenden Alt-Text oder ein aria-label wie «Suche». Infografiken und Diagramme brauchen sowohl einen kurzen Alt-Text als auch eine ausführliche Textbeschreibung der dargestellten Daten.

Formulare sind einer der kritischsten Bereiche für die Barrierefreiheit. Jedes Eingabefeld braucht ein zugeordnetes Label-Element (mit dem for-Attribut, das auf die ID des Feldes verweist). Placeholder-Text ist kein Ersatz für Labels — er verschwindet beim Tippen und ist oft zu kontrastarm. Pflichtfelder müssen klar markiert sein (nicht nur durch Farbe). Fehlermeldungen müssen den Fehler beschreiben und das betroffene Feld identifizieren: «Bitte geben Sie eine gültige E-Mail-Adresse ein» statt «Ungültige Eingabe». Verwenden Sie aria-describedby, um Hilfetexte und Fehlermeldungen mit dem zugehörigen Feld zu verknüpfen.

Videos brauchen Untertitel (für gehörlose Nutzer) und eine Audiodeskription (für blinde Nutzer). Automatisch generierte Untertitel (z. B. von YouTube) sind ein guter Anfang, sollten aber manuell korrigiert werden — besonders bei Schweizerdeutschen Begriffen und Fachterminologie, die die automatische Erkennung oft falsch transkribiert.

Testing-Tools und Audit-Prozess

Die gute Nachricht: Sie müssen Barrierefreiheit nicht blind implementieren. Es gibt hervorragende Tools, die Accessibility-Probleme automatisch erkennen und Ihnen konkrete Handlungsempfehlungen geben. Kein Tool findet alle Probleme — automatisierte Tests erkennen nur etwa 30 bis 40 Prozent aller Accessibility-Barrieren — aber sie sind ein exzellenter Ausgangspunkt.

Die wichtigsten kostenlosen Tools: axe DevTools (Browser-Extension für Chrome und Firefox) prüft eine Seite auf WCAG-Konformität und zeigt Fehler mit Erklärungen und Code-Beispielen. WAVE (wave.webaim.org) bietet eine visuelle Darstellung von Accessibility-Problemen direkt auf der Seite. Google Lighthouse (integriert in Chrome DevTools) enthält einen Accessibility-Audit mit Score und Handlungsempfehlungen. Pa11y ist ein kommandozeilenbasiertes Tool, das sich in automatisierte Build-Pipelines integrieren lässt.

Ergänzen Sie automatisierte Tests immer mit manuellen Prüfungen. Navigieren Sie Ihre Website nur mit der Tastatur: Können Sie alle Funktionen erreichen? Ist der Fokus immer sichtbar? Testen Sie mit einem Screenreader: Werden alle Inhalte korrekt vorgelesen? Machen die Überschriftenstruktur und die Linktexte Sinn, wenn man nur den Text hört? Prüfen Sie die Zoom-Funktionalität: Bleibt die Website bei 200 Prozent Zoom nutzbar, ohne horizontales Scrollen? Testen Sie die Website in verschiedenen Kontrastmodi und mit verschiedenen Schriftgrössen.

Für einen umfassenden Accessibility-Audit empfiehlt es sich, Betroffene einzubeziehen. Laden Sie Menschen mit verschiedenen Einschränkungen ein, Ihre Website zu testen, und beobachten Sie, wo sie auf Schwierigkeiten stossen. Dieses User-Testing liefert Erkenntnisse, die kein automatisiertes Tool ersetzen kann. In der Schweiz bieten Organisationen wie «Zugang für alle» (access-for-all.ch) professionelle Accessibility-Audits und Beratung an.

Fazit: Barrierefreiheit ist Qualität, nicht Pflicht

Barrierefreiheit wird oft als lästige Pflicht wahrgenommen — als zusätzliche Anforderung, die Kosten verursacht und das Design einschränkt. Das Gegenteil ist der Fall. Barrierefreie Websites sind besser strukturiert, schneller ladend, besser auffindbar (SEO profitiert von semantischem HTML und Alt-Texten) und für alle Nutzer angenehmer zu bedienen. Barrierefreiheit ist kein Kompromiss — sie ist ein Qualitätsmerkmal.

Die gesetzlichen Anforderungen verschärfen sich — in der EU ist der European Accessibility Act bereits in Kraft, und die Schweiz wird nachziehen. Unternehmen, die jetzt proaktiv handeln, vermeiden teure Nachrüstungen und positionieren sich als verantwortungsbewusst und inklusiv. Für 20 Prozent der Schweizer Bevölkerung ist Barrierefreiheit keine abstrakte Anforderung — es ist die Voraussetzung dafür, Ihre Website überhaupt nutzen zu können.

Wenn Sie eine neue Website planen oder Ihre bestehende Website überarbeiten möchten, berücksichtigen Sie Barrierefreiheit von Anfang an. Eine professionell erstellte Website integriert Accessibility-Standards von Grund auf — das ist effizienter und günstiger als eine nachträgliche Anpassung. Kontaktieren Sie uns für eine unverbindliche Beratung — wir zeigen Ihnen, wie Ihre Website für alle Menschen zugänglich wird, ohne Kompromisse beim Design einzugehen.