In fünf Schritten zur barrierefreien Website

Barrierefreiheit ist mehr als ein technisches Detail: sie wird zur Pflicht und zur Chance. In diesem Artikel zeige ich Ihnen, wie Sie in fünf sofort umsetzbaren Schritten Ihre Website barrierefreier machen: für bessere Nutzererlebnisse, mehr Reichweite und höhere Rechtssicherheit. Ich erkläre, welche Schritte sich schnell lohnen und wie die gesetzlichen Änderungen ab 2025 praktisch umzusetzen sind.

 

Ein Fachartikel von Max Prügner

 

• Das Barrierefreiheitsstärkungsgesetz
• Schritt 1: Strukturierte Überschriften
  
• Schritt 2: Alt-Texte
  
• Schritt 3: Tastaturnavigation & Fokus
  
• Schritt 4: Starke Farbkontraste
  
• Schritt 5: Formulare & Kontaktflächen
  
• Tipps für barrierefreie Websites
  
• Fazit
  

Das Barrierefreiheitsstärkungsgesetz 

Ab dem 28. Juni 2025 sind die im Barrierefreiheitsstärkungsgesetz (BFSG) genannten Produkte und Dienstleistungen barrierefrei bereitzustellen. Das gilt vor allem für digitale Dienstleistungen wie E-Commerce/Online-Shops. Für Websites und Shops gilt in der Praxis: keine Übergangsfrist ab dem 29. Juni 2025, es braucht also konkrete Maßnahmen und vor allem Information, denn viele Unternehmen wissen noch gar nichts von der neuen Gesetzgebung und den negativen Folgen.

 

Öffentliche Stellen sind ohnehin schon länger zur Barrierefreiheit verpflichtet. Für private Unternehmen ist das zwar nicht per-se bindend, aber als Best-Practice sinnvoll und wird künftig oft faktisch erwartet.

Das Gesetz gilt für Alle 

Im Grunde ist es egal, ob in Werkstätten oder Büros. Webseiten werden häufig „nebenbei“ gepflegt: Einmal Bilder tauschen, dann ein neuer Text, ein Plugin-Update. Fertig. Daneben wirkte digitale Barrierefreiheit lange wie ein unnötiges Extra, welches man vor sich herschieben kann, doch mit dem BFSG hat sich das geändert. Fest steht: Wer eine barrierefreie Webseite für sich erstellt, der gewinnt nicht nur Rechtssicherheit, sondern auch mehr Anfragen, weil Ihre Seite einfacher zu benutzen ist, gerade mobil.

 

Anstelle eines Komplett-Relaunch ist oft eine Umsetzung über Meilensteine und Schritt für Schritt ratsam.

Schritt 1: Strukturierte Überschriften sind das Fundament einer zugänglichen Website

Eine saubere Überschriftenhierarchie ist das Fundament jeder barrierefreien Website und gleichzeitig einer der häufigsten Schwachpunkte. Für viele Nutzer:innen, insbesondere Screenreader-Anwender, sind Überschriften das wichtigste Navigationswerkzeug. Sie ermöglichen es, Inhalte schnell zu erfassen und gezielt zu Abschnitten zu springen, ähnlich wie ein Inhaltsverzeichnis in einem Buch. Damit das funktioniert, muss man die jeweiligen Überschriften im Code richtig kennzeichnen.

 

Technisch gilt daher die Auswahl einer einzigen H1 pro Seite, darunter logisch gegliedert H2- und H3-Überschriften. Tatsächlich werden diese Strukturen jedoch häufig durch rein visuelle Formatierungen ersetzt: Überschriften werden größer oder fett dargestellt, ohne die korrekte HTML-Auszeichnung. Somit ist das Chaos perfekt. Für Screenreader entsteht so nämlich ein unstrukturierter Textblock, der schwer navigierbar ist.

 

Auf vielen Websites erkennen wir, dass die H-Struktur nie beachtet wurde. Wenn ich die Seite mit einem Screenreader prüfe, ist das wie eine Baustelle ohne Plan: man weiß nicht, wo man anfangen soll. Daher lohnt sich ein kurzer Check: Wer seine Start- und Leistungsseiten einmal konsequent nach einer logischen Überschriftenstruktur durchgeht, verbessert nicht nur die Zugänglichkeit, sondern häufig auch die SEO-Grundlage und Lesbarkeit für alle Nutzer:innen.

