Was bedeutet Barrierefreiheit überhaupt?
Barrierefreiheit sorgt dafür, dass alle Menschen gleichberechtigt am digitalen Leben teilhaben können – unabhängig von körperlichen Einschränkungen, Alter oder fehlender Erfahrung mit digitalen Medien.
Warum ist die digitale Barrierefreiheit wichtig?
Digitale Barrierefreiheit heißt: Deine Produkte und Dienstleistungen im Web sind für alle Menschen zugänglich und nutzbar – z. B. für Menschen mit Behinderung, ältere Personen oder Menschen mit wenig technischer Erfahrung.
Was schreibt das Gesetz vor
Bisher galt Barrierefreiheit vor allem für öffentliche Stellen – also Behörden und staatliche Webseiten. Neu ist: Auch private Unternehmen sind betroffen. Die Vorgaben gelten für:
- Digitale Produkte (z. B. Webseiten, Apps, E-Reader, Bankautomaten)
- Digitale Dienstleistungen (z. B. Online-Shops, Kundensupport-Portale, Buchungssysteme)
Barrierefreiheit umsetzen
Überprüfe deine bestehenden digitalen Angebote auf Barrierefreiheit. Entwickle neue Produkte und Dienstleistungen – oder überarbeite bestehende – nach anerkannten Standards wie den WCAG (Web Content Accessibility Guidelines).
Wichtig: Berücksichtige Barrierefreiheit frühzeitig in Projekten und bei der Produktentwicklung.
Gibt es Ausnahmen?
Kleinstunternehmen müssen die Vorgaben nicht erfüllen, wenn alle drei Bedingungen zutreffen:
- Du bietest keine betroffenen Produkte an (laut BFSG-Liste)
- Du hast weniger als 10 Mitarbeitende
- Dein Jahresumsatz liegt bei max. 2 Millionen Euro
Sind alle Punkte erfüllt, gilt das Barrierefreiheitsstärkungsgesetz (BFSG) nicht für dich.
Was kannst du konkret tun?
Öffne in der App Templates den Reiter "Shop-Templates" und prüfe im Dropdown-Menü, ob das Template 1_shop_universe_4.1_barrierefrei vorhanden ist.
Falls das Template nicht vorhanden ist, buche bitte ein Komplettupdate.
Wenn es vorhanden ist, kopiere das Template und wähle die Kopie für deinen tricoma Shop bzw. deine Webseite aus.
Hier ein paar wichtige Schritte, die du danach direkt umsetzen kannst:
- ALT-Texte für Bilder und Icons:
Verwende ALT-Texte, damit Screenreader den Inhalt erfassen können. Das geht z. B. über die App Bilderserie oder App t+ content. Die Attribute werden dann in der Ausgabe gesetzt, sofern diese gepflegt wurden.
- Strukturierte Überschriften:
Nutze eine klare Hierarchie (H1, H2, H3). Das hilft beim Navigieren mit Hilfsmitteln.
- Guter Farbkontrast:
Achte auf einen Mindestkontrast von 4.5:1 bei Fließtext und 3:1 bei großer Schrift. Dies kannst du im Shop-Template konfigurieren.
- Untertitel & Transkripte für Medien
Video und Audios sollten mit Untertiteln und schriftlichen Transkripten versehen sein.
- Keine Texte in Bildern (außer Logos)
Texte in Bildern können nicht von Screenreadern gelesen werden.
- Einfache, klare Sprache
Vermeide Fachjargon. Mach es verständlich.
- Lesbare Schriftgrößen
Mindestens 16 Pixel, mit einer Zeilenhöhe von 1.5em oder mehr.
- Eindeutige Buttons
Statt "Hier kilcken" lieber "Jetzt anmelden" - so weiß jeder sofort, worum es geht.
- Keine blinkenden Inhalte
Blinken sollte höchstens 3x pro Sekunden erfolgen - besser gar nicht.
- Teste deine Barrierefreiheit
Nutze Tools wie den WAVE Accessibility Checker oder versuche mal selbst, deine Webseite ohne Maus oder mit Screenreader (blind) zu bedienen.
Und wobei helfen wir dir?
Wir unterstützen dich gerne bei der technischen Umsetzung, z. B. mit:
- Responsivem Design & Zoomfähigkeit (bis 200 %)
- Tastatur-Navigation (Tab-Reihenfolge beachten)
- Sichtbaren Fokus-Indikatoren (z. B. bei Buttons)
- Kein „Hover-only“ – alle Funktionen auch per Tastatur nutzbar
- Klar beschriftete Formulare und Fehlermeldungen – keine Platzhalter als Labels
- Keine automatisch abspielenden Animationen (max. 3 Blinks pro Sekunde)
- Konsistente Navigation & Gestaltung (Menüs, Buttons an gewohntem Platz)
- Aussagekräftige Buttons (statt „Hier klicken“ besser „Jetzt anmelden“)