Die DSGVO ist in unserem digitalen Alltag angekommen, und nun steht die nächste Herausforderung bevor: das Barrierefreiheitstärkungsgesetz (BFSG). Ab dem 28. Juni 2025 wird Barrierefreiheit für viele Websites in Deutschland zur Pflicht. Während große Unternehmen und öffentliche Stellen bereits Erfahrungen gesammelt haben, stehen kleine und mittlere Unternehmen (KMUs) oft vor der Frage: Was bedeutet das für meine Website? In diesem Artikel sammle ich die wichtigsten Informationen und gebe praktische Tipps zur Umsetzung, damit du eine Starthilfe für dieses Thema bekommst.
Warum ist Barrierefreiheit wichtig?
Barrierefreiheit ist mehr als nur eine gesetzliche Vorgabe. Sie ist ein Zeichen von Inklusion und sozialer Verantwortung. Eine barrierefreie Website ermöglicht allen Menschen, unabhängig von ihren Fähigkeiten, Zugang zu Informationen und Dienstleistungen. Zudem verbessert sie die Nutzerfreundlichkeit für alle Besucher. Das kann ein Wettbewerbsvorteil für dich sein und auch dein Ranking bei Google verbessern. Win-win sozusagen.
Für welche Websites gilt das BFSG?
Das BFSG betrifft Websites und Apps, die Dienstleistungen für Verbraucher anbieten. Dazu gehören insbesondere:
- Online-Shops
- Websites mit Kontaktformularen
- Websites mit Online-Terminbuchung
- Websites von Banken und Versicherungen
- E-Learning-Plattformen
Welche Ausnahmen gibt es?
- Kleinstunternehmen (weniger als 10 Mitarbeiter und weniger als 2 Millionen Euro Jahresumsatz)
- Rein geschäftliche (B2B) Angebote
- Webseiten von Privatpersonen
Es wird jedoch empfohlen, einen Rechtsbeistand zu befragen, bevor man sich entschließt, die Vorgaben zur Barrierefreiheit nicht umzusetzen.
AA oder AAA? Welchen Grad des BFSG muss ich umsetzen?
Es gibt zwei Konformitätsstufen. AA (Standard) und AAA (Sonder-Stufe). Die Stufe AAA stellt sehr hohe Anforderungen dar, ist sehr schwer umsetzbar und nur in Ausnahmefällen verpflichtend, z. B. bei Websites mit sehr sensiblen Inhalten (z. B. im medizinischen Bereich oder bei staatlichen Informationsangeboten für Bürger mit besonderen Bedürfnissen). Deshalb konzentrieren wir uns hier auf die AA Stufe.
Wie kann ich testen, welche Barrieren meine Website hat ?
Du kannst z.B. diesen Barrierefreiheit-Checker nutzen: https://www.accessibilitychecker.org/
Oder das Web Accessibility Evaluation Tool von WebAIM: https://wave.webaim.org/
Was muss ich als Erstes umsetzen?
Ich gehe hier nicht auf alles ein. Wenn du die vollständige Liste der Vorgaben durchgehen möchtest, dann besuche bitte eine der unten genannten Quellen
Wichtigste Vorgaben für Websites laut WCAG (Web Content Accessibility Guidelines)
Skip to Content Link, Link-Focus ohne Maus und Screen Reader assistierende Vorgaben
Den Skip-to-Content Link sollte dein Theme schon eingebaut haben. Den nutzen Screen-Reader bereits seit vielen Jahren, um direkt – über den Header-Bereich hinweg – zum relevanten Inhalt weiter unten auf der Website zu springen.
Tastaturbedienung: Wenn du mit der Tab-Taste deines Keyboards die Navigations-Elemente, Links und Formulare anspringen kannst, dann ist dieser Punkt erfüllt. Wenn nicht, musst du vermutlich dein Theme ändern.
Hier finden sich einige Vorgaben für die HTML-Strutktur, die die meisten Themes aber einhalten.
Stelle sicher, dass Links einen Text über Zweck und Ziel enthalten (das kommt übrigens allen Nutzern zugute)
Es ist z. B. ein Problem, wenn du einen Link auf ein Bild legst. Dann muss ein Title-Tag mit Text zum Ziel/Zweck des Links hinterlegt sein.
Auch Buttons oder Links mit Text wie „hier klicken“ oder „mehr lesen“, solltest du ändern. Besser sind Linktexte wie „zur Datenschutzerklärung“ oder „Lesen Sie den vollständigen Artikel zum Klimawandel“.
Hier stoßen wir aber auf das Problem, dass in einem Blog, der „read more“-Link nicht dynamisch an den Inhalt des Titels angepasst werden kann, ohne WordPress bzw. das verantwortliche Plugin umzuprogrammieren. Dafür habe ich noch keine Lösung gefunden.
Alternativtexte für Bilder (das bringt dich auch im Ranking nach vorn)
Alle Bilder in deiner WordPress-Mediathek haben mehrere Meta-Felder, die du füllen kannst. Hier geht es um das Meta-Tag „alt“ für Alternativtext. Der Text, der hier hinterlegt wird ist auf der Website nicht sichtbar. Aber für Screenreader und Bots lesbar.
Du solltest in das Alternativtextfeld eintragen, was auf dem Bild zu sehen ist. Google bestraft es schon lange beim Ranking, wenn Alternativtexte bei Bildern fehlen. Wenn du es jetzt auch noch schaffst, bei der Beschreibung ein wichtiges Keyword für deine Webseite zu verwenden, hilft dir das zusätzlich. Eine Hilfestellung zu Alternativ-Texten findest du hier: https://www.w3.org/WAI/tutorials/images/decision-tree/de
Sorge für ausreichenden Kontrast zwischen Vorder- und Hintergrundfarben
Ja, jetzt musst du dein schönes Design ändern. Es geht um das Kontrast-Verhältnis von Text zu Hintergrund in Grafiken, in Fließtexten, Überschriften, Buttons, … weißer Text auf türkisem Button geht z. B. nicht :-( .
Eventuell kann hier auch das WP Accessibility Tool (ein WordPress-Plugin) zur Rettung deines Webdesigns beitragen. Das Plugin bietet dem Website-Besucher per Knopfdruck unter anderem an, den Kontrast zu erhöhen, Links zu unterstreichen, die Schrift zu vergrößern.
Achte auf einfache Sprache
Eine der Hauptvoraussetzungen dafür, dass deine Website-Besucher auf deiner Website machen, was du möchtest, ist, dass sie verstehen, was du von ihnen willst. Klarheit ist alles! Und das gilt nicht nur für Menschen mit kognitiver Beeinträchtigung, sondern fast alle. Denn die Aufmerksamkeitsspanne in digitalen Medien ist sehr kurz. Das haben diverse Studien bewiesen.
Verzichte also auf Fachbegriffe, wenn du stattdessen ein Wort aus der Umgangssprache verwenden kannst. Und schreibe keine langen, verschachtelten Sätze. Formuliere deine Inhalte so klar es geht, damit deine Leser dich sofort verstehen.
Mehr zum Thema einfache Sprache findest du hier: https://gehirngerecht.digital/einfache-sprache/
Was ist mit den Vorgaben, die ich nicht ändern kann, weil sie durch ein Plugin oder Theme verursacht werden? Ich kann doch keine Plugins umprogrammieren.
Es gibt einige Plugins und Themes, die Vorgaben des WCAG nicht umsetzen. Es können etwa falsche ARIA-Elemente verwendet oder Links gesetzt werden, deren Text du nicht anpassen kannst.
Trotzdem liegt die Verantwortung, dass deine Website barrierefrei ist, bei dir. Wenn du keinen alternativen Anbieter findest, der es dir ermöglicht, deine Inhalte barrierefrei anzuzeigen, müsstest du in deiner Erklärung zur Barrierefreiheit (siehe unten) auf das Problem hinweisen und einen Link zur Website des Anbieters setzen.
Dann könntest du einen alternativen, barrierefreien Inhalt mit dieser Information anbieten. Wenn du z.B. eine Blog-Archiv-Seite oder Portfolio-Seite hast, auf der immer das Beitragsbild mit dem Blogpost verknüpft ist, könntest du alternativ eine Seite anbieten, auf der alle Beitragstitel mit Link zum Post untereinander stehen.
Erklärung zur Barrierefreiheit
Neben der Pflicht zur Bereithaltung eines Impressums und einer Datenschutzerklärung, benötigst du jetzt auch eine Erklärung zur Barrierefreiheit.
Dort soll in einfacher Sprache veranschaulicht werden, welche Maßnahmen zur Barrierefreiheit umgesetzt wurden, aber auch welche noch fehlen. Und es soll eine Kontakt-Möglichkeit genannt werden, falls jemand eine Barriere melden möchte. Alle Vorgaben für die Erklärung findest du hier: www.barrierefreiheit-dienstekonsolidierung.bund.de
Einen Muster-Text-Generator findest du z. B. hier: https://www.e-recht24.de/barrierefreiheitserklaerung.html (Muster für öffentliche Stellen)
oder hier: www.siteimprove.com/de/toolkit/accessibility-statement-generator
Die Website des Landes Schleswig-Holstein stellt diese Mustererklärung für öffentliche Stellen bereit:
Zusätzliche Tipps:
- Informiere dich regelmäßig über aktuelle Entwicklungen im Bereich Barrierefreiheit.
- Nutze ein WordPress-Plugin wie WP Accessibility oder Accessibility Suite.
- Auch deine Social Media Posts, Newsletter und PDFs sollten barrierefrei sein.
Barrierefreie PDF-Dokumente erstellen: https://helpx.adobe.com/de/acrobat/using/creating-accessible-pdfs.html - Zieh bei Bedarf Experten für Barrierefreiheit hinzu.
Beispiel für eine barrierefreie Website ohne Design Kompromisse
Dieses Beispiel wird von WebAIM.com als Beweis genannt, dass eine Website barrierefrei sein kann, OHNE auf beeindruckendes Design und Animationen zu verzichten.
Fazit
Die Umsetzung von Barrierefreiheit ist eine Investition in die Zukunft. Indem du deine Website zugänglich gestaltest, erreichst du ein breiteres Publikum und erfüllst deine soziale Verantwortung.
Bitte beteilige dich an der Weiterentwicklung dieses Artikels. Schreibe deine Anmerkungen, Ergänzungen oder ob dir das hier weitergeholfen hat in die Kommentare.
Quellen
- Bundesfachstelle Barrierefreiheit: https://www.bundesfachstelle-barrierefreiheit.de/
- WebAIM: https://webaim.org/
- Pflichten für barrierefreie Websites: https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website/gesetzliche-pflichten
- Anforderungen an die Barrierefreiheitserklärung: https://www.barrierefreiheit-dienstekonsolidierung.bund.de
- Tolle Inhalte zum Thema und Barrierefreiheit Prüfungen: https://gehirngerecht.digital
