Barrierefreie Webentwicklung.

Barrierefreiheit ist ab Juni 2025 gesetzliche Pflicht für E-Commerce und digitale Dienstleistungen. Technische Konformität nach WCAG und BFSG — präzise umgesetzt im Code, ohne Overlays.

Beratungsgespräch anfragen

Barrierefreiheit ist ab Juni 2025 gesetzliche Pflicht für E-Commerce und digitale Dienstleistungen. Technische Konformität nach WCAG und BFSG — präzise umgesetzt im Code, ohne Overlays.

Beratungsgespräch anfragen

Die Herausforderung

Barrierefreiheit als gesetzlicher und sozialer Standard.

Rechtliche Vorgaben, Conversion-Verluste und Barrieren im Quellcode zwingen zum systematischen Umdenken.

Situation 01

BFSG 2025 Fristen druck

Das Barrierefreiheitsstärkungsgesetz verlangt ab Juni 2025 eine barrierefreie Gestaltung von E-Commerce, Dienstleistungen und Buchungsstrecken. Unternehmen müssen handeln, um Bußgelder und Abmahnungen zu vermeiden.

Situation 02

Mangelndes Vertrauen und Kundenabbruch

Webseiten mit unklaren Fokuszuständen, fehlenden Alternativtexten oder fehlerhafter Tastaturnavigation sperren bis zu 10 % der potenziellen Kunden (z. B. Menschen mit motorischen oder visuellen Einschränkungen) aus.

Situation 03

Visuell ansprechend, technisch mangelhaft

Häufig sieht ein Design modern aus, scheitert jedoch bei der maschinellen Erfassung. Fehlende ARIA-Labels, falsche Überschriftenhierarchien und Kontrastmängel machen die Nutzung für Screenreader unmöglich.

Die Säulen

Technische Richtlinien für barrierefreie Applikationen.

Wie Zugänglichkeit strukturiert im Code verankert wird.

Barrierefreie Steuerung eines Akkordeons

Dieses Beispiel demonstriert ein semantisch korrektes, tastaturbedienbares Akkordeon-Element mit ARIA-Attributen für eine zuverlässige Sprachausgabe.

<!-- 1. Trigger-Button mit Verweis auf den Panel-Inhalt und Status -->
<button
  type="button"
  aria-expanded="false"
  aria-controls="accordion-panel-1"
  id="accordion-trigger-1"
  class="accordion-header"
>
  Warum ist semantisches HTML wichtig?
</button>

<!-- 2. Zugehöriger Inhalts-Container mit passender ID und Rollen-Zuweisung -->
<div
  id="accordion-panel-1"
  role="region"
  aria-labelledby="accordion-trigger-1"
  class="accordion-panel"
  hidden
>
  <p>
    Semantische Elemente teilen Hilfsmitteln (z. B. Screenreadern) direkt die Bedeutung eines
    Bereichs mit, anstatt nur Struktur zu erzeugen. Das erleichtert die maschinelle Navigation.
  </p>
</div>

Arbeitsweise

Schritte zur Barrierefreiheit.

Ein strukturierter Prozess von der Fehleranalyse bis zur gesetzlich konformen Erklärung.

Bestandsaufnahme & BFSG-Audit

Prüfung der bestehenden Plattform anhand der WCAG 2.1/2.2 AA Richtlinien. Identifikation kritischer Barrieren in Navigation, Kontrasten und Formularen.

Semantische Code-Strukturierung

Umbau von DIV-basierten Elementen auf semantische HTML-Tags. Ergänzung von Skip-Links (Sprungmarken), um Tastaturnutzern das direkte Springen zum Hauptinhalt zu ermöglichen.

Interaktions- & Tastaturtests

Manuelle Prüfung der gesamten Seite mittels Screenreader (NVDA, VoiceOver) und reiner Tastaturbedienung. Optimierung der Tab-Reihenfolge und Fokussicherung bei Modals.

BFSG-Erklärung & Konformitäts-Nachweis

Erstellung des gesetzlich geforderten Statements zur Barrierefreiheit und Übergabe eines Prüfberichts als Nachweis der Konformität.

Häufige Fragen

Häufige Fragen zur digitalen Barrierefreiheit.

Hintergründe zu gesetzlichen Pflichten und technischer Umsetzung.

Welche Unternehmen müssen das BFSG ab Juni 2025 einhalten?

Betroffen sind alle geschäftsmäßig angebotenen Dienstleistungen und Produkte im elektronischen Geschäftsverkehr (E-Commerce). Ausgenommen sind reine Dienstleistungen von Kleinstunternehmen (weniger als 10 Mitarbeiter UND unter 2 Mio. € Jahresumsatz). Für den Vertrieb von Produkten gilt diese Ausnahme jedoch nicht.

Reicht eine reine Overlay-Software (Barrierefreiheits-Widget) aus?

Nein. Sogenannte Accessibility-Overlays, die nachträglich Kontraste oder Vorlesefunktionen per Skript einfügen, lösen die zugrundeliegenden Code-Mängel (z. B. fehlende Tastatur-Navigation, unlesbare Formular-Labels) nicht. Sie verhindern keine Abmahnungen und verlangsamen oft die Ladezeit der Webseite.

Wie wird Barrierefreiheit technisch überprüft?

Die Prüfung erfolgt in zwei Schritten: Einerseits über automatisierte Test-Suiten (wie Lighthouse oder axe-core) für strukturelle Mängel, andererseits über manuelle Audits mit Tastatur-Navigation und Screenreadern (VoiceOver, NVDA) zur Bewertung des tatsächlichen Nutzungserlebnisses.

Welcher Standard wird für die Barrierefreiheit gefordert?

In der Regel gilt der internationale Standard WCAG 2.1 (Web Content Accessibility Guidelines) auf der Konformitätsstufe AA als Maßstab für die gesetzliche Erfüllung der Barrierefreiheit.

Passt auch dazu