Barrierefreie Inhalte erhöhen deine Chancen, mehr Menschen zu erreichen, und stellen sicher, dass du niemanden ausschließt. Gleichzeitig verbessert die Fokussierung auf Barrierefreiheit auch deine SEO-Performance. In diesem Leitfaden zeige ich dir, wie Barrierefreiheit und SEO bei der Erstellung deiner Webinhalte Hand in Hand gehen. Das findest du in diesem Artikel:

Inhaltsverzeichnis

Warum ist Barrierefreiheit mehr als nur ein „nettes Extra”?

Die Weltgesundheitsorganisation berichtet, dass weltweit über 1,3 Milliarden Menschen, also 16 % der Weltbevölkerung, mit einer Behinderung leben.

Für Menschen mit Behinderungen bedeuten Probleme mit der Barrierefreiheit, dass viele Websites frustrierend oder sogar unbenutzbar sind.

Die gute Nachricht ist, dass du etwas dagegen tun kannst! Der aktuelle WebAIM Million Report zeigt, dass die größten Probleme bei der Barrierefreiheit mit den Inhalten von Websites zusammenhängen. Hier kommst du ins Spiel.

Hier sind einige Ergebnisse aus dem Bericht:

81 % der Homepages haben einen geringen Textkontrast
54,5 % der Bilder haben keinen oder nur einen schlechten Alt-Text
48,6 % der Formulare haben keine Beschriftungen
44,6 % der Links geben nicht an, wohin sie führen

Um diese Probleme zu lösen, ist es hilfreich, die WCAG-Richtlinien zu kennen.

WCAG: Dein Kompass für Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG) sind dein grundlegender Rahmen. Die wichtigsten Prinzipien sind:

Wahrnehmbar: Kann jeder deine Inhalte verstehen? Beispiel: Ein Podcast braucht ein Transkript für Gehörlose.
Bedienbar: Kann jeder auf deiner Website navigieren? Beispiel: Alle Funktionen müssen über die Tastatur bedienbar sein.
Verständlich: Ist klar, was du sagen willst? Beispiel: Du erklärst komplexe Fachbegriffe.
Robust: Funktioniert es mit verschiedenen Technologien? Beispiel: Deine Website läuft sowohl auf dem neuesten iPhone als auch auf älteren Android-Geräten.

Die WCAG 2.2 haben drei Stufen – stell dir diese wie Medaillen vor:

Stufe A: Bronze – das absolute Minimum
Stufe AA: Silber – der Standard, den die meisten Menschen anstreben sollten
Stufe AAA: Gold – das Beste für höchste Barrierefreiheit

Für die meisten Websites ist Stufe AA der richtige Weg. Dies ist auch die Stufe, die die Europäischen Barrierefreiheitsrichtlinie seit Juni 2025 verlangt.

Was das Barrierefreiheitsstärkungsgesetz (BFSG) für dich bedeutet

Seit dem 28. Juni 2025 gibt es in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Dieses Gesetz ist für viele Menschen wichtig. Bestimmte Firmen müssen ihre digitalen Angebote wie Websites, Online-Shops, Apps oder Buchungssysteme so gestalten, dass sie für alle Menschen gut nutzbar sind.

Betroffen sind u. a.:

Firmen, die digitale Dienste für Privatpersonen anbieten
Menschen, die Online-Shops oder Selbstbedienungs-Webseiten haben
Firmen, die mehr als 10 Mitarbeitende haben oder mehr als 2 Millionen Euro im Jahr verdienen

Aber auch wenn dein Unternehmen (noch) nicht direkt betroffen ist: Es lohnt sich, Barrierefreiheit früh mitzudenken. Das lohnt nämlich nicht nur aus rechtlicher Sicht, sondern auch weil es deine Inhalte besser macht. Und du mehr Menschen erreichst.

Keine Sorge: Du musst nicht alle Regeln auswendig kennen, um loszulegen.

Konzentrier dich zunächst darauf, mit deinen Mitteln deine Inhalte für möglichst viele Menschen zugänglich zu machen. Dabei helfen dir praktische Tools und Checklisten.

Typografie, die allen hilft

Beginnen wir mit einem wichtigen Element. Eine gute Typografie macht den Unterschied zwischen überfliegen und bis zum Ende lesen. Hier ein paar Dinge, die du wissen solltest:

Schriftgröße: Mindestens 16px für den Haupttext. Kleinere Schriftarten sind anstrengend zu lesen und schrecken Nutzer ab.
Zeilenabstand: 1,5-mal so groß wie die Schriftgröße. Macht den Text luftiger und leichter lesbar.
Zeilenlänge: 50–75 Zeichen sind ideal – etwa die Breite eines Smartphones im Hochformat.
Kontrast: Mindestens 4,5:1 zwischen Text und Hintergrund (WCAG AA-Standard).
Ausrichtung: Linksbündig mit Leserichtung von links nach rechts.
Schriftart: Verwende bekannte Schriftarten wie Arial oder Open Sans. Mit solchen Schriftarten sind ähnliche Buchstaben leicht zu unterscheiden.

