Barrierefreiheit (automatische Vorprüfung)

Was wir prüfen

Wir laden die Startseite in einem echten Browser und prüfen sie mit axe-core, einem weit verbreiteten Open-Source-Werkzeug für automatische Barrierefreiheitstests. Es prüft rund hundert Regeln, die sich aus den internationalen Richtlinien WCAG ableiten. Häufige Funde sind:

Problem	Was es bedeutet
Zu wenig Kontrast	Text hebt sich zu wenig vom Hintergrund ab.
Bilder ohne Beschreibung	Vorlesesoftware weiss nicht, was auf dem Bild ist.
Links ohne Text	Reine Icons, z.B. Social-Media-Symbole, haben keinen lesbaren Namen.
Buttons ohne Beschriftung	z.B. ein Menü-Button nur mit drei Strichen.
Formularfelder ohne Beschriftung	Vorlesesoftware sagt nur «Eingabefeld».
Eingebettete Inhalte ohne Titel	Karten und Videos sind nicht benannt.

Kritische Probleme melden wir als schweren Mangel, schwere als Warnung, mittlere und leichte als Hinweis. Im Bericht siehst Du zu jedem Problem die Anzahl betroffener Stellen. Zusätzlich zeigen wir die Bewertung von Google Lighthouse.

Das ist eine automatische Vorprüfung, keine Prüfung auf WCAG-Konformität.

Warum das wichtig ist

Laut WHO lebt weltweit rund jede sechste Person mit einer erheblichen Behinderung. Dazu kommen viele ältere Menschen, die schlechter sehen, Menschen mit vorübergehenden Einschränkungen wie einem gebrochenen Arm und alle, die ihr Smartphone bei Sonnenlicht draussen benutzen.

Barrieren kosten Kundschaft:

• Wer den grauen Text auf hellgrauem Hintergrund nicht lesen kann, liest nicht weiter.
• Wer blind ist und das Kontaktformular nicht ausfüllen kann, weil die Felder nicht beschriftet sind, fragt woanders an.
• Wer ein Icon nicht deuten kann, findet den Weg nicht.

Viele Massnahmen für Barrierefreiheit verbessern zugleich die Auffindbarkeit: Bildbeschreibungen, klare Überschriften und eine Sprachangabe helfen auch Google und KI-Assistenten.

So behebst Du es

Kontrast

Text sollte mindestens ein Kontrastverhältnis von 4.5:1 zum Hintergrund haben, grosser Text 3:1. Hellgrauer Text auf Weiss oder weisser Text auf hellen Fotos sind die häufigsten Probleme. Werkzeuge wie der «WebAIM Contrast Checker» berechnen das Verhältnis.

Bildbeschreibungen (Alternativtext)

Beschreibe kurz, was auf dem Bild zu sehen ist, wenn es Information trägt: «Unser Team vor der Werkstatt in Thun». Rein dekorative Bilder erhalten einen leeren Alternativtext (alt=""). In WordPress, Wix und allen gängigen Baukästen gibt es beim Bild ein Feld «Alternativtext».

Links, Buttons und Formularfelder

• Icons ohne Text bekommen eine unsichtbare Beschriftung, z.B. aria-label="Instagram".
• Formularfelder brauchen eine sichtbare Beschriftung, die mit dem Feld verknüpft ist. Platzhaltertext im Feld allein genügt nicht.

Eingebettete Inhalte

Karten und Videos in einem <iframe> erhalten ein title-Attribut, z.B. title="Karte: So finden Sie uns".

So prüfst Du es selbst

Die kostenlose Browser-Erweiterung «axe DevTools» führt denselben Test durch und zeigt jede betroffene Stelle. Der Lighthouse-Bericht in den Chrome-Entwicklertools (F12, Reiter «Lighthouse») enthält ebenfalls eine Barrierefreiheitsprüfung.

Häufige Fragen

Ist eine Website barrierefrei, wenn hier keine Probleme gemeldet werden?

Nicht unbedingt. Automatische Tests finden erfahrungsgemäss nur einen Teil der Barrieren, etwa ein Drittel. Ob Texte verständlich, Bildbeschreibungen sinnvoll und Abläufe bedienbar sind, zeigt nur eine Prüfung durch Fachleute und Betroffene.

Ist eine Website gesetzlich zur Barrierefreiheit verpflichtet?

Das hängt vom Markt ab. Wer in die EU verkauft, etwa über einen Online-Shop, kann seit Juni 2025 unter den European Accessibility Act fallen (in Deutschland das BFSG), Kleinstunternehmen sind teilweise ausgenommen. In den USA betreffen Klagen nach dem ADA oft Websites. Öffentliche Stellen sind fast überall verpflichtet. Unabhängig davon erreichen barrierefreie Websites schlicht mehr Kundschaft.