Barrierefreie Website erstellen lassen: Ablauf, Angebot und Abnahme

Sie haben sich entschieden, eine barrierefreie Website erstellen zu lassen. Zwischen dieser Entscheidung und der fertigen Seite liegen ein Angebot, mehrere Rückfragen und ein Termin, an dem Sie abnehmen sollen, was jemand anderes gebaut hat. Dieser Text beschreibt den Weg in der Reihenfolge, in der er tatsächlich passiert, und gibt Ihnen einen Abnahme-Durchgang mit, den Sie ohne Fachwissen und ohne Werkzeug selbst gehen können. Eine Rechtsauskunft ist er nicht.

Sie haben sich entschieden. Was jetzt zuerst kommt

Muss dafür die alte Seite weg? An dieser Frage hängt die Planung, noch vor der nach dem Preis.

Zur Rechtslage nur so viel: Das BFSG gilt seit dem 28. Juni 2025 und zielt auf verbrauchergerichtete digitale Dienste, also Shops, Buchungen und Kundenkonten. Für Dienstleistungen gibt es eine Ausnahme für Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens 2 Mio. € Jahresumsatz oder Bilanzsumme; reine Infoseiten fallen häufig ohnehin nicht darunter. Ob Ihr Fall dazugehört, ist eine juristische Frage, die ich weder beantworten kann noch darf. Die ausführliche Einordnung steht im BFSG-Artikel.

Bleibt die erste Entscheidung, die wirklich Ihnen gehört: nachbessern oder neu bauen. Der übliche Reflex sagt, der barrierefreie Neubau sei der teure Weg. In meinen Festpreis-Paketen steckt WCAG 2.2 AA ohne eigene Position und ohne Aufschlag drin; was ein Projekt teuer macht, ist sein Umfang, also Seitenzahl, Funktionen und fehlende Inhalte. Ein Neubau lohnt sich, wenn Struktur und Technik grundsätzlich nicht tragen. Steht der Unterbau und hakt nur die Oberfläche, reicht oft ein WordPress-Relaunch ab 1.249 €.

Am Ende dieses Textes haben Sie einen Abnahme-Durchgang in der Hand: Tab-Taste, Browser-Zoom, ein Blick aufs Handy, einmal Bewegung reduzieren. Nichts davon müssen Sie vorher installieren.

Woran sich Anbieter im Erstgespräch unterscheiden

Barrierefreiheit lässt sich im Erstgespräch leicht zusagen; das Wort allein kostet nichts. Interessant wird es, sobald jemand nach dem Wie fragt.

Woran messen Sie das? Eine belastbare Antwort nennt WCAG 2.2 auf Stufe AA und die europäische Norm EN 301 549, an der sich diese Prüfung ausrichtet. „Nach bestem Wissen“ taugt nicht als Maßstab, weil sich daran im Streitfall nichts überprüfen lässt.

Danach wird es unbequem: Legen Sie eine Schicht über die fertige Seite oder ändern Sie die Seite selbst? Wer ein Skript verkauft, das zur Laufzeit an einer Struktur herumrepariert, die es gar nicht kennt, beantwortet damit auch die Frage nach der Substanz darunter. Für das Gespräch reicht eine Gegenprobe: Lassen Sie sich eine Arbeitsprobe zeigen und machen Sie darauf den Tastatur-Durchgang, der weiter unten in diesem Text steht. Sie brauchen dafür weniger als fünf Minuten und sehen das Ergebnis, bevor Sie unterschreiben.

Am aufschlussreichsten ist die Frage nach den Kontrasten. Aus der Farbpalette allein hätte man diese Website falsch beurteilt. Der schwächste Ton im Satzbild, der für Hinweise und Feindruck, erreicht auf dem Papierton 4,53:1 und liegt damit knapp über der AA-Schwelle von 4,5:1. Auf dem etwas dunkleren Ton der abwechselnden Bänder wären es 4,15:1. Gemessen habe ich deshalb im fertig aufgebauten Seiteninhalt, jeden sichtbaren Textknoten gegen den Hintergrund, auf dem er tatsächlich sitzt. Die kritische Paarung tritt nirgends auf.

Kontrast prüfen heißt: an der Stelle prüfen, an der die Farbe am Ende wirklich steht.

Was im Angebot stehen sollte