Die WCAG selbst erwähnt die Schriftgröße im Zusammenhang mit dem Kontrast, auf den ich später noch näher eingehen werde. Die Richtlinien empfehlen außerdem die Einbindung von „skalierbarem” Text. Das bedeutet, dass Nutzer die Textgröße um bis zu 200 % mit den Standardfunktionen des Browsers vergrößern können sollten, ohne dass Inhalte oder Funktionen verloren gehen. Da du das vielleicht nicht selbst oder sofort umsetzen kannst, ist es eine gute Idee, mit einer minimalen Schriftgröße zu beginnen.

Ein kurzer Exkurs zu variablen Schriftarten

Variable Schriftarten machen dein Design flexibler und effizienter. Sie haben viele Vorteile:

Mehr Gestaltungsfreiheit: Du oder deine Designer können die Schriftstärke, Breite und Neigung genau anpassen, und das stufenlos. So stimmst du dein Design perfekt ab.
Bessere Geschwindigkeit: Eine einzige Schriftdatei (anstatt vieler separater Dateien) lädt schneller (und wenn du sie lokal hostest, passt das auch zur DSGVO).
Responsive: Variable Fonts passen sich an verschiedene Bildschirmgrößen und Auflösungen an. Dadurch ist dein Text auf vielen Geräten gut lesbar.
Für alle zugänglich: Diese Fonts sind anpassungsfähig und verbessern die Zugänglichkeit. Nutzer können zum Beispiel reinzoomen oder den Kontrast stärker einstellen.
Gleichbleibender Markenauftritt: Mit diesen Schriftarten bleibt dein Markenbild über alle Medien und Kanäle hinweg einheitlich.

Struktur – der rote Faden

Neben der Schriftart ist auch der Aufbau deiner Inhalte super wichtig. Das hilft deinen Nutzern, Screenreadern und Suchmaschinen. Eine klare Struktur macht es leichter, sich zurechtzufinden, und hilft allen, deine Inhalte zu verstehen.

Stell dir deine Überschriften wie Wegweiser vor:

H1: Dein Haupteingang – den gibt’s nur einmal
H2/H3: Hauptabschnitte und wichtige Unterabschnitte
H4-H6: Detaillierte Gliederung, wo es nötig ist

Das sind die vier wichtigsten Regeln für Überschriften:

Lass keine Ebenen aus (also nicht direkt von H1 zu H4 springen)
Erst die Struktur, dann der Stil
Füge nach jeder Überschrift relevante Inhalte ein
Die wichtigsten Wörter kommen zuerst (z. B. „Barrierefreiheit erklärt” statt „Erklärung der Barrierefreiheit”)

Eine klare Struktur mit hilfreichen Überschriften ermöglicht es deinen Lesern, Informationen schnell zu finden. So stellst du sicher, dass deine wichtigsten Botschaften auch ankommen.

Diese Struktur ist auch für Screenreader wichtig. Schauen wir uns als an, wie diese funktionieren.

Bildschirmleseprogramme verstehen

Screenreader sind wie du: Sie brauchen eine klare Struktur mit guten Überschriften. Wenn deine Überschriften logisch aufgebaut sind, finden blinde und sehbehinderte Leute leichter, was sie suchen.

Barrierefreiheit und SEO gehen Hand in Hand. Gut strukturierte Inhalte mit relevanten Schlüsselwörtern in den Überschriften verbessern beides. Das kann auch deine Platzierung in Suchmaschinen verbessern. Es gibt neben Überschriften noch ein paar andere einfache Dinge, die Screenreader-Nutzer*Innen helfen.

Die aktuelle WebAIM-Umfrage hat gezeigt, was eine Website besonders benutzerfreundlich macht:

Für 71,6 % der Nutzer ist eine klare Hierarchie der Überschriften die wichtigste Art, sich auf einer Seite zurechtzufinden.
Ein aussagekräftiger Alt-Text (gehört zu den sechs wichtigsten Barrierefreiheitsfaktoren).
Logische Tabulatorreihenfolge (einer der fünf wichtigsten Faktoren für Nutzende)

Diese Zahlen zeigen, dass du mit nur wenigen gezielten Anpassungen viel erreichen kannst. Hier sind die wichtigsten Punkte, die du beachten solltest:

Beschreibe Bilder immer mit ALT-Text. Dieser Text sollte die wichtigsten Infos enthalten, die das Bild vermittelt, nicht nur Wörter wie „Grafik”. Frag dich selbst: Wie würdest du dieses Bild jemandem am Telefon beschreiben?
Mach deine Links klar: „Hier klicken” hilft niemandem weiter. Besser: „Hier klicken für eine Wegbeschreibung”.
Definiert eure Überschriften klar, wenn ihr eure Tabellen strukturiert. Sonst wissen Screenreader nicht, was wo ist.

Probiert es selbst aus:

