Next.js-Entwickler in Wien

#Was das BaFG für eine Next.js-Anwendung in Wien bedeutet

Ich bin Mariusz Szatkowski, ein einzelner Entwickler in Gdynia, und baue Next.js-Anwendungen für Unternehmen in Wien. Meine Arbeit läuft komplett aus der Ferne und in Textform. Gestaltung und Layout liefern Sie, ich setze sie um. Diese Seite behandelt ein Thema, das bei Webshops, Buchungsportalen und Kundenkonten in Österreich seit dem 28. Juni 2025 mitgeprüft wird: Barrierefreiheit nach dem Barrierefreiheitsgesetz (BaFG), BGBl. I Nr. 76/2023.

Foto: Diego Delso, CC BY-SA 4.0, Wikimedia Commons.

Das Gesetz gilt nach § 2 Abs. 2 unter anderem für „Dienstleistungen im elektronischen Geschäftsverkehr”. Gemeint sind nach § 3 Z 27 Ferndienstleistungen, die elektronisch auf individuelle Anfrage eines Verbrauchers im Hinblick auf einen Verbrauchervertrag über Websites oder mobile Anwendungen erbracht werden. Ein Webshop mit Warenkorb fällt darunter, ebenso ein Buchungssystem. Ausdrücklich genannt sind auch Bankdienstleistungen für Verbraucher und die Websites von Personenverkehrsdiensten im Luft-, Bus-, Schienen- und Schiffsverkehr, mit Ausnahme von Stadt-, Vorort- und Regionalverkehr, wo nur Selbstbedienungsterminals erfasst sind. Ein reines Business-to-Business-Portal ohne Verbraucher als Kunden liegt nach dem Wortlaut außerhalb.

Wer die Anforderungen erfüllen muss, ist der Dienstleistungserbringer, also Ihr Unternehmen als Betreiber (§ 14 Abs. 1). Nach § 14 Abs. 3 muss er durch geeignete Verfahren dafür sorgen, dass die Anforderungen dauerhaft erfüllt bleiben. Das betrifft jede spätere Änderung an der Anwendung, nicht nur den Launch.

#Wer ausgenommen ist und wer prüft

§ 6 Abs. 1 nimmt Kleinstunternehmen, die Dienstleistungen anbieten, von den Barrierefreiheitsanforderungen für Dienstleistungen aus. Nach § 3 Z 19 ist das ein Unternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens 2 Millionen Euro. Ob Sie darunter fallen, entscheiden Ihre Zahlen, nicht die Branche. Sind Sie größer, gilt die Pflicht.

Zuständig für die Marktüberwachung ist das Sozialministeriumservice (§ 21). Verbraucher, der Verein für Konsumenteninformation, der Österreichische Behindertenrat, die Bundesarbeitskammer und die Wirtschaftskammer Österreich können dort auf mögliche Verstöße hinweisen. Die Behörde muss innerhalb von acht Wochen schriftlich mitteilen, ob sie ein Verfahren einleitet (§ 35). Die Verwaltungsstrafe für Dienstleistungen, die den Anforderungen nicht entsprechen, liegt nach § 36 Abs. 1 bei bis zu achtzigtausend Euro, bei kleinen und mittleren Unternehmen bei bis zu fünfzigtausend Euro.

Für den Nachweis kennt § 5 eine Konformitätsvermutung: Entspricht eine Dienstleistung harmonisierten Normen, deren Fundstellen im Amtsblatt der Europäischen Union veröffentlicht sind, wird die Konformität insoweit vermutet. Für Webanwendungen ist das der Weg, auf dem WCAG-nahe Prüfpunkte in eine Abnahmeliste kommen.

#Routenansage in Next.js: was eingebaut ist

Bei einem klassischen Seitenaufruf lesen Screenreader den Seitentitel vor. Bei Übergängen mit next/link lädt der Browser nichts neu, deshalb liefert Next.js einen Route Announcer mit. Laut Dokumentation liest er zuerst document.title, dann das h1-Element und zuletzt den URL-Pfad. Daraus folgt eine Aufgabe für die Redaktion und für mich: Jede Route braucht einen eindeutigen, beschreibenden Titel. In der Metadata API gehört dafür ein title an jede page.tsx, nicht nur ein Standardtitel im Layout, sonst sagt der Announcer bei jedem Wechsel dasselbe.

#Fokus nach dem Seitenwechsel