Schriftlich stehen sollte, bevor Sie unterschreiben:

• Der Maßstab beim Namen: WCAG 2.2 AA über EN 301 549.
• Die Position: ob Barrierefreiheit im Festpreis steckt oder als Aufpreis geführt wird.
• Die Prüfung: wer das Ergebnis woran prüft und wann Sie es abnehmen.
• Die Zeit danach: was gilt, wenn Sie später selbst Inhalte einpflegen.

Zur eigenen Preisstruktur nur dieser eine Absatz, die vollständige Aufstellung steht auf der Seite Preise: Onepager 999 €, Business 1.249 €, Pro 1.999 €, individuelle Projekte ab 2.500 €, ein Relaunch ab 1.249 €, Wartung ab 99 € im Monat. Das sind Endpreise, ich arbeite nach Kleinunternehmerregelung, Umsatzsteuer kommt nicht dazu. WCAG 2.2 AA ist in jedem Paket enthalten. Ein Angebot, das Barrierefreiheit als Zusatzposten führt, sagt damit auch etwas über die Bauweise darunter.

Am dritten Punkt hängt mehr, als er aussieht. Wenn im Angebot steht, dass geprüft wird, gehört auch dazu, wann Sie das Ergebnis zu sehen bekommen und woran Sie es festmachen dürfen. Ein Abnahmetermin, bei dem Sie die Seite selbst mit der Tastatur durchgehen, kostet eine halbe Stunde. Danach haben Sie die Zusage aus dem Angebot einmal mit eigenen Augen überprüft.

Was hier bewusst fehlt, ist eine Zahl für das Nachrüsten einer bestehenden Seite. Was das kostet und wie lange es dauert, hängt am Zustand genau dieser Seite, und ohne sie gesehen zu haben, wäre jede Angabe geraten.

Was Sie selbst liefern müssen

Die Bilder liegen in einem Ordner, die Texte in einem Dokument daneben, beides seit Wochen fertig. Und trotzdem fängt genau hier die Arbeit an, die Ihnen kein Dienstleister abnehmen kann, weil sie Wissen über Ihren Betrieb voraussetzt.

Eine Bildbeschreibung kann nur schreiben, wer weiß, was zu sehen ist und warum es an dieser Stelle steht. Bei einer Praxis, einer Werkstatt oder einer Kanzlei sind das Sie. Dazu gehört auch die Entscheidung, welche Bilder überhaupt etwas aussagen: Ein Foto der Behandlungsräume transportiert eine Information, ein dekorativer Farbverlauf nicht, und beide brauchen deshalb eine unterschiedliche Behandlung. Diese Zuordnung geht schnell, wenn Sie sie beim Zusammenstellen der Bilder gleich mitliefern.

Bei der Gliederung ist es ähnlich. Wer sich eine Seite vorlesen lässt, hangelt sich an den Überschriften entlang; eine Zeile, die bloß größer gesetzt ist, hilft ihm dabei nicht. Auf dieser Website gibt es genau eine h1 je Seite, und am html-Element steht lang="de", damit die Vorlesesoftware Deutsch spricht.

Beim Formular schließlich entscheidet sich, wie viel Sie Ihren Besuchern zumuten. Die Gegenprobe steht auf meiner eigenen Kontaktseite: Jedes Feld hat ein verknüpftes Label, kein einziges ohne, und Name, E-Mail und Telefon tragen autocomplete. Das verlangt WCAG 1.3.5 auf AA-Niveau, und es hilft allen, die Formulare per Autofill ausfüllen. Jedes weitere Feld, das Sie sich wünschen, bringt deshalb eine Beschriftung mit und die Frage, ob es wirklich gebraucht wird.

Die Abnahme, erster Durchgang: legen Sie die Maus weg

Öffnen Sie die fertige Seite und rühren Sie die Maus nicht mehr an. Drücken Sie einmal die Tab-Taste.

Als Erstes sollte ein Sprungziel erscheinen. Hier heißt es „Zum Inhalt springen“, führt auf #main und wird erst sichtbar, wenn es den Fokus hat. WCAG 2.4.1 verlangt einen Weg an wiederkehrenden Blöcken vorbei; der Sprunglink ist der Weg, den Sie beim Tabben sofort bemerken. Wer mit der Tastatur navigiert, spart sich damit auf jeder Unterseite das Durchtabben des kompletten Menüs. Fehlt er, merken Sie das als Betreiber nie, weil es Sie mit der Maus nichts kostet.