Installier dir NVDA (kostenloser Screenreader, den nutzen 37,7 % der Leute).
Mach die Augen zu.
Versuch, dich auf deiner Seite zurechtzufinden.

Profi-Tipp: Teste deine Seite mit verschiedenen Screenreadern und Browsern. Da gibt es manchmal Unterschiede. So machst du deine Inhalte noch zugänglicher für alle.

Ein anderer Bereich, der Screenreadern oft Schwierigkeiten bereitet, sind Formulare. Schauen wir uns an, wie du sie barrierefreier gestaltest.

Formulare barrierefrei gestalten

Die WebAIM Screen Reader Survey hat ergeben, dass komplexe Formulare ein großes Problem für Screenreader-Nutzende sind. Sie sind oft der Punkt, an dem Nutzer mit deiner Website interagieren müssen – und leider auch der Punkt, an dem viele nicht weiterkommen.

Stell dir vor, du füllst ein Formular aus und weißt nicht, was du wo eintragen sollst. Screenreader-User fühlen sich bei schlecht gestalteten Formularen ähnlich verloren. Labels sind hier der Schlüssel. Sie zeigen an, welche Informationen in die einzelnen Eingabefelder gehören.

Wenn etwas schief geht, zeig klare Fehlermeldungen an. „Eingabe ungültig” ist sehr frustrierend, wenn Nutzende nicht sehen, wo das Problem ist.

Zusammenfassend sind folgende Punkte wichtig:

Klare Beschriftungen

Jedes Feld braucht eine Beschriftung. Beschreibe genau, was Besuchende dort eintragen sollen. Beispiel: Ein Feld zur Eingabe des Namens beschriftest du mit „Name”.
Die Beschriftung muss direkt über dem Eingabefeld stehen. So ist klar, welche Beschriftung zu welchem Feld gehört. Das erhöht die Benutzerfreundlichkeit.
Du musst die Namen technisch mit den Feldern verbinden Im Formular muss jede Beschriftung mit dem entsprechenden Eingabefeld verknüpft sein. Dafür benutzt du das „for“-Attribut. So wird sichergestellt, dass durch Klicken auf die Beschriftung das Eingabefeld aktiviert wird. Das hilft allen, die unterstützende Technologien nutzen, beim Navigieren und Ausfüllen der Formulare.
Verwende aria-required=‚true‘ für Pflichtfelder. Das zeigt unterstützenden Technologien, dass dieses Feld Pflicht ist, und hilft den Nutzern zu verstehen, welche Felder sie nicht leer lassen dürfen.

Fehlerbehandlung

Eine gute Fehlerbehandlung hilft, Fehler in Formularen mit minimalem Aufwand zu beheben. Hier sind die wichtigsten Punkte, die du beachten solltest:

Zeige Fehler direkt im Feld an. Wenn Nutzende einen Fehler machen, zeig die Fehlermeldung neben oder innerhalb des entsprechenden Feldes an. Das hilft zu verstehen, was falsch ist.
Erkläre, wie der Fehler behoben werden kann. Gib klare Anweisungen zur Korrektur von Fehlern. Zum Beispiel: „Bitte gib eine gültige E-Mail-Adresse ein (example@domain.com)“.
Stell sicher, dass Fehlermeldungen für Screenreader erkennbar sind. Fehlermeldungen müssen für assistive Technologien zugänglich sein. Nutze Attribute wie „aria-describedby“, um die Fehlermeldung mit dem Feld zu verbinden. So können Screenreader die Meldung klar ansagen.

Gruppierung

Wenn du Felder, die zusammengehören, gruppierst, hilfst du Nutzer*Innen, die Struktur deines Formulars besser zu verstehen. Hier sind ein paar Tipps dafür:

Gruppiere verwandte Felder (z. B. mit „fieldset” und „legend”). Du kannst „fieldset”-Elemente einfügen, um verwandte Eingabefelder zu gruppieren. Dann fügst du eine „legend” hinzu, die beschreibt, worum es in dieser Gruppe geht. Das macht dein Formular nicht nur für alle besser zugänglich, sondern sieht auch besser aus.
Füge klare Überschriften für jeden Abschnitt ein: Verwende aussagekräftige Überschriften für jeden Abschnitt des Formulars. Dies hilft Nutzer*Innen, die benötigten Infos schnell einzugeben.
Achte auf logische Tabulatorreihenfolge: Nutzende sollten mit der Tabulatortaste in einer sinnvollen Reihenfolge durch dein Formular navigieren können. Diese Reihenfolge sollte dem visuellen Aufbau des Formulars entsprechen.
Unterstütze das automatische Ausfüllen: Nutze Autocomplete-Attribute, um die Bedienung für die Nutzer noch einfacher zu machen.

Dieses Vorgehen ist entscheidend, damit Formulare für alle zugänglich sind – es erhöht die Benutzerfreundlichkeit und hilft, Barrierefreiheitsstandards zu erfüllen.

Testtipp:

Füll dein Formular nur mit der Tastatur aus.
Teste es mit einem Screenreader wie NVDA.
Überprüfe, ob das System die Fehlermeldungen vorliest.
Stelle sicher, dass die Tabulatorreihenfolge logisch ist.
Verwende Tools wie WAVE, um eine umfassendere Überprüfung durchzuführen.

Wichtig: Diese Anpassungen helfen Menschen mit Behinderungen. Und sie verbessern die Benutzerfreundlichkeit für alle Besucher deiner Website. Wenn du die Formulare nicht selbst anpassen kannst, teile diese Anforderungen deinem Entwicklerteam mit. Viele Formular-Plugins für beispielsweise WordPress, sind meist schon barrierearm entwickelt.

Ein kurzer Blick auf ARIA (Accessible Rich Internet Applications)

ARIA ist eine Reihe von Attributen, die du zu HTML-Elementen hinzufügen kannst. Damit verbesserst du die Barrierefreiheit deiner Webinhalte. Dies ist besonders wichtig für dynamische Inhalte und fortgeschrittene Benutzeroberflächen. ARIA hilft, die Lücke zwischen Standard-HTML und den Bedürfnissen von Nutzer*Innen mit Behinderungen zu schließen. ARIA-Tags liefern Kontext und Informationen für assistive Technologien wie Screenreader.

Mit ARIA-Attribute kannst du zum Beispiel den Status eines Elements anzeigen. Sie können zeigen, ob ein Menü aufgeklappt oder geschlossen ist. Außerdem kannst du mit diesen Elemente Beschriften, die keinen sichtbaren Text haben. Durch die richtige Verwendung von ARIA können Entwickler die Barrierefreiheit von Websites verbessern. Als Webseite-Betreiber*In, Content- oder SEO-Experte kannst du das vielleicht nicht selbst machen, aber du kannst deine Entwickler oder Webmaster darauf ansprechen.

Links: Die Wegweiser deiner Website

Formulare sind nicht die einzigen interaktiven Elemente auf deiner Website. Gut gestaltete Links sind ebenfalls wichtig.

Der WebAIM Million Report sagt, dass 44,6 % der Links nicht zugänglich sind. Das liegt meist daran, dass ihnen ein klarer Kontext fehlt. Das ist nicht nur frustrierend für Nutzende von Screenreadern, sondern schadet auch deiner SEO.

So erstellst du Links, die allen helfen:

Sinnvoller Linktext („Barrierefreiheitsrichtlinien lesen” statt „hier klicken”)
Erkläre, ob Links in einem neuen Tab oder Fenster geöffnet werden oder einen Download starten („Öffnet in neuem Tab”, „PDF, 2 MB”)
Doppelte visuelle Hervorhebung (Farbe + Unterstreichung)
Logische Gruppierung verwandter Links
Einheitliches Link-Design auf der gesamten Website
Verwende Aria-Labels für Links, die nur aus Symbolen bestehen. So verstehen Screenreader, wofür der Link ist.

Lesbarkeit, die überzeugt

Lesbarkeit ist der Schlüssel, damit deine Inhalte für alle zugänglich sind. Ein wichtiges Tool ist der Flesch-Reading-Score oder Flesch-Kincaid-Grad-Level. Der erste bewertet die Lesbarkeit deiner Textinhalte auf einer Skala von 0 bis 100. Der zweite zeigt die entsprechende US-Schulklasse an.

Beide Werte helfen dir dabei, zu beurteilen, ob deine Inhalte deine Zielgruppe erreichen.

Hier sind die wichtigsten Richtlinien:

70–90 Punkte: Ideal für das Web, entspricht etwa der 6. bis 8. Klasse
60–70 Punkte: Gut für die Geschäftskommunikation
Unter 60 Punkte: Besser überarbeiten, außer bei Fach- oder technischen Inhalten

Hier ein konkretes Beispiel:

Nicht gut:

❌ Die systematische Umsetzung optimierter Inhaltsstrukturen maximiert die Benutzererfahrung erheblich.

Bewertung: 0 – Das versteht kaum jemand!

Yay:

✅ Gute, strukturierte Texte machen Leser glücklich. Sie finden schnell, was sie suchen.

Bewertung: 73,3 – Perfekt für das Web!

Profi-Tipp: Tools wie Hemingway Editor bewerten deinen Text. Aber denk dran: Die Bewertung ist nur eine Richtlinie, kein Gesetz. Manchmal brauchst du Fachbegriffe oder komplexere Sätze – erkläre sie einfach direkt.

Mit diesen Techniken wird dein Text leichter verständlich:

Wichtige Infos am Anfang (umgekehrte Pyramide)
Kurze Sätze mit maximal 21 Wörtern
Absätze mit 2–3 Sätzen gruppieren
Fachbegriffe beim ersten Erscheinen erklären
Aktive statt passive Formulierungen verwenden
Pro Absatz einen Gedanken ausdrücken