Die Dokumentation beschreibt die Ansage, nicht die Fokusposition. Wer nach einem Klick auf einen Link per Tastatur weiterarbeitet, soll danach am Anfang des neuen Inhalts weitermachen und nicht auf dem Link der alten Seite hängen bleiben. Das lege ich in der Anwendung fest. Ein minimaler Ansatz mit dem dokumentierten Hook usePathname setzt den Fokus bei jedem Pfadwechsel auf die Hauptüberschrift:

'use client'
import { useEffect, useRef } from 'react'
import { usePathname } from 'next/navigation'

export function RouteFocus() {
  const pathname = usePathname()
  const previous = useRef(pathname)

  useEffect(() => {
    if (previous.current === pathname) return
    previous.current = pathname
    document.querySelector<HTMLElement>('h1')?.focus()
  }, [pathname])

  return null
}

Die Überschrift braucht dafür tabIndex={-1}, damit sie fokussierbar ist, ohne in die Tab-Reihenfolge zu geraten. Die Komponente kommt einmal ins Root-Layout. Beim ersten Laden tut sie nichts, weil sich der Pfad nicht geändert hat. Ob die Ansage und der Fokus zusammen sinnvoll klingen, prüfe ich pro Projekt mit einem Screenreader, denn doppelte Ansagen sind ein bekanntes Problem dieses Musters.

#Zugängliche Formulare mit Server Actions

Die Next.js-Dokumentation zu Formularen zeigt Server Actions am action-Attribut des form-Elements und Validierungsfehler über useActionState. Für die Zugänglichkeit kommt dazu, was die Dokumentation nicht vorgibt: Jedes Feld hat ein verbundenes Label, ein fehlerhaftes Feld trägt aria-invalid, und die Fehlermeldung hängt per aria-describedby am Feld. Damit liest ein Screenreader die Meldung beim Erreichen des Feldes mit, und die Meldung selbst steht in einem Element mit role="alert":

'use client'
import { useActionState } from 'react'
import { createUser } from '@/app/actions'

export function Signup() {
  const [state, action, pending] = useActionState(createUser, { errors: {} })
  const error = state.errors.email?.[0]

  return (
    <form action={action} noValidate>
      <label htmlFor="email">E-Mail-Adresse</label>
      <input
        id="email"
        name="email"
        type="email"
        autoComplete="email"
        aria-invalid={error ? true : undefined}
        aria-describedby={error ? 'email-error' : undefined}
      />
      <p id="email-error" role="alert">{error}</p>
      <button type="submit" disabled={pending}>Konto anlegen</button>
    </form>
  )
}

Die Server Action liefert dazu bei Validierungsfehlern { errors: ... } zurück, wie im Beispiel der Dokumentation mit Zod. Zwei Entscheidungen treffe ich vorab mit Ihnen: ob die Fehler zusätzlich in einer Zusammenfassung über dem Formular stehen, und ob der Fokus nach einem fehlgeschlagenen Absenden auf das erste fehlerhafte Feld springt. Beides hängt davon ab, wie lang das Formular ist, und Sie sehen es auf der Testumgebung, bevor es produktiv geht. Außerdem gilt weiter, was die Dokumentation vermerkt: Authentifizierung und Berechtigung gehören in jede Server Action, auch wenn das Formular nur auf einer geschützten Seite steht.

#Lint-Regeln: was eslint-config-next abdeckt und was nicht

Seit Next.js 16 gibt es next lint nicht mehr, geprüft wird mit der ESLint-CLI und einer Flat-Config, wie sie die Dokumentation beschreibt. Das Paket eslint-config-next bringt eslint-plugin-jsx-a11y mit, aktiviert in Version 16.4.6 aber nur sechs Regeln: alt-text (für img und Image), aria-props, aria-proptypes, aria-unsupported-elements, role-has-required-aria-props und role-supports-aria-props. Das habe ich im Paketquelltext nachgelesen. Ein Formular mit einem Label ohne zugehöriges Feld, ein autoFocus und ein klickbares div bleiben damit unbeanstandet. Ich ergänze deshalb Regeln des bereits geladenen Plugins:

// eslint.config.mjs
import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'

export default defineConfig([
  ...nextVitals,
  {
    rules: {
      'jsx-a11y/label-has-associated-control': 'error',
      'jsx-a11y/no-autofocus': 'error',
      'jsx-a11y/anchor-is-valid': 'error',
      'jsx-a11y/click-events-have-key-events': 'error',
      'jsx-a11y/no-static-element-interactions': 'error',
    },
  },
  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
])