Tabben Sie weiter durch Menü, Links und Formularfelder und achten Sie dabei auf zweierlei. Läuft der Fokus in der Reihenfolge, in der Sie die Seite auch lesen würden? Springt er unvermittelt in die Fußzeile und wieder zurück, stimmt die Struktur darunter nicht. Und sehen Sie jederzeit, wo Sie gerade stehen? Der Fokusrahmen ist auf dieser Seite 2 Pixel durchgezogen mit 3 Pixeln Abstand und läuft über :focus-visible, damit ihn sieht, wer mit der Tastatur arbeitet, während er beim Mausklick niemanden stört (WCAG 2.4.7). An jeder Stelle, an der der Rahmen verschwindet, weiß der Besucher nicht mehr, worauf ein Tastendruck gerade wirkt.

Dann der wichtigste Schritt: Bedienen Sie Menü und Kontaktformular vollständig ohne Maus und schicken Sie das Formular ab. Aufklappbare Menüs sind dabei die häufigste Hürde, weil sie oft nur auf den Mauszeiger reagieren; mit der Tastatur bleibt dann die halbe Website unerreichbar. Und ein Kontaktformular, das sich per Tastatur nicht abschicken lässt, erzeugt eine Anfrage, die in keiner Auswertung auftaucht, weil sie nie entstanden ist.

Was hier klemmt, klemmt für jeden, der keine Maus benutzen kann.

Zweiter Durchgang: 200 Prozent Zoom, Handy, Bewegung aus

200 Prozent, mehr braucht der zweite Durchgang nicht. Stellen Sie den Browser-Zoom hoch und lesen Sie die Seite noch einmal von oben. So sieht sie für alle aus, die Text vergrößern müssen, um ihn zu lesen, und gleichzeitig ist es ein Belastungstest für das Layout. Überlappt Text? Rutschen Bedienelemente über den Rand? Bleibt jede Spalte einer Tabelle erreichbar?

Ein Fehler dieser Bauart steckte auf dieser Website selbst. Aufgefallen ist er allerdings im schmalen Fenster, bei 390 Pixeln Breite. Eine Vergleichstabelle in einem Magazin-Artikel ragte dort über den Rand, und weil der Seitenrahmen waagerechtes Scrollen unterbindet, war die letzte Spalte nicht bloß angeschnitten, sondern dauerhaft unerreichbar. Wie ich sie repariert habe und warum die bequeme Lösung dabei ausschied, steht im BFSG-Artikel.

Danach das Formular auf dem Handy. Sind die Schaltflächen groß genug zum Antippen? Die auf der Preisseite sind 46 Pixel hoch, WCAG 2.5.8 verlangt mindestens 24 mal 24 CSS-Pixel. Und passiert nach dem Absenden etwas Sichtbares? Die Rückmeldung liegt hier in einem Bereich mit role="status" und aria-live, das ist WCAG 4.1.3. Ohne den erfährt eine Vorlesesoftware nach dem Klick überhaupt nicht, dass sich etwas getan hat. Der Besucher klickt dann ein zweites Mal oder geht, und in Ihrem Postfach landet entweder nichts oder dieselbe Anfrage doppelt.

Bleibt ein letzter Handgriff, er dauert eine halbe Minute. Schalten Sie im Betriebssystem „Bewegung reduzieren“ ein und laden Sie die Seite neu. Einblendungen springen dann sofort auf volle Deckkraft, die Dauern liegen bei 0,001 ms. Der Ladering im Absende-Button bleibt sichtbar und dreht sich nur nicht mehr, weil der Zustand für den Nutzer erkennbar bleiben muss, auch wenn die Bewegung weg ist.

Woran der Selbsttest endet

Tastatur und Zoom zeigen Ihnen die Bedienbarkeit. Über die feinere Semantik darunter sagen sie wenig, und ein bestandener Durchgang ist noch kein Konformitätsnachweis.

Zusätzlich kann jeder zwei Werkzeuge aufrufen, ohne etwas zu installieren: Lighthouse steckt in den Entwicklerwerkzeugen von Chrome und Edge, und für PageSpeed Insights genügt es, die Adresse der Seite in ein Feld zu tippen. Beide laufen auf jeder fremden Seite genauso wie auf der eigenen, Sie können also vor der Beauftragung die Arbeitsprobe eines Anbieters durchmessen. Zur Einordnung die Zahlen dieser Website, gemessen am Production-Build in je zwei Läufen: Startseite in 0,5 Sekunden, Lighthouse 100 am Rechner, 99 am Handy. Über Barrierefreiheit sagt ein solcher Wert für sich genommen wenig; er zeigt, dass die Seite schnell ausgeliefert wird, und schnelle Auslieferung hilft besonders denen, die auf schwacher Verbindung unterwegs sind.

Den Kontrastbefund bekommt man dagegen nur durch Messen. Startseite, Preisseite und Kontaktseite weisen null Verstöße auf: Fließtext 13,12:1, Überschriften 15,98:1, Sekundärtext 5,25:1, Feindruck 4,53:1, Link- und Hover-Farbe 6,21:1, bei einer AA-Schwelle von 4,5:1. Ob ein Alternativtext den Inhalt eines Bildes trifft, ob die Reihenfolge beim Tabben logisch bleibt und ob eine Fehlermeldung verständlich ist, entscheidet weiterhin ein Mensch.

Den laufenden Stand dieser Website und die Möglichkeit, eine gefundene Barriere zu melden, finden Sie unter Barrierefreiheit.

Nach der Übergabe entscheidet der erste eingepflegte Inhalt

Die Tabelle aus dem vorigen Abschnitt gehörte nicht zum Grundgerüst dieser Website. Sie kam mit einem Magazin-Artikel hinein, und mit ihr die unerreichbare Spalte.

So verliert sich Barrierefreiheit im Alltag: beim nächsten eingepflegten Beitrag, bei der nächsten eingefügten Tabelle, beim nächsten Bild ohne Beschreibung. Davor schützt kein Angebot, weil es am Tag der Übergabe noch niemanden gibt, der etwas falsch machen könnte.

In die letzte Projektbesprechung gehört deshalb eine Absprache darüber, wer künftig Inhalte einstellt und nach welchen Regeln. Eine Hauptüberschrift je Seite. Eine Beschreibung zu jedem Bild, das etwas aussagt. Und der Tastatur-Durchgang aus den Abschnitten oben einmal im Quartal, er dauert fünf Minuten.

Dazu kommen die stillen Bestandteile, die selten in einem Angebot auftauchen und trotzdem dauerhaft tragen. Eine falsch getippte Adresse etwa muss auf einer echten Fehlerseite landen, die dem Browser auch den Status 404 meldet; auf dieser Website tut sie das. Meldet die Seite stattdessen ein reguläres 200, bekommt der Besucher zwar eine Fehlermeldung zu sehen, technisch gilt die Adresse aber als gültige Seite. Probieren Sie es aus, indem Sie ein paar zufällige Zeichen an eine Adresse hängen: Sie sollten auf einer Seite landen, die erklärt, was passiert ist, und die einen Weg zurück in die Navigation anbietet.

Wenn Sie den Weg abkürzen wollen

Drei Dinge können Sie ab hier ohne mich tun: den Abnahme-Durchgang auf einer beliebigen Seite ausprobieren, die Fragen aus dem Erstgespräch notieren und die vier Punkte aus dem Angebotsabschnitt gegen jedes Angebot halten, das auf Ihrem Tisch liegt.

Was ich nicht leisten kann, steht ebenso fest. Ob Ihre konkrete Seite unter das BFSG fällt, sagt Ihnen nur jemand, der Jurist ist. Und eine Zahl für das Nachrüsten nennt Ihnen niemand seriös, solange die bestehende Seite niemand gesehen hat.

Wenn Sie über ein konkretes Projekt sprechen wollen: Ich heiße Thomas Kraaibeek, arbeite allein von Münster aus, und wer mit Ihnen spricht, ist auch derjenige, der baut; wie das im Alltag aussieht, steht im Studio. Der Weg zum Gespräch führt über die Kontaktseite.

Wenn Ihnen beim Durchgehen dieser Seite etwas auffällt, das hakt, schreiben Sie es mir. Ich trage es in den offenen Stand ein.