HomeWebsiteLandingpageAppOnline MarketingBlogKontaktReferenzen
KOSTENFREIE BERATUNG
18 June 2025

Barrierefreiheit im Webdesign – Ein umfassender Überblick

Bild für Blogbeitrag Facebook-Post Nr. 13 - Barrierefreies Webdesign

Einstieg: Der BIENE-Award als Wegbereiter

Von 2003 bis 2010 zeichnete der BIENE-Award (Barrierefreies Internet eröffnet neue Einsichten) vorbildlich barrierefreie Websites im deutschsprachigen Raum aus. Initiiert von der Stiftung Digitale Chancen und Aktion Mensch, setzte der Preis Maßstäbe für gutes Webdesign – weit über gesetzliche Anforderungen hinaus. Über 100 Auszeichnungen wurden vergeben, bei mehr als 2.000 Einreichungen. Doch 2010 wurde der Award eingestellt. Warum?
Der technische Wandel – insbesondere durch Web 2.0, AJAX, dynamische Interfaces und die mobile Nutzung über Smartphone und iPad – machte die damaligen Prüfkriterien unzureichend. Der Award wurde pausiert, weil neue Standards erforderlich waren. Heute, angesichts zunehmenden rechtlichen Drucks durch das BFSG und EU-Richtlinien, gewinnt digitale Barrierefreiheit erneut an Relevanz – und mit ihr die mögliche Rückkehr der BIENE-Idee.


Neue Tools: KoliBri – Was ist das?     

  • KoliBri ist eine Open‑Source-Komponentenbibliothek, bereitgestellt vom ITZBund (Informationstechnikzentrum Bund), um barrierefreie, wiederverwendbare Web-Elemente (Buttons, Inputs, modale Fenster usw.) bereitzustellen.       
  • Ziel ist, die technische Umsetzung von BITV 2.0, EN 301 549 und WCAG zu erleichtern, insbesondere für Behörden und öffentliche Stellen.
  • Seit Oktober 2022 ist KoliBri unter der EUPL-Lizenz auf GitHub veröffentlicht und kann von öffentlichen sowie privaten Organisationen weltweit eingesetzt und weiterentwickelt werden.


Rolle im Rahmen der „Dienstekonsolidierung“

  • KoliBri ist Teil des Standardanforderungskatalogs Barrierefreiheit, der von BMI, LBIT Hessen und ITZBund entwickelt wurde.
  • Diese Bibliothek unterstützt Behörden dabei, Ausschreibungen, Vergabeverfahren und IT-Projekte abzusichern – indem sie Komponenten einsetzen, die bereits barrierefrei und testbar sind.


Kurzgesagt:       

  • KoliBri liefert konkrete, standardisierte Techniklösungen für barrierefreie Webentwicklung – als Open Source.
  • In Kombination mit dem Standardanforderungskatalog, BITV, EN 301 549 und WCAG bildet KoliBri eine technische Basis, um gesetzliche Vorgaben effizient zu erfüllen.     
  • Künftig verpflichtend: Öffentliche IT-Projekte und zunehmend auch Private – KoliBri bietet bereits zugelassene, geprüfte Bausteine.


Neue Gesetzgebungen & Standards

  1.  BITV 2.0 – die deutsche Umsetzung zur Barrierefreiheit in der öffentlichen Verwaltung
  2. EN 301 549 – europäische Norm, die EU-weit barrierefreie Anforderungen für IKT-Produkte und Dienstleistungen festlegt
  3. WCAG 2.1/2.2 – internationaler Standard, der auch in EU-Richtlinien referenziert wird

Der Standardanforderungskatalog und KoliBri bieten eine praktische Umsetzung dieser Normen.


Gesetzliche Grundlagen und Zielgruppen

Digitale Barrierefreiheit ist in Deutschland gesetzlich verankert:

  • Öffentliche Stellen sind verpflichtet, Websites und Apps barrierefrei zu gestalten (BGG, BITV 2.0).
  • Unternehmen, die digitale Produkte oder Dienstleistungen anbieten, müssen ab dem 28. Juni 2025 barrierefrei sein (BFSG).
  • Kleinstunternehmen (unter 10 Mitarbeitende, unter 2 Mio. € Umsatz), die ausschließlich Dienstleistungen anbieten, sind laut § 3 Abs. 3 BFSG ausgenommen – es sei denn, sie verkaufen digitale Produkte oder bieten vollständig digital erbrachte Leistungen an (z. B. Webinare).

Das klingt alles sehr technisch und verwirrend für Dienstleister wie Coaches, Heilpraktiker oder Physiotherapeuten und so weiter. Kurz gesagt: Dienstleister unterliegen also nur dann der Barrierefreiheitspflicht, wenn sie ihre Leistungen online verkaufen oder rein digital erbringen (z. B. Zoom-Coachings mit Online-Bezahlung).


