Migration zu Next.js / Astro in Münster

Bei einer Migration auf Astro oder Next.js werden die Templates Ihrer Website ohnehin neu gebaut. Dann entstehen Überschriften, Formulare, Fokusführung und Kontraste einmal richtig, statt später in ein gewachsenes Theme gepatcht zu werden. Für Betriebe in Münster kommt ein rechtlicher Anlass dazu: Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025 für bestimmte Websites. Hier steht, wen es betrifft, was die Behörde prüft, was ich im Template umsetze und wie ich es teste. Rechtsberatung ist das nicht.

Foto: Dietmar Rabich, CC BY-SA 4.0, Wikimedia Commons.

#Gilt das BFSG für Ihre Website?

Nach § 1 Abs. 3 Nr. 5 des BFSG gilt das Gesetz für Dienstleistungen im elektronischen Geschäftsverkehr, die für Verbraucher erbracht werden. § 2 beschreibt sie als digitale Dienste über Webseiten und mobile Anwendungen, die auf individuelle Anfrage eines Verbrauchers im Hinblick auf den Abschluss eines Verbrauchervertrags erbracht werden. Gemeint sind Onlineshops, Buchungs- und Bestellstrecken. Die IHK Nord Westfalen, die Kammer für Münster, nennt ein Beispiel: Wer in einem Shop klassische Bücher verkauft, muss den Shop barrierefrei gestalten, nicht die Bücher. Reine B2B-Angebote fallen laut IHK nicht unter das Gesetz, sofern sie sich tatsächlich nur an Unternehmer richten und nur von diesen genutzt werden können.

Die Marktüberwachungsstelle rechnet die Beschäftigten in Jahresarbeitseinheiten und verlangt, wer sich auf den Status beruft, Nachweise für mindestens die letzten zwei Geschäftsjahre. Die Ausnahme betrifft nur Dienstleistungen. Freiwillig dürfen Kleinstunternehmen die Anforderungen trotzdem umsetzen, wie die IHK festhält.

Zwei Punkte betreffen gerade eine Migration. Inhalte Dritter, die Sie weder finanziert noch entwickelt haben noch kontrollieren, sind nach § 1 Abs. 4 Nr. 4 BFSG ausgenommen. Die Verordnung zum BFSG verlangt aber in § 19, dass bei Shops auch Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen wahrnehmbar, bedienbar, verständlich und robust sind. Wie weit das für den Checkout eines Zahlungsanbieters reicht, ist eine Rechtsfrage. Ich frage beim Anbieter nach seiner Barrierefreiheit und halte die Antwort schriftlich fest. Und beim Umzug fassen Sie Altbeiträge ohnehin an: Ob ein überarbeiteter Beitrag noch als Archiv gilt, würde ich nicht darauf ankommen lassen. Ich übertrage ihn mit sauberer Struktur.

#Wer prüft, und was?

Die Marktüberwachung liegt bei den Ländern (§ 20 BFSG). Sie haben dafür eine gemeinsame Stelle in Magdeburg errichtet, die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF). Nach einer Pressemitteilung des Landes Sachsen-Anhalt vom 1. Juni 2026 arbeitet die MLBF seit September 2025 und bearbeitete damals fast 700 Meldungen. Sie wird auf zwei Wegen tätig: auf Meldungen hin und aktiv nach mehrjährigen Strategien. Bei Websites prüft sie nach § 28 Abs. 2 BFSG auch ohne Anlass in Stichproben. Anlage 1 legt fest, was in diese Stichprobe gehört:

Bei Verstößen läuft es laut MLBF stufenweise: Aufforderung zu Korrekturmaßnahmen, erneute Aufforderung unter Androhung der Untersagung, schließlich die Untersagung der Dienstleistung bis zum Nachweis der Konformität. § 37 Abs. 2 BFSG sieht für das Anbieten einer Dienstleistung entgegen § 14 Abs. 1 eine Geldbuße bis zu hunderttausend Euro vor. Verbraucher können Barrieren der MLBF melden, einen Antrag nach § 32 stellen oder die Schlichtungsstelle nach § 34 anrufen. Für Datenschutzfragen, etwa bei Kontaktformularen, bleibt in Nordrhein-Westfalen die LDI NRW zuständig. Das sind zwei Behörden mit zwei Prüfthemen.

#Was sich ändert, wenn die Templates neu entstehen

