Barrierefreiheit im Web: Die Bedeutung für Unternehmen – und wie wir es mit Next.js umsetzen

Die EU verfolgt das klare Ziel, digitale Angebote für alle Menschen zugänglich zu machen.
Deutschland setzt diese Vorgabe mit dem Barrierefreiheitsstärkungsgesetz (BFSG) um.
Ab 2025 müssen Unternehmen ihre digitalen Dienstleistungen und kommerziellen Online-Angebote, die unter das BFSG fallen, barrierefrei gestalten – unabhängig von individuellen Fähigkeiten oder technischen Voraussetzungen.“

Was früher eine freiwillige Verbesserung war, wird nun Teil eines modernen Qualitätsstandards. Genauso selbstverständlich wie SSL-Verschlüsselung, mobile Optimierung oder Datenschutz gehört Barrierefreiheit zu den grundlegenden Anforderungen – für jede Branche, jede Unternehmensgröße und jedes Geschäftsmodell.

Eine zeitgemäße Website muss daher nicht nur ansprechend aussehen und schnell laden. Sie muss verständlich, bedienbar, robust und inklusiv gestaltet sein. Genau hier setzt digitale Barrierefreiheit an.

Barrierefreiheit betrifft uns alle – weit mehr, als man denkt

Oft wird Barrierefreiheit fälschlicherweise auf Menschen mit Behinderungen reduziert. In Wirklichkeit profitieren jedoch nahezu alle Nutzerinnen und Nutzer davon – häufig, ohne es zu bemerken.

Alltägliche Situationen:

• Ein Video wird unterwegs ohne Ton angesehen – Untertitel sind unverzichtbar.
• Eine Nutzerin hat eine Hand verletzt und steuert alles per Tastatur.
• Ältere Menschen benötigen klare Strukturen, gute Lesbarkeit und verständliche Navigation.
• Menschen mit Sehschwäche sind auf starke Kontraste angewiesen.
• Unterwegs ist das Internet langsam – eine schlanke, barrierearme Seite lädt schneller.
• Ein Formular wird ausgefüllt – klare Labels und hilfreiche Fehlertexte verhindern Frust.

Barrierefreiheit ist somit kein Sonderfall, sondern ein Standard, der Nutzbarkeit für alle verbessert.
Und genau deshalb steigert sie die Qualität einer Website erheblich.

Das BFSG – ein Gesetz, das digitale Qualität verbindlich macht

Mit dem BFSG schafft der Gesetzgeber klare Regeln: Digitale Angebote müssen barrierefrei sein. Dazu gehören:

• Webseiten
• Online-Shops
• Apps
• Webportale
• digitale Services
• Self-Service-Systeme

Unternehmen, die die Anforderungen nicht erfüllen, riskieren nicht nur Bußgelder, sondern auch Vertrauensverlust bei Nutzern und Kunden.

Noch wichtiger: Barrierefreiheit zeigt, dass ein Unternehmen Professionalität und Wertschätzung ernst nimmt.

Hinweis zu gesetzlichen Ausnahmen:
Das BFSG sieht tatsächlich bestimmte Ausnahmen für kleinere Unternehmen vor, beispielsweise dann, wenn Maßnahmen als unverhältnismäßig gelten könnten.
Für diesen Artikel spielt das jedoch bewusst keine Rolle.
Wir vertreten die klare Haltung, dass Barrierefreiheit für jede Unternehmensgröße sinnvoll, wichtig und ohne großen Aufwand umsetzbar ist.
Gerade kleine und mittelständische Betriebe profitieren besonders:
Barrierefreiheit lässt sich einfach und schnell realisieren.
Viele Maßnahmen – etwa saubere Semantik, gute Kontraste oder klare Formulare – kosten wenig Zeit und verbessern die Nutzererfahrung sofort.
Eine barrierefreie Seite ist robuster, verständlicher und SEO-stärker.
Kunden nehmen barrierefreie Websites als qualitativ hochwertiger und vertrauenswürdiger wahr.
Deshalb betrachten wir Barrierefreiheit nicht als gesetzliche Pflicht, sondern als moderne Standardanforderung an digitale Qualität, die für jedes Unternehmen erreichbar ist – unabhängig davon, ob eine gesetzliche Ausnahme besteht oder nicht.

WCAG – der internationale Standard für digitale Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG) bilden die weltweit wichtigste Grundlage für barrierefreie digitale Angebote. Sie basieren auf vier Prinzipien:

1. Wahrnehmbar – Informationen müssen erkennbar sein
Texte müssen lesbar sein, Bilder brauchen Alternativtexte, Kontraste müssen stimmen.

2. Bedienbar – alles muss ohne Maus funktionieren
Die Seite muss über Tastatur und Assistenztechnologien bedienbar sein.

3. Verständlich – Inhalte und Funktionen müssen klar strukturiert sein
Navigation, Formulare, Fehlermeldungen – alles braucht Logik und Einheitlichkeit.

4. Robust – Inhalte müssen technologisch zuverlässig funktionieren
Webseiten müssen mit Screenreadern, Browsern und Geräten kompatibel sein – jetzt und zukünftig.

Für das BFSG gilt verbindlich die Norm EN 301 549, die WCAG 2.1 AA als Mindeststandard enthält.

Barrierefreiheit beginnt im Design

Bevor wir programmieren, strukturieren wir in Figma eine klare, logische und barrierefreie Grundlage.
Ein Screenreader sieht kein Layout – er erkennt nur die Struktur. Wenn diese chaotisch ist, macht das Lesen für Nutzerinnen und Nutzer unmöglich.

Deshalb klären wir im Designprozess:

• Welche Elemente sind echte Überschriften?
• Welche Inhalte gehören logisch zusammen?
• Welche Buttons lösen Aktionen aus, welche Links navigieren?
• Wie wird das Formular geführt?
• Wie funktioniert die Seite vollständig per Tastatur?
• Welche Komponenten brauchen Labels, ARIA-Attribute oder zusätzliche Hinweise?

Die Komponentenbibliothek ist semantisch gedacht, nicht rein optisch.
Farb- und Kontrasttests laufen ebenfalls schon im Design – Tools wie Stark sorgen dafür, dass Fehler erst gar nicht in die Entwicklung gelangen.

Vom Design zu sauberem und semantischem Next.js-Code

Wenn die Struktur steht, folgt der semantische Code.

Beispiele wie dieses zeigen den Übergang:

<section aria-labelledby="leistungen">
  <h2 id="leistungen">Leistungen</h2>
  <p>Wir unterstützen Sie bei …</p>
</section>

oder:

<ul className="card-list">
  <li className="card">…</li>
  <li className="card">…</li>
  <li className="card">…</li>
</ul>

Solche sauber aufgebauten Strukturen helfen Screenreadern enorm – und wirken sich gleichzeitig positiv auf SEO und Usability aus.

Semantik & Struktur im Code – der unsichtbare Schlüssel

Viele Barrierefreiheitsprobleme entstehen durch fehlende semantische Struktur.
Wichtige Grundregeln:

• Buttons gehören in <button>, nicht in <div>.
• Navigationsbereiche gehören in <nav>.
• Listen müssen echte <ul> oder <ol> sein.
• Überschriften folgen einer klaren Hierarchie (H1 → H2 → H3).
• ARIA-Attribute werden gezielt und sparsam eingesetzt.

Alt-Texte – kleine Beschreibungen mit großer Wirkung

Alt-Texte sind die Stimme, mit der eine Website mit Screenreader-Nutzern spricht.

Wir unterscheiden:

• informative Bilder → benötigen kurze, präzise Alt-Texte
• dekorative Bilder → benötigen ein leeres alt=""
• Icons, die Handlungen auslösen → benötigen ein aria-label

Ein einfacher, aber entscheidender Unterschied.

Tastaturnavigation & sichtbarer Fokus – ein Muss für alle

Viele Menschen bedienen Websites ganz selbstverständlich mit der Tastatur – und das nicht nur Nutzerinnen und Nutzer mit Einschränkungen.
Ein klar erkennbarer Fokus zeigt jederzeit, wo man sich gerade befindet und welches Element als Nächstes erreicht wird.

Dazu gehört auch ein Skip-Link:

Ein Skip-Link ist ein spezieller Link, der ganz am Anfang einer Webseite steht und es ermöglicht, mit einem einzigen Tastaturdruck direkt zum Hauptinhalt zu springen – ohne zuerst durch Navigation, Header oder Menüs tabben zu müssen.

<a href="#main" className="skip-link">Zum Inhalt springen</a>

Farben & Kontraste – sichtbare Zugänglichkeit

Kontraste entscheiden über Lesbarkeit und werden in den WCAG klar definiert.

Wir testen u.a.:

• Textkontraste
• visuelle Zustände von Buttons
• Hover-, Aktiv- und Fokusstile
• Darstellung auf verschiedenen Hintergründen

Tools wie ARC Toolkit, Axe DevTools oder Lighthouse machen diese Prüfungen zuverlässig.

Formulare – geführt, klar, verständlich

Ein Formular ist einer der wichtigsten Barrierefreiheitsbereiche.
Fehlt ein Label, ist ein Fehler unklar oder steht eine Beschreibung am falschen Ort, erzeugt das echte Barrieren.

Ein Beispiel für korrektes Formularverhalten:

<label htmlFor="email">E-Mail-Adresse</label>
<input id="email" type="email" aria-describedby="email-help" />
<p id="email-help">Wir verwenden Ihre Adresse ausschließlich zur Kontaktaufnahme.</p>

Barrierefreie Formulare bedeuten:
weniger Fehler, weniger Frust, höhere Abschlussrate.

Error- & Success-State-Patterns (Fehler- und Erfolgszustände im Formular)

Formulare müssen Fehler verständlich kommunizieren!
Das bedeutet: Man darf nicht nur das perfekte, fehlerfreie Formular gestalten.
Ebenso wichtig ist die Gestaltung der Zustände, in denen Formulare Fehler anzeigen oder erfolgreich abgesendet wurden.

Was konkret gestaltet werden muss

1. Inline-Fehler (direkt am Feld)

Für jedes Eingabefeld muss klar definiert sein, wie es aussieht, wenn ein Fehler auftritt:

• Farbänderung des Feldrahmens (z. B. rot)
• ein gut erkennbares Fehler-Icon
• eine kurze, eindeutige Textbeschreibung unter dem Feld

Diese Muster helfen Nutzerinnen und Nutzern zu verstehen, welches Feld betroffen ist und wie der Fehler behoben werden kann.

2. Globaler Fehlerhinweis (Global Alert)

Zusätzlich sollte ein Banner am oberen Rand des Formulars angezeigt werden, das alle Fehler zusammenfasst.

Warum ist das wichtig?

• Screenreader lesen globale Fehlerhinweise zuerst.
• Nutzer erhalten sofort eine Übersicht, welche Fehler vorliegen, ohne alles durchgehen zu müssen.
• Der Alert dient als zentrale Orientierung, während die Inline-Fehler die Details zeigen.

Accessibility-Tests – manuell & automatisiert

Wir kombinieren zwei Ansätze:

Manuelle Tests mit ARC Toolkit

Perfekt für strukturelle und visuelle Checks im Browser.

Automatisierte Tests mit Axe DevTools

Dafür integrieren wir @axe-core/cli direkt in die CI-Kette.

npx axe http://localhost:3000 --save axe-report.json

So wird Barrierefreiheit nicht „einmalig geprüft“, sondern kontinuierlich sichergestellt.

Praxisbeispiel – kleine Änderung, große Wirkung

In einem Kundenprojekt funktionierte die Navigation visuell einwandfrei, war aber für Screenreader nicht lesbar – weil sie nur aus <div>-Elementen bestand.

Für Nutzer, die per Screenreader oder Tastatur navigieren, bedeutete das:
Die Seite war praktisch nicht nutzbar.

Unsere Lösung bestand aus einer einfachen, aber entscheidenden Änderung:

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/leistungen">Leistungen</a></li>
    <li><a href="/team">Team</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

Ergebnis:

• Navigation wieder vollständig bedienbar
• logisch, strukturiert, WCAG-konform
• Seiteninteraktion für alle Nutzergruppen möglich

Ein Beispiel dafür, wie klein der Unterschied zwischen „funktioniert“ und „funktioniert für alle“ sein kann.

Typische Fehler & richtige Umsetzung

Barrierefreiheitserklärung – Pflichtbestandteil jedes BFSG-konformen Webauftritts

Barrierefreiheit endet nicht beim Design und nicht im Code. Ein zentraler Bestandteil eines barrierefreien Webauftritts ist die Barrierefreiheitserklärung. Sie macht sichtbar, wie zugänglich eine Website ist, welche Standards sie erfüllt und wie mit eventuellen Barrieren umgegangen wird. Eine Barrierefreiheitserklärung ist für Dienstleistungen nach BFSG verpflichtend, nicht zwingend für rein informative Webseiten – nicht als Formalität, sondern als verbindlichen Nachweis für Transparenz und Verantwortungsbewusstsein.

Eine Barrierefreiheitserklärung erfüllt gleich mehrere wichtige Funktionen. Sie schafft Transparenz, indem sie Nutzerinnen und Nutzern offen darlegt, wie gut die Seite zugänglich ist und ob es Bereiche gibt, die noch verbessert werden. Sie erzeugt Rechtssicherheit, da Unternehmen damit die Pflichten aus § 12 BFSG erfüllen. Und sie stärkt die Serviceorientierung, weil klar dargestellt wird, wie Nutzer Barrieren melden oder Unterstützung erhalten können.

Für Unternehmen ist dieses Dokument damit mehr als gesetzliche Pflicht: Es ist ein strategisches Signal. Es zeigt, dass digitale Zugänglichkeit ernst genommen wird – nachvollziehbar, überprüfbar und kontinuierlich weiterentwickelt.

Inhalte einer vollständigen Barrierefreiheitserklärung

Eine vollständige und gesetzeskonforme Erklärung umfasst verschiedene Abschnitte, die die Zugänglichkeit der Website strukturiert und verständlich dokumentieren. Dazu gehören:

• Angaben zum Betreiber der Website
• Beschreibung der digitalen Dienstleistungen
• Der aktuelle Stand der Vereinbarkeit mit den Anforderungen nach BFSG und WCAG
• Hinweise zu bereits umgesetzten Maßnahmen wie Kontraste, Alt-Texte, Semantik, Tastaturnavigation
• Beschreibung bekannter Einschränkungen (falls vorhanden)
• Kontaktmöglichkeiten für Hinweise zu Barrieren
• Informationen zur zuständigen Aufsichtsbehörde

Die Erklärung zeigt damit nicht nur, was bereits funktioniert, sondern auch, dass Barrierefreiheit als fortlaufender Prozess verstanden wird.

Beispiel einer Barrierefreiheitserklärung (Auszug)

Damit nachvollziehbar wird, wie eine solche Erklärung in der Praxis aussehen kann, folgt ein vereinfachter, aber realistischer Auszug. Dieser dient der Orientierung und gehört in der Praxis auf eine eigene Unterseite.

Wir empfehlen ausdrücklich, Barrierefreiheitserklärungen von einer spezialisierten Kanzlei oder einem juristischen Dienstleister prüfen oder erstellen zu lassen, um vollständige rechtliche Sicherheit zu gewährleisten.

Erklärung zur Barrierefreiheit für Dienstleistungen (nicht Rechtsicher)

Muster Firma
Musterweg 1
10000 Musterstadt
[email protected] · +49 1234 12345679

Wir verfolgen das Ziel, unsere Website und unsere digitalen Dienstleistungen für alle Nutzerinnen und Nutzer zugänglich zu machen. Die Umsetzung orientiert sich an der WCAG 2.2 sowie an den Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG). Wir arbeiten kontinuierlich daran, Struktur, Bedienbarkeit und Lesbarkeit zu verbessern.

Bereits umgesetzte Maßnahmen:
vollständige Tastaturnavigation inkl. Skip-Links
semantische Strukturierung mittels HTML5-Landmarks
Alt-Texte für alle relevanten Bilder, dekorative Elemente mit leerem Alt-Attribut
ARIA-Attribute zur Unterstützung von Screenreadern
kontraststarke Gestaltung gemäß WCAG-AA
klare Formulare mit Labels, Fehlermeldungen und Hilfetexten

Kontakt zur Meldung von Barrieren:
[email protected]
+49 1234 1234567

Zuständige Aufsichtsbehörde:
Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF)
[email protected]

Bedeutung der Barrierefreiheitserklärung im Gesamtprozess

Viele Unternehmen unterschätzen den Wert einer Barrierefreiheitserklärung. Dabei erfüllt sie eine zentrale Rolle im gesamten Barrierefreiheitsprozess: Sie dokumentiert nachvollziehbar, was umgesetzt wurde, schafft Vertrauen und zeigt, dass Barrierefreiheit nicht zufällig entsteht, sondern geplant, geprüft und kontinuierlich verbessert wird.

Für Organisationen mit hohem Serviceanteil – etwa im Gesundheitswesen, in Kanzleien oder im Kundenservice – ist diese Transparenz besonders wichtig. Sie signalisiert:
Wir gestalten digitale Produkte nicht für eine Zielgruppe, sondern für alle.

Barrierefreiheit endet daher nicht an der Visuellen Gestaltung oder im Code. Sie umfasst Strategie, Umsetzung, Betrieb und eine klare, transparente Kommunikation. Die Barrierefreiheitserklärung ist der sichtbare Rahmen, der alles zusammenführt.

Fazit: Barrierefreiheit ist Pflicht – aber vor allem moderne UX

Barrierefreiheit bedeutet nicht „komplizierter“.
Im Gegenteil:

• Seiten werden klarer
• Formulare verständlicher
• Navigation logischer
• Inhalte zugänglicher
• SEO besser
• rechtliche Risiken geringer

Das BFSG zwingt Unternehmen zum Handeln – aber es bringt gleichzeitig echte Verbesserungen in Qualität, Nutzererlebnis und Professionalität.