Barrierefreie Websites: Alles, was Sie wissen müssen

Heutzutage ist das Internet für die meisten Menschen ein fester Bestandteil ihres Alltags und überhaupt nicht mehr wegzudenken. Für einige Personengruppen kann der Zugang zu Online-Inhalten jedoch zu einer echten Herausforderung werden.

Eine barrierefreie Website schafft da Abhilfe. Sie sorgt für mehr Inklusion und eine verbesserte Nutzererfahrung für alle. Wichtig aber auch: Für viele Unternehmen wird Barrierefreiheit auf der Website ab Juni 2025 zur gesetzlichen Vorschrift.

Wir erklären Ihnen, was Barrierefreiheit im Web überhaupt bedeutet, wieso diese so wichtig ist und welche Kriterien für eine barrierefreie Website erfüllt sein müssen. Außerdem stellen wir Ihnen eine Reihe von Barrierefreiheits-Tools vor, die Sie bis zu einem gewissen Grad als Unterstützung nutzen können und geben einen Einblick in die Kosten, die mit der Umsetzung von Barrierefreiheit verbunden sein können.

Barrierefreiheit im Web – was ist das?

Web-Barrierefreiheit (Web Accessibility) bedeutet, Websites, Tools und Technologien so zu gestalten und zu entwickeln, dass sie von allen Menschen uneingeschränkt genutzt werden können. Auch von jenen, die unter physischen und/oder psychischen Beeinträchtigungen leiden.

Es gibt jedoch auch temporäre Barrieren oder Beeinträchtigungen wie zum Beispiel eine eingeschränkte Internetverbindung, helles Sonnenlicht auf dem Bildschirm, Lärm und vieles mehr. Barrieren im Internet betreffen demnach also nicht nur Menschen mit Behinderungen. Alle Internetnutzer:innen können bei der alltäglichen Internetnutzung mit Barrieren konfrontiert werden.

Barrierefreiheit sorgt dafür, dass die Websites trotz dieser Beeinträchtigungen bedienbar bleiben, die Angebote und Tools weiter zugänglich sind.

Wir unterstützen Sie gerne Ihre Agentur für barrierefreie Websites

Was sind die häufigsten Barrieren im Web?

Im Web gibt es zahlreiche potenzielle Barrieren, die Menschen daran hindern können, Inhalte effektiv zu nutzen oder darauf zuzugreifen. Folgende kommen dabei besonders häufig vor:

• Unzureichende Farbkontraste: Sehbehinderte können Informationen bei schwachen Farbkontrasten nicht erfassen.
• Mangelnde Skalierbarkeit: Sehbehinderte brauchen oft starke Vergrößerungen. Deshalb sollten sie die Inhalte einer barrierefreien Website manuell stark vergrößern können; auch bei einer 200%-Vergrößerung sollte das Design der Website nicht zerfallen. 
• Keine Textalternativen: Für Gehörlose oder Hörgeschädigte sind Videos ohne Untertitel oder eine Version in Gebärdensprache unzugänglich. Blinde und sehbehinderte Menschen nutzen außerdem häufig Screenreader. Fehlt es den Bildern bzw. Grafiken auf der Website an aussagekräftigen Beschreibungen, können sie die gezeigten Inhalte nicht wahrnehmen und verstehen.
• Fehlende semantische Codierung: Eine grundlegende Voraussetzung für eine barrierefreie Website ist die Verwendung von gültigem und semantisch richtigem Markup. Fehlerhaftes HTML kann von assistiven Technologien unter Umständen nicht korrekt verarbeitet und verstanden werden.
• Komplexe Inhalte: Für Menschen mit geistiger Behinderung oder unerfahrene Nutzer:innen können überladene Websites oder lange, komplexe Sätze schwierig zu verstehen sein.
• Kurze Timeouts: Motorisch beeinträchtigte oder ältere Menschen benötigen oft mehr Zeit für sämtliche Aktionen (z.B. einen Kauf oder das Ausfüllen eines Formulars) auf einer Website. Zu kurze Timeouts können eine Aktion z.B. mit “Ihre Session ist abgelaufen” abbrechen, bevor sie abgeschlossen werden konnte. Für die Nutzer:innen ist das sehr frustrierend.
• Keine Tastaturunterstützung: Websites, die nur mit der Maus bedienbar sind, stellen Barrieren dar für Menschen, die aufgrund von Behinderungen auf Tastatureingabe angewiesen sind. Sehbehinderte Nutzer:innen beispielsweise sind womöglich auf die Tastatur zur Navigation angewiesen, aber auch bestimmte motorische Einschränkungen machen die Navigation mit Maus oder Touchscreen schwierig oder unmöglich. 

Warum ist eine barrierefreie Website wichtig?

Grundsätzlich ist es vor allem ethisch geboten, Websites möglichst barrierefrei zu gestalten. Denn ganz im Sinne der Inklusion sollten möglichst alle Nutzer:innen – unabhängig von ihren konkreten Einschränkungen – die Möglichkeit haben, das Internet uneingeschränkt zu nutzen. Jede:r hat das Recht auf Teilhabe an der Gesellschaft und ein selbstbestimmtes Leben.

Es gibt aber auch darüber hinaus wichtige Gründe, warum Sie eine barrierefreie Website in Erwägung ziehen sollten.

Erweiterung der Zielgruppe

Mit einer barrierefreien Website erreichen Sie ein breiteres Publikum. Rund 7,8 Millionen Menschen in Deutschland sind laut Angaben des Statistischen Bundesamtes schwerbehindert (Stand 2021). Das sind immerhin 9,4 % der gesamten Bevölkerung in Deutschland. Wenn eine Website barrierefrei ist, ist sie nicht nur für Menschen mit Behinderungen zugänglicher, sondern auch für ältere Menschen, Menschen mit geringer digitaler Kompetenz und Menschen mit vorübergehenden Einschränkungen, wie einer gebrochenen Hand oder schlechten Lichtverhältnissen.

Verbesserung der Benutzererfahrung für alle

Barrierefreie Websites bieten oft eine bessere Benutzererfahrung für alle, nicht nur für Menschen mit Behinderungen. Gut strukturierte, klar betitelte Inhalte und eine intuitive Navigation verbessern die Verständlichkeit und Benutzerfreundlichkeit einer Website für alle Besucher:innen. (Und ganz nebenbei trägt Barrierefreiheit auch zur Suchmaschinenoptimierung bei, ist also gut fürs digitale Marketing.)

Einhaltung gesetzlicher Vorschriften und Verordnungen

In vielen Ländern gibt es Gesetze und Vorschriften, die Barrierefreiheit im Web vorschreiben. In Deutschland beispielsweise gilt das Behindertengleichstellungsgesetz (BGG), das seit 2021 verlangt, dass öffentliche Einrichtungen ihre Websites und mobilen Anwendungen barrierefrei gestalten. Ebenso sind unter dem BGG öffentliche Stellen verpflichtet, Informationstechnologie barrierefrei zu gestalten.

Vergleichbare Regelungen gibt es durch entsprechende Bestimmungen der EU in ganz Europa auch für viele Unternehmen. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) wurden diese Regelungen in deutsches Recht übertragen. Für welche Unternehmen barrierefreie Websites verpflichtend werden, haben wir in unserem Hintergrundartikel zum Barrierefreiheitsstärkungsgesetz (BFSG) ausführlich beschrieben.

Die Kriterien, die für die Umsetzung der Barrierefreiheit dabei als Maßstab angelegt werden (beschrieben in der “Verordnung über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen nach dem Barrierefreiheitsstärkungsgesetz” oder kurz BFSGV, hier als PDF einsehbar), entsprechen für Unternehmens-Websites im Kern jenen, die auch für öffentliche und vor allem staatliche Einrichtungen gelten; diese sind detailliert in der Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0 niedergelegt, welche wiederum die Europäische Norm für digitale Barrierefreiheit EN 301 549 V3.2.1 (2021-03) umsetzt.

Internationale Standards

Europäische Norm und deutsche Verordnung orientieren sich dabei technisch an international ausgehandelten und anerkannten Standards für Barrierefreiheit. Auf internationaler Ebene sind dies vor allem die Web Content Accessibility Guidelines (WCAG).

Wir gehen im weiteren Verlauf noch im Detail auf die WCAG und ihre Grundprinzipien der WCAG und die konkreten Kriterien für Barrierefreiheit ein.

Wann ist eine Website barrierefrei?

Wie anfangs bereits erwähnt, gilt eine Website als barrierefrei, wenn sie von Personen, unabhängig von ihren individuellen Fähigkeiten oder Einschränkungen, problemlos genutzt werden kann.

Die genauen Bestimmungen für die Gestaltung einer barrierefreien Website werden dabei durch die zuvor genannten WCAG festgelegt: 

WACG

Bei den WACG handelt es sich um international ausgehandelte Standards, die sich mit bestehenden Technologien sicher umsetzen lassen. Die WCAG bieten somit eine solide und mittlerweile seit 25 Jahren stetig weiterentwickelte und bewährte Basis, um Barrierefreiheit herzustellen; aktuelle Browser und Geräte (dazu gehören z.B. auch Braille-Lesegeräte) können die nach den Guidelines erstellten Informationen zuverlässig auslesen.

Die Einzelkriterien der WCAG sind dabei in drei Level strukturiert: A, AA und AAA. Kriterien des Level A beschreiben absolute Mindeststandards, die für Barrierefreiheit eingehalten werden müssen, mit Level AA ist ein gutes Niveau erreicht. Triple-A-Kriterien sind meist etwas komplexer und aufwändiger zu erreichen.

Für jeden Konformitätslevel sind in den Guidelines feste Kriterien beschrieben, um zu bestimmen, ob der jeweilige Level erreicht wurde.

Um deutsche und europäische Normen zu erfüllen, genügt es in der Regel, die WCAG-Kriterien bis zum Level AA einzuhalten; deshalb wollen wir uns hier im Folgenden auch auf diese Kriterien konzentrieren und beschränken.

Wir werden dabei in diesem Artikel die WCAG-Kriterien nicht vollständig ausbreiten, sondern nur die wichtigsten Punkte beschreiben und zum Teil durch geeignete Beispiele illustrieren. Bei jedem einzelnen Punkt ist vermerkt und verlinkt, welche Aspekte der WCAG jeweils konkret gemeint sind.

Um Ihre Website vollständig barrierefrei zu gestalten, sind also im Detail noch weitere Aspekte als die hier beschriebenen zu beachten; wenn Ihre Website die unten aufgeführten Kriterien erfüllt, sind allerdings die wichtigsten Voraussetzungen bereits gegeben, und Ihre Website ist näher an der Barrierefreiheit als die meisten bestehenden Websites.

Brauchen Sie Unterstützung Wir prüfen die Barrierefreiheit Ihrer Website

Grundprinzipien der WCAG

Die vier Grundprinzipien der WCAG beschreiben die zentralen Kategorien, unter denen sich die verschiedenen Kriterien einordnen lassen. Sie ordnen diese danach ein, für welche Einschränkungen oder technischen Aspekte sie eine Rolle spielen.

1. Perceivable – Wahrnehmbar
   Der Inhalt der Website muss wahrgenommen werden können.
2. Operable – Benutzbar
   Die Funktionen und Interaktionsmöglichkeiten der Website müssen genutzt werden können.
3. Understandable – Verständlich
   Die Inhalte und Navigationselemente müssen verständlich, konsistent und nachvollziehbar sein.
4. Robust
   Die Website muss unabhängig vom konkreten technischen Kontext wahrnehmbar und nutzbar sein.

Konkrete Kriterien für Barrierefreiheit

Für deutsche Websites gelten, wie oben bereits beschrieben, primär die Kriterien der WCAG bis zum Level AA, darüber hinaus aber noch einige konkrete Regelungen, die durch nationale Verordnungen notwendig werden.

Erklärung zur Barrierefreiheit

Eine Website, die nach dem BFSG oder anderen gesetzlichen Regelungen barrierefrei sein muss, benötigt eine “Erklärung zur Barrierefreiheit”, die man vielleicht am besten analog zur Datenschutzerklärung versteht: Eine klare Beschreibung des Barrierefreiheits-Status der Website mit Informationen für die Nutzer:innen über Kontakt- und Beschwerdemöglichkeiten.

Folgende Informationen muss die “Erklärung zur Barrierefreiheit” enthalten:

• Status und Vollständigkeit der Barrierefreiheit auf der Website – in welchem Sinne ist die Website schon barrierefrei, welche Lücken, Schwächen oder Altlasten gibt es noch? Welche Inhalte sind noch nicht barrierefrei, welche Alternativen gibt es für diese?
• Bezug auf die jeweiligen Normen und Gesetze – das betrifft bei Unternehmen im Regelfall das BFSG und entsprechende Verordnungen.
• Datum und Prüfkriterien – von wem wurde die Umsetzung der Barrierefreiheit wann unter welchen Kriterien (oder mit welcher Technologie) geprüft?
• Möglichkeit zu Feedback und Kontaktinformationen – Nutzer:innen müssen die Möglichkeit haben, eventuelle Probleme mit der Barrierefreiheit an eine verantwortliche Person zu melden oder sich bei Rückfragen an diese Person zu wenden.
• Schlichtungsstelle – Nutzer:innen müssen die Möglichkeit haben, eine Schlichtungsstelle anzurufen, wenn ihre Fragen zur Barrierefreiheit nicht oder nicht ausreichend befragt wurden.

Wahrnehmbar

Die Inhalte auf der Website müssen für alle Nutzer:innen wahrnehmbar sein. Das bedeutet insbesondere, dass Inhalte nicht allein als Grafiken, Video- oder Audioinhalte zur Verfügung stehen dürfen und dass Textinhalte korrekt ausgezeichnet und barrierefrei angezeigt werden müssen.

Konkrete Kriterien nach Stufe A:

• Inhalte, die kein Text sind (z.B. Erklärvideos, Podcasts, erläuternde Bilder), müssen zugleich als rein textbasierte Alternative angeboten werden. Diese Alternative muss die Inhalte auf geeignete Weise ersetzen, also ihrem Nutzen entsprechen oder diesen beschreiben. (1.1)
• Reine Video- und Audioinhalte benötigen alternative Audio- bzw. Textinhalte wie z.B. Transkripte oder Untertitel. (1.2)
• Durch geeigneten, korrekten HTML-Code müssen die Inhalte klar aufgebaut, strukturiert und verknüpft sein. Dies stellt auch sicher, dass sie nicht-visuell ausgegeben werden können (z.B. durch Braille-Lesegeräte).
• Die korrekte (Lese-)Reihenfolge der Elemente muss technisch erkennbar sein. (1.3.2)
• Die Bedeutung von Elementen darf nicht allein durch visuelle oder auditive Signale markiert sein. (1.3.3)
• Elemente, die sich von ihrem Umfeld unterscheiden, dürfen nicht allein durch einen Farbwechsel unterschieden sein. (Links zum Beispiel dürfen also nicht nur farblich hervorgehoben werden, sondern müssen zusätzlich durch andere Merkmale, etwa eine Unterstreichung, hervorgehoben werden. 1.4.1)

Konkrete Kriterien nach Stufe AA:

• Reine Videoinhalte erhalten zusätzlich Audiodeskription. (1.2.5)
• Textfarbe und Bilder müssen immer hinreichenden Kontrast zum Hintergrund bilden. Die Anforderungen an den Kontrast unterscheiden sich dabei je nach Größe der Schrift – während für hinreichend große Texte ein Kontrast von 3:1 reicht, muss normalgroße Schrift einen Kontrast von mindestens 4,5:1 aufweisen. (Für die Stufe AAA sind noch höhere Kontrastwerte vorgesehen; einen einfachen Farbentest können Sie hier durchführen. 1.4.3)

• Zeilen- und Zeichenabstände sollten nicht zu klein sein und vor allem auf im WCAG festgelegte Mindestwerte eingestellt werden können, ohne dass Funktionalität und Darstellung der Website leiden: Zeilenhöhe auf das Anderthalbfache der Zeichengröße, Abstand zwischen Absätze auf doppelte Zeichengröße, Abstand zwischen einzelnen Zeichen mindestens 0,12 mal Zeichengröße, Wortabstand mindestens 0,16 mal. (1.4.12)

• Textgrößen müssen verändert, also skaliert werden können. Das bedeutet auch, dass das Layout und Design einer Seite auch bei deutlicher Vergrößerung des Textes (etwa auf 200%) noch nutzbar sind und sinnvoll erfasst werden können. (1.4.4)
• Text darf i.d.R. nicht als Bild erscheinen. Ausnahmen gibt es z.B. für Firmenlogos oder für Text in Schaubildern und Diagrammen. Für diese Fälle muss dann allerdings (siehe oben) eine entsprechend erläuternde Textvariante angeboten werden. (1.4.5)
• Die korrekte Ausgabe einer Seite ist weitgehend unabhängig von Bildschirmgröße und -ausrichtung. (1.3.4)
• Wenn Hover- oder Fokus-Veränderungen zusätzlichen Content erscheinen lassen, muss dieser i.d.R. entfernt werden können, ohne Hover oder Fokus zu verändern; der zusätzliche Content darf nicht verschwinden, wenn der User über diesen hovert und sollte nicht von selbst wieder verschwinden. (1.4.13)
• Eingabefelder sind mit klaren Angaben ausgezeichnet, die den Zweck der Eingabe beschreiben. (1.3.5)

Benutzbar

Die Inhalte auf der Website müssen für alle Nutzer:innen benutzbar sein. Konkret äußert sich das etwa darin, dass es möglich sein muss, alle Interaktionen und Eingaben allein über die Tastatur (oder andere Eingabegeräte) zu erledigen und dass Navigationselemente und Links klar und korrekt ausgezeichnet sind.

Konkrete Kriterien nach Stufe A:

• Alle Funktionen der Website müssen über die Tastatur erreichbar sein. (2.1.1 und 2.1.2)
• Tastatur-Shortcuts müssen korrekt implementiert sein, müssen abgeschaltet oder auf andere Shortcuts umgestellt werden können. (2.1.4)
• Eher für Apps als für Websites üblich sind komplexe Interaktionen (z.B. Doppelklicks, Gesten etc.); auch diese müssen durch andere Handlungen (z.B. Tastaturbefehle) ersetzt werden können.
• Jede Seite hat einen sinnvollen, deskriptiven Titel. (2.4.2)
• Die User müssen ausreichend Zeit haben, die Inhalte wahrzunehmen und zu nutzen. Sollten Inhalte automatisch wechseln (z.B. in einem Slider), so muss dieser Wechsel gestoppt oder der Zeitraum von den Nutzer:innen beeinflusst werden können. Dieses Kriterium betrifft auch Buchungs- und Bestellsysteme, die Angebote jeweils nur für einen begrenzten Zeitraum reservieren, oder automatische Logouts nach bestimmten Zeiträumen. (2.2.1 und 2.2.2)
• Die Website darf keine aufblitzenden Elemente enthalten, die Anfälle auslösen können. (2.3.1)
• Inhalte, die auf unterschiedlichen Seiten identisch wiederholt werden, müssen als solche markiert sein und müssen übersprungen werden können. Dies betrifft zum Beispiel wiederkehrende Navigationselemente. (2.4.1)
• Nutzer:innen können problemlos in einer sinnvollen Reihenfolge durch die Inhalte navigieren. (2.4.3)
• Der Nutzen von Links wird klar beschrieben. (2.4.4)

Konkrete Kriterien nach Stufe AA:

• Alle Elemente sind über Labels, Headings und geeignete Tags im HTML-Code klar beschrieben. (2.4.6)
• Bei einer Navigation über die Tastatur ist der Tastaturfokus stets klar erkennbar. (2.4.7)

Verständlich

Die Inhalte, Interaktions- und Navigationselemente auf der Website müssen verständlich und konsistent sein, das Verhalten bei Interaktionen muss stets nachvollziehbar und vorhersehbar sein.

Konkrete Kriterien nach Stufe A:

• Die Sprache, in der die Inhalte einer Seite abgefasst sind (Deutsch, Englisch…), muss im HTML-Quelltext klar beschrieben sein. Dazu gehört auch der Verweis auf gegebenenfalls in anderen Sprachen verfasste Alternativen. (3.1.1)
• Eine Website muss sich auf für den User vorhersehbare Weise verhalten. (3.2)
• Eingabefehler werden klar kommuniziert, Anforderungen an die Eingabe erläutert. (3.3)

Konkrete Kriterien nach Stufe AA:

• Bei Eingabefehlern werden Vorschläge gemacht, um den Fehler zu korrigieren, für rechtlich relevante Eingaben gelten besondere Sicherheitsmaßnahmen. (3.3.3)
• Auf mehreren Seiten wiederkehrende Navigationselemente ändern sich in Reihenfolge und Form nicht von Seite zu Seite. (3.2.3)
• Identische Funktionalitäten werden über mehrere Seiten hinweg auf die gleiche Art und Weise gekennzeichnet. (3.2.4)

Robust

Die Fähigkeit von Webinhalten, zuverlässig von einer Vielzahl von Benutzeragenten, einschließlich assistiver Technologien, interpretiert zu werden. Das bedeutet, dass Webinhalte so gestaltet sein sollten, dass sie auch in zukünftigen Technologien und Browsern zugänglich bleiben. Inhalte müssen flexibel genug sein, um auf verschiedenen Plattformen und Geräten gut zu funktionieren.

Konkrete Kriterien nach Stufe A:

• Korrektes HTML (sauber, korrekt und zweckgemäß eingesetzte Tags) wird vorausgesetzt. Dies schließt insbesondere auch die Struktur der Website ein. (4.1)
• HTML-Elemente bekommen klar definierte Namen, Rollen und Werte gemäß den Spezifikationen. (4.1.2)

Konkrete Kriterien nach Stufe AA:

• In Auszeichnungssprachen implementierte Inhalte können Statusmeldungen haben, die assistiven Technologien ohne Fokus angezeigt werden. (4.1.3)

Wie wird meine Website barrierefrei?

Die Barrierefreiheit auf Ihrer Website können Sie durch verschiedene Maßnahmen gewährleisten. Folgendes sollten Sie umsetzen, entweder selbst oder durch eine erfahrene Agentur:

Semantische HTML-Struktur

Wie hier bereits erwähnt, ist die HTML-Struktur ein wichtiges Kriterium, um zumindest Stufe A zu erreichen. Durch die Verwendung semantischer Tags wird nicht nur die Lesbarkeit und Pflege des Codes, sondern auch die Zugänglichkeit für Benutzer:innen erleichtert, da zum Beispiel Screenreader die Inhalte besser auslesen und Menschen mit Sehbehinderungen vorlesen können.

Um eine semantische HTML-Struktur zu erreichen, sollten Sie die HTML-Tags entsprechend ihrer Bedeutung verwenden, um den Inhalt Ihrer Webseite klar zu strukturieren. Folgende Punkte sollten Sie beachten:

• Verwenden Sie strukturierte Tags: Nutzen Sie Tags wie <header>, <footer>, <nav>, <article>, <section>, und <aside>, um die verschiedenen Teile Ihrer Webseite klar zu definieren.
• Verwenden Sie Überschriften-Tags: Verwenden Sie <h1>, <h2>, <h3> usw., um die Hierarchie Ihrer Überschriften zu definieren und die Bedeutung verschiedener Abschnitte Ihrer Webseite zu verdeutlichen.
• Verwenden Sie Absatz-Tags: Nutzen Sie <p> für Textabsätze, um den Inhalt in logische Abschnitte zu unterteilen.
• Verwenden Sie Listen-Tags: Verwenden Sie <ul> für unsortierte Listen und <ol> für sortierte Listen, um Listeninhalte semantisch zu kennzeichnen.
• Verwenden Sie geeignete Tags für Multimedia-Inhalte: Nutzen Sie <img> für Bilder, <video> für Videos, und <audio> für Audio-Dateien, um multimediale Inhalte angemessen zu kennzeichnen. Achten Sie bei der Einbindung von Audio- und Video-Inhalten aber insbesondere auch darauf, dass die Player barrierefrei eingebunden und nutzbar sind.
• Vermeiden Sie die Verwendung von nicht-semantischen Tags wie <div> und <span> für die Strukturierung Ihres Inhalts, es sei denn, es gibt keine bessere Alternative.

Leichte Sprache und Gebärdensprache

Die BITV sieht zusätzlich vor, dass bestimmte Informationen in Leichter Sprache und Deutscher Gebärdensprache angeboten werden müssen.

Leichte Sprache ist dabei nach festen Regeln einfach gehaltene deutsche Sprache, für die einfache Wörter und kurze Sätze verwendet werden. Sie ist insbesondere für Menschen mit geistiger Behinderung oder Lernbehinderungen gedacht. Leichte Sprache sollte nicht mit der Einfachen Sprache verwechselt werden, die weniger regelbasiert ist und versucht, durch einfachere Satzstrukturen und andere Maßnahmen leichter lesbare Texte zu ermöglichen. Einfache Sprache richtet sich stärker an Menschen, die Deutsch erst lernen oder generell Probleme beim Lesen und Schreiben haben.

Deutsche Gebärdensprache ist eine visuell-manuelle Sprache, die aus Handzeichen, Mimik und Körperhaltung besteht. Es handelt sich dabei um eine natürlich entstandene vollwertige Sprache mit umfassendem Vokabular und eigenständiger Grammatik. Auf einer Website wird sie üblicherweise als Video angeboten werden. Auch dieses Video muss dann selbstverständlich barrierefrei eingebunden sein.

Konkret sollten diese Informationen in Leichter Sprache und Deutscher Gebärdensprache angeboten werden:

• Informationen zu den wesentlichen Inhalten der Website und zur Navigation auf der Website,
• die wesentlichen Inhalte der oben beschriebenen Erklärung zur Barrierefreiheit und
• Hinweise auf weitere Informationen in Deutscher Gebärdensprache und in Leichter Sprache, falls solche auf der Website zu finden sind.

Als Best Practices ist es ausdrücklich zu empfehlen, diese Inhalte bereitzustellen und sich so dem Standard des BITV anzunähern.

Alternative Texte für Bilder und Grafiken

Barrierefreie Alt-Texte für Bilder und Grafiken sind wichtig, damit Menschen mit Sehbehinderungen den Inhalt Ihrer Webseite verstehen können. Hier sind einige Best Practices:

• Beschreiben Sie den Inhalt des Bildes präzise: Der Alt-Text sollte den Inhalt des Bildes klar und präzise beschreiben. Er sollte so kurz wie möglich und nur so lang wie nötig sein. 
• Vermeiden Sie redundante Informationen: Vermeiden Sie es, Informationen zu wiederholen, die bereits im umgebenden Text vorhanden sind. Der Alt-Text sollte ergänzende Informationen liefern, die nicht offensichtlich sind.
• Berücksichtigen Sie den Kontext: Denken Sie daran, den Kontext zu berücksichtigen, in dem das Bild auf Ihrer Webseite erscheint. Der Alt-Text sollte den Benutzer:innen helfen zu verstehen, wie das Bild mit dem umgebenden Inhalt zusammenhängt.

Übrigens: Dekorative Bilder brauchen keinen Alternativtext. 

Tastaturzugänglichkeit und Navigationsmöglichkeiten

Wenn es um die Verbesserung der Barrierefreiheit auf Websites geht, wird die Navigation mittels Tastatur häufig vernachlässigt. Dabei ist sie für die Barrierefreiheit unerlässlich. 

Folgendes können Sie tun, um die Tastaturzugänglichkeit und Navigation barrierefrei zu gestalten:

1. Visuelles Feedback bereitstellen: Jedes Mal, wenn ein Element auf Ihrer Website fokussiert wird (z.B. durch das Drücken der Tabulator-Taste), sollte es eine klare visuelle Indikation dafür geben, z.B. ein Outline oder eine farbliche Untermalung des Hintergrunds.
2. Logische Reihenfolge sicherstellen: Die Reihenfolge, in der man mit der Tabulator-Taste von Element zu Element springt, sollte intuitiv und chronologisch nach Ihrer Seitenstruktur sein. Die Nutzer:innen sollten sich mit Hilfe der Tabulator-Taste problemlos durch Ihre Webseite navigieren können.
3. Tastaturfallen vermeiden: Stellen Sie sicher, dass Nutzer:innen nicht in bestimmten Bereichen Ihrer Website “gefangen” bleiben, wenn sie die Tastatur zur Navigation verwenden. Jedes Element, das man mit Tab erreicht, sollte man auch mit Shift-Tab wieder zurück navigieren können.
4. Ungewollte Fokus- und Kontextänderungen verhindern: Wenn ein Element auf Ihrer Webseite fokussiert ist, sollten keine unvorhersehbaren Veränderungen im Fokus oder Kontext auftreten. Vermeiden Sie automatische Weiterleitungen oder Pop-ups, die ohne Zutun der Benutzer:innen auftreten.
5. “tabindex”-Attribut verwenden: Mit dem “tabindex”-Attribut können Sie die Reihenfolge anpassen, in der Elemente bei der Tastaturnavigation fokussiert werden.
6. “accesskey”-Attribut verwenden: Mit dem “accesskey”-Attribut können Sie individuelle Tastaturkürzel für bestimmte Elemente auf Ihrer Webseite festlegen. Dies kann die Navigation mit der Tastatur erleichtern und beschleunigen.

Tools für die Prüfung und Entwicklung barrierefreier Websites

Es gibt verschiedene Barrierefreiheits-Tools, die prüfen, inwiefern Ihre Website bereits barrierefrei ist und wo gegebenenfalls noch Verbesserungspotenziale bestehen.

Vorab: Bitte beachten Sie, dass sich die Preise und Funktionen der Tools verändern können und es am besten ist, die Website des jeweiligen Tools für aktuelle Informationen zu besuchen.

Außerdem sind die Prüftools nach aktuellem Stand noch nicht in der Lage, wirklich alle Barrieren zu identifizieren (auch wenn die Hersteller:innen gerne etwas anderes behaupten). In der Regel prüfen die Tools nur vereinzelte URLs und versagen vor allem an jenen Stellen, an denen Kontext und menschliche Interpretation gefragt sind. Eine zusätzliche manuelle Prüfung ist daher unverzichtbar, wenn Sie wirklich sicher sein wollen, dass Ihre Website zu 100% barrierefrei ist.

In unserem Beitrag “Barrierefreiheit leicht gemacht? Was KI und andere Tools leisten können” gehen wir kritisch und im Detail darauf ein, was mit Barrierefreiheitstools bisher wirklich möglich ist und wo die Grenzen liegen.

Prüftools für Webstandards und Barrierefreiheit 

Beim Prüfen der Barrierefreiheit und Einhaltung von Webstandards stehen verschiedene Tools zur Verfügung. Hier sind einige davon:

1. W3C Markup Validation Service: Dieses kostenlose Tool prüft HTML- und XHTML-Dokumente auf Konformität zu Webstandards. Das Tool bietet außerdem auch einen eigenen LinkChecker, mit dem Sie Ihre Website auf tote Links überprüfen können.
   Der Validator überprüft allerdings nur die syntaktische Korrektheit des Markups, also ob der Code den Spezifikationen entspricht. Er kann jedoch nicht beurteilen, ob der Code semantisch korrekt ist, also ob die HTML-Elemente sinnvoll und richtig verwendet werden. Auch auf Barrierefreiheit wird nicht geprüft.
   Das Tool eignet sich demnach, um die syntaktische Korrektheit und Einhaltung von Standards sicherzustellen. Es sollte allerdings in Verbindung mit ergänzenden Tools und der Einschätzung von Expert:innen genutzt werden, um alle Aspekte der Qualitäts- und Barrierefreiheitsprüfung abzudecken.

2. WAVE (Web Accessibility Evaluation Tool): Ein kostenloses Tool, das von WebAIM entwickelt wurde, um Barrierefreiheits- und WCAG-Fehler zu identifizieren. Die Ergebnisse werden dabei in verschiedene Kategorien – Fehler, Kontrastfehler, Warnungen, Funktionen, Strukturelemente und ARIA – unterteilt. Auch wenn WAVE die Nutzer:innen unterstützt, indem es viele potenzielle Probleme mit der Barrierefreiheit identifiziert, betonen auch die Hersteller:innen von WAVE selbst, dass ihr Tool keine manuelle Prüfung ersetzt. Es sollte nur ergänzend genutzt werden.
   
3. Google Lighthouse: Google Lighthouse ist ein automatisiertes Open-Source-Tool zur Verbesserung der Qualität von Webseiten, einschließlich Prüfungen der Barrierefreiheit. Lighthouse führt verschiedene Audits durch, die verschiedene Aspekte (z.B. Performance, Barrierefreiheit, SEO) einer Website bewerten und gibt detaillierte Berichte und Vorschläge zur Verbesserung.
   Ebenso wie die anderen beiden Tools, ersetzt es keine manuelle Überprüfung durch Expert:innen. 

All diese Tools eignen sich zumindest für einen ersten Test, um herauszufinden, an welchen Stellen Handlungsbedarf besteht.
Für eine professionelle und wirklich zuverlässige Einschätzung sollten Sie lieber eine erfahrene Agentur hinzuziehen. Ergänzend können Sie dann zu einem professionellen Test wie dem BIK BITV- / WCAG-Test (Web) greifen. Nur von nicht-vollautomatisierten Tests erhalten Sie zuverlässige Ergebnisse. 

Jetzt loslegen! Wir machen Ihre Website barrierefrei!

Was kostet eine barrierefreie Website?

Die Kosten für eine barrierefreie Website können stark variieren, da sie von vielen Faktoren abhängen, darunter:

• Größe und Komplexität der Website
• Technische Ausgangslage (Einwandfreies HTML, Aktualität des CMS etc.)
• Genutztes CMS
• Webdesign (falls das (Corporate) Design der Website für Barrierefreiheit nicht günstig ist, müssen gegebenenfalls weitere Anpassungen vorgenommen werden. Das kostet zusätzliche Ressourcen und Zeit)

Ist Ihre Website bereits relativ barrierearm und es müssen nur wenige Anpassungen vorgenommen werden, spiegelt sich das deutlich im Preis. Ebenso wie bei einer großen und umfangreichen Seite mit einem deutlich höheren Zeit- und somit auch Kostenaufwand gerechnet werden muss, als bei einer kleinen Website mit nur wenigen Unterseiten.

Eine erste Abschätzung und Analyse sind wichtig, denn erst dann lässt sich abschätzen, wie optimierungsbedürftig Ihre Website ist. Aus den nötigen Anpassungen ergeben sich dann die konkreten Kosten.

Bei einer gut gepflegten Website in einem modernen CMS wird eine barrierefreie Lösung (in der Regel) einmal implementiert, die Arbeit kann dann für die gesamte Website übernommen werden. In einem modernen CMS wie TYPO3 gibt es auch zahlreiche Features und Extensions, die es leichter machen, eine Website barrierefrei zu gestalten.

Laufende Kosten und regelmäßige Check-Ups

Auch nach der erfolgreichen Umsetzung einer barrierefreien Website fallen laufende Kosten an. Diese beinhalten regelmäßige Wartungen und Updates, um sicherzustellen, dass die Barrierefreiheit aufrechterhalten bleibt. Technologien und Standards ändern sich stetig, daher sind regelmäßige Check-Ups notwendig.

Es ist außerdem wichtig, dass wirklich alle im Projektteam verstehen, warum Barrierefreiheit wichtig ist. Mit regelmäßigen Schulungen sorgen Sie dafür, dass alle Beteiligten, von den Programmierer:innen über die Redakteur:innen bis hin zu den Projektleiter:innen das entsprechende Wissen haben und auch bei Änderungen der Richtlinien stets auf dem neuesten Stand bleiben. Mit den Schulungen sind ebenfalls zusätzliche regelmäßige Kosten verbunden. 

Beispiele für erfolgreiche barrierefreie Websites

1. Apple

Apple setzt sich in Sachen digitale Barrierefreiheit vorbildlich ein. Sowohl die Website als auch der Webshop von Apple sind barrierefrei gestaltet und auch die Apple-Geräte selbst bieten viele barrierefreie Funktionen.

Zum Beispiel verfügen das iPhone und MacBook über eingebaute Screenreader, die durch das Tastenkürzel CMD+F5 aktiviert werden können.

Darüber hinaus können Apple-Geräte Texte vorlesen, die Typografie dynamisch anpassen, Kontrastpräferenzen speichern und sogar komplett per Sprachsteuerung bedient werden.

Eine Übersicht über die barrierefreien Funktionen der Apple-Geräte finden Sie hier: Artikel von Apple zur Barrierefreiheit.

2. W3C

Das kommt zwar wenig überraschend, aber natürlich ist auch die Website des World Wide Web Consortium barrierefrei gestaltet.

Sämtliche Standards, wie eine semantische HTML-Struktur, ein barrierefreies Kontrastverhältnis sowie eine klare und verständliche Gliederung werden eingehalten. 

3. Eurowings

Eurowings ist ein gutes Beispiel für eine barrierefreie Website. Die Website ist intuitiv nutzbar und sehr übersichtlich gestaltet. Weiteres Plus: Der Slider auf der Startseite lässt sich stoppen. Laut den WCAG 2.2.2 müssen Animationen, die 1. automatisch starten, 2. länger als fünf Sekunden gehen und 3. parallel weiteren Inhalten gezeigt werden (z.B. Text auf den Slides) pausierbar sein.

Fazit

Barrierefreie Websites sind nicht nur eine ethische Verpflichtung, sondern auch ein wichtiger Schritt, um die Zugänglichkeit des Internets für alle zu gewährleisten. Während die Umsetzung von Barrierefreiheitsstandards wie den WCAG zunächst vielleicht herausfordernd erscheint, bietet sie langfristig zahlreiche Vorteile sowohl für Website-Betreiber:innen als auch für die Nutzer:innen.

Schon bald ist die Barrierefreiheit auf Websites für viele Unternehmen sogar ein Muss, um den rechtlichen Anforderungen gerecht zu werden und mögliche Diskriminierungsklagen sowie hohe Bußgelder zu vermeiden.

Die Barrierefreiheit auf Websites ist ein kontinuierlicher Prozess, der fortlaufende Überprüfung, Anpassung und Verbesserung erfordert. Indem Unternehmen und Entwickler:innen sich verpflichten, die Barrierefreiheit im Web zu fördern, können sie dazu beitragen, das Internet zu einem inklusiveren und zugänglicheren Ort für alle zu machen.