Du willst sichergehen, dass deine Website wirklich für alle zugänglich ist? Diese Checkliste für eine barrierefreie Website unterstützt dich dabei, digitale Hürden zu erkennen und nach und nach abzubauen. So gestaltest du deine Seite inklusiver und machst sie für alle Nutzerinnen und Nutzer angenehm erlebbar.
Barrierefreiheitsstärkungsgesetz 2025
Das Barrierefreiheitsstärkungsgesetzt 2025 hat viele Webseitenbetreiber in Panik versetzt. Es hinterlässt gerade bei Gründer*innen und Soloselbstständigen einiges an Unsicherheit. Denn eine Website, die bisher nicht barrierefrei angelegt war, nun den Richtlinien entsprechend anzupassen, kann eine Menge Arbeit sein und vielen ist auch gar nicht klar, was barrierefrei überhaupt bedeutet.
Das neue Gesetz basiert auf der EU-Richtlinie 2016/2102 und ist ein wichtiger Meilenstein in der digitalen Barrierefreiheit. Es verpflichtet vor allem Unternehmen, Onlineshops und öffentliche Stellen, ihre digitalen Angebote für alle zugänglich zu machen. Ab dem 28. Juni 2025 müssen zusätzlich zu öffentlichen Einrichtungen auch Unternehmen mit bestimmten Dienstleistungen oder Produkten diesen europaweit einheitlichen Standards folgen.
Du bist allerdings nicht vom neuen Gesetz betroffen, wenn du
- einen Jahresumsatz von höchstens 2 Millionen Euro oder eine Bilanzsumme von höchstens 2 Millionen Euro erwirtschaftest und
- weniger als 10 Personen beschäftigst.
Damit fallen eine Menge Gründer*innen und Soloselbstständige schon mal raus. Ich zum Beispiel. Trotzdem liegt mir Inklusion sehr am Herzen und ich möchte dir zeigen, wie du deine Website Schritt für Schritt barrierefrei gestalten kannst. Selbst wenn du nicht gesetzlich dazu verpflichtet bist.
Wann ist eine Website barrierefrei?
In den Richtlinien für barrierefreie Webinhalte (WCAG) findet man Empfehlungen, wie man seine Website für eine große Gruppe von Menschen mit Behinderungen barrierefrei gestalten kann.
Wahrnehmbarkeit
Alle Bestandteile deiner Website und die darauf zu findenden Informationen sollen so bereitgestellt werden, dass alle Besucher sie wahrnehmen können. Dazu gehören z.B. ALT-Texte, Untertitel für Audio- und Videoinhalte, aber auch lesbare Schriftarten, hohe Kontraste zwischen Vorder- und Hintergrund und die manuelle Anpassbarkeit durch den Nutzer.
Bedienbarkeit
Deine Website sollte nicht nur per Maus bedienbar sein. Auch die Steuerung aller Elemente, Schaltflächen und Formulare über die Tastatur muss gegeben sein. Für interaktive Elemente muss genügend Zeit für die Interaktion vorhanden sein.
Verständlichkeit
Deine Website sollte für Besucher leicht verständlich sein. Das gilt nicht nur für Texte und deren Inhalt, sondern auch für den logischen Aufbau einer Seite und ihrer Struktur. Formularfelder sollten zudem klare Beschriftungen und Eingabehilfen haben.
Robustheit
Deine Seite darf nicht nur für eine Bildschirmgröße und ein System gebaut sein. Die Möglichkeit, die Seite auf allen Geräten und Browsern zu nutzen, spielt dabei ebenso eine Rolle wie die Lesbarkeit für technische Hilfsmittel, wie z.B. Screenreader.
Vorteile einer barrierefreien Website
Egal ob du deine Website gerade neu aufbaust, einen Re-Launch oder nur einige barrierefreie Änderungen planst: rechtliche Konsequenzen zu vermeiden, ist nicht der einzige Anreiz, deine Website barrierefrei zu gestalten. Als junger Mensch ohne Behinderung geht man ganz schön privilegiert durch die Welt. Nichts ist unlesbar, zu schwierig zu bedienen oder so frustrierend, dass man es einfach lässt. Und wenn doch? Na dann geht man zur Konkurrenz. Mit deiner Website ist es genau so.
Eine Seite zu haben, die
- eine logische Navigation hat,
- Buttons und Handlungsaufforderungen, die man sehen und lesen kann,
- eine Struktur, die klar macht wo man sich befindet,
hilft nicht nur Besuchern mit Einschränkungen, sondern ist für jeden Besucher wertvoll.
Damit sicherst du dir eine Reihe von entscheidenden Vorteilen:
- Vergrößerte Zielgruppe: Je mehr Menschen deine Website bedienen können, desto mehr Menschen können sich für dein Angebot entscheiden. Eigentlich logisch, oder?
- Positive Ranking-Auswirkungen: Auch Google & Co. mögen es, wenn Websites auf allen Geräten funktionieren, logisch aufgebaut sind und man auf den ersten Blick erkennt, worum es geht. Dafür belohnen sie dich mit besseren Platzierungen in den Suchmaschinenergebnissen.
- Gesellschaftliche Verantwortung: Findest du nicht auch, dass es sich gut anfühlt, wenn wirklich jeder deine Website besuchen und etwas damit anfangen kann? Es ist einfach ein tolles Gefühl, niemanden auszuschließen.
Was gehört zu einer barrierefreien Website?
Wenn du dir die WCAGs schon angeschaut hast, hast du vermutlich gesehen, dass zu einer barrierefreien Website so einiges dazu gehört. Einiges ist “ganz einfach”, anderes erfordert eine Menge technisches Verständnis.
Diese Checkliste ist aber ja nicht dazu da, dich zu erschlagen und zu entmutigen. Wenn du den Beitrag schließt und dir denkst “Das ist mir zu viel Aufwand”, habe ich meinen Job nicht gut gemacht. Deswegen findest du hier eine Übersicht über Maßnahmen, die du auch ohne technisches Tiefenwissen umsetzen, ändern oder direkt von Beginn an in deine Website einbringen kannst.
Von daher ist es aber auch keine vollständige Liste aller Maßnahmen, die erforderlich wären, um dem Barrierefreiheitsgesetz zu entsprechen. Das hier ist keine Rechtsberatung, sondern eine Hilfestellung für Gründer*innen und Soloselbstständige, die freiwillig dazu beitragen wollen, die Welt ein wenig inklusiver zu gestalten.
Wenn du alle Punkte gelesen hast, wirst du auch feststellen, dass nicht alle Teile meiner Website bereits diesen Anforderungen genügen. Wie gesagt, es ist viel Arbeit und leider hatte ich bei der Erstellung meiner eigenen Seite damals nicht mal die Hälfte meines jetzigen Wissens. Aber ich arbeite daran, Stück für Stück, und jeden Tag wird es ein bisschen besser. Vielleicht kannst du das auch in deinen Arbeitsalltag integrieren.
Kontrast zwischen Vorder- und Hintergrundfarbe
Viele Farbkombinationen haben einen geringen Kontrast. Das Gelb meiner Unternehmensfarben funktioniert z.B. nicht in Kombination mit Weiß. Für mich als Designerin ist das sicherlich eine der schwierigsten Änderungen. Denn “hübsch” ist nicht automatisch “barrierefrei”.
Aber die Anzahl der Farbwahrnehmungseinschränkungen ist ziemlich groß. Am bekanntesten ist sicherlich die sogenannte Rot-Grün-Schwäche. Fast jeder kennt jemanden, der davon betroffen ist. Nur etwa 68% der Menschen können die Primärfarben in (fast) allen ihren Schattierungen erkennen und unterscheiden. 32% der Besucher, die ggf. nicht in der Lage sind, den “Kaufen” Button zu erkennen, sind eine ganze Menge.
Das heißt nicht, dass du deine Unternehmensfarben jetzt in den Müll werfen musst. Es reicht vielleicht schon, einige dunklere oder hellere Schattierungen hinzuzufügen. Im Internet finden sich eine Vielzahl an Kontrast Checkern wie Who can use, die dir helfen, Farben mit dem nötigen Kontrast auszuwählen, bzw. den Kontrast deiner bestehenden Farben zu überprüfen.
Die WCAGs schreiben einen Kontrast von 4,5:1 (3:1 bei großem Text) für eine AA-Bewertung und 7:1 (4,5:1 bei großem Text) für eine AAA-Bewertung vor.
Übrigens: Hohe Kontraste helfen nicht nur deinen Websitebesuchern mit Einschränkungen, sondern auch jedem, der versucht, deine Website auf dem Handy in direktem Sonnenlicht zu nutzen.
Lesbarkeit von Texten und Überschriften
Du hast sicher auch schon mal eine Seite besucht, die du zwar insgesamt stimmig gestaltet fandest – vielleicht elegant oder verspielt – aber bei den Überschriften und Menüpunkten musstest du genauer hinschauen, bis du sie lesen konntest. Jetzt stell dir vor, wie es Menschen mit Einschränkungen geht. Wenn man für deine Überschrift die Augen zusammenkneifen und eine Minute draufstarren muss, dann ist die Schriftart nicht für eine Website geeignet. Eigentlich für keine Website, aber für eine barrierefreie auf keinen Fall.
Als Designerin verstehe ich natürlich den Wunsch, den Charakter des Unternehmens durch die Schriftwahl zu repräsentieren. Du tust aber weder dir noch dem Websitebesucher einen Gefallen, wenn Inhalte schwer zu erfassen sind. Dafür sind die Aufmerksamkeitsspannen einfach zu kurz geworden.
Die ultimative barrierefreie Schriftart gibt es nicht. Es gibt aber einige Kriterien, an denen du dich orientieren kannst:
- Nutze serifenlose Schriften, bei denen man z.B. “I” und “l” und “O” und “0” gut unterscheiden kann
- Bei Serifenschriftarten solltest du darauf achten, dass sich die Serifen nicht berühren.
- Abstände zwischen einzelnen Buchstaben und Wörtern, aber auch zwischen den Zeilen sollten so gewählt sein, dass die Buchstaben nicht ineinander verschwimmen.
Raleway, Nunito Sans und Roboto Slab wären zum Beispiel Google Fonts, die diese Kriterien erfüllen.
Versuch außerdem, mit Hervorhebungen sparsam umzugehen. Egal ob fett, kursiv oder komplett in Großbuchstaben – all das stört den Lesefluss bei übermäßigem Einsatz. Gleichzeitig ermöglicht gezielter Einsatz von fett hervorgehobenen Wörtern den sogenannten “zweiten Leseweg”, also die Möglichkeit, einen Text anhand der Hervorhebungen zu überfliegen und sich einen ersten Eindruck vom Inhalt zu verschaffen.
Auf unruhige Hintergründe und Hintergrundbilder hinter Fließtext solltest du generell verzichten. Hier spielt sowohl der fehlende Kontrast als auch die Gefahr, dass Schrift und Hintergrund verschwimmen, eine Rolle. Achte bei Überschriften auf Hintergründen – z.B. für Website-Header – darauf, dass der Text sich auf einem ruhigen, fast einfarbigen Teil des Bildes befindet. Das muss auch auf anderen Bildschirmgrößen und Geräten der Fall sein.
Bedienbarkeit der gesamten Seite über die Tastatur
Ich weiß, ich weiß. Als die technische Möglichkeit auf den Markt kam und später der breiten Masse zu Verfügung stand, waren Maus-Hover-Effekte der heiße Sche*ß. Die Technik, ein Objekt auf einer Website, z.B. ein Menü, nur mit der Maus zu berühren, ohne tatsächlich zu klicken und damit neue Inhalte sichtbar zu machen, wurde gerne und viel eingesetzt. Sieht – richtig eingesetzt – ja auch super aus.
Gleichzeitig verhindert es aber leider, dass deine Website nur mit Tastatur bedient werden kann. Achte darauf, dass man alle Menüs, Buttons und Formulare auch per Tastatur ansteuern kann. Außerdem sollte das gerade angewählte Objekt optisch hervorgehoben werden. Meist passiert das automatisch mit einem Kasten oder einen Signalfarbe, aber mit dem nötigen technischen Hintergrundwissen kannst du die Veränderung per CSS selbst einstellen.
Teste deine Seite am besten selbst auf Tastaturbedienbarkeit.
- TAB um durch die verschiedenen klickbaren Inhalte zu springen
- TAB + SHIFT um rückwärts durch klickbare Inhalte zu springen
- Pfeile HOCH und RUNTER, um die Seite zu scrollen
- LEERZEICHEN, um Kontrollkästchen, z.B. in einem Kontaktformular, auszuwählen
- ENTER, um ein Element anzuklicken
Screenreader-Kompatibilität der Website
Um blinden Menschen oder Menschen mit Sehbehinderung den Zugang zu deiner Website zu ermöglichen, sollte die Seite so aufgebaut sein, dass ein Screenreader (Vorleseanwendung) Menüs, Texte, Buttons und alternative Texte für Bilder und Grafiken vorlesen kann. Dafür ist es wichtig, dass deine Struktur logisch aufgebaut ist und Überschriften von H1-H6 korrekt ausgezeichnet sind. Eine Seite sollte üblicherweise nur eine H1 Überschrift haben. Das ist der Titel der Seite, also ihr Thema. H2 sind die Abschnitte der Seite, H3 Unterpunkte zu den jeweiligen Abschnitten, und so weiter.
Wenn ein Bild zum Inhalt des Textes beiträgt und wichtige Informationen vermittelt, musst du es mit einem ALT-Text beschreiben. Dabei sollten die gleichen Informationen vermittelt werden, die auch ein sehender Mensch aus diesem Bild ziehen würde. Bei rein dekorativen Elementen kannst du die ALT-Beschreibung leer lassen, damit sie vom Screenreader übersprungen wird. Die Screenreader-Kompatibilität deiner Seite kannst du einfach online testen lassen.
Übrigens: Logische Seitenstrukturen und ALT-Texte für Bilder sind ein Ranking-Faktor für Suchmaschinen.
Wie formuliert man aussagekräftige Alt-Texte?
Sehnende Menschen, wie ich auch, tun sich oft schwer mit der Formulierung von ALT-Texten. Man möchte kurz und knapp beschreiben, was auf dem Bild zu sehen ist. Im Idealfall noch ein Keyword unterbringen. Doch ein ALT-Text sollte die Information des Bildes wiedergeben. Du kannst dir das etwa so vorstellen, als würdest du einem anderen (sehenden) Menschen das Bild beschreiben, damit er eine Zeichnung davon machen kann.
❌ Frau auf Bank
✅ Eine ältere Frau mit grauen Haaren sitzt lachend auf einer Parkbank und liest ein Buch
Untertitel für Audio- und Videoinhalte
Etwas aufwändiger als alles bisherige sind die Untertitel für deine Audio- und Videoinhalte. Wenn du Videos – besonders Infovideos – jetzt neu erstellst, achte sofort darauf, dass das Video untertitelt ist. Du hast den Text für den Sprecher ja irgendwo ausgeschrieben und kannst ihn direkt auch für die Untertitel nutzen. Bei älteren Videos kann es allerdings ganz schön aufwändig werden, nachträglich Untertitel hinzuzufügen.
Eine barrierearme Möglichkeit wäre, ein Transkript der Videos bereitzustellen. Das kann auch für Nutzer interessant sein, die einfach keine Zeit haben, sich ein Video anzuschauen oder sich in einer lauten Umgebung befinden. Für Videos und Podcastfolgen gibt es mittlerweile die Möglichkeit, sich das Transkript von einer KI erstellen zu lassen. Ich weiß, dass Kolleginnen von mir mit descript arbeiten, habe aber selber noch keine Erfahrungen damit (weil ich weder Video- noch Audioinhalte habe).
Videoplattformen wie Youtube bieten auch automatische Untertitel an, wenn du sie zulässt. Denk aber daran, dass diese sehr fehleranfällig sind und deine Botschaft vielleicht nicht ideal rüberbringen. Dadurch kann man sie nicht als barrierefrei bezeichnen.
Responsive Design
Da die Darstellbarkeit einer Website auf verschiedenen Endgeräten, wie Desktop-PCs, Tablets und Handys, ja schon lange zu den wichtigsten Rankingfaktoren für Suchmaschinen zählt, wirst du das vermutlich eh auf dem Schirm haben und entsprechend planen. Auch für die Barrierefreiheit deiner Website spielt das eine große Rolle. Achte deshalb darauf, dass deine Seite nicht nur auf allen Geräten gut aussieht, sondern auch bedienbar ist. Dazu sollten z.B. Schaltflächen in der mobilen Version immer noch groß genug sein, dass auch Besucher mit Feinmotorikstörungen sie problemlos anklicken können.
Worauf du achten solltest:
- Gestalte deine anklickbaren Elemente mindestens 48×48 px groß und mit ausreichend Abstand zueinander.
- Übernimm die klare Struktur des Menüs der Desktopseite und setze so wenig Verschachtelungen wie möglich ein.
- Deaktiviere die Möglichkeit, die Seite manuell zu zoomen, nicht per CSS oder Meta-Tag.
- Überprüfe, ob Überschriften auf Hintergrundbildern auch mobil gut lesbar sind.
- Vermeide Animationen und Bewegungen. Das gilt übrigens allgemein, da sie mehr Datenvolumen brauchen und mobil vielleicht nicht richtig laden.
Unterstützung durch ein Barrierefreiheits-Plugin
Auch wenn die Bewertungen sehr gemischt sind, habe ich gute Erfahrungen mit dem Barrierefreiheits-Plugins von Elementor – Ally – gemacht. Du siehst die Schaltfläche am linken unteren Bildrand. Darüber lassen sich Schriftgröße und Zeilenabstand manuell einstellen, der Kontrast erhöhen und zusätzliche visuelle Unterstützungen einrichten. Wenn du ebenfalls eine Elementor-Seite hast und aktuell weniger als 10.000 Besucher pro Monat erwartest, kannst du das Plugin kostenlos nutzen.
Checkliste: Ist deine Website schon barrierefrei?
Fazit
Eine Website nachträglich barrierefrei umzubauen, kann ganz schön aufwändig werden. Wenn du mit deiner Website gerade noch am Anfang stehst oder eine Neugestaltung planst, macht es auf jeden Fall Sinn, Barrierefreiheit direkt im Hinterkopf zu haben. Das gilt auch dann, wenn du gesetzlich nicht dazu verpflichtet wärst, deine Website barrierefrei zu gestalten. Doch auch eine bereits fertige Website kann mit kleinen Anpassungen nach und nach an die Kriterien angeglichen werden. Hör dabei auch unbedingt auf das Feedback deiner Besucher.
Für deine Mühen wirst du nicht nur mit dem guten Gefühl belohnt, die digitale Welt ein wenig inklusiver zu gestalten. Auch Suchmaschinen und Nutzer ohne Einschränkungen mögen übersichtliche, strukturierte Websites mit gut lesbaren Inhalten.
Fehlt dir ein Punkt auf der Liste? Dann schreib’s mir gern. Ich ergänze gern deine Hinweise.
Praktische Checkliste zur Website-Vorbereitung
Sammele alle Informationen zu deiner Website an einem Ort: Rechtliche Texte, Domains und Emailadressen, Farben und Schriften, To-Dos für die Barrierefreiheit deiner Seite. Alles gesammelt in einem Google Dokument.