Den technischen Maßstab nennt das Gesetz nicht selbst. Die Verordnung zum BFSG verlangt in § 12 Nr. 3, dass Webseiten wahrnehmbar, bedienbar, verständlich und robust sind, und in § 3, dass der Stand der Technik zu beachten ist. Die Bundesfachstelle für Barrierefreiheit verweist für Websites auf die EN 301 549 in der Version 3.2.1, Kapitel 9, und damit auf WCAG 2.1 in den Stufen A und AA. Die für das BFSG aktualisierte Fassung soll auf WCAG 2.2 verweisen (Stand November 2026). Nach dem W3C genügt, wer WCAG 2.2 erfüllt, auch WCAG 2.1. Deshalb baue ich gegen WCAG 2.2, Stufe AA.

#Struktur und semantisches HTML

Page-Builder liefern oft verschachtelte div-Blöcke, in denen eine Überschrift nur durch ihre Schriftgröße eine ist. WCAG verlangt, dass Struktur und Beziehungen programmatisch bestimmbar sind (1.3.1). Im neuen Template heißt das: nav, main und footer als Landmarks, genau eine h1, Überschriftenebenen als Gliederung statt als Schriftgröße, echte Listen und Tabellen mit Kopfzellen. Dazu kommen ein Sprunglink zum Hauptinhalt (2.4.1), aussagekräftige Seitentitel (2.4.2) und lang="de" im Layout (3.1.1), mit lang an englischen Passagen (3.1.2).

#Fokus und Tastatur

Tastaturfokus muss sichtbar sein (2.4.7), und ein fokussiertes Element darf nicht vollständig von Inhalt verdeckt werden, den Sie selbst eingebaut haben (2.4.11). Typische Verdecker sind ein fixierter Kopfbereich und das Einwilligungsbanner. Klickziele sollen mindestens 24 mal 24 CSS-Pixel groß sein, mit Ausnahmen für ausreichend Abstand (2.5.8). Alles, was mit der Maus geht, muss ohne gehen (2.1.1), und kein Element darf den Fokus festhalten (2.1.2). Den Fokusring entferne ich nicht, ich gestalte ihn sichtbar.

#Formulare

Kontakt-, Termin- und Bestellformulare sind der Teil, den die Stichprobe nach Anlage 1 ausdrücklich mitprüft, samt Fehlermeldungen und Bestätigungen. Jedes Feld braucht ein sichtbares Label (3.3.2), ein Fehler wird im Text benannt (3.3.1), und der Zweck persönlicher Felder wird per autocomplete ausgezeichnet (1.3.5). Statusmeldungen wie “Nachricht gesendet” müssen Screenreader erreichen, ohne dass der Fokus springt (4.1.3). Ein Login darf keinen Gedächtnis- oder Rätseltest ohne Alternative verlangen (3.3.8).

<label for="mail">E-Mail-Adresse (Pflichtfeld)</label>
<input id="mail" name="email" type="email" autocomplete="email" required>

Das Formular-Backend wähle ich zusammen mit Ihrer Datenschutzvorgabe aus. Die Datenschutzhinweise neben dem Formular sind selbst Text der Seite und gehören in dieselben Tests.

#Kontrast und Farben

Text braucht ein Kontrastverhältnis von mindestens 4,5 zu 1, großer Text 3 zu 1 (1.4.3), Bedienelemente und aussagekräftige Grafikteile 3 zu 1 (1.4.11). Farben und Gestaltung kommen von Ihnen oder Ihrer Agentur, ich entwerfe sie nicht. Ich messe die vorgegebenen Farbpaare, nenne das Verhältnis je Paar und lege Ihnen die Abweichungen schriftlich vor. Über neue Farbwerte entscheiden Sie.

#Alternativtexte

Bilder brauchen eine Textalternative, die ihren Zweck wiedergibt (1.1.1). In Astro ist alt bei den Komponenten Image und Picture nach der Dokumentation Pflicht, ohne Angabe kommt eine Fehlermeldung. Rein dekorative Bilder bekommen alt="". Beim Umzug übernehme ich vorhandene Alternativtexte, und leere oder offensichtlich aus Dateinamen erzeugte lege ich Ihnen als Liste zur redaktionellen Prüfung vor, denn nur Sie wissen, wozu ein Foto auf der Seite steht.

#Wie teste ich das?

#Automatisch mit axe

axe-core findet laut seiner Dokumentation im Durchschnitt 57 Prozent der WCAG-Probleme automatisch und meldet unsichere Fälle als “incomplete” zur manuellen Prüfung. Die aktuelle Version ist 4.14.0 (npm, veröffentlicht am 5. Oktober 2026, Stand November 2026). Ich lasse axe über Playwright gegen die Seiten der Stichprobe laufen, in jedem Build auf dem Staging:

import { test, expect } from '@playwright/test';
import { AxeBuilder } from '@axe-core/playwright';

for (const pfad of ['/', '/kontakt/', '/barrierefreiheit/', '/bestellung/']) {
  test(`axe ${pfad}`, async ({ page }) => {
    await page.goto(pfad);
    const ergebnis = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'])
      .analyze();
    expect(ergebnis.violations).toEqual([]);
  });
}

Die Werkzeugleiste von Astro im Entwicklungsmodus hat eine Audit-App. Laut Astro-Dokumentation ersetzt sie weder dedizierte Werkzeuge noch, besser noch, Menschen. Sie fängt Fehler früh ab, mehr nicht.

#Mit der Tastatur

Das W3C beschreibt in den Easy Checks die Basisprüfungen: Sprunglink, sichtbarer Fokus, Zoom, Seitentitel, Überschriften, Sprache, Labels und Pflichtfelder. Ich gehe jede Stichprobenseite nur mit Tab, Umschalt plus Tab, Eingabe, Leertaste und Escape durch. Dabei prüfe ich Reihenfolge, Fokusfalle, Menü, Dialoge und das Einwilligungsbanner. Dazu kommt die Textvergrößerung bis 200 Prozent (1.4.4) und die Ansicht bei 320 CSS-Pixel Breite ohne zweidimensionales Scrollen (1.4.10).

#Mit dem Screenreader

Mit VoiceOver auf macOS höre ich die Überschriftenliste, die Landmarks, jedes Formularfeld mit Label und Fehlermeldung, Linktexte außerhalb ihres Satzes und die Alternativtexte. Dort zeigt sich, was kein Werkzeug sieht: ein Link “mehr”, ein Bild mit dem Alternativtext “IMG_2231”, ein Dialog, der den Fokus nicht aufnimmt.

Einen formalen Prüfbericht nach dem BITV-Test, den die Bundesfachstelle als Verfahren nennt, stelle ich nicht aus. Ich liefere eine Prüfliste mit Kriterium, Seite, Ergebnis und offenen Punkten. Ob Sie zusätzlich ein externes Gutachten wollen, entscheiden Sie.

#Was gehört in die Information zur Barrierefreiheit?

Unternehmen schulden nicht die “Erklärung zur Barrierefreiheit”. Die MLBF weist darauf hin, dass dieser Begriff für öffentliche Stellen nach der Richtlinie (EU) 2016/2102 gilt. Für Unternehmen verlangt § 14 Abs. 1 Nr. 2 BFSG in Verbindung mit Anlage 3, in den AGB oder auf andere deutlich wahrnehmbare Weise anzugeben, wie die Dienstleistung die Anforderungen erfüllt. Die Information umfasst:

1. eine allgemeine Beschreibung der Dienstleistung in einem barrierefreien Format,
2. Beschreibungen und Erläuterungen, die zum Verständnis der Durchführung nötig sind,
3. eine Beschreibung, wie die Dienstleistung die Anforderungen der Verordnung erfüllt,
4. die Angabe der zuständigen Marktüberwachungsbehörde.

Sie ist aufzubewahren, solange die Dienstleistung angeboten wird (§ 14 Abs. 2 BFSG). Fehlt sie oder ist sie nicht barrierefrei zugänglich, liegt nach § 30 BFSG eine formale Nichtkonformität vor, unabhängig vom technischen Zustand der Seiten. Ich lege dafür eine eigene Seite an, im Fußbereich verlinkt, selbst nach denselben Kriterien gebaut. Den technischen Teil schreibe ich aus den Testergebnissen. Die rechtliche Formulierung, etwa zu Ausnahmen wegen unverhältnismäßiger Belastung nach § 17 BFSG samt Dokumentation, liegt bei Ihnen oder Ihrer Rechtsberatung.

#Wie läuft das Projekt ab?

Ich arbeite allein, remote und schriftlich, ohne Termine vor Ort und ohne Telefonate. Gestaltung, Layout und Farben kommen von Ihnen. Das Layout bekomme ich über eine Tabelle, in der Sie je Ansicht die Elemente markieren, und ich setze es um.

1. Einordnung: Sie beantworten die Fragen aus der ersten Tabelle schriftlich: Verbraucher als Kunden, Beschäftigte, Umsatz. Ob das BFSG gilt, bewerte ich nicht.
2. Inventar: Die URL-Karte der Migration bekommt eine zweite Spalte: Seitentyp und Zugehörigkeit zur Stichprobe.
3. Neubau auf dem Staging: Templates, Formulare und Komponenten entstehen mit den Kriterien oben, axe läuft in jedem Build.
4. Prüfliste: Tastatur und Screenreader, dazu eine Liste offener Punkte, die bei Ihnen liegen: Farben, Alternativtexte, Drittanbieter-Widgets.
5. Information zur Barrierefreiheit: technischer Entwurf, Rechtsfassung durch Sie.
6. Pflege: § 14 Abs. 3 BFSG verlangt, dass die Anforderungen stets erfüllt werden. Neue Beiträge, Plugins und Widgets können das ändern. Ich gebe Ihrer Redaktion eine kurze Liste für Alternativtexte, Überschriften und Linktexte mit.

Die Abläufe der Migration selbst, also URL-Karte, Weiterleitungen und Go-live, beschreibe ich auf der Seite zur Migration zu Next.js und Astro. Zum Framework selbst finden Sie Details unter Astro-Entwicklung in Münster.

#Häufige Fragen

#Gilt das BFSG auch für eine reine Informationsseite?

Das Gesetz erfasst nach § 2 BFSG digitale Dienste, die im Hinblick auf den Abschluss eines Verbrauchervertrags erbracht werden, also etwa Shops und Buchungsstrecken. Ob ein Kontaktformular allein genügt, beurteile ich nicht als Rechtsfrage. Bei Zweifeln hilft die Beratung der Bundesfachstelle für Barrierefreiheit, die § 15 BFSG ausdrücklich für Kleinstunternehmen vorsieht.

#Ich bin Kleinstunternehmen. Muss ich dann nichts tun?

Für Dienstleistungen gilt die Pflicht nach § 3 Abs. 3 BFSG nicht, wenn Sie weniger als zehn Personen beschäftigen und Umsatz oder Bilanzsumme bei höchstens 2 Millionen Euro liegen. Die MLBF rechnet nach Jahresarbeitseinheiten und zählt verbundene Unternehmen mit. Freiwillig dürfen Sie die Anforderungen umsetzen, und beim Neubau der Templates ist das selten aufwendig.

#Welche Behörde ist in Nordrhein-Westfalen zuständig?

Für die Barrierefreiheit die Marktüberwachungsstelle der Länder (MLBF) in Magdeburg, die alle 16 Länder gemeinsam errichtet haben. Für Datenschutzfragen, etwa bei Kontaktformularen, ist in NRW die LDI NRW Ansprechpartnerin. Die beiden Behörden prüfen unterschiedliche Themen.

#Genügt ein automatischer Test mit axe?

Nein. axe-core findet nach Angaben des Herstellers im Durchschnitt 57 Prozent der WCAG-Probleme automatisch und meldet unsichere Fälle als “incomplete”. Tastatur, Screenreader und Sichtprüfung kommen dazu, ebenso die Seiten, die die MLBF in ihrer Stichprobe erwartet.

#Muss die Seite “Erklärung zur Barrierefreiheit” heißen?

Nach Auskunft der MLBF ist die Erklärung zur Barrierefreiheit ein Begriff für öffentliche Stellen. Unternehmen schulden die Information nach Anlage 3 BFSG: Beschreibung der Dienstleistung, Erläuterungen, Erfüllung der Anforderungen und Angabe der zuständigen Marktüberwachungsbehörde. Die Bezeichnung der Seite ist freier als der Inhalt.

#Muss auch das Cookie-Banner barrierefrei sein?

Es ist Teil der Website und läuft in meinen Tastatur- und Fokustests mit. Ein Banner, das den Fokus verdeckt oder sich nur mit der Maus schließen lässt, fällt bei WCAG 2.2 durch. Ob eine Einwilligung nötig ist, regelt weiterhin § 25 TDDDG, nicht das BFSG.

#Schreiben Sie mir

Schicken Sie mir die Adresse Ihrer Website, das aktuelle CMS, den Hinweis, ob Verbraucher dort bestellen oder buchen, und Ihren Wunschtermin für den Start. Daraus erstelle ich einen schriftlichen Umfang: welche Seiten und Abläufe getestet werden und was am Neubau hängt. Die schriftliche Ersteinschätzung zum Umfang stelle ich Ihnen nicht in Rechnung. Den Weg zu mir finden Sie auf der Kontaktseite.