Schritt 2: Alt-Texte, damit Bilder auch „gesehen“ werden

Starke Bilder sind Pflicht, um die Aufmerksamkeit des Lesers zu gewinnen und zu behalten. Gerade Dienstleister profitieren hier und machen ihre Kompetenzen visuell sichtbar: Ob frisch verlegte Fliesen, eine modernisierte Heizungsanlage oder eine neue Dachkonstruktion, Fotos sind eines der überzeugendsten Verkaufsargumente. Doch für Menschen mit Sehbehinderungen bleiben diese Inhalte unsichtbar, wenn sie nicht korrekt beschrieben werden. Alt-Texte (Alternativtexte) sind hier entscheidend und im Grunde als Bild-Texte zu verstehen: Diese ermöglichen Screenreadern, den Inhalt oder Zweck eines Bildes vorzulesen.

 

Ein Alt-Text sollte präzise und informativ sein. Statt „EF-HAUS_20251010.jpg“ beschreibt man ein Bild besser mit „Meisterbetrieb installiert Wärmepumpe im Einfamilienhaus“. Dekorative Bilder, die keine inhaltliche Bedeutung haben, erhalten ein leeres Alt-Attribut, so überspringt der Screenreader sie elegant. Firmenlogos wiederum tragen in der Regel den Unternehmensnamen als Alt-Text.

 

Alt-Texte sind so etwas wie der Untertitel eines Bildes, nur eben für Menschen, die nicht sehen. Viele Betriebe unterschätzen das. Dabei lässt sich das im WordPress-Backend in wenigen Minuten nachpflegen. Der Effekt ist doppelt positiv: Menschen mit Screenreader erhalten Kontext, und Suchmaschinen können die Inhalte besser indexieren. Gut gepflegte Alt-Texte sind ein unterschätzter SEO-Faktor, insbesondere für lokale Suchen und die Google-Bildersuche. Ein wichtiger Baustein im visuellen Onlinemarketing.

Schritt 3: Tastaturnavigation & Fokus: unsichtbar, aber entscheidend

Nicht alle Menschen bedienen Websites mit der Maus. Viele nutzen die Tastatur aus Gewohnheit, wegen motorischer Einschränkungen, dem eigenen Alter, oder anderen Gründen, mit Hilfe unterstützender Technologien wie Screenreadern. Für sie ist eine funktionierende Tastaturnavigation kein Komfort, sondern eine Grundvoraussetzung.

 

Ein einfacher Test zeigt schnell, ob die eigene Website mitspielt: Mit der Tabulatortaste kann man sich Schritt für Schritt durch die Seite bewegen. Dabei sollte jede Navigationsebene erreichbar sein und stets klar erkennbar werden, wo sich der Fokus gerade befindet. Fehlt diese visuelle Hervorhebung, verlieren Tastaturnutzende schnell die Orientierung. Besonders problematisch sind komplexe Mega-Menüs, Pop-ups oder Slider, die den Fokus „verschlucken“ oder die Nutzer:innen in Endlosschleifen schicken.

 

Das ist ein Klassiker: Mit der Maus funktioniert alles, aber mit der Tastatur bleibt man plötzlich hängen. Viele Betreiber merken das gar nicht, weil sie es nie ausprobieren. Schon wenige Zeilen CSS für einen sichtbaren Fokuszustand oder kleinere Anpassungen an Navigationskomponenten können hier große Wirkung entfalten. Wer diesen Punkt verbessert, erfüllt nicht nur eine zentrale WCAG-Anforderung, sondern erleichtert auch die mobile Nutzung mit externer Tastatur oder Voice-Control-Systemen.

Schritt 4: Starke Farbkontraste, damit Inhalte wirklich lesbar sind

Elegante, helle Designs sind im Trend, aber oft schwer lesbar. Hellgraue Schrift auf weißem Hintergrund oder blasse Buttons mit kaum sichtbarem Hover-Effekt sehen auf großen Monitoren schick aus, versagen aber spätestens dann, wenn man bei Sonnenwetter auf das Smartphone blicken möchte. Für Menschen mit eingeschränktem Sehvermögen können solche Designs zur unüberwindbaren Barriere werden.

 

Die internationalen WCAG-Richtlinien geben hier klare Werte vor: 4,5:1 Kontrast für normalen Text, 3:1 für große Schrift. Online-Tools wie der „Contrast Checker“ ermöglichen eine schnelle Prüfung. Insbesondere Buttons, Links und Fließtext auf hellen Hintergründen sollten kontrolliert werden. Schon leichte Anpassungen im Farbton oder in der Schriftstärke reichen oft aus, um die Richtlinien zu erfüllen. Viele Betriebe wollen ein modernes Design und landen bei Hellgrau auf Weiß. Das mag stylisch sein, aber niemand kann es wirklich lesen. Kontrast ist kein Designkiller sondern kann bei genügend Verständnis für Branding und Farbgebung die Wahrnehmung und Professionalität unterstützen.

Gute Lesbarkeit wird so zum messbaren Conversion-Faktor. Eine Website, die auch bei 200 % Zoom oder unter schwierigen Lichtverhältnissen lesbar bleibt, wirkt seriös und kundenorientiert. Ein Vorteil für alle, die bereit sind ihr Unternehmen aufs nächste Level zu bringen.

Schritt 5: Formulare & Kontaktflächen, wo aus Interesse ein Auftrag wird

Der wichtigste Moment auf vielen Websites passiert am Ende: die Kontaktaufnahme. Ob per Formular, Telefon oder WhatsApp-Link. Hier entscheidet sich, ob aus einer Website-Besucherin eine Kundin wird. Genau an dieser Stelle treten jedoch häufig Barrieren auf. Wir sprechen dabei von

• unbeschrifteten Formularfeldern
• kryptischen Fehlermeldungen
• winzige Buttons
• oder schlecht erreichbaren Telefonnummern.

Barrierefreie Formulare verwenden klare Labels, die auch bei leerem Feld sichtbar sind. Fehlermeldungen müssen dabei verständlich und nicht nur farblich gekennzeichnet sein. Buttons und Eingabefelder brauchen ausreichend große Klick- und Tippflächen, auch für Menschen mit eingeschränkter Feinmotorik, oder auf mobilen Geräten. Wichtig ist auch, dass nach einem Fehler der Fokus korrekt auf das betreffende Feld gesetzt wird.

 

Das Kontaktformular ist oft der Punkt, an dem es hakt. Wenn der Fokus nach einem Fehler verschwindet oder man nicht versteht, warum das Formular nicht abgesendet wird, springen viele einfach ab.

Gerade im B2C-Bereich, wo viele Anfragen über das Telefon kommen, lohnt sich ein Blick auf den Call-to-Action-Button: Ist der „Anrufen“-Button auf Mobilgeräten sofort sichtbar, gut erreichbar und groß genug? Diese scheinbar kleinen Details entscheiden im Alltag häufig über einen gewonnenen, oder verlorenen Lead.

Tipps für barrierefreie Websites

Tools & Plugins: Wichtige Helfer, aber keine Wunderwaffe

Unterschiedliche Programme und Tools helfen bei der Überprüfung einer Website. Mithilfe von Plugins, wie z. B. Accessibility-Checker oder Online-Kontrast-Tools werden Schwachstellen aufgedeckt, die für eine barrierefreie Website angepasst werden müssen.

 

Vorsichtig sollte man sein, wenn es Agenturen gibt, die sogenannte „All-in-One-Wunder“ versprechen. Gerade der rechtliche Druck zwingt Unternehmen heute dazu, WCAG-konform zu arbeiten, daher kommen wir an manuellen Tests und einer sauberen Web-Struktur in Deutschland nicht mehr vorbei. Allgemeine Marktübersichten zu WP-Accessibility-Plugins liefern Orientierung, ersetzen aber keine fachliche Abnahme.

Recht & Risiko: Was für Sie wichtig ist

Lange galt digitale Barrierefreiheit in vielen Branchen nur als Empfehlung, sinnvoll, aber oft nachrangig. Damit ist seit Sommer 2025 Schluss. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet der Gesetzgeber Unternehmen, ihre digitalen Dienstleistungen barrierefrei bereitzustellen. Besonders betroffen sind E-Commerce-Angebote und Online-Shops. Wer seine Produkte oder Services digital vertreibt, muss sicherstellen, dass Website und Online-Shop den geltenden Standards entsprechen.

 

Der entscheidende Stichtag ist der 28. Juni 2025. Ab diesem Zeitpunkt gelten die Regelungen des BFSG verbindlich. Für viele Anbieter bedeutet das: keine Übergangsfrist. Während große Konzerne bereits seit Jahren Accessibility-Teams beschäftigen, trifft diese Vorgabe kleinere Betriebe häufig unvorbereitet. Dabei ist der Aufwand überschaubar, wenn man frühzeitig ansetzt.

 

Für öffentliche Stellen gilt die Barrierefreiheit ohnehin schon länger: Sie müssen ihre Webangebote gemäß der Barrierefreie-Informationstechnik-Verordnung gestalten. Wer glaubt, dass das nur im DACH-Raum so ist, der irrt, denn hierfür gibt es sogar einen internationalen Standard, nämlich den WCAG 2.1 AA, der klare Strukturen, Tastaturbedienbarkeit, sinnvolle Alternativtexte und ausreichende Kontraste verlangt.

 

Private Unternehmen sind bislang nicht verpflichtet, diesen Standard einzuhalten, doch das BFSG rückt diese Anforderungen auch für sie in den Mittelpunkt. Wer sich an WCAG orientiert, schafft Rechtssicherheit und Qualität zugleich.

 

Eine Ausnahme sieht das Gesetz für Kleinstunternehmen vor: Betriebe mit weniger als zehn Mitarbeitenden und einem Jahresumsatz unter zwei Millionen Euro können unter bestimmten Bedingungen von der Pflicht ausgenommen sein. Allerdings gilt das nicht pauschal. Entscheidend ist, welche digitalen Dienstleistungen angeboten werden. Wer beispielsweise einen Online-Shop betreibt, der fällt in den meisten Fällen nicht unter diese Ausnahme. Hier gelten die Barrierefreiheitsregeln ohne Abstriche.

Gerade kleinere Betriebe sollten das Thema nicht auf die lange Bank schieben. Oft reichen ein paar strukturierte Maßnahmen, um die gesetzlichen Anforderungen zu erfüllen, aber das braucht etwas Vorlauf. Bei Unsicherheiten empfiehlt sich eine rechtliche Kurzprüfung über die Handwerkskammern, Industrie- und Handelskammern oder eine Fachkanzlei. So lassen sich Missverständnisse vermeiden und die notwendigen Schritte frühzeitig planen.

Die neue barrierefreie Website kann man sich auch fördern lassen!

Wer glaubt, dass er selbst auf den Kosten sitzen bleibt, der irrt. Zumindest in Deutschland gibt es zahlreiche Fördertöpfe, die Digitalisierungs- und Barrierefreiheitsprojekte unterstützen, je nach Bundesland und Unternehmensform:

• Über die Förderdatenbank des Bundes lassen sich sämtliche Programme darstellen, die dazu definiert wurden, Unternehmen in der Optimierung ihrer Webseiten zu fördern.
• Am Besten wissen dazu aber auch die Web-Agenturen Bescheid, die mit der professionellen Umsetzung Ihrer Webseite beauftragt werden. Hier lassen sich Kompetenzen bündeln. Hat man erstmal einen vertrauenswürdigen Dienstleister gefunden, kann man hier auf Expertise pochen.

Praxisempfehlung: Im Regelfall lohnt es sich, erst die fünf beschriebenen Schritte anzugehen, dann beantragen wir eine Förderung für die größeren Bausteine in der Webentwicklung: Komponenten-Bibliothek, Formulare, Shop-Templates.

30-Minuten-Selbsttest

Mit diesem Test können Sie die eigene Website auch ohne Spezialwissen selbst durchtesten:

1. Gehen Sie am Rechner auf Ihre Webseite und testen Sie dann mithilfe der Tab-Taste, ob Sie automatisch korrekt durch die Seite navigiert werden. Der Tabulator-Test überprüft: Komme ich ohne Maus überall hin? Fokus sichtbar?
2. Überprüfen Sie den Kontrast: Mithilfe der geeigneten Online-Tools und Contrast Checker lässt sich sowohl die Startseite, als auch die Leistungsseiten und Buttons sinnvoll überprüfen.
3. Schauen Sie auch nach Ihren Bildern: Im Quellcode oder in der Wordpress-Mediathek, im Backend erkennen Sie, ob wichtige Bilder bereits sinnvolle Alt-Texte haben, oder diese erst eingefügt werden müssen.
4. Checken Sie Ihre Formulare: Sind Labels vorhanden? Und wie verständlich sind die gelisteten  Fehlermeldungen?
5. Überprüfen Sie Ihre Startseite am Mobilgerät: Wie einfach ist es, den Anrufen-Button zu treffen? Lässt sich der Button leicht finden? Ist er prominent platziert?

Wenn hier Punkte schwächeln, dann haben Sie konkrete To-dos, um genau die angesprochenen Schritte anzugehen.

Vertrauen Sie einem Experten

Wenn diese Punkte nichts für Sie sind, dann lohnt sich der Kontakt mit einem Experten. Dieser schaut sich Ihre Webseite mit geeigneten Tools an und erklärt Ihnen nach einem Schnell-Audit die aktuell offenen Prioritäten Ihrer Web-Präsenz.

 

Sobald man sich dann auf die beschriebenen Schritte gestürzt hat, sind wir in der Lage, uns dem nächsten Thema zu widmen. Eine Webseite besteht auch aus Komponenten, die unter Umständen ebenso optimiert werden müssen. Dazu zählen Navigation, etwaige Buttons, Akkordeons, Shop-Templates, usw. Eine professionelle Agentur würde hier noch zusätzlich beratend tätig werden und Ihnen alle Informationen mithilfe einer Kurz-Doku zukommen lassen, um im Anschluss zu verstehen, wie die Seite in Eigenregie weitergepflegt werden kann.

 

Dabei lohnt sich eine halbjährliche Wartung, um neue CMS-Updates zu installieren und die Seite auf dem aktuellsten Stand zu halten. Das Ziel ist, dass Sie messbar weniger Absprünge und mehr Anfragen haben und gleichzeitig auf der rechtlich sicheren Seite stehen.

Typische Stolperfallen und schnelle Gegenmittel

• Deko-Bilder ohne Alt-Regel: Definieren Sie teamintern, wann Alt leer ist und wann beschreibend.
• Platzhalter statt Labels: Immer sichtbare Labels verwenden.
• Mehrere H1 pro Seite: Auf eine H1 begrenzen.
• Kontrast-„Designs“: Kontrastwerte gegen WCAG prüfen;
  Buttons erhalten klaren Hover/Fokus.
• Plugin-Chaos? Dann Plugins konsolidieren, Fokus und ARIA-Rollen nachziehen, aber Achtung: Bevor man ARIA-Rollen einsetzt, sollte man prüfen, ob sich das Problem nicht schon mit sauberem, semantischem HTML lösen lässt.

Fazit: Mit Barrierefreiheit der Konkurrenz voraus sein

Neben der gesetzlichen Pflicht bietet Barrierefreiheit handfeste Vorteile: Bessere Usability, mehr Leads, besseres SEO durch saubere Semantik und eine klare Struktur. Das alleine sind bereits Vorteile, die unabhängig von der rechtlichen Komponente ein positives Erlebnis beim Dienstleister auslösen sollten. Manchmal kann es sich lohnen, mit dem Wechsel auf Barrierefreiheit die komplette Webseite zu überarbeiten, aber ist die Seite ansonsten fehlerfrei, so lässt sich die Optimierung der Barrierefreiheit selbst in 1-2 Wochen Arbeit herstellen.

 

Mehr Sichtbarkeit im Netz ist gerade in Zeiten künstlicher Intelligenz ein Muss, denn immer mehr und mehr Menschen versuchen sich auch auf generativer KI zu behaupten. Erst wenn Algorithmen und Suchmaschinen in der Lage dazu sind, die eigene Webseite korrekt auszulesen, steigt auch die Wahrscheinlichkeit, bei KI-Tools empfohlen zu werden. Für die meisten Unternehmen entscheiden oft Sichtbarkeit und Erreichbarkeit. Wenn Kundinnen und Kunden Sie ohne Hürden anrufen oder ein Formular absenden können, steigt die Conversion spürbar.

Über den Autor

Max Prügner arbeitet seit seiner Jugend im Webdesign-Bereich. Seit 2019 ist er komplett selbstständig und betreut aus Sachsen vor allem kleine und mittelständische Unternehmen dabei, Websites nutzerfreundlich und rechtssicher aufzubauen. Dabei kombiniert Prügner WordPress-Praxis mit Zugänglichkeits-Know-how und teilt sein Wissen über verschiedene Kanäle (u. a. Website/YouTube). Für Handwerksbetriebe ist sein Ansatz bewusst pragmatisch: „Erst die Quick Wins, dann die große Lösung“.