Barrierefreiheit im Schweizer Onlinehandel: Gesetzliche Anforderungen und technische Umsetzung
Wer heute seinen Onlineshop barrierefrei gestaltet, gewinnt morgen Kunden, die andere ignorieren. In der Schweiz ist das Thema Accessibility längst von der sozialen Nische zur geschäftskritischen Anforderung geworden.
Barrierefreiheit kostet nur Zeit und bremst das Design
Dieses Vorurteil hält sich hartnäckig. Doch die Realität sieht anders aus: Ein barrierefreier Shop ist schneller, SEO-freundlicher und vor allem für alle Menschen nutzbar. Bei der raffiniert media AG sehen wir Accessibility nicht als lästige Pflicht, sondern als Teil unserer „Swiss Made“ Qualitätsgarantie.
Die Rechtslage: Was Schweizer Onlinehändler wissen müssen
In der Schweiz bildet das Behindertengleichstellungsgesetz (BehiG) die Grundlage. Während es bisher vor allem öffentliche Institutionen direkt betraf, wächst der Druck auf private Anbieter massiv – nicht zuletzt durch den European Accessibility Act (EAA).
Warum das für dich relevant ist: Wenn du Produkte oder Dienstleistungen im EU-Raum verkaufst, müssten deine digitalen Schnittstellen per Juni 2025 den Anforderungen entsprechen. Wer hier schläft, riskiert nicht nur rechtliche Konsequenzen, sondern schliesst laut Schätzungen vom Bundesamt für Statistik (BFS) bis zu 20 % der potenziellen Kunden (Menschen mit Seh-, Hör- oder motorischen Einschränkungen) proaktiv aus.
Bessere Rankings
Logische Überschriftenhierarchien und Alt-Texte für Bilder sind Kernbestandteile von SEO.
Performance
Barrierefreier Code ist oft schlanker und verbessert deine Core Web Vitals.
Höhere Conversion
Ein Shop, der sich perfekt per Tastatur bedienen lässt, ist meist auch auf mobilen Geräten intuitiver.
Technische Umsetzung: So bauen wir barrierefreie Frontends
Barrierefreiheit darf kein „Add-on“ am Ende des Projekts sein. Wir integrieren sie direkt in die Architektur:
Wir nutzen echtes HTML5 (<main>, <nav>, <button>). Das hilft Screenreadern, die Seite korrekt zu interpretieren.
Ein Nutzer muss ohne Maus durch deinen Checkout-Prozess kommen. Wir implementieren sichtbare Fokus-Zustände und „Skip-to-Content“-Links.
Wir setzen auf moderne CSS-Architekturen, die sicherstellen, dass Texte lesbar bleiben und das Layout auch bei 200 % Zoom nicht bricht.
Wo Standard-HTML an seine Grenzen stösst (z. B. bei komplexen Filtern), nutzen wir Accessible Rich Internet Applications, um den Status von Komponenten (z. B. aria-expanded="true") zu kommunizieren.
Audit machen
Lass deine Seite durch automatisierte Tools (wie Axe oder Lighthouse) laufen, aber ergänze dies durch manuelle Tests.
Experten holen
Wir bei raffiniert unterstützen dich dabei, Barrierefreiheit pragmatisch und ohne Design-Verluste umzusetzen.
Backlog priorisieren
Starte beim Checkout und der Produktsuche. Das sind die kritischsten Stellen für deinen Umsatz.
Brauchst du eine technische Analyse deiner Plattform?
Lass uns gemeinsam prüfen, wie wir deinen Shop fit für die Zukunft machen.
Weitere Stories
Shop-Migration zu Headless
Von WooCommerce oder einem selbstgebauten Shop zu einer Headless-Architektur mit Payload und Next.js – mit Redirect-Konzept, damit deine Google-Rankings die Migration überleben. Inklusive der offenen Grenzen: Beta-Status der Commerce-Erweiterung, Versand/Steuern/Abos und Schweizer Zahlungsarten.
Visuelles Editieren in Payload CMS: Unser Live Preview Inspector Plugin (Version 1.6.0)
Ein Headless CMS strukturiert Daten sauber. Redaktionsteams arbeiten dadurch jedoch oft in tief geschachtelten Formularen ohne visuelle Verbindung zum Frontend. Das Suchen nach dem richtigen Eingabefeld für einen bestimmten Textblock auf der Website kostet im Alltag viel Zeit.
Wie wir gemeinsam mit Coop-Experten die Lade-Performance der E-Commerce-Plattform optimieren
Ein Einblick in die Zusammenarbeit mit den Inhouse-Spezialisten von Coop. Erfahren Sie, wie durch die gemeinsame technische Optimierung kritischer Render-Pfade und Code-Strukturen die Lade-Performance der E-Commerce-Plattform nachhaltig gesteigert wurde.