Barrierefreiheit im Web: Zugänglich für alle – gut fürs Geschäft

Stell dir vor, ein potenzieller Kunde kommt auf deine Website – und kann sie nicht bedienen. Der Button ist nicht per Tastatur erreichbar, das Kontaktformular hat keinen erkennbaren Fokus, und die Bilder haben keine Beschreibungen. Was passiert? Der Kunde ist weg. Für immer.

In der Schweiz leben rund 1,8 Millionen Menschen mit einer Behinderung. Dazu kommen Millionen, die temporär eingeschränkt sind – sei es durch eine Verletzung, eine laute Umgebung oder schlicht eine langsame Internetverbindung. Barrierefreiheit im Web ist deshalb längst kein Randthema mehr. Sie betrifft dein Geschäft direkt.

In unserem umfassenden Perfekte-Website-Guide haben wir bereits die wichtigsten Grundlagen für erfolgreiche Websites behandelt. Hier vertiefen wir das Thema Barrierefreiheit und zeigen dir, wie du konkret vorgehst.

Was bedeutet Barrierefreiheit im Web?

Barrierefreiheit (englisch: Accessibility, oft als «a11y» abgekürzt) bedeutet, dass deine Website von allen Menschen genutzt werden kann – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen.

Die internationalen Web Content Accessibility Guidelines (WCAG) – aktueller Standard ist WCAG 2.2 – definieren vier Grundprinzipien:

• Wahrnehmbar: Inhalte müssen so dargestellt werden, dass sie von allen Sinnen erfasst werden können. Bilder brauchen Alternativtexte, Videos brauchen Untertitel.
• Bedienbar: Alle Funktionen müssen per Tastatur, Maus und anderen Eingabegeräten nutzbar sein.
• Verständlich: Texte, Navigation und Formulare müssen klar und nachvollziehbar sein.
• Robust: Die Website muss mit verschiedenen Browsern, Geräten und assistiven Technologien funktionieren.

In der Schweiz gibt es mit dem Behindertengleichstellungsgesetz (BehiG) bereits eine rechtliche Grundlage, die vor allem öffentliche Stellen zur Barrierefreiheit verpflichtet – für private Unternehmen besteht keine generelle Pflicht. In der EU gilt seit Juni 2025 der European Accessibility Act (EAA) – mit Auswirkungen auch auf Schweizer Unternehmen, die in der EU tätig sind.

Kontraste und Farben: Damit alle lesen können

Einer der häufigsten Fehler auf KMU-Websites: zu wenig Kontrast. Hellgrauer Text auf weissem Hintergrund mag elegant wirken, ist aber für viele Menschen schlecht lesbar.

Die WCAG-Anforderungen für Kontraste:

• Normaler Text: Mindestens 4.5:1 Kontrastverhältnis (Level AA)
• Grosser Text (ab 18px fett oder 24px normal): Mindestens 3:1
• Level AAA (empfohlen): 7:1 für normalen Text

Praktische Tipps für dein KMU:

• Verwende ein Tool wie den WebAIM Contrast Checker, um deine Farben zu prüfen
• Setze nie ausschliesslich auf Farbe, um Informationen zu vermitteln – nutze zusätzlich Icons oder Beschriftungen
• Achte darauf, dass auch Links visuell erkennbar sind (nicht nur durch Farbe, sondern auch durch Unterstreichung)
• Teste deine Website mit einem Graustufen-Filter: Sind alle Elemente noch unterscheidbar?

Beispiel aus der Praxis: Ein Zahnarzt in Solothurn hatte auf seiner Website ein Kontaktformular mit hellgrauen Platzhaltertexten auf weissem Hintergrund. Nach der Anpassung auf dunklere Labels stiegen die Formular-Abschlüsse spürbar. Bessere Lesbarkeit bedeutet direkt mehr Anfragen.

Alt-Texte und Bilder: Beschreibe, was zu sehen ist

