Die meisten Texte zu diesem Thema erklären, was am Ergebnis anders aussieht: größere Kontraste, sichtbare Fokusrahmen, Alternativtexte. Das ist richtig und hilft trotzdem wenig, wenn Sie gerade ein Projekt planen. Denn der Unterschied liegt nicht in der Liste der Merkmale, sondern in der Reihenfolge, in der entschieden wird.
Ein barrierefrei geplantes Projekt hat dieselben Phasen wie jedes andere — Konzept, Design, Umsetzung, Übergabe. Verschoben ist nur, wann bestimmte Fragen gestellt werden. Ein paar davon wandern aus der Umsetzung in die Konzeptphase, ein paar aus der Nachbesserung ins Design. Genau diese Verschiebung ist der ganze Unterschied zwischen einem Aufschlag, den niemand bemerkt, und einem Nachrüstprojekt.
Warum Mitbauen billig ist und Nachrüsten teuer
Der Grund ist technisch und leicht zu übersehen: Barrierefreiheit steckt zum größten Teil nicht im Aussehen einer Seite, sondern in ihrer Struktur. Und Struktur ist das Einzige, was sich nachträglich nicht durch eine Einstellung ändern lässt.
Ein Farbwert ist eine Zeile in der Gestaltungsvorlage. Sie ändern ihn einmal und er wirkt auf allen Seiten gleichzeitig. Eine Überschrift dagegen, die nur deshalb eine dritte Ebene ist, weil jemand die Schriftgröße passend fand, ist keine Farbe, sondern eine Aussage über den Aufbau der Seite. Sie zu korrigieren heißt: die Vorlage ändern, alle Seiten prüfen, die sie benutzen, und das Layout nachziehen, weil die neue Ebene anders aussieht. Dasselbe gilt für eine Schaltfläche, die technisch gar keine ist, für ein Formularfeld, dessen Beschriftung nur daneben steht statt damit verbunden zu sein, und für eine Reihenfolge, die im Entwurf stimmt und im Quelltext nicht.
Dazu kommt ein Umstand, der nichts mit Technik zu tun hat: Zum Zeitpunkt der Nachbesserung ist das Design abgenommen. Jede strukturelle Korrektur ist dann nicht mehr eine Entscheidung, sondern eine Rücknahme einer Entscheidung — mit Abstimmung, Freigabe und der berechtigten Frage, warum das nicht gleich so gemacht wurde. In der Konzeptphase kostet dieselbe Frage zehn Minuten.
Konzeptphase: die Gliederung steht vor dem ersten Entwurf
In einem gewöhnlichen Projekt entsteht die Gliederung einer Seite nebenbei, während gestaltet wird. In einem barrierefrei geplanten Projekt entsteht sie vorher und schriftlich. Für jede Seitenvorlage — Startseite, Leistungsseite, Blogbeitrag, Kontaktseite — wird festgelegt, was die eine Hauptüberschrift ist und welche Abschnitte darunter auf welcher Ebene hängen. Das ist eine Textübung, kein Gestaltungsschritt, und sie dauert pro Vorlage etwa eine halbe Stunde.
Der zweite Punkt ist der, der später am meisten Geld spart: Jede Interaktion bekommt schon im Konzept ihr Gegenstück ohne Maus. Nicht als Prüfpunkt, sondern als Teil der Beschreibung. Wenn im Konzept steht „beim Überfahren mit der Maus erscheint der Preis“, dann gehört in denselben Satz, was auf dem Handy und mit der Tastatur passiert. Wird das nicht mitgeschrieben, wird es gebaut, abgenommen und irgendwann neu gebaut.
- Eine schriftliche Überschriftengliederung je Seitenvorlage — eine Hauptüberschrift, darunter Ebenen, die den Aufbau abbilden und nicht die Schriftgröße
- Zu jeder beweglichen oder aufklappbaren Komponente ein Satz dazu, wie sie ohne Maus bedient wird und wie man sie wieder schließt
- Die Reihenfolge, in der die Seite durchlaufen wird, inklusive Sprunglink zum Inhalt — vor dem Layout, weil das Layout sie später nur noch abbildet
- Eine Entscheidung darüber, welche Komponenten wirklich selbst gebaut werden. Karussells, Reiter und Dialoge sind die teuersten Bauteile eines barrierefreien Projekts, und die Hälfte davon lässt sich durch eine Liste ersetzen
- Für Formulare: welche Felder Pflicht sind, welches Format erwartet wird und was nach dem Absenden passiert — im Konzept, nicht im Quelltext
Diese Punkte klingen nach Papierarbeit und sind der Grund, warum ein barrierefreies Projekt am Ende nicht länger dauert. Unsere Standard-Projekte laufen in zwei bis vier Wochen, größere in vier bis sechs. Das ändert sich dadurch nicht, weil die Zeit nur an eine andere Stelle wandert.
Designphase: Entscheidungen, die in Farbwerten und Abständen stecken
In der Gestaltung fällt die Entscheidung, die am häufigsten falsch getroffen wird — und zwar deshalb, weil sie zum falschen Zeitpunkt geprüft wird. Kontrast wird üblicherweise gemessen, wenn die Seite fertig ist. Dann ist die Farbe längst freigegeben, steht auf Visitenkarten und im Logo, und jede Korrektur wird als Angriff auf die Marke verstanden.
Richtig ist, den Kontrast in dem Moment zu prüfen, in dem die Farbe ausgesucht wird. Als wir im August 2026 unsere eigene Website neu gebaut haben, war genau das der Fall: Unsere Signalfarbe ist auf dunklem Grund hervorragend lesbar und als Fließtext auf Weiß nicht. Die Lösung war kein Kompromiss am Logo, sondern ein zweiter, dunklerer Wert in der Palette, der überall dort greift, wo Farbe zu Text wird. Zwei Werte statt einem, einmal festgelegt, nie wieder diskutiert.
- Die Palette enthält von Anfang an für jede Markenfarbe die Variante, die als Text auf hellem Grund funktioniert — nicht als Ausnahme, sondern als Bestandteil
- Bedeutung wird nie allein über Farbe transportiert: Ein Pflichtfeld heißt „Pflichtfeld“ und trägt nicht nur ein farbiges Sternchen, ein Fehler steht als Satz da und ist nicht nur ein roter Rahmen, ein Status hat ein Wort oder ein Symbol neben der Farbe
- Der Fokusrahmen wird gestaltet. Er ist ein sichtbares Element der Marke wie jeder Button — die Alternative ist erfahrungsgemäß nicht ein hässlicher, sondern gar keiner
- Schriftgrößen werden mit dem längsten echten Text geprüft, nicht mit Blindtext. Fließtext unter der Größe, in der Sie selbst bequem lesen, wird nicht besser, wenn die Kundschaft älter ist als Sie
- Klickflächen werden als Fläche gestaltet, nicht als Linie: Ein Telefonsymbol in der Kopfzeile braucht eine Trefferfläche, die man mit dem Daumen im Gehen trifft
- Zustände werden mitgezeichnet — Ruhe, Überfahren, Fokus, gedrückt, deaktiviert. Was nicht gezeichnet ist, wird in der Umsetzung erfunden
Der Aufwand dafür liegt fast vollständig in der Palette und im ersten Entwurf einer Vorlage. Danach wiederholt er sich nicht mehr, weil jede weitere Seite dieselben Werte benutzt.
Umsetzung: die Struktur unter dem Layout
In der Umsetzung geht es weniger um Zusatzarbeit als um Auswahl. Ein echter Button bringt alles schon mit: Er ist mit der Tastatur erreichbar, reagiert auf Enter und Leertaste, bekommt einen Fokus und meldet sich als Schaltfläche. Ein nachgebautes Element aus einem beliebigen Baustein muss dasselbe in vier Einzelschritten nachliefern, von denen jeder vergessen werden kann. Deshalb ist die Grundregel nicht „aufwendiger bauen“, sondern „das Element nehmen, das es schon gibt“.
- Schaltflächen sind Schaltflächen, Links sind Links. Der Unterschied ist nicht kosmetisch: Das eine tut etwas auf der Seite, das andere führt woandershin, und beides wird unterschiedlich angekündigt und unterschiedlich bedient
- Beschriftungen werden mit ihrem Feld verbunden, nicht daneben gelegt. Nebeneffekt für alle: Der Klick auf die Beschriftung springt ins Feld, was die Trefferfläche am Handy verdoppelt
- Die Reihenfolge im Quelltext entspricht der sichtbaren Reihenfolge. Wenn das Layout eine Spalte optisch nach oben zieht, gehört sie auch im Quelltext nach oben — sonst springt der Fokus quer über die Seite
- Aufklappbares meldet, ob es offen oder zu ist. Ein Akkordeon, das nur die Grafik wechselt, ist für jemanden, der die Grafik nicht sieht, ohne Zustand
- Dialoge und Overlays halten den Fokus innen fest, lassen sich mit Escape schließen und geben den Fokus dorthin zurück, wo er geöffnet wurde
- Alternativtexte schreibt, wer weiß, wofür das Bild da ist. Dasselbe Foto einer Werkstatt heißt in einem Beitrag über Ausstattung anders als auf einer Seite über das Team. Diese Entscheidung liegt bei der Redaktion, nicht bei der Entwicklung — sie muss nur im Ablauf vorgesehen sein, sonst landet dort der Dateiname
Das teuerste Bauteil in dieser Phase ist fast immer eines, das im Konzept in vier Worten beschrieben war: ein Karussell, ein mehrstufiger Filter, ein Terminkalender. Wenn Sie die Kosten eines barrierefreien Projekts an einer Stelle senken wollen, dann hier — indem in der Konzeptphase entschieden wird, dass es das Bauteil nicht braucht.
Übergabe: barrierefrei bleiben, nicht nur barrierefrei starten
Der Punkt, an dem die meisten sorgfältig gebauten Websites wieder verlieren, was sie hatten: Nach der Übergabe pflegen Sie Inhalte selbst. Zwanzig Blogbeiträge und drei neue Leistungsseiten später entscheidet nicht mehr die Agentur über Überschriftenebenen, Bilder und Linktexte, sondern die Person, die gerade Zeit hat. Ohne eine einzige Seite Anleitung geht das zuverlässig schief — und zwar ohne böse Absicht, weil im Redaktionssystem nichts davon sichtbar ist.
Zu einer vollständigen Übergabe gehören deshalb nicht nur die Zugänge, sondern fünf Regeln, die auf eine Seite passen:
- Überschriften bilden den Aufbau ab, nicht die Wunschgröße. Eine Zwischenüberschrift wird nicht deshalb zur zweiten Ebene, weil sie größer aussehen soll
- Jedes Bild bekommt beim Hochladen einen Satz, der sagt, was darauf zu sehen ist und warum es dort steht. Reiner Schmuck bekommt bewusst nichts — der Dateiname ist immer die schlechteste Antwort
- Preise, Öffnungszeiten und Speisekarten werden als Text eingepflegt, nie als Bild oder eingescanntes PDF. Das ist zugleich die einzige Fassung, die Google lesen kann
- Linktexte sagen, wohin sie führen. Achtmal „mehr erfahren“ auf einer Seite ist für jeden eine Zumutung, der die Seite überfliegt
- Farben und Schriftgrößen kommen aus der Palette. Wenn im Editor eine freie Farbwahl angeboten wird, ist sie der schnellste Weg zurück zu unlesbarem Text
Wirksamer als jede Anleitung ist allerdings, dem Redaktionssystem die falschen Möglichkeiten zu nehmen. In WordPress lässt sich einstellen, welche Überschriftenebenen ein Textblock überhaupt anbieten darf und ob es eine freie Farbwahl gibt. Was gar nicht erst angeklickt werden kann, muss auch niemand erklären. Sie bekommen ohnehin alle Zugänge und die Website gehört Ihnen — die Frage ist nur, wie viele Fallen darin liegen.
Was in welcher Phase entschieden wird
Die dritte Spalte ist die eigentliche Antwort auf die Frage, ob sich das lohnt. Nicht weil Nachrüsten unmöglich wäre, sondern weil es an fast jeder Stelle eine andere Art von Arbeit ist als das Mitbauen.
| Projektphase | Was sich ändert | Was es kostet, wenn es aufgeschoben wird |
|---|---|---|
| Konzept | Überschriftengliederung und Tastaturbedienung werden schriftlich festgelegt, bevor etwas gestaltet wird | Die Gliederung entsteht aus Schriftgrößen. Sie zu korrigieren heißt, Vorlagen und Layout gleichzeitig zu ändern |
| Design | Kontrast wird beim Aussuchen der Farbe geprüft; die Palette enthält je Markenfarbe eine Textvariante | Die Farbe ist freigegeben und im Einsatz. Jede Korrektur ist eine Markendiskussion, nicht mehr eine Gestaltungsfrage |
| Design | Fokus, Zustände und Klickflächen werden mitgezeichnet | In der Umsetzung erfunden oder weggelassen — und später auf jeder Vorlage einzeln nachgezogen |
| Umsetzung | Vorhandene Elemente statt nachgebauter; Beschriftungen mit Feldern verbunden; Quelltextreihenfolge gleich der sichtbaren | Nachgebaute Bauteile werden auseinandergenommen und neu aufgebaut. Das ist Strukturarbeit, kein Umstyling |
| Inhalte | Alternativtexte schreibt, wer den Zweck des Bildes kennt — als Schritt im Ablauf, nicht als Nacharbeit | Hunderte Bilder werden im Nachhinein von jemandem beschrieben, der nicht weiß, warum sie dort stehen |
| Übergabe | Fünf Redaktionsregeln auf einer Seite, plus ein Editor, der die falschen Möglichkeiten gar nicht anbietet | Die Website verliert nach und nach, was sie beim Start hatte — und niemand merkt, wann es passiert ist |
Wenn Sie ohnehin einen Relaunch planen, ist das der günstigste denkbare Zeitpunkt: Sie zahlen die Konzept- und Designphase gerade sowieso. Und wenn Sie keinen planen, ist die ehrlichere Auskunft, dass sich ein Neubau selten allein wegen Barrierefreiheit rechnet — die Punkte aus der Übergabeliste können Sie dagegen sofort anwenden, ohne dass jemand etwas umbaut.
Häufige Fragen zum barrierefreien Erstellen einer Website
Indem vier Entscheidungen früher fallen als üblich: die Überschriftengliederung vor dem Design, die Tastaturbedienung jeder Komponente im Konzept statt in der Umsetzung, die Kontrastprüfung beim Aussuchen der Farben statt danach, und die Alternativtexte durch die Person, die den Zweck des Bildes kennt. Der Rest folgt daraus fast von selbst, weil die Struktur dann von Anfang an stimmt.
In der Regel nicht spürbar, weil der Aufwand nur an eine andere Stelle wandert: mehr Zeit im Konzept, weniger in der Nachbesserung. Unsere Standard-Projekte bleiben bei zwei bis vier Wochen, größere bei vier bis sechs. Länger wird es nur, wenn aufwendige Bauteile wie Karussells, Filter oder Terminkalender wirklich gebraucht werden — die kosten Zeit, ob barrierefrei oder nicht.
Teilweise und unterschiedlich gut. Farben, Schriftgrößen und Alternativtexte lassen sich meist im laufenden Betrieb korrigieren. Alles, was in der Struktur sitzt — Überschriftenebenen, nachgebaute Schaltflächen, Formularbeschriftungen, die Reihenfolge beim Durchtabben — bedeutet Arbeit an den Vorlagen und ist der Grund, warum Nachrüsten regelmäßig teurer ausfällt als Mitbauen.
Ja, und die Plattform ist selten das Problem. Entscheidend sind das gewählte Theme, die eingesetzten Erweiterungen und wie der Editor eingerichtet ist. Ein Baukasten-Theme mit vielen fertigen Effekten bringt oft Bauteile mit, die sich ohne Maus nicht bedienen lassen — deshalb gehört die Auswahl von Theme und Erweiterungen in die Konzeptphase und nicht in die Umsetzung.
Sie schränkt drei Dinge ein: sehr helle Textfarben, unsichtbare Fokusrahmen und Bedeutung, die allein über Farbe transportiert wird. Alles andere bleibt offen. In der Praxis wirkt es weniger wie eine Einschränkung und mehr wie ein Raster — ähnlich wie eine feste Schriftgrößen-Skala, die Entwürfe eher besser macht als ärmer.
Für die Bilder, die beim Aufbau eingepflegt werden, übernehmen wir das — für alles, was danach dazukommt, können wir es nicht, weil wir den Zweck des Bildes nicht kennen. Ein Foto Ihres Teams, Ihrer Werkstatt oder Ihres Produkts beschreibt am besten, wer weiß, warum es an dieser Stelle steht. Deshalb steht diese Regel in der Übergabe.
Kostenloses Beratungsgespräch
Wir schauen uns Ihre Website vorab an und zeigen Ihnen die größten Hebel für mehr Anfragen.
