Wie zugänglich ist deine Website?

Barrierefrei-Checkliste mit 4 Punkten

Vier Regeln für weniger Barrieren

„Ein Netz für Alle – viel mehr als eine gute Tat!“ So hieß 2004 mein erster Vortrag für die webgrrls. Seitdem gehört Barrierefreiheit für mich zur Planung und Umsetzung von Websites. In meiner Arbeit war die Nachfrage aus der Privatwirtschaft lange gering. Seit dem 28. Juni 2025 macht das Barrierefreiheits-Stärkungsgesetz (BFSG) Barrierefreiheit für bestimmte Angebote auch dort zur Pflicht.

Mich hat lange gestört, wie wenig Aufmerksamkeit das Thema bekam. Auch mit dem deutschen Begriff habe ich mich nie ganz angefreundet: „Zugänglichkeit“ beschreibt für mich unmittelbarer, worum es geht. Bereits 1997 formulierte Tim Berners-Lee, der Erfinder des World Wide Web, den Grundgedanken: Die Stärke des Webs liegt darin, dass alle Menschen Zugang haben – unabhängig von einer Behinderung.

„The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.“

Vielleicht fällt dein Angebot unter das BFSG, vielleicht auch nicht. Eine erste Orientierung bietet dir der BFSG-Kurz-Check. Unabhängig von einer gesetzlichen Pflicht kannst du mit den folgenden vier Regeln häufige Barrieren auf deiner Website erkennen und abbauen. Eine vollständige Prüfung ersetzen sie nicht.

Was du ohne Programmier­kenntnisse selbst prüfen kannst

1. Achte auf ausreichenden Kontrast

Hellgrauer Text auf weißem Hintergrund mag dezent aussehen, lässt sich aber oft schlecht lesen. Ein ausreichender Kontrast hilft Menschen mit eingeschränktem Sehvermögen. Er erleichtert das Lesen auch dann, wenn Sonnenlicht auf den Bildschirm fällt.

Das Kontrastverhältnis beschreibt, wie stark sich die Helligkeit von Text und Hintergrund unterscheidet. Je höher der Wert, desto größer der Unterschied. Für normalen Text verlangen die Web Content Accessibility Guidelines (WCAG), die internationalen Richtlinien für barrierefreie Webinhalte, in der Stufe AA einen Mindestwert von 4,5:1. Bei großer Schrift reicht 3:1: ab 24 CSS-Pixeln bei normaler Schrift oder rund 19 CSS-Pixeln bei Fettschrift. Auch Symbole und grafische Bestandteile, die zum Verständnis notwendig sind, brauchen ausreichenden Kontrast. Hier gilt ein Verhältnis von mindestens 3:1 zu den angrenzenden Farben. Für reine Dekoration gilt diese Vorgabe nicht.

Prüfe besonders die Farben deiner Fließtexte und Links. Die weiter unten genannten Testtools helfen dir dabei.

2. Gliedere deine Inhalte mit Überschriften

Überschriften machen die Struktur eines Textes sichtbar. Damit diese Gliederung auch technisch erkennbar ist, gibt es in HTML, der Auszeichnungssprache für Webseiten, die Überschriftenebenen H1 bis H6. Die Hauptüberschrift deiner Seite erhält die Ebene H1. Für die folgenden Abschnitte verwendest du H2, für deren Unterabschnitte H3. Wähle die Ebene nach der inhaltlichen Gliederung, nicht nach der gewünschten Schriftgröße.

Das hilft auch Menschen, die einen Screenreader nutzen. Diese Software gibt Bildschirminhalte als Sprache oder über eine Braillezeile aus. Mit ihr lassen sich Überschriften gezielt ansteuern, um einen Überblick zu bekommen oder einen Abschnitt zu finden. Im WordPress-Editor kannst du die Ebene im Überschriften-Block auswählen. Nur größer oder fett gesetzter Absatztext bleibt technisch ein Absatz.

Verwende bei Aufzählungen außerdem die Listenfunktion deines Editors. Nummerierte Listen eignen sich etwa für eine Anleitung, bei der die Reihenfolge der Schritte wichtig ist.

3. Gib deinen Bildern passende Alternativtexte

Ein Screenreader kann den Inhalt eines Bildes nicht einfach erkennen. Dafür braucht das Bild einen Alternativtext, kurz Alt-Text. Dieser wird im HTML-Code im alt-Attribut hinterlegt. Beschreibe, welche Information das Bild an dieser Stelle vermittelt. Bei einem Screenshot zu einer Anleitung kann das die gezeigte Einstellung oder Funktion sein. Eine Beschreibung aller sichtbaren Einzelheiten hilft meist weniger.