Darf ich barrierefrei ignorieren?

Checkliste für Kleinstanbieter

1. Bin ich ein Kleinstunternehmen? (<10 Mitarbeitende, <2 Mio. € Umsatz)

Ja → weiter mit Punkt 2

Nein → barrierefrei verpflichtend

2. Biete ich nur Präsenzleistungen mit Online-Terminbuchung an?

Ja → keine gesetzliche Verpflichtung

Nein → weiter mit Punkt 3

3. Verkaufe ich digitale Leistungen (z. B. Online-Kurse, E-Books, Zoom-Beratung)?

Ja → barrierefrei verpflichtend

Nein → keine gesetzliche Verpflichtung


Erste Prüfung der Website oder App

Bevor konkrete Maßnahmen zur Umsetzungder Barrierefreiheit ergriffen werden, sollte eine erste Prüfung erfolgen, um den Handlungsbedarf zu ermitteln. Relevante Punkte:      

  • Prüfen, ob das BFSG für die Website gilt (z. B. bei Interaktionen oder Buchungen – unabhängig von der Art der Dienstleistung).
  • Lässt sich die Website vollständig mit der Tastatur bedienen?
  • Bestehen ausreichende Farbkontraste? (Mindestens 3:1 für großen Text, 4,5:1 für kleinen Text; prüfen mit dem WebAIM Contrast Checker)  
  • Ist die Website mit Assistenztechnologien (z. B. Screenreadern) nutzbar? Testen mit z. B. dem Web Accessibility Evaluation Tool


📌 Laut e-recht24.de:

Jede Art von Interaktion über eine Website (z. B. Terminbuchung) zählt bereits zum elektronischen Geschäftsverkehr – unabhängig von der Dienstleistungsform.


📄 Ausnahmen laut BFSG:

Inhalte, die vor dem 28. Juni 2025 veröffentlichte wurden z. B. PDF-Dateien oder aufgezeichnete Medien müssen nicht nachträglich barrierefrei gemacht werden.

Beispiel: Eine PDF-Anleitung oder ein Video-Tutorial zur Online-Buchung, die vor diesem Datum online gestellt wurden, fallen nicht unter die neue Pflicht.


Technische Umsetzung: Was bedeutet barrierefreies HTML?

Eine barrierefreie Website sollte:

  • vollständig mit der Tastatur bedienbar sein
  • fokussierbare und logisch gegliederte Inhalte enthalten (Überschriftenstruktur mit <h1> bis <h6>, wobei Ebenen übersprungen werden dürfen – jedoch nicht in unlogischer Reihenfolge)
  • sichtbare Fokusindikatoren besitzen
  • semantisches HTML verwenden (<button>, <nav>, <label> etc.)
  • alternative Texte (Alt-Texte) für Bilder bereitstellen

Barrierefreiheit ist dabei nicht nur rechtlich relevant, sondern bietet auch Vorteile für Suchmaschinenoptimierung und allgemeine Nutzerfreundlichkeit. Diese Aspekte verdienen besondere Aufmerksamkeit und Stoff für weitere Blogbeiträge.


Tools zur Unterstützung

Neben der Open-Source-Bibliothek KoliBri (bereitgestellt vom ITZBund für öffentliche Stellen) gibt es weitere nützliche Werkzeuge:

  • WAVE, axe DevTools, Accessi.org – für automatisierte Tests
  • BIK BITV-Test – manuelles Prüfverfahren
  • React Accessibility Libraries wie Reakit, Reach UI
  • Frameworks wie Chakra UI, Bootstrap mit Barrierefreiheitsfunktionen
  • VPAT/ACR – Dokumentationsstandard bei öffentlichen Vergaben


Was sagt uns dieser Streifzug durch die Barrierefreiheit von über 20 Jahren

Barrierefreiheit ist kein Randthema, sondern Bestandteil modernen Webdesigns – gesellschaftlich sinnvoll, rechtlich erforderlich, technisch machbar. Tools wie KoliBri, klare rechtliche Rahmenbedingungen (BITV, EN 301549, BFSG) und Checklisten für Anbieter helfen dabei, Webangebote für alle zugänglich zu machen.

Die Rückbesinnung auf Ansätze wie den BIENE-Award zeigt:
Barrierefreiheit ist kein Rückschritt, sondern bei sinnvoller Anwendung eine Bereicherung für alle Nutzergruppen.

📌 Praxis-Tipp für Dienstleister:

Für Anbieter von Webangeboten, die digitale Inhalte oder Buchungsfunktionen auf der Website haben, lohnt sich eine erste Prüfung – denn Barrierefreiheit ist nicht nur rechtlich relevant, sondern stärkt auch Vertrauen und Reichweite.

📣 Hinweis in eigener Sache:

Wenn Unterstützung bei der barrierefreien Gestaltung der Website benötigen wird – sei es bei der Prüfung, der Umsetzung oder in der strategischen Planung – einfach Kontakt aufnehmen. Ich werfe gern einen Blick auf Ihr Webangebot und wir besprechen gemeinsam, wie wir es praxisnah und zielgerichtet barrierefrei weiterentwickeln können.


👉 Hier geht’s zum Kontakt der Website.
👉 Buche ein kostenloses Gespräch!

📩 Schreibe einfach eine Nachricht.


Glossar: Fachbegriffe und Kurzbeschreibungen

  • Barrierefreiheit (Accessibility): Gestaltung von Websites, sodass sie auch für Menschen mit Behinderungen zugänglich und nutzbar sind.
  • BIENE Award: Wettbewerb (2003–2010) zur Auszeichnung besonders barrierefreier deutschsprachiger Websites.
  • KoliBri: Open-Source-Bibliothek mit barrierefreien Webkomponenten, entwickelt vom ITZBund für den öffentlichen Sektor.
  • Open Source: Software, deren Quellcode offen zugänglich und frei nutzbar/modifizierbar ist.
  • ITZBund: Informationstechnikzentrum Bund – zentraler IT-Dienstleister der deutschen Bundesverwaltung.
  • BITV 2.0: „Barrierefreie-Informationstechnik-Verordnung“ – deutsche Vorgabe für barrierefreie IT bei öffentlichen Stellen.
  • EN 301 549: Europäische Norm, die Anforderungen an barrierefreie IT-Produkte und Dienstleistungen festlegt.
  • WCAG 2.1 / 2.2: „Web Content Accessibility Guidelines“ – internationaler Standard für barrierefreie Webinhalte.
  • BFSG (Barrierefreiheitsstärkungsgesetz): Gesetz zur Umsetzung des European Accessibility Act (EAA) in Deutschland, gültig ab
    28. Juni 2025.
  • Kleinstunternehmen: Unternehmen mit weniger als 10 Mitarbeitenden und unter 2 Mio. Euro Jahresumsatz.
  • Digitale Dienstleistungen/Produkte: Leistungen, die vollständig online erbracht oder verkauft werden (z. B. Online-Kurse, E-Books, Webinare).
  • Tastaturnavigation: Möglichkeit, eine Website vollständig mit der Tastatur (ohne Maus) zu bedienen.
  • Tab-Reihenfolge: Logische Reihenfolge, in der Elemente per Tabulator-Taste fokussiert werden.
  • Fokusindikator: Visuelles Hervorhebungselement, das zeigt, welches Bedienelement gerade aktiviert ist (z. B. durch Rahmen).
  • Semantisches HTML: HTML-Elemente, die eine klare Bedeutung transportieren
  • ARIA-Rollen: Spezielle HTML-Attribute (Accessible Rich Internet Applications), die Screenreadern zusätzliche Infos geben.
  • Screenreader: Hilfstechnologie, die Website-Inhalte für blinde oder sehbehinderte Nutzer*innen vorliest.
  • Tabindex: HTML-Attribut zur Steuerung der Tastaturfokussierung von Elementen.
  • Responsive Design: Webdesign, das sich an verschiedene Bildschirmgrößen (z. B. Desktop, Tablet, Smartphone) anpasst.
  • Contrast Ratio (Farbkontrast): Maß für die visuelle Unterscheidbarkeit von Vordergrund und Hintergrund – wichtig für Leserlichkeit.
  • WAVE, axe, Accessi.org: Tools zur automatisierten Prüfung der Barrierefreiheit auf Websites.
  • BITV-Test: Deutscher Prüfstandard für die BITV-Konformität von Webseiten – meist manuell durchführbar.
  • Chakra UI, Reakit, Reach UI: Frameworks bzw. Bibliotheken für barrierefreies Webdesign mit React.
  • VPAT / ACR: Vorlagen zur technischen Dokumentation der Barrierefreiheit – z. B. für öffentliche Ausschreibungen.
  • Dienstekonsolidierung: Begriff aus der Verwaltungsdigitalisierung: Vereinheitlichung von IT-Diensten und Komponenten.


Quellen zum Nachschauen:


Lass uns gemeinsam deine Strategie entwickeln.

Unsicher ob die Business-Website barrierefrei gestalten ist?
Ich schaue mir gern das Angebot und lass uns gemeinsam schauen, was sinnvoll ist.


🎯 Barrierefrei. Website. Kundengespräche. – Starte jetzt mit einer klaren Strategie

👉 Hier geht’s zum Kontakt der Website.
👉 Buche ein kostenloses Gespräch!

📩 Schreib einfach eine Nachricht.


2025-06-18

Bloggen ist dein stärkster Hebel - wenn du es richtig machst