Barrierefreie Webseiten: So klappt's
Die digitale Welt sollte jedem offenstehen – genau das bezweckt das Barrierefreiheitsstärkungsgesetz (BFSG), das seit Juli 2021 in Deutschland gilt. Dabei wurde der European Accessibility Act (EAA) in deutsches Recht umgesetzt. Ab dem 28. Juni 2025 müssen viele Produkte und Dienstleistungen verbindliche Barrierefreiheitsanforderungen erfüllen. Dazu gehören auch Webseiten.
Doch was heißt das konkret und wie können Unternehmen ihre Inhalte barrierefrei gestalten?
Was bedeutet „barrierefreie Webseite“?
Barrierefreie Websites sind so gestaltet, dass sie von allen Menschen genutzt werden können, unabhängig von ihren körperlichen oder technischen Einschränkungen. Dies umfasst unter anderem:
- Technische Barrierefreiheit: Inhalte müssen kompatibel mit Screenreadern und anderen assistiven Technologien sein.
- Körperliche Barrierefreiheit: Alle Funktionen müssen über Tastatur oder Spracheingabe nutzbar sein.
- Inhaltliche Barrierefreiheit: Texte sollten klar und leicht verständlich formuliert sein.
Warum sind barrierefreie Webseiten wichtig?
- Bessere Benutzerfreundlichkeit
Klare Strukturen und gute Lesbarkeit kommen allen Nutzern zugute. - Stärkeres Markenimage
Unternehmen, die auf Inklusion setzen, demonstrieren soziales Engagement und gewinnen Vertrauen. - Erhöhte Reichweite
Etwa 20 % der Weltbevölkerung sind auf barrierefreie Inhalte angewiesen. Unternehmen, die Barrierefreiheit ernst nehmen, erreichen eine breitere Zielgruppe und erschließen sich damit neue Märkte. - Höhere Umsätze
Ein größerer Kundenkreis und eine verbesserte Kundenbindung wirken sich über kurz oder lang positiv auf Ihre Umsätze aus. - Bessere Sichtbarkeit in Suchmaschinen
Barrierefreie Inhalte sind nicht nur für Menschen mit Einschränkungen leichter zugänglich, sondern auch für Suchmaschinen. Klare Strukturen, semantisches HTML und aussagekräftige Alt-Texte für Bilder verbessern die Indexierung und können die Sichtbarkeit Ihrer Webseite erhöhen. - Rechtliche Anforderungen
Mit dem BFSG wird digitale Barrierefreiheit ab 2025 für viele Unternehmen zur Pflicht. Websites sind ein wichtiger Bestandteil dieser Regelung. Wenn die Vorschriften nicht eingehalten werden, können die Marktüberwachungsbehörden Maßnahmen ergreifen, die von Einschränkungen bis hin zum vollständigen Verbot der Bereitstellung von Produkten oder Dienstleistungen reichen. Auch die Rücknahme oder der Rückruf von Produkten ist möglich. Diese Regelungen betreffen nicht nur Hersteller, sondern ebenso Händler und Importeure.
Marktüberwachungsbehörden können eigenständig tätig werden, oder auf Hinweise von Verbrauchern und Verbänden hin eingreifen.
Die unsichtbare Zielgruppe: Screenreader-Nutzer
Barrierefreie Inhalte sollten auch für Screenreader-Nutzer optimiert sein. Screenreader-Apps lesen Bildschirminhalte für Menschen mit Sehbeeinträchtigungen vor – und sie sind weiter verbreitet, als man denkt. Auf den meisten Smartphones sind sie bereits vorinstalliert und lassen sich über die Bedienungshilfen aktivieren. Dort können Nutzer auch Schriftgrößen anpassen, den Mauszeiger vergrößern oder Farbkorrekturen vornehmen.
Wer muss barrierefreie Onlinepräsenz umsetzen?
Nicht alle Unternehmen sind gesetzlich verpflichtet, ihren Webauftritt barrierefrei zu gestalten. Diese Anforderung betrifft jedoch bestimmte Produkte und Dienstleistungen, die nach dem 28.06.2025 in den Verkehr gebracht bzw. erbracht werden. Dazu gehören:
Geräte
- Smartphones und Tablets
- Fernsehgeräte für digitale Fernsehdienste
- E-Books-Lesegeräte
- Hardware & Software (Computer und Betriebssysteme)
- Geldautomaten, Fahrausweis- und Check-in-Automaten sowie Selbstbedienungsterminals für Informationen
Dienstleister
- Online-Handel
- Telefondienste und zugehörige Geräte
- Zugang zu audiovisuellen Mediendiensten wie Fernsehsendungen
- Dienstleistungen im Bereich Flug-, Bus-, Bahn- und Schiffsverkehr
- Bankdienstleistungen
- elektronischer B2C Geschäftsverkehr
Darüber hinaus betrifft die Regelung vor allem öffentliche Internetanwendungen wie Webseiten und Dokumente von Bund, Ländern, Gemeinden sowie anderen öffentlichen Stellen. Unternehmen, die Verträge mit Verbrauchern abschließen, sind ebenfalls verpflichtet, barrierefreie Websites anzubieten.
Ausnahmen
- reine B2B-Kommunikation
- Websites, die ausschließlich private oder nicht-kommerzielle Inhalte bereitstellen, wie persönliche Blogs
- Kleinstunternehmen mit weniger als zehn Mitarbeitern oder einem Jahresumsatz unter zwei Millionen Euro sind von der Pflicht ausgenommen
Machen Sie sich nicht komplett von der Technik abhängig
Ein weit verbreiteter Irrtum ist, dass Barrierefreiheit ausschließlich ein technisches Thema sei. Natürlich spielen technische Maßnahmen eine Rolle, doch die eigentliche Verantwortung liegt oft bei den Redakteuren.
Sie müssen beispielsweise klare Überschriften formulieren und Bilder mit aussagekräftigen Beschreibungen versehen. Bleiben der Webauftritt chaotisch, die Inhalte verwirrend, die Alt-Texte leer, oder die Bilder mit kryptischen Namen wie „fj39dk_ttx.jpg“ betitelt, helfen auch die besten technischen Grundlagen nicht, um Ihre Webseite barrierefrei zu machen.
Wie erstellt man barrierefreie Websites?
Die Basis für einen barrierefreien Webauftritt bildet standardkonformes HTML. Moderne Browser können solches HTML in Kombination mit CSS korrekt interpretieren und die Inhalte optimal für verschiedene Endgeräte und assistive Technologien aufbereiten. So entsteht eine Webseite, die nicht nur die Zugänglichkeit verbessert, sondern auch auf allen gängigen Geräten und Bildschirmgrößen fehlerfrei dargestellt wird.
Struktur und Lesbarkeit
- Geben Sie die Hauptsprache der Webpage an.
- Nutzen Sie standardkonformes HTML und CSS.
- Verwenden Sie semantische html-Elemente wie Überschriften-Tags (h1, h2, h3), Listen und Absatz-Tags (li, p), um die Inhalte auf technischer Ebene sauber zu gliedern.
- Kennzeichnen Sie Layout-Tabellen mit role="presentation", damit Screenreader sie als reine Gestaltungselemente erkennen.
- Formulieren Sie klare und aussagekräftige Überschriften und Zwischenüberschriften.
- Sorgen Sie dafür, dass Ihre Inhalte in einer klaren und nachvollziehbaren Reihenfolge dargestellt werden.
- Stellen Sie sicher, dass ausreichend Weißraum zwischen Texten, Bildern und anderen Elementen vorhanden ist.
- Vermeiden Sie komplexe Layouts mit einer übermäßigen Anzahl an Spalten.
- Gestalten Sie das Layout Ihrer Webseite so, dass sie auch bei Vergrößerung gut strukturiert und leserlich bleibt.
Vertraute Designmuster erleichtern die Orientierung. Unterstrichene Wörter werden intuitiv als Links erkannt, hellgraue Elemente als inaktiv. Halten Sie sich an solche Konventionen, um Ihren Lesern die Navigation zu erleichtern.
Schrift und Kontraste
- Vermeiden Sie zu verschnörkelte oder schlecht lesbare Schriftarten (auch bei Überschriften).
- Verwenden Sie serifenlose Schriften für Fließtexte.
- Stellen Sie den Zeilenabstand auf ungefähr 150%.
- Verwenden Sie vorrangig linksbündigen Flattersatz.
- Achten Sie auf eine ausreichend große Schrift (mindestens 10 pt).
- Setzen Sie auf fettgedruckten oder kursiven Text, um wichtige Inhalte hervorzuheben.
- Heben Sie nur Dinge hervor, die wirklich wichtig sind – wenn alle Infos „hervorgehoben“ sind, ist keine davon mehr wichtig.
- Gehen Sie sicher, dass relevante Informationen nicht nur durch Farben vermittelt werden.
- Achten Sie auf klare Kontraste zwischen Text und Hintergrund.
- Vermeiden Sie flimmernde Farbkombinationen, da farbenblinde Menschen diese Töne nur schwer unterscheiden können. Kombinieren Sie stattdessen Farbenkontraste immer zugleich mit Hell-Dunkel-Kontrasten.
Barrierefreie Sprache
- Einfache und kurze Sätze.
- Keine Schachtelsätze.
- Fremdwörter und Fachbegriffe vermeiden oder erklären.
Barrierefreie Bilder und Videos
- Emojis können gern verwendet werden, da Screenreader sie erkennen.
- Emoticons sollten vermieden werden (z. B. :-)), da sie Zeichen für Zeichen vorgelesen werden.
- Bilder allein sollten keine wichtigen Informationen vermitteln – ergänzen Sie diese stets mit einem erklärenden Text.
- Verwenden Sie Grafiken, die starke Kontraste aufweisen.
- Statten Sie alle Bilder und QR-Codes mit prägnanten Alt-Texten aus, die den Bildinhalt klar beschreiben.
- Bauen Sie Ihre Webseite so auf, dass der Inhalt auch bei blockierten Bildern verständlich bleibt.
- Unterlegen Sie Videos mit Untertiteln oder bieten Sie Transkripte an.
- Vermeiden Sie schnell bewegte Bilder oder Animationen, die ablenken oder stören könnten.
Alt-Texte bieten nicht nur für Screenreader-Nutzer Vorteile. Sie werden auch angezeigt, wenn ein Bild aufgrund eines Ladefehlers nicht dargestellt werden kann. So bleibt die Bildinformation für alle Leser zugänglich.
Barrierefreie Call-to-Action-Elemente
- Verwenden Sie aussagekräftige Link-Texte wie „Mehr Informationen zu unseren Angeboten“ statt generischer Formulierungen wie „Hier klicken“.
- Erstellen sie aussagekräftige Permalinks. Statt www.ihre-webseite.de/?p=123 eher www.ihre-webseite.de/barrierefreier-webauftritt
- Unterstreichen Sie Links, um ihre Funktion klar erkennbar zu machen.
- Buttons sollten als interaktive Elemente ausgezeichnet werden, damit sie für Screenreader zugänglich sind – zum Beispiel über das Attribut type=“button“ oder durch Rollenzuweisung role=“button“.
- Buttons sollten eine Mindestgröße von 44x44 Pixel haben, damit sie leicht anklickbar sind.
- Vermeiden Sie, wesentliche Inhalte in Bilder zu packen. Buttons und wichtige Informationen sollten immer in reiner Textform vorhanden sein.
- Sollte ein Button doch nur aus einem Bild bestehen, ergänzen Sie ihn durch einen aussagekräftigen Alt-Text.
- Achten Sie auf genügend Kontrast zwischen Buttons und ihrem Hintergrund.
- Formularfelder müssen per Tastatur bedienbar sein.
- Fehlermeldungen sollten barrierefreundlich gestaltet sein.
- Bei Bedarf kann jedem Element ein aria-label hinzugefügt werden. Ähnlich wie der Alt-Text bei Bildern, fügt man dem Element damit eine zusätzliche Beschreibung hinzu, falls der sichtbare Text nicht ausreicht.
- Wichtige Navigationselemente (u.a. verlinkte Bilder) sollten um den Tag tabindex=“0“ ergänzt werden. Dieser macht das Element per Tastatur ansteuerbar.
- Grundsätzlich sollten interaktive Elemente per Tastatur bedienbar und sinnvoll strukturiert sein.
Setzen Sie auf barrierefreie CAPTCHAs ohne Nutzereingaben
Verwenden Sie barrierefreie Alternativen zu textbasierten CAPTCHAs, wie beispielsweise „Invisible reCAPTCHA“.
Testen ist unabdingbar
Es ist wichtig, regelmäßig Tests durchzuführen, um sicherzugehen, dass Ihre Webseite tatsächlich barrierefrei ist. Mit Prüftools wie WebAIM, Screenreadern oder Kontrast-Checkern können Sie diverse Dinge direkt schon selber abchecken, aber auch Feedback von Menschen mit verschiedenen Einschränkungen ist wichtig und wertvoll.
Ein einfacher Selbsttest zeigt schnell, wie barrierefrei Ihr Webauftritt wirklich ist. Aktivieren Sie die Bedienungshilfen auf Ihrem Smartphone oder installieren Sie einen kostenlosen Screenreader. Schließen Sie die Augen – und lassen Sie sich die Inhalte Ihrer Webseite vorlesen.
Sie werden sofort merken, ob der Lesefluss stockt oder wichtige Inhalte fehlen. Oft genügen kleine Anpassungen, um die Barrierefreiheit deutlich zu verbessern.
Die Umsetzung barrierefreier Onlinepräsenz erfordert etwas Planung. Überlegen Sie im Vorfeld, welche Hilfsmittel Ihre Webseitenbesucher benötigen könnten, um die Inhalte problemlos zu erfassen.
Fazit: Barrierefreiheit lohnt sich für alle
Barrierefreie Webauftritte sind nicht nur ein Muss aufgrund gesetzlicher Vorschriften, sondern auch eine echte Gelegenheit, denn es ist nie zu früh, den Zugang zu Informationen für Ihre Kunden und potenziellen Neukunden zu verbessern. Damit können Sie neue Zielgruppen erschließen, bestehende Kunden stärker an sich binden und Ihre Marke als inklusiv und zukunftsorientiert positionieren.
Merken Sie sich die goldene Regel: Barrierefreiheit auf Ihrer Webseite ist wie ein guter Gastgeber – Sie machen es Ihren Gästen damit einfach, sich wohlzufühlen.
Klingt Barrierefreiheit immer noch nach zu viel Aufwand?
Muss nicht sein. Kontaktieren Sie uns, wir übernehmen den Rest.
Kommentare
Einen Kommentar schreiben