In WordPress kannst du einen Alternativtext bereits beim Hochladen in die Mediathek eintragen. Prüfe beim Einfügen im Editor, ob er zum jeweiligen Zusammenhang passt. Dasselbe Bild kann in verschiedenen Beiträgen eine andere Aufgabe haben. Reine Schmuckbilder brauchen keine Beschreibung. Sie erhalten ein leeres Alt-Attribut (alt=""), damit Screenreader sie überspringen. Achte darauf, dass das Attribut tatsächlich leer ausgegeben wird und nicht ganz fehlt.

Bei komplexen Grafiken reicht ein kurzer Alt-Text häufig nicht aus. Erkläre die notwendigen Informationen dann zusätzlich im umgebenden Text oder in einer ausführlichen Bildbeschreibung. Eine Bildunterschrift kann dafür ausreichen, wenn sie alle wesentlichen Informationen vermittelt. Alt-Text und Bildunterschrift müssen sich dabei nicht wortgleich wiederholen.

Im Gutenberg-Editor fügst du die Bildunterschrift über das Symbol „Beschriftung hinzufügen“ in der Werkzeugleiste des Bild-Blocks hinzu.

Links sollten im Fließtext als solche erkennbar sein. Eine Unterstreichung macht deutlich, dass sich hinter dem Text ein Verweis verbirgt. Eine andere Farbe allein kann leicht übersehen werden. Auch der Linktext sollte erklären, wohin der Verweis führt. „Cheat-Sheet zur Barrierefreiheit“ ist aussagekräftiger als „hier klicken“. Das hilft besonders dann, wenn jemand per Tastatur oder mit einem Screenreader von Link zu Link springt.

Verwende für Verweise echte Links mit einer hinterlegten Zieladresse. Im HTML-Code sind das <a>-Elemente mit einem href-Attribut. Der Link-Dialog im WordPress-Editor erstellt sie für dich. Eine nachgebaute Klickfunktion per JavaScript bietet nicht automatisch dieselben Möglichkeiten.

Teste auf deiner Website: Kannst du die Links mit der Tastatur erreichen? Drücke die Tab-Taste und beobachte, wie die Auswahl durch die Seite wandert. Du solltest jederzeit sehen können, welcher Link gerade ausgewählt ist. Mit der Eingabetaste lässt er sich öffnen.

Testtools für einen ersten Check

Browser-Erweiterungen helfen dir, typische Barrieren aufzuspüren. Diese beiden nutze und empfehle ich:

  • WAVE für Chrome, Firefox und Edge zeigt unter anderem Kontrastprobleme, die Überschriftenstruktur und fehlende Alternativtexte an.
  • Silktide Toolbar für Chrome bietet neben automatischen Prüfungen auch Simulationen, etwa für Farbsehschwächen, und eine Screenreader-Simulation.

Die Ergebnisse brauchen allerdings einen zweiten Blick. So erkennt ein Tool, dass ein Alt-Text vorhanden ist. Ob er den Bildinhalt im jeweiligen Zusammenhang sinnvoll beschreibt, musst du selbst beurteilen.

Auch die Screenreader-Simulation eignet sich vor allem zum Kennenlernen. Für eine gründliche Prüfung brauchst du einen echten Screenreader, etwa das kostenlose NVDA unter Windows oder VoiceOver, das auf dem Mac bereits installiert ist. Die automatische Prüfung ergänzt also deine eigenen Tests, etwa die Bedienung mit der Tastatur.

Fang mit einem Beitrag an

Mit diesen vier Regeln kannst du häufige Barrieren auf deiner Website abbauen. Einige Änderungen lassen sich direkt im Editor umsetzen. Andere brauchen einen Blick auf die technische Umsetzung. Davon profitiert auch deine Sichtbarkeit: Suchmaschinen und KI-Systeme lesen Überschriften, Alt-Texte und Linktexte ähnlich aus wie ein Screenreader. Mehr Zugänglichkeit hilft deshalb bei Suchmaschinenoptimierung (SEO) und Generativer Engine Optimization (GEO), die Optimierung für KI-Suchen.

Nimm dir zum Einstieg einen Beitrag vor: Prüfe die Kontraste und die Gliederung. Schau dir anschließend die Bilder und Links an. So wird aus den Regeln eine überschaubare Aufgabe, und du merkst, worauf du bei weiteren Beiträgen achten kannst.

Wenn du tiefer einsteigen möchtest, findest du weitere Hinweise in den Unterlagen zu meinem Workshop: Mehr Reichweite – weniger Barrieren: in der Präsentation und im Cheat-Sheet.

Du möchtest deine Website zugänglicher machen und weißt nicht, wo du anfangen sollst? Ich prüfe deine Seite und setze die nötigen Maßnahmen für dich um. Sprechen wir darüber.