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
Website-Check: So erkennst du das Potenzial deiner Website
Ein Website-Check beantwortet drei Fragen: Was ist messbar gut, was kostet dich Geld oder Sichtbarkeit und wie viel Potenzial steckt noch in der bestehenden Website? Wir zeigen, was ein Check heute prüfen muss, wann Optimieren nichts mehr bringt und wo automatisierte Analysen an Grenzen stossen.
KI-Navigation und visuelles Editieren: Wie unser KI-Assistent die User Experience und Content-Pflege revolutioniert
KI verändert die Art und Weise, wie wir mit digitalen Plattformen interagieren. Bei der raffiniert media AG nutzen wir künstliche Intelligenz gezielt dort, wo sie echten Mehrwert schafft: zur Vereinfachung von Suchwegen für Besucher und zur Automatisierung im Redaktionsalltag.
Pixelgenaue Web-Umsetzung nach Mass: Wie wir das Designkonzept von another-studio.ch realisiert haben
Für das Designstudio another-studio.ch haben wir als verlässlicher Entwicklungspartner die kompletten Relaunch- und Ausbauphasen der Website von Lynn Grütter umgesetzt – kreative Entwürfe ohne optische Kompromisse in einem modernen Storyblok CMS.
Wie wir für Foma Galvanik durch ein pragmatisches Upgrade die Zukunft sichern
Veraltete Systeme und teure Wartungszyklen haben die Foma Galvanik ausgebremst. Durch den Wechsel auf einen modernen Tech-Stack mit Storyblok und Next.js haben wir ein effizientes Soft-Redesign realisiert, das die Performance steigert und gleichzeitig das Budget schont.
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.