Eine Testdatei mit diesen drei Mängeln meldet mit dieser Konfiguration vier Fehler, mit der Standardkonfiguration keinen. Lint findet allerdings nur statische Muster im JSX. Ob eine Meldung zur richtigen Zeit vorgelesen wird, sagt es nicht.

#Tests mit Screenreadern

Dafür brauche ich echte Kombinationen aus Screenreader und Browser. Auf dem Mac sind das VoiceOver mit Safari, unter Windows NVDA mit Firefox oder Chrome. Ich gehe pro Projekt dieselben Abläufe durch: Startseite, ein Seitenwechsel per Tastatur, ein Formular mit absichtlich falschen Eingaben, ein Warenkorb oder eine Buchung bis zur Bestätigung. Jeder Durchgang endet als kurze schriftliche Liste mit Fundstelle, Erwartung und Ergebnis, die Sie als Teil der Abnahme behalten. Die Liste ist auch ein Nachweis für den Fall, dass das Sozialministeriumservice nachfragt.

#Checkliste für Ihre Abnahme

#Wie ein Projekt mit mir abläuft

Sie schicken mir die Adresse der Anwendung oder eine Beschreibung des geplanten Vorhabens, Ihr Ziel und den Termin. Ich antworte schriftlich mit Rückfragen, danach folgen ein schriftlicher Umfang mit Annahmen und eine Schätzung. Gearbeitet wird auf einer Testumgebung, auf der Sie jeden Stand prüfen, bevor etwas produktiv geht. Auf Ihrer Seite brauche ich Zugriff auf das Repository und das Hosting sowie das Layout als Vorlage, ob als Datei oder im Tabellenformat, mit dem ich die Elemente je Ansicht abstimme. Gestaltung, Mockups und Wireframes liefern Sie. Nach dem Launch kann eine monatliche Betreuung folgen, die Updates auf der Testumgebung prüft und schriftlich berichtet. Stunden aus einem Monat verfallen am Monatsende.

#Häufige Fragen

#Gilt das BaFG für mein Unternehmen in Wien?

Es gilt für Dienstleistungen im elektronischen Geschäftsverkehr, die Verbrauchern nach dem 28. Juni 2025 angeboten werden, also etwa für einen Webshop mit Verbrauchervertrag. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Umsatz oder Bilanzsumme sind nach § 6 BaFG von den Anforderungen für Dienstleistungen ausgenommen.

#Wer prüft die Einhaltung in Österreich?

Zuständig ist das Sozialministeriumservice (§ 21 BaFG). Verbraucher und bestimmte Organisationen können dort Hinweise einbringen, die Behörde antwortet innerhalb von acht Wochen schriftlich (§ 35 BaFG).

#Reicht das Lint-Setup von Next.js für die Barrierefreiheit?

Nein. eslint-config-next 16.4.6 schaltet nur sechs jsx-a11y-Regeln ein. Das fängt fehlende Alternativtexte und falsche aria-Attribute, aber weder Fokusführung noch Fehlermeldungen in Formularen. Dafür braucht es zusätzliche Regeln und Tests mit einem Screenreader.

#Meldet Next.js einen Seitenwechsel an Screenreader?

Ja, der eingebaute Route Announcer liest document.title, dann das h1-Element, dann den Pfad. Er sagt nur den Wechsel an. Wohin der Fokus springt, entscheiden Sie in Ihrem Code.

#Wie läuft die Zusammenarbeit ab?

Schriftlich: Sie schicken mir die Adresse der Anwendung, das Ziel und den Termin, ich antworte mit Rückfragen, einem schriftlichen Umfang und Annahmen. Layout und Gestaltung kommen von Ihnen, ich setze sie um. Umgesetzt wird auf einer Testumgebung, die Sie vor der Abnahme prüfen.

#Schreiben Sie mir

Schreiben Sie mir über die Kontaktseite, worum es geht: die Adresse Ihrer Anwendung, Ihr Ziel, den Termin und den aktuellen Stack. Ich antworte an Werktagen schriftlich, und die erste schriftliche Schätzung ist kostenlos. Wenn Sie nur wissen möchten, ob das BaFG Ihren Shop betrifft, reichen die Mitarbeiterzahl und der Jahresumsatz.