Accessibility Fundament: Wie SilverStripe und Hyvä-Theme dein Webprojekt barrierefrei machen
SilverStripe ab v6 und Hyvä (ab 1.3.0) bringen wichtige Grundlagen für Barrierefreiheit bereits mit: sauberes HTML, sinnvolle Semantik, Tastaturbedienung, Fokusführung und robuste Kontraste. Das ist ein starker Start, ersetzt aber keine Prüfung von individuellem Design, Content und Drittanbieter-Extensions.
Ein barrierearmes Grundgerüst spart Zeit, reduziert Risiken und hilft, Projekte auf die Anforderungen der WCAG 2.1 und des European Accessibility Act (EAA) vorzubereiten. Gerade im E-Commerce und bei öffentlichen oder stark regulierten Angeboten wird Accessibility zunehmend zum entscheidenden Qualitätsmerkmal.
Warum WCAG 2.1 und der European Accessibility ACT (EAA) jetzt für viele Webprojekte relevant sind
Barrierefreiheit ist nicht nur ein "Nice to have". Für viele Organisationen ist sie eine Kombination aus:
- Inklusion von allen Menschen: Keine Zielgruppen werden ausgeschlossen, was sich positiv auf den Umsatz auswirkt
- Rechtliche Anforderungen: je nach Angebot und Zielmärkten
- Qualitätssicherung für alle Nutzer:innen, auch mobile, ältere oder temporär eingeschränkte Personen
- Conversion-Faktor im Checkout und bei Formularen
- SEO- und Content-Qualität durch bessere Struktur und klare Inhalte
Wichtig: Ein Framework kann Accessibility unterstützen, aber die eigentliche Konformität entsteht erst im Zusammenspiel von Design, semantischem Code, Inhaltsaufbereitung im CMS und kontinuierlichen Tests im laufenden Betrieb.
SilverStripe 6
Welche WCAG-Grundlagen für die Barrierefreiheit bereits mitgeliefert werden
Das SilverStripe Base Theme (ab Version 6) liefert eine Reihe sinnvoller Defaults, die besonders für technisch orientierte Teams hilfreich sind.
1) Tastaturbedienung, Tab-Navigation und Fokusführung
Wenn Navigation, Formulare und interaktive Elemente sauber aufgebaut sind, profitieren Tastatur-User und Screenreader gleich doppelt.
Typische Punkte, die im Base Theme bereits als Fundament vorhanden sind:
- Tab-Navigation über interaktive Elemente
- Sichtbarer Fokus-Indikator (damit klar ist, wo man sich befindet)
- Sinnvolle Fokus-Reihenfolge durch semantisches Markup
2) Kontraste: 4.5:1 als praxisnahe Leitplanke
WCAG 2.1 AA fordert in vielen Fällen einen ausreichenden Kontrast. Ein Theme kann das unterstützen, indem es Default-Farben und typografische Kombinationen so gestaltet, dass das Ziel erreichbar ist.
In Projekten ist der häufigste Stolperstein aber nicht das Base Theme, sondern:
- individuelle Farben aus dem Corporate Design
- Text auf Bildern
- Zustände wie Hover, Disabled, Error
Unsere UX/UI-Designer*innen legen bei der Gestaltung der Websites, Webapplikationen und Onlineshops grundsätzlich bei allen Elementen (Buttons, Navigation, Lauftext, etc.) Wert auf einen genügend hohen Kontrast.
3) Semantisches HTML und ARIA nur dort, wo sinnvoll
Semantisches HTML (z.B. nav, main, header, button, korrekte Überschriftenhierarchie) hilft allen assistiven Technologien.
ARIA-Rollen sind eine Ergänzung, kein Ersatz. Gute Defaults zeigen sich oft daran, dass:
- Interaktionen mit echten Buttons und Links umgesetzt sind
- ARIA-Attribute nicht inflationär, sondern gezielt eingesetzt werden
- Formulare klare Labels und Fehlermeldungen unterstützen
4) Backend von SilverStripe CMS ab v6.2 für Accessibility optimiert
Mit dem neuesten Release von SilverStripe CMS wurde auch die Administration Ihrer Website barrierefrei. Dadurch wird die Bearbeitung der Inhalte für alle Menschen verbessert.
Mehr Infos: silverstripe.org/blog/announcing-silverstripe-cms-6-2-0-with-better-accessibility-and-qol-features
Magento mit Hyvä-Theme - Barrierefrei bereits seit v1.3.0
Accessibility im E-Commerce konsequent integriert
Hyvä ist im Magento-Umfeld vor allem für Performance bekannt. Bereits seit der Version 1.3.0 ist zusätzlich klar ersichtlich, dass auch Accessibility strukturell mitgedacht wird. Wobei wir aktuell bereits die Version 2.7.x einsetzen.
1) Vollständige Tastaturnavigation
Gerade im Shop sind Tastaturpfade kritisch: Mega-Menüs, Filter, Modals, Slider, Warenkorb, Checkout.
Hyvä liefert hier ein robustes Grundverhalten, damit man nicht bei null startet.
2) Screenreader-Support und sauberes HTML
Wenn Templates und Komponenten sauber strukturiert sind, wird der Shop bedienbarer.
Wichtig bleibt dennoch:
- Produktdaten und Attribute (z.B. Varianten, Labels)
- dynamische Inhalte (z.B. AJAX Updates)
- Third-Party Module
3) WCAG 2.1 AA Kontraste als Standardziel
Hyvä zielt auf WCAG 2.1 AA, was besonders bei Buttons, Formularen und Status-Meldungen viel Arbeit spart.
Aber auch hier gilt: Sobald ein Projekt stark individualisiert wird, kann Kontrastkonformität schnell wieder kippen.
Was trotz "out of the box" immer separat geprüft werden muss
1) Individuelles UX/UI-Design
- klare visuelle Hierarchien und konsistente Komponenten
- Kontrastumfang für alle Elemente
- Touch-Ziele auf Mobile-Devices in passender Grösse
- logische Gliederung des Inhaltlichen Aufbaus
2) Content und Redaktion
- Alternativtexte für Bilder
- verständliche Linktexte
- klare Überschriftenstruktur
- Sprache und Lesbarkeit
3) Drittanbieter-Extensions und Integrationen
- Zahlungslösung
- Chat-Widgets
- Tracking & Marketing-Tools
- SPAM-Schutz (Captchas)
4) Responsives Verhalten und 200 Prozent Zoom
- 200 Prozent Zoom im Browser
- Reflow ohne horizontales Scrollen (wo möglich)
- Menü und Filter bei kleinen Viewports
UserWay Widget: tolle Ergänzung, aber kein Freipass
Accessibility-Overlays wie das UserWay Widget können sehr hilfreich sein. Sie bieten sehr nützliche Tools für Menschen mit Legasthenie, ADS, ADHS oder kognitiven und motorischen Handycaps:
- Text vorlesen
- vergrösserte Schrift, Zeiger, Textabstände
- Kontrast-Profile
- Fokus-Hervorhebungen
- Bilder ausblenden und Animationen stoppen
- etc.
Zusätzlich optimieren diese automatisch die Semantik des Codes, ergänzen automatisch Alt-Texte wenn diese fehlen oder entfernen sie, wenn nicht notwendig.
Sie sind zwar keine All-in-one Lösungen, aber nehmen Fleissarbeit ab und verbessern die Zugänglichkeit für viele Menschen erheblich und unterstützen dabei den Standard AA oder AAA zu erreichen.
Wichtig ist die Erwartungshaltung:
Overlays ersetzen aber keine saubere technische Umsetzung und keine korrekte inhaltliche Pflege. Sie garantieren nicht, dass ein Webprojekt WCAG-konform ist.
Als Partnerfirma von UserWay, unterstützen wir gerne bei der Implementierung. Auch in bestehende Lösungen.
Fazit: Solides Grundgerüst, bessere Ausgangslage, weniger Risiko
SilverStripe v6 und Magento mit Hyvä-Theme, beide in der OpenSource-Version, liefern für Barrierefreiheit eine sehr gute Basis. Wer ein Webprojekt oder einen Shop EAA-tauglich realisieren will, spart mit solchen Fundamenten Zeit und reduziert technische Defizite.
Damit daraus echte Konformität wird, braucht es aber weiterhin:
- klare Accessibility-Anforderungen im Konzept
- gezielte Tests (Tastatur, Screenreader, Kontraste)
- Content-Guidelines inkl. Barrierefreie PDFs, Videos mit Untertiteln, Audio-Transkription
- Review-Prozess für neue Features und Extensions
BIWAC berät Sie gerne rund um das Thema Barrierefreiheit
Wir bieten zwar Accessibility-Audits nicht direkt an, begleiten den Prozess, aber gerne gemeinsam mit einer spezialisierten Auditfirma und stellen die korrekte technische Umsetzung sicher.
Projekte mit Accessibility Optimierungen
FAQ & Glossar
Welche Vorteile hat ein/e barrierefreie/r Onlineshop oder Website?
In erster Linie lässt es Menschen mit besonderen Bedürfnissen am Internet teilhaben.
Eine barrierefreie Website bringt konkrete Vorteile, weit über die reine Compliance hinaus. Die wichtigsten auf einen Blick:
- Grössere Zielgruppe: Menschen mit Behinderungen, ältere Nutzende und Personen mit temporären Einschränkungen können die Website selbständig nutzen.
- Bessere Usability für alle: Klare Strukturen, lesbare Schriften und einfache Navigation kommen jedem zugute – nicht nur Menschen mit Einschränkungen.
- SEO-Boost: Semantisches HTML, sinnvolle Alt-Texte und strukturierter Content verbessern die Auffindbarkeit in Suchmaschinen.
- Rechtliche Absicherung: Wer die Anforderungen des EAA oder des Schweizer BehiG erfüllt, reduziert das Risiko von Abmahnungen und Bussen.
- Markenimage und Vertrauen: Barrierefreiheit signalisiert gesellschaftliche Verantwortung und stärkt das Vertrauen der Nutzenden.
- Langfristige Kostenersparnis: Frühzeitig umgesetzt ist Barrierefreiheit deutlich günstiger als spätere Nachrüstungen.
Netter Nebeneffekt: Der Umsatz wird gesteigert, da sich die Zielgruppe vergrössert und niemand ausgeschlossen wird.
Wie wirkt sich eine barrierefreie Lösung auf meinen Umsatz aus?
Barrierefreiheit ist kein reines Compliance-Thema – sie hat direkte Auswirkungen auf Conversion und Umsatz.
Eine barrierefreie Website erreicht mehr Menschen: Schätzungen zufolge leben in der EU rund 87 Millionen Menschen mit einer Behinderung. Dazu kommen ältere Nutzende, Menschen mit temporären Einschränkungen oder schlechten Bedingungen (z.B. Sonnenlicht auf dem Screen, eingeschränkte Motorik).
Konkrete Effekte im E-Commerce
Formulare mit klaren Labels und Fehlermeldungen reduzieren Abbruchquoten. Bessere Tastatur- und Mobilnavigation verbessert die Usability für alle. Strukturierter Content fördert SEO und erhöht organische Sichtbarkeit. Kurz: Wer Barrierefreiheit ernst nimmt, verbessert die Nutzererfahrung insgesamt – und damit auch die Voraussetzungen für höhere Conversion-Raten.
Wer bietet barrierefreie Websites?
Es gibt verschiedene Agenturen und Dienstleister, die sich auf barrierefreie Web-Entwicklung spezialisiert haben – von spezialisierten Accessibility-Agenturen bis hin zu erfahrenen Full-Service-Agenturen wie BIWAC. Als langjähriger Partner für individuelle Web- und E-Commerce-Projekte bringt BIWAC tiefes technisches Know-how in SilverStripe und Magento mit Hyvä mit – zwei Frameworks, die Barrierefreiheit bereits strukturell mitdenken.
Wer also ohnehin eine neue Website oder einen Shop plant oder bestehende Projekte modernisieren möchte, findet in BIWAC einen idealen Ansprechpartner: mit dem Blick fürs Ganze, dem nötigen technischen Fundament und dem Netzwerk für spezialisierte Audits.
Was bedeutet WCAG 2.1 AA in der Praxis?
WCAG 2.1 ist ein internationaler Standard für Web-Accessibility. "AA" ist das häufigste Zielniveau in Projekten. Praktisch bedeutet das unter anderem: Inhalte müssen per Tastatur bedienbar sein, Kontraste müssen ausreichend sein, Formulare müssen verständlich und robust umgesetzt sein und Inhalte müssen bei Zoom nutzbar bleiben.
Was ist ein Accessibility-Overlay und wofür ist es gut?
Ein Overlay (z.B. UserWay) bietet zusätzliche Darstellungs- und Bedienhilfen. Es kann Nutzenden helfen, ersetzt aber keine barrierearme Umsetzung der Website. Es ist eine Ergänzung, kein Ersatz für saubere Technik.
Was ist der European Accessibility Act (EAA)?
Der European Accessibility Act (EAA) ist eine EU-Richtlinie (2019/882), die digitale Produkte und Dienstleistungen für Menschen mit Behinderungen zugänglich machen soll. Ab dem 28. Juni 2025 müssen viele Unternehmen, die Produkte oder Dienstleistungen in der EU anbieten, die Anforderungen erfüllen – darunter Websites, Apps, E-Commerce-Plattformen und Selbstbedienungsterminals. Als technische Grundlage dient in der Regel WCAG 2.1 AA. Für Schweizer Unternehmen, die in EU-Märkten tätig sind oder dort Kunden bedienen, ist der EAA direkt relevant.
Ist EAA für mich relevant oder wie kann ich das herausfinden?
Der EAA betrifft grundsätzlich Unternehmen, die Produkte oder Dienstleistungen in der EU anbieten. Relevant sind vor allem: Online-Shops und E-Commerce-Plattformen, Banking- und Finanzdienstleistungen, Telekommunikationsangebote, digitale Medien und Streaming-Dienste sowie Personenbeförderungsdienste. Ausgenommen sind in der Regel Kleinstunternehmen (weniger als 10 Mitarbeitende und unter 2 Mio. EUR Jahresumsatz). Für Schweizer Unternehmen gilt: Wer Kunden in der EU bedient oder Produkte in den EU-Markt liefert, sollte prüfen, ob die Richtlinie greift. Im Zweifel lohnt sich eine rechtliche Einschätzung. BIWAC unterstützt gerne bei der technischen Umsetzung und Koordination.
Reicht ein barrierefreies Theme, um EAA-konform zu sein?
Nein. Ein Theme ist nur das Fundament. EAA-Konformität hängt auch von Content, Design-Entscheiden, individuellen Komponenten, Drittanbieter-Tools und dem Testprozess ab.
Welche Tests sollte man im Projekt mindestens einplanen?
Mindestens: Tastaturtests (Tab, Shift+Tab, Enter, Escape), Kontrastprüfung, Formular- und Fehlermeldungsprüfung, Tests mit Screenreader (z.B. VoiceOver oder NVDA) sowie Checks bei responsivem Verhalten und 200 Prozent Zoom.
Leseempfehlungen & Quellen
- Accessibility Checkliste: https://a11y.digitaldialog.swiss/checklist
- Accessibility Scanner (kostenlos): https://www.accessibilitychecker.org/de/
- WCAG 2.1 (W3C): https://www.w3.org/TR/WCAG21/
- European Accessibility Act (EU): https://eur-lex.europa.eu/eli/dir/2019/882/oj
- SilverStripe Docs: https://docs.silverstripe.org
- Hyvä Docs: https://docs.hyva.io
- UserWay: https://userway.org