Bilder ohne Alternativtext sind für Screen-Reader-Nutzer unsichtbar. Und auch für Suchmaschinen sind Alt-Texte ein wichtiges Signal.

So schreibst du gute Alt-Texte:

• Beschreibe den Inhalt und Zweck des Bildes kurz und prägnant
• Vermeide «Bild von...» oder «Foto von...» – der Screen-Reader sagt bereits an, dass es ein Bild ist
• Bei dekorativen Bildern: Setze ein leeres alt-Attribut (alt="")
• Bei Infografiken: Stelle den gesamten Inhalt als Text zur Verfügung
• Integriere relevante Keywords natürlich, ohne Keyword-Stuffing

Checkliste für Bilder auf deiner Website:

• Alle informativen Bilder haben beschreibende Alt-Texte
• Dekorative Bilder haben leere Alt-Attribute
• Diagramme und Grafiken haben eine Textbeschreibung oder Datentabelle
• Logos haben den Firmennamen als Alt-Text
• Bilder mit Text: Der Text ist auch ausserhalb des Bildes verfügbar

Tastatur-Navigation und Screen-Reader

In der Schweiz leben mehrere hunderttausend Menschen mit einer Sehbehinderung. Viele von ihnen nutzen Screen-Reader wie NVDA, JAWS oder VoiceOver auf dem Mac. Andere navigieren ausschliesslich per Tastatur – etwa bei motorischen Einschränkungen.

Grundregeln für tastaturfreundliche Websites:

• Jedes interaktive Element (Links, Buttons, Formularfelder) muss per Tab-Taste erreichbar sein
• Die Tab-Reihenfolge muss logisch sein (von oben nach unten, von links nach rechts)
• Ein sichtbarer Fokus-Indikator zeigt, wo sich der Nutzer gerade befindet
• Dropdown-Menüs müssen per Tastatur bedienbar sein
• Modale Dialoge (Pop-ups) müssen den Fokus «einfangen» und per Escape schliessbar sein

Häufige Fehler, die du vermeiden solltest:

• outline: none im CSS ohne alternativen Fokus-Indikator
• Benutzerdefinierte Elemente (Divs statt Buttons), die keine Tastatur-Events haben
• Inhalte, die nur bei Hover sichtbar werden, aber nicht per Fokus
• Skip-Links vergessen: Ein «Zum Inhalt springen»-Link am Seitenanfang hilft enorm

Tipp: Teste deine Website einmal komplett ohne Maus. Nur mit der Tastatur. Du wirst überrascht sein, wie viele Hürden auftauchen.

Formulare, Navigation und Struktur: Inklusives Design in der Praxis

Barrierefreiheit betrifft nicht nur einzelne Elemente, sondern die gesamte Struktur deiner Website.

Formulare barrierefrei gestalten:

• Jedes Eingabefeld braucht ein zugeordnetes Label (nicht nur Platzhalter)
• Fehlermeldungen müssen klar beschreiben, was korrigiert werden muss
• Pflichtfelder sollten mit aria-required="true" gekennzeichnet sein
• Autovervollständigung aktivieren, wo sinnvoll (Name, E-Mail, Adresse)
• Zeitlimits vermeiden oder anpassbar machen

Semantische HTML-Struktur:

• Verwende die richtigen HTML-Elemente: <nav> für Navigation, <main> für den Hauptinhalt, <header> und <footer> für Kopf- und Fussbereich
• Überschriften-Hierarchie einhalten: Nur ein H1 pro Seite, darunter H2, H3 etc.
• Listen als <ul> oder <ol> auszeichnen, nicht mit manuellen Aufzählungszeichen
• Tabellen mit <th> für Kopfzeilen und <caption> für Beschreibungen

Praxis-Beispiel: Ein Handwerksbetrieb aus dem Kanton Solothurn hatte ein mehrstufiges Angebotsformular. Nach der barrierefreien Überarbeitung – mit klaren Labels, Fortschrittsanzeige und logischer Tab-Reihenfolge – verbesserte sich die Conversion-Rate deutlich. Gutes Design hilft allen Nutzern.

Barrierefreiheit testen: So gehst du vor

Du musst kein Experte sein, um deine Website auf Barrierefreiheit zu prüfen. Mit diesen Tools und Methoden kommst du schnell zu ersten Ergebnissen:

Automatisierte Tools:

• WAVE (WebAIM): Browser-Erweiterung, die Fehler direkt auf der Seite markiert
• Lighthouse (Google Chrome): Integrierter Accessibility-Audit in den DevTools
• axe DevTools: Detaillierte Analyse mit konkreten Lösungsvorschlägen
• Pa11y: Open-Source-Tool für automatisierte Tests

Manuelle Tests:

• Navigiere deine gesamte Website nur mit der Tastatur
• Aktiviere einen Screen-Reader (VoiceOver auf Mac, NVDA auf Windows) und höre dir deine Website an
• Zoome auf 200 % und prüfe, ob alles noch lesbar und bedienbar ist
• Deaktiviere CSS und prüfe, ob die Inhaltsreihenfolge logisch ist

Der Business Case für Barrierefreiheit:

• Grössere Zielgruppe: Rund 20 % der Bevölkerung leben mit einer Behinderung
• Besseres SEO: Suchmaschinen lieben semantisches HTML und Alt-Texte
• Höhere Conversion-Rate: Klare Struktur und gute Lesbarkeit helfen allen
• Rechtssicherheit: Du bist auf kommende Regulierungen vorbereitet
• Imagegewinn: Inklusivität stärkt deine Marke

Bei D3 Webstudio in Solothurn setzen wir Barrierefreiheit von Anfang an um – nicht als nachträgliches Add-on, sondern als integralen Bestandteil jeder Website.

FAQ: Häufige Fragen zur Barrierefreiheit

Ist Barrierefreiheit für Schweizer KMU Pflicht? Für öffentliche Stellen gilt das BehiG. Private Unternehmen sind in der Schweiz nicht generell verpflichtet, aber der European Accessibility Act (EAA), der seit Juni 2025 gilt, betrifft auch Schweizer Firmen, die in der EU Geschäfte machen. Es lohnt sich, jetzt schon vorzusorgen.

Was kostet eine barrierefreie Website? Wenn Barrierefreiheit von Anfang an eingeplant wird, sind die Mehrkosten gering – oft nur 10-15 % des Budgets. Nachträgliche Anpassungen sind deutlich teurer. Rechne mit CHF 500 bis CHF 3'000 für ein Audit und die Umsetzung der wichtigsten Massnahmen.

Reicht ein automatisierter Test? Nein. Automatisierte Tools erkennen nur etwa 30-40 % aller Barrieren. Manuelle Tests – besonders Tastatur-Navigation und Screen-Reader-Tests – sind unverzichtbar. Ideal ist eine Kombination aus automatisierten Checks und manuellen Prüfungen.

Muss ich alle WCAG-Kriterien erfüllen? Strebe mindestens WCAG 2.2 Level AA an – das ist der aktuelle, international anerkannte Standard. Level AAA ist für die meisten KMU-Websites nicht vollständig umsetzbar, aber einzelne AAA-Kriterien (wie höhere Kontraste) sind einfach umzusetzen und empfehlenswert.

Fazit: Barrierefreiheit ist ein Gewinn für alle

Barrierefreiheit ist kein Kostenfaktor, sondern eine Investition. Sie macht deine Website besser – für Menschen mit Behinderungen, für mobile Nutzer, für Suchmaschinen und für dein Geschäft. Beginne mit den Grundlagen: Kontraste prüfen, Alt-Texte ergänzen, Tastatur-Navigation testen. Jeder Schritt zählt.

Du möchtest wissen, was eine barrierefreie, moderne Website für dein Unternehmen kostet? Erfahre auf unserer Seite Website erstellen lassen, wie wir arbeiten – und erhalte eine unverbindliche Kostenschätzung, Barrierefreiheit inklusive.