Denk daran, dass eine einfache, klare Sprache nicht nur dem Durchschnittsleser hilft. Du machst damit deine Inhalte auch für Menschen mit kognitiven oder Lernbeeinträchtigungen zugänglicher. Auf diese Weise erreichst du ein breiteres Publikum und verbesserst gleichzeitig die Barrierefreiheit deiner Website.

Keywords mit natürlicher Sprache kombinieren

Gute Texte sollten natürlich klingen, auch wenn sie für Suchmaschinen optimiert sind. Leider klingen viele keywordoptimierte Inhalte holprig und sind schwer zu lesen. Das frustriert nicht nur deine Leser, sondern beeinträchtigt auch die Barrierefreiheit.

So bringst du SEO-Aspekte und Lesbarkeit in Einklang:

Verwende Synonyme und verwandte Begriffe. Anstatt „Barrierefreiheit” zehnmal zu wiederholen, verwende auch Begriffe wie „inklusives Design”.
Verteile Keywords. Die besten Stellen sind Überschriften, der erste Absatz und die Zusammenfassung.
Denke in Themen, nicht nur in Keywords. Google verknüpft „barrierefrei”, „Screenreader” und „WCAG”.

Ein praktisches Beispiel:

Nein:

❌„Barrierefreie Websites für barrierefreie Websites erstellen, die barrierefrei sind”.

Gut:

✅„Barrierefreie Websites gestalten, die jeder nutzen kann, unabhängig von seinen/ihren Bedürfnissen”.

Profi-Tipp: Lies deinen Text laut vor. Stolperst du über Wörter? Deine Leser werden das auch tun. Gutes Schreiben klingt natürlich – für Menschen und für Suchmaschinen.

Eine ausgewogene Keyword-Strategie unterstützt sowohl deine SEO – als auch deine Barrierefreiheitsziele. Die Verwendung abwechslungsreicher und kontextbezogener Begriffe hilft sowohl Suchmaschinen als auch Nutzern.

Auch visuelle Aspekte sind für die Barrierefreiheit wichtig. Sprechen wir also über Farbe und Kontraste!

Farbe und Kontrast: mehr als nur schönes Design

Farbe und Kontrast sind nicht nur ästhetische Entscheidungen. Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbenblindheit (Colour Blind Awareness Study). Auch Menschen mit Sehbehinderungen oder schlechten Bildschirmen können davon betroffen sein.

Kontrastverhältnisse klingen kompliziert, sind aber einfach erklärt: Je größer der Kontrast zwischen Text und Hintergrund, desto besser. Denk an weißen Text auf hellgrauem Hintergrund – schwer zu lesen, oder? Genau das messen Kontrastverhältnisse.

WCAG 2.1 gibt klare Richtlinien für Kontrastverhältnisse vor:

Stufe AA (die wir alle anstreben sollten)

4,5:1 für normalen Text: Gut lesbar, ähnlich wie schwarzer Text auf weißem Hintergrund.
3:1 für große Überschriften: Bietet mehr Flexibilität, da größere Schriftarten die Lesbarkeit verbessern.

Stufe AAA (die Goldmedaille)

7:1 für höchste Barrierefreiheit und normale Schriftarten: Höchster Kontrast für beste Lesbarkeit
4,5:1 für große Schriftarten
3:1 für Benutzeroberflächenkomponenten und grafische Objekte

Anstelle komplizierter Berechnungen:

Verwende den WebAIM Colour Contrast Checker
Teste verschiedene Farbkombinationen
Vermeide Grün- und Rottöne oder grelle Farben
Erstell einen Styleguide mit bewährten Kombinationen

Verwende niemals Farbe allein, um Infos zu vermitteln. Stattdessen:

Ergänze Farben durch klare Symbole oder verstärke sie durch Wörter/Beschriftungen
Verwende zusätzliche Muster oder Formen
Biete Textalternativen an

Profi-Tipp: Mach den Graustufentest – konvertiere deinen Text in Schwarz-Weiß. Wenn du ihn gut lesen kannst, sind deine Kontraste wahrscheinlich in Ordnung.

Bilder und Medien, die jeder erleben kann

Visuelle und audiovisuelle Inhalte machen deine Arbeit lebendig. Sie helfen Menschen, komplexe Themen zu verstehen. Aber nicht jeder kann Bilder sehen oder Videos hören. Der aktuelle WebAIM Million Report zeigt: Es gibt durchschnittlich 55,6 Bilder pro Homepage, von denen 21,6 % keinen Alt-Text haben. Bei verlinkten Bildern fehlt der Alt-Text bei jedem vierten Bild.

Bilder richtig verwenden

Alt-Text ist dein wichtigstes Tool für barrierefreie Bilder. Die Studie zeigt, dass 14,6 % der vorhandenen Alt-Texte problematisch sind, weil sie nur Wörter wie „Bild“, „Grafik“, „leer“, Dateinamen oder doppelten Text enthalten.

Der Alt-Text sollte eine detaillierte Beschreibung des Bildinhalts und seiner Funktion liefern. Denk dran: Suchmaschinen und Screenreader-Nutzer „sehen“ deine Bilder über diese Beschreibungen.

So machst du Bilder für alle zugänglich:

Aussagekräftige, beschreibende Alt-Texte
- Beschreibe, was auf dem Bild wichtig ist und welche Funktion es hat
- Vermeide allgemeine Beschreibungen wie „Bild“, „Foto“ oder Dateinamen
- Achte besonders auf den Alt-Text für verlinkte Bilder. Hier ist der Kontext besonders wichtig.
Infografiken und Diagramme
- Stell komplexe Infos zusätzlich als Text zur Verfügung.
- Beschreib Trends und Kernbotschaften schriftlich.
- Biete alternative Darstellungen an, z. B. in Tabellenform.
Dekorative Elemente
- Kennzeichne rein dekorative Elemente mit leerem Alt-Text (alt=„“).
- So vermeidest du unnötige Ablenkungen für Screenreader.
Strukturierte Daten
- Verwende Schema-Markup für Bilder und Videos. Das hilft Suchmaschinen, sie zu finden.

Profi-Tipp für Alt-Text:

✅ Gut: „Barista gießt Milchschaum in eine Kaffeetasse und formt ein Herz”

❌ Schlecht: „Bild von Kaffee” oder „coffee-final-02.jpg”

Frag dich bei jedem Bild: Was würde ich jemandem sagen, der das Bild nicht sehen kann? Die Antwort ist dein Alt-Text.

Barrierefreie Video- und Audioinhalte gestalten

Bilder sind der Anfang – doch moderne Websites leben auch von Audio- und Videoinhalten.

Auch hier gilt: Inhalte erfüllen ihren Zweck nur, wenn alle sie nutzen können.

Mit der zunehmenden Bedeutung von Multimedia-Inhalten bleibt Barrierefreiheit ein wichtiges Thema. Die WebAIM-Studie zeigt, dass viele Websites grundlegende Anforderungen an die Barrierefreiheit nicht erfüllen. Wenn Bilder nicht barrierefrei sind, gilt das oft auch für komplexere Medien.

Videos und Audioinhalte wie Podcasts eignen sich hervorragend, um komplexe Themen zu erklären. Aber ohne die richtigen Ergänzungen schließt du viele Menschen aus – und verschenkst gleichzeitig SEO-Potenzial. Eine Studie von Moz zeigt, dass Seiten mit Transkripten durchschnittlich 15 % mehr organischen Traffic haben.

Was du für barrierefreie Video- und Audioinhalte brauchst:

Qualitativ hochwertige Untertitel (keine automatisch generierten oder ohne Nachbearbeitung)
Biete ein textbasiertes Transkript an
Audiobeschreibungen für wichtige visuelle Elemente
Keine schnellen Bildwechsel (max. 3x pro Sekunde)
Stell eine kurze Zusammenfassung des Inhalts bereit
Optional: Gebärdensprache für wichtige Inhalte, wie vorab aufgezeichnete Webinare
Minimier Hintergrundgeräusche

Beachte bei der Auswahl von Video- und Audioplayern Folgendes:

Die Steuerung über die Tastatur muss möglich sein
Klare Start- und Pause-Buttons
Biete eine Geschwindigkeitssteuerung
Keine automatische Wiedergabe

Das Projekt „digital A11y” bietet eine Übersicht über barrierefreie Mediaplayer.

Profi-Tipp: Ein gutes Transkript ist eine Chance! Du kannst es als Blog-Inhalt, für soziale Medien oder als Grundlage für andere Inhaltsformate verwenden.

Multimedia-Inhalte sind nur ein Teil des Puzzles. Genauso wichtig ist es, dass alle Besucher deine Website mit einer Maus, einer Tastatur oder einer Sprachsteuerung navigieren können.

Navigation und Orientierung

Stell dir vor, du betrittst ein großes Gebäude ohne Wegweiser – frustrierend, oder? Genauso geht es Leuten auf schlecht strukturierten Websites. So machst du die Navigation barrierefrei:

Klare Struktur:

Ein einheitliches Menü auf allen Seiten hilft Nutzer*Innen zu verstehen, wo sie sich befinden und wohin sie als Nächstes gehen können.
Füge Breadcrumbs ein, die den aktuellen Pfad anzeigen. So sehen User*Innen, wo sie sich gerade in der Website-Hierarchie befinden. Breadcrumbs helfen auch, einfach zu vorherigen Seiten zurückzunavigieren.
Stell einen Link „Zum Hauptinhalt springen” für Tastaturbenutzende bereit. So können sie sich wiederholende Links überspringen und direkt zum Hauptinhalt gelangen.

Tastaturnavigation

Eine sichtbare Fokusanzeige hilft Tastaturbenutzenden bei der Navigation durch interaktive Elemente. Die Anzeige zeigt an, welches Element aktuell ausgewählt ist.
Eine logische Tabulatorreihenfolge stellt sicher, dass Benutzende auf deiner Website auf sinnvolle Weise navigieren können. Diese Tabulatoren sollten deinem visuellen Layout folgen.
Aktivier Tastaturkürzel für wichtige Funktionen. So können Besucher*Innen schnell Aktionen ausführen, ohne ewig durch Menüs zu navigieren.

Mobile Navigation

Große und leicht zu klickende Schaltflächen sind wichtig (mindestens 44 x 44 Pixel). So können deine Website-Besucher*Innen auch auf kleinen Bildschirmen problemlos mit Elementen interagieren.
Achte auf ausreichend Platz zwischen den Links, um versehentliche Klicks zu vermeiden. Dies ist besonders wichtig für Nutzer mit kognitiven Beeinträchtigungen, verbessert aber auch die Benutzerfreundlichkeit für alle.
Ein Hamburger-Menü mit einer klaren Beschriftung ermöglicht einfaches Auffinden der Navigation auf mobilen Geräten.

ARIA-Attribute für verbesserte Barrierefreiheit

Beschrifte den aktuellen Menüpunkt mit aria-current=“page”. Dies zeigt an, welche Seite gerade angezeigt wird.
Verwende aria-label für Links ohne sichtbaren Text. Dies liefert Kontext für Screenreader.
Verwende „aria-expanded” für erweiterbare Menüs. Damit teilst du mit, ob das Menü gerade geöffnet oder geschlossen ist.

Testtipp:

Leg die Maus beiseite und navigiere nur mit der Tabulatortaste durch deine Website. Kannst du alles erreichen? Kannst du immer sehen, wo du dich befindest? Eine gute Navigation ist wie ein zuverlässiger Reiseführer – sie sorgt dafür, dass niemand sich verirrt.

Aber wie kannst du sicherstellen, dass all diese Maßnahmen auch wirklich funktionieren? Hier kommen regelmäßige Tests ins Spiel.

Content-Audit: systematische Überprüfung und Verbesserung

Ein gründliches Content-Audit hilft dir, Barrieren zu erkennen und zu beseitigen. Am besten gehst du dabei in drei Schritten vor:

Technische Analyse
- Verwende WAVE oder Google Lighthouse für einen ersten Überblick
- Überprüfe systematisch Kontraste, Alt-Texte und die Überschriftenstruktur
- Dokumentiere alle technischen Probleme in einer Tabelle
Überprüfung der Inhalte
- Teste die Lesbarkeit mit dem Hemingway Editor oder einem ähnlichen Tool.
- Überprüfe jeden Textabschnitt auf eine klare Struktur und einen logischen Aufbau.
- Überprüfe Links auf aussagekräftige Beschreibungen.
- Stelle sicher, dass Fachbegriffe erklärt werden.
Praktischer Barrierefreiheitstest
- Navigiere nur mit der Tastatur durch deine Website.
- Verwende einen Screenreader wie NVDA.
- Teste deine Website in verschiedenen Browsern.
- Hole Feedback von Menschen mit unterschiedlichen Bedürfnissen ein.
Automatisierte Tests
- Nutze Tools wie axe DevTools oder WAVE für eine umfassendere Überprüfung
- Verwende diese Tools als Ergänzung zu manuellen Tests, nicht als Ersatz

Zeitplan für regelmäßige Audits:

Monatlich: Schnellcheck der wichtigsten Seiten
Vierteljährlich: Technische Analyse der 50 wichtigsten Seiten
Jährlich: Vollständiges Content-Audit aller aktiven Seiten

Nicht vergessen: Dokumentiere alle Verbesserungen. So kannst du deine Fortschritte sehen und erfolgreiche Änderungen auf andere Bereiche übertragen.

Der Mehrwert barrierefreier Inhalte

Investitionen in Barrierefreiheit zahlen sich in mehrfacher Hinsicht aus. Es gibt zwar keine direkten Ranking-Faktoren für Barrierefreiheit, aber Studien und Erfahrungen zeigen, dass sie hilfreich ist.

Indirekte SEO-Vorteile

Eine verbesserte Benutzererfahrung führt zu längeren Verweildauern.
Eine klarere Struktur erleichtert das Crawling und die Indexierung.
Eine bessere Lesbarkeit reduziert die Absprungraten.

Geschäftliche Vorteile

Erschließung neuer Zielgruppen und Märkte
Reduzierung rechtlicher Risiken
Stärkung der Wahrnehmung deiner Marke als inklusiv

Ein praktisches Beispiel: Eine Studie von SEMRUSH und BuiltWith hat 847 auf Barrierefreiheit fokussierte Domains untersucht. Das Ergebnis: Im Durchschnitt verzeichneten diese Websites einen Anstieg des Gesamttraffics um 12 %. Mehr noch: 73 % der Domains verzeichneten einen Anstieg des organischen Traffics, nachdem sie ihre Barrierefreiheit verbessert hatten.

Wirtschaftliche Bedeutung: Menschen mit Behinderungen haben weltweit eine Kaufkraft von etwa 18 Billionen US-Dollar. Dies unterstreicht das enorme wirtschaftliche Potenzial barrierefreier Websites.

Von den Zahlen zu den nächsten Schritten – legen wir los

Erinnerst du dich noch an die Zahlen aus dem WebAIM Million Report? Sie haben uns gezeigt, womit Menschen täglich auf Websites zu kämpfen haben.

Mit allem, was du gelernt hast, kannst du Folgendes tun, um diese Zahlen zu reduzieren:

81 % der Homepages haben kontrastarme Texte

Liest du gerne hellgrauen Text auf weißem Hintergrund? Ich auch nicht! Und deine Nutzer*Innen auch nicht! Hier sind einige Vorschläge, was du tun kannst:

Verwende einen Kontrastprüfer, um deine Farbkombinationen zu testen
Entscheide dich im Zweifelsfall für dunkleren Text
Informiere andere, wenn du in Entwürfen ein kontrastarmes Design entdeckst

54,5 % der Bilder haben keinen richtigen Alt-Text

Das hast du wahrscheinlich schon selbst erlebt. Die Seite wird einfach nicht geladen, sodass du das Bild nicht sehen kannst. Und der Alt-Text sieht so aus: Nope, da ist nichts. Ärgerlich, oder? Stell dir vor, du erlebst das jeden Tag auf fast jeder Website. Das kannst du tun:

Beschreibe deine Bilder mit einem Alt-Text, als würdest du einem Freund am Telefon erzählen, was auf dem Bild zu sehen ist
Konzentriere dich auf das Wesentliche, z. B. „Diagramm mit Besucherzahlen im 2. Quartal” statt „ein Diagramm mit blauen Linien”
Dekorative Bilder brauchen keinen Alt-Text, aber markiere sie als solche.

48,6 % der Formulare haben keine Beschriftungen

Wir alle haben schon schlechte Online-Formulare erlebt. Der Unterschied ist, dass die meisten Menschen ohne Behinderung sie trotzdem ausfüllen können. Das gilt aber nicht für alle, also achte darauf, dass

jedes Feld einen klaren Zweck hat
füge bei Bedarf hilfreiche Hinweise hinzu
teste deine Formulare nur mit der Tastatur

44,6 % der Links sagen nicht, wohin sie führen

Linktexte wie „hier klicken“ helfen Suchmaschinen-Crawlern nicht weiter. Aber vielleicht ist dir, sowie Laien im Tehma, nicht bewusst, wie wichtig der Link-Text für die Barrierefreiheit ist. Hier sind einige Dinge, die du beachten solltest:

Beschreibender Link-Text
Gruppiere verwandte Links logisch
Informiere, wenn etwas in einem neuen Tab, einem neuen Fenster oder einem Download geöffnet wird
Achte auf ausreichend Platz zwischen den Links, um versehentliche Klicks zu vermeiden

Dein Toolkit für Barrierefreiheit

Hier sind ein paar Tools, die dir beim Erstellen barrierefreier Inhalte helfen:

WebAIM für die Grundlagen
WAVE Browser-Erweiterungen für schnelle Checks
WebAIM Contrast Checker für Farbkombinationen
Hemingway Editor für klares Schreiben. Oder auch Tools wie Wortliga sowie Duden Mentor, LanguageTools etc.
Deine Tastatur zum Testen von Formularen und Navigation

Fang klein an

Denk dran: Du musst nicht alles auf einmal ändern. Und du musst nicht gleich den Goldstandard anstreben. Fang heute mit einer kleinen Sache an und mach dann weiter:

Heute

Überprüfe den Kontrast deines aktuellen Projekts
Denk daran, deinen Alt-Text hinzuzufügen
Gestalte die Links in deinem nächsten Text beschreibend

Diese Woche

Teste ein Formular auf deiner Website mit deiner Tastatur
Probiere WAVE oder ein ähnliches Tool auf einer deiner wichtigsten Seiten aus
Überprüfe die Überschriftenstrukturen

Dieser Monat

Erstelle oder lade eine Barrierefreiheits-Checkliste für dich und dein Team herunter
Teile deine Erkenntnisse mit deinen Kollegen
Plane regelmäßige Barrierefreiheits-Checks

Lerne weiter

Das Internet und die Technologie entwickeln sich schnell weiter, ebenso wie die Standards für Barrierefreiheit. Bleib also auf dem Laufenden über:

Jeder kleine Schritt hilft. Fang also klein an – es geht darum, das Web jeden Tag ein bisschen besser zu machen. Um dir den Einstieg noch einfacher zu machen, habe ich eine Zusammenfassung zu barrierefreien Inhalten erstellt, die du herunterladen und speichern kannst.

Deine Zusammenfassung als praktisches PDF zum Download. (Klick auf Link = Öffnet das PDF)

Hinweis: Diesen Artikel habe ich ursprünglich auf Englisch bei Women in Tech SEO im Knowledge Hub veröffentlicht. Dies ist die angepasste deutsche Version. Hier geht es zum Original: How to create accessible content.

Barrierefreie Inhalte erstellen – „Dein praktischer Leitfaden für SEO und Barrierefreiheit“