Checkliste: 11 Tipps für eine barrierefreie Website

Stellen Sie sich vor, Sie suchen ein neues Fitnessstudio und besuchen zum ersten Mal die Website des Anbieters. Die Überschriften auf der Startseite können Sie nicht lesen, weil statt Text nur Sonderzeichen erscheinen. Die einzelnen Textblöcke sind zwar lesbar, aber so klein formatiert, dass Sie sich übermäßig anstrengen müssen, um etwas zu erkennen. Die Navigation des Web-Auftrittes zeigt auf Ihrem Endgerät nur farbige Flächen statt Menüpunkte an und überhaupt kommen Sie mit der Seite nicht zurecht. Ihre Reaktion ist klar: Sie verlassen die Seite und suchen sich einen anderen Anbieter. Damit es potenziellen Kundinnen und Kunden auf Ihrer Website nicht genauso wie in diesem Beispiel ergeht, sollten Sie Ihr Online-Angebot barrierefrei gestalten. Barrierefreies Webdesign berücksichtigt die Anforderungen, die durch dauerhafte, temporäre oder situative Behinderungen entstehen können. Diese Checkliste unterstützt Sie dabei, Fehler zu erkennen und sie zu beheben.

Bin ich gesetzlich verpflichtet, meine Website barrierefrei zu machen?

Ab 2025 müssen Websites gesetzlich vorgeschriebene Barrierefreiheitsstandards erfüllen. Dies regelt das Barrierefreiheitsstärkungsgesetz (BFSG). Es gilt für viele Websites und verpflichtet deutsche Unternehmen zur Barrierefreiheit nach dem European Accessibility Act (EAA). Diese EU-Richtlinie soll europaweit einheitliche Regelungen zur Barrierefreiheit schaffen. Zu den Produkten und Dienstleistungen, die unter den EAA fallen gehören auch Telekommunikationsdienste und der Handel im Web (E-Commerce). Für Websites relevant sind die Web Content Accessibility Guidelines 2.1 – kurz WCAG 2.1. Die WCAG enthalten einen dreistufigen Kriterienkatalog, der die Barrierefreiheit von Websites und Apps sicherstellen soll. Bereits seit 2019 gibt es die Barrierefreien-Informationstechnik-Verordnung (BITV 2.0). Die BITV 2.0 macht Vorgaben dazu, welche Informationen barrierefrei zu gestalten sind. Relevant ist die BITV 2.0 als Richtlinie etwa für elektronische Verwaltungsabläufe bei öffentlichen Stellen.

Nun zu den wichtigen Einschränkungen der Barrierefreiheitspflicht: Ausgenommen vom Barrierefreiheitsstärkungsgesetz sind reine B2B-Angebote sowie Webseiten von Privatpersonen. Auch kleine Unternehmen fallen nicht unter das Barrierefreiheitsstärkungsgesetz, sofern sie weniger als zehn Mitarbeiter beschäftigen oder einen Jahresumsatz oder eine Jahresbilanzsumme von höchstens zwei Millionen Euro aufweisen.

Tipp: Eine barrierefreie Website hat langfristig viele Vorteile für Ihr Geschäftsmodell, auch wenn Sie nicht dazu verpflichtet sind. Nutzen Sie daher unsere Checkliste bei jeder Neugestaltung Ihrer Website.

Gratis E-Book „WordPress für Unternehmen“

Die Vorteile einer barrierefreien Unternehmens-Website

Barrierefreiheit bedeutet, dass die Umgebung im Alltag so gestaltet ist, dass jeder Mensch sie ohne fremde Hilfe nutzen kann und Inhalte für alle zugänglich sind. Eine barrierefreie Website oder ein barrierefreier Online-Shop ist so aufgebaut, dass jeder Besucher gleichermaßen willkommen ist, unabhängig von individuellen oder technischen Einschränkungen. Barrierefreie Websites halten sich deshalb an bestimmte Standards und Richtlinien. Was nach viel Theorie klingt, bietet kleinen und mittleren Unternehmen handfeste wirtschaftliche Vorteile. Barrierefreie Webinhalte zahlen sich nämlich mehrfach aus: Sie ermöglichen allen Menschen die Teilhabe – Menschen mit und oft auch ohne Behinderungen. Die wichtigsten Benefits im Überblick:

Verbesserte Benutzerfreundlichkeit:

Digitale Barrierefreiheit durch klare Strukturen verbessert die User Experience (UX) und erhöhen die allgemeine Usability. Mehr zufriedene Besucher vergrößern die Chancen, Kunden zu gewinnen.

Erweiterter Kundenkreis:

Durch ein barrierefreies Web-Angebot erreichen Sie mehr potenzielle Kunden, einschließlich derjenigen mit Behinderungen. Die Inklusion eingeschränkter User vergrößert Ihre Reichweite.

Suchmaschinenoptimierung:

Für Google sind barrierefreie Webseiten durch hinterlegte Alternativtexte, verständliche Sprache und Metadaten automatisch „bessere“ Seiten, erhalten dadurch also oft ein besseres Ranking.

Positive Markenwahrnehmung:

Eine barrierefreie Website zeigt, dass Ihr Unternehmen soziale Verantwortung übernimmt. Den Umstand, dass Ihre Website barrierefrei und damit inklusiv ist, können Sie für Ihr Online Marketing nutzen.

Eine uneingeschränkte digitale Teilhabe aller Menschen wird für Unternehmen jeder Größe also immer wichtiger. Die folgende Checkliste deckt die wichtigsten Punkte ab, die es bei der digitalen Barrierefreiheit zu beachten gilt:

1. Barrierefreiheits-Check Ihrer Website durchführen

Stellen Sie in einem Audit fest, welche Bereiche Ihrer Website im Hinblick auf barrierefreies Internet verbessert werden müssen. Im Rahmen des Checks überprüfen Sie, wie zugänglich Ihre Website für Menschen mit Behinderungen aktuell ist. Um ein aussagekräftiges Ergebnis über Ihr barrierefreies Webdesign zu erhalten, gehen Sie zweigleisig vor: Führen Sie Praxistests mit Personen durch, die Ihre Website aus der Perspektive eingeschränkter Nutzerinnen und Nutzer beurteilen. Setzen Sie parallel Tools ein, um Defizite wie schlechten Kontrast, zu kleine Schrift, fehlende Alternativtexte und andere technische Mängel zu identifizieren.

Besonders empfehlenswert ist WAVE (Web Accessibility Evaluation Tool): Die kostenlose Software analysiert Ihre Website nach Eingabe der URL und markiert Probleme direkt im Layout der Seite. Zusätzlich können Sie Browser-Erweiterungen verwenden, die Ihre Webseite aus der Sicht eines Screenreader-Nutzers untersuchen. Screenreader geben den geschriebenen Text per Sprachausgabe (Text-to-Speech) oder taktil auf einer Braille-Zeile aus. Viele eingeschränkte User sind auf das Audio- oder Tast-Feedback angewiesen, um auf die Webinhalte zuzugreifen.

Tipp: Eine einmalige Überprüfung reicht nicht aus, da sich die Anforderungen an die digitale Barrierefreiheit ändern. Um Barrierefreiheit aufrechtzuerhalten und eine inklusive Webumgebung zu gewährleisten, sollten Sie regelmäßige Wiederholungstests durchführen.

2. Webseiten responsiv machen

Eine schicke Website auf dem Desktop-PC sieht mobil auf dem Smartphone oder Tablet oft wie eine Baustelle aus – oder umgekehrt. Screenreader können solche Seiten in vielen Fällen nicht richtig wiedergeben. Responsive Webdesign ist eine Technik, mit der sich Ihre Website dynamisch an verschiedene Bildschirmgrößen und (mobile) Endgeräte anpassen kann. Damit legen Sie den Grundstein für einen nutzerfreundlichen Auftritt im Web und die Navigierbarkeit auf Ihrer Website für Screenreader-Nutzer.

Tipp: Denken Sie mit Blick auf ein responsives Design daran, auch dynamische Inhalte auf Ihren Seiten für Screenreader zugänglich zu machen. Ein Screenreader erkennt nicht automatisch, wenn sich Inhalte in einem anderen Bereich als dem aktuell fokussierten ändern.

3. Tastaturnavigation gewährleisten

Eine gute Website kann mit der Maus, der Tastatur und dem Finger bedient werden. Stellen Sie sicher, dass Ihre Website vollständig über die Tastatur navigierbar ist, damit auch Benutzer ohne Maus oder Touchscreen zugreifen können. Dazu müssen alle interaktiven Elemente wie Schaltflächen und Links mit der Tastatur erreichbar und bedienbar sein.

4. Cookies-Bestätigung barrierefrei machen

Die allgegenwärtigen Cookie-Banner sind vielen Internetnutzern aus Komfortgründen ein Dorn im Auge. Zudem sind die als Overlay oder dynamischer Dialog gestalteten Banner oft nicht tastatureingabefähig und bleiben für Screenreader-Nutzer unsichtbar. Ändern Sie Ihr Cookie-Banner gegebenenfalls so ab, dass es jederzeit sichtbar und anklickbar ist.

5. Alternativtexte für Bilder einbinden

Fügen Sie allen Bildern Alternativtexte über das Alt-Tag hinzu, damit Screenreader sie vorlesen und den Inhalt an sehbehinderte Nutzer weitergeben können. Das Alt-Tag ist auch nützlich, wenn etwa Smartphone-Benutzer Bilder aus Geschwindigkeitsgründen oder um das Datenvolumen zu sparen ausblenden. Lesen Sie auch, wie u. a. der Alt-Text Ihre Bilder-SEO verbessert.

6. Farbschema, Kontrast und Schriftgröße optimieren

Hier ein hellgrüner Rahmen, dort eine lila Schattierung: Farben sind ein wichtiges visuelles Gestaltungsmittel. Menschen mit Sehbeeinträchtigung können Farben oder Farbunterschiede (Kontraste) jedoch oft nicht wahrnehmen, so die Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik. Ist der Farbkontrast zwischen Schrift und Hintergrund oder zwischen grafischen Elementen zu gering, haben Surfer mit eingeschränktem Sehvermögen Schwierigkeiten. Das kommt häufiger vor, als man denkt: In Europa haben 10 Prozent aller Männer eine Rot-Grün-Schwäche. Stellen Sie sicher, dass Texte und Grafiken ausreichenden Kontrast aufweisen, damit sie auch von Nutzern mit Sehschwäche gut wahrgenommen werden können. Was die Schriftart und Schriftgröße betrifft: Verwenden Sie am besten Schriften ohne Verzierungen und wählen Sie eine gut und leicht lesbare Schriftgröße, die der Nutzer anpassen kann.

Tipp: Greifen Sie zu einem Tool wie dem kostenlosen Contrast Checker, um die Lesbarkeit Ihrer Texte zu überprüfen.

7. Formulare zugänglich gestalten

Überprüfen Sie die Eingabeformulare auf Ihrer Website auf Barrierefreiheit. Stellen Sie sicher, dass alle Formularfelder eindeutig beschriftet sind und bieten Sie Hilfstexte an, wie die Felder auszufüllen sind. Fehlermeldungen sollten verständlich sein, damit Benutzer Eingabefehler einfach korrigieren können.

8. Textalternativen für Multimedia-Inhalte anbieten

Bieten Sie Untertitel und Transkriptionen für Videos, Bildergalerien, Audioinhalte und Webcasts an, um sie allen zugänglich zu machen. Blinde Menschen profitieren bei Videos von einer zusätzlichen Audioausgabe mit ausführlichem Sprechertext. Wenn dies nicht möglich oder sinnvoll ist, bieten Sie eine Zusammenfassung in Textform an. Auf diese Weise schließen Sie niemanden aus und vermitteln jedem Besucher Ihrer Website, dass ihm alle Informationen zur Verfügung stehen.

9. Verständliche Sprache verwenden

Eigentlich eine Selbstverständlichkeit: Texte auf Ihrer Website sollten klar und leicht verständlich sein. Erklären Sie Fachjargon und komplexe Begriffe.

10. Plugins und Themes überprüfen

CMS-Systeme wie WordPress sind zwar nicht von Haus aus barrierefrei, können Sie aber bei der Erstellung einer inklusiven Website unterstützen. Achten Sie bei der Auswahl von Themes und Plugins darauf, dass diese barrierefrei sind und Screenreader unterstützen. Verwenden Sie die Filterfunktion auf der WordPress-Seite, um barrierefreie Themes zu finden.

Tipp: Plugins wie One Click Accessibility, WP Accessibility oder Accessibility Font Resizer helfen Ihnen, Ihre WordPress-Website inklusiver zu gestalten.

11. Bewusstsein im Team schaffen

Barrierefreiheit lässt sich nicht vollständig automatisieren – denn auch im Zeitalter der KI wird der Inhalt von Webseiten größtenteils von Menschen erstellt. Schulen Sie daher Ihr Team in Barrierefreiheit und schaffen Sie ein Bewusstsein für die Bedeutung einer barrierefreien Website für Ihr Business.