Samstag ist es so weit: Barrierefreiheit wird Pflicht (Ausnahmen ausgenommen). Daher bekommst Du von mir heute 10 Tipps, mit denen Du noch Last Minute die Barrierefreiheit auf Deiner Website verbesserst.
Was gilt ab dem 28. Juni 2025?
Vor allem E-Commerce-Websites müssen dann den Vorgaben der Europäischen Norm 301 459 entsprechen. Die EN 301 459 referenziert in Kapitel 9 die Web Content Accessibility Guidelines (WCAG). In diesen wiederum stehen Erfolgskriterien – aufgeteilt in Level A, AA und AAA. Von denen muss eine Website die Kriterien der Level A und AA erfüllen. Das sind insgesamt 50 Kriterien (gemäß WCAG 2.1), wovon aber nie alle für jede Website zutreffen.
Im Folgenden zeige ich Dir daher, wie Du die häufigsten Probleme behebst.
1. Fehlende Dokumentensprache definieren
Das Erfolgskriterium 3.1.1 Language of Page der WCAG erfordert ein korrekt gesetztes lang-Attribut. Dieses ermöglicht Screenreadern die richtige Aussprache und Interpretation des Inhalts. Im letzten WebAIM-Million-Report wurden übrigens auf 15,8% der untersuchten Seiten fehlende Sprachangaben auf Page-Ebene festgestellt.
Wenn die Hauptsprache Deiner Website Deutsch ist, im Quelltext aber <html lang=""> steht, dann ergänze hier “de” und das Kriterium ist erfüllt. Du brauchst eine detailliertere Anleitung? Dann schau doch mal in diesen Artikel. Hier erkläre ich genauer, wie und wo Du das lang-Attribut einbaust.
2. Sinnvolle Alt-Texte schreiben
Jedes Bild braucht ein alt-Attribut. Bei dekorativen Bildern muss es leer sein (alt=""). Bei allen anderen ist ein aussagekräftiger alt-Text notwendig, um das WCAG-Kriterium 1.1.1 Non-text Content zu erfüllen.
Ist das alt-Attribut leer, überspringen Screenreader das Bild. Fehlt das alt-Attribut, greifen manche Screenreader (z. B. VoiceOver) auf den Dateinamen zurück und lesen diesen vor. Wenn der dann sowas wie “iStock-23671-cropped-1.png” heißt, ist das nicht sonderlich hilfreich.
Im WebAIM-Report wurden fehlende alt-Texte bei 55,5% der untersuchten Seiten festgestellt. Statistisch betrachtet besteht also eine über 50-%ige Wahrscheinlichkeit, dass dieses Problem auch bei Dir existiert.
Erste Anlaufstelle, um herauszufinden, bei welchen Bildern alt-Texte fehlen, kann Screaming-Frog sein. Bereits mit den Standard-Crawl-Einstellungen findet das Tool Bilder ohne alt-Text oder alt-Attribut. Wie Du für diese Bilder dann gute alt-Texte schreibst, erkläre ich Dir in diesem Artikel genauer.
3. Buttons korrekt beschriften
1.1.1 Non-text Content bezieht sich nicht nur auf Bilder, sondern, wie der Titel des Kriteriums sagt, auf alle Nicht-Text-Inhalte. Das können auch Buttons sein. Gemeint sind hier übrigens keine Links (<a>), die über CSS wie Buttons aussehen, sondern Elemente, die tatsächlich mit <button> eingebunden sind. Für diese Elemente musst Du zusätzlich 4.1.2 Name, Role, Value beachten. Grob gesagt, erfordert dieses Kriterium, dass jedes Element einen zugänglichen Namen hat und Rollen sowie Status programmatisch erkannt werden können.
Ein Beispiel:
Der Submit-Button der internen Suche Deiner Website ist ein Lupen-Icon:
Wenn dieses Icon jetzt z. B. über CSS oder als SVG eingebunden ist, habe ich schon häufig gesehen, dass die Beschriftung fehlte. Der Placeholder “Suche” ersetzt übrigens den zugänglichen Namen nicht.
Wie kannst Du das jetzt lösen? Es gibt mehrere Möglichkeiten. Du kannst z. B. aria-label nutzen, oder beim SVG einen <title> eintragen. Für letzteres hier ein Codebeispiel:
<svg \[...\] role="img">\[...\]
<title>\[...\]</title>
</svg>
4. Aussagekräftige Linktexte nutzen
2.4.4 Link Purpose (In Context) verlangt, dass der Zweck des Links aus dem Linktext oder dessen Kontext hervorgeht.
Links wie „hier klicken“ oder „mehr“ sagen für sich allein betrachtet nichts über das Ziel aus. Stehen sie aber innerhalb eines Textes, durch den das Linkziel klar wird, ist das Kriterium erfüllt.
Schön sind solche generischen Linktexte zwar nicht, aber immer noch besser als leere. Im WebAIM-Report wurden bei 45,4% der Seiten leere Linktexte festgestellt. Das ist also ein recht häufiges Problem.
Auf Deiner Seite gibt es das nicht? Dann prüf doch mal:
- Deine Social-Media-Einbindungen: Sind das verlinkte SVGs? Und wenn ja, haben die einen maschinenlesbaren Namen (siehe vorheriger Abschnitt)?
- Verlinkte Bilder: Haben die einen Alt-Text?
- Generell Deine Links: Gibt es vielleicht kaputte Links, die nur noch so aussehen:
<a href=”xyz”></a>
Hier auch ein paar Tipps, wie Du diese Probleme identifizierst:
- Generische Linktexte mit Screaming-Frog herausfinden
- Leere Linktexte bei wiederkehrenden Website-Bereichen schnell erkennen mit WAVE-Addon (WAVE macht einen automatischen Barrierefreiheitscheck und zeigt dadurch auch leere Linktexte an)
5. Skip-Links einbauen
Über Skip-Links können User wiederholte Navigationselemente überspringen und direkt zum Hauptinhalt kommen. Das ist hilfreich, wenn Menschen die Tastatur zur Navigation nutzen (aka Tabnavigation). So müssen sie nicht durch jedes einzelne Element in der Navigation tabben, um beim 1. Produkt Deines Shops zu landen. Skip-Links sind übrigens nicht nur bei Navigationen hilfreich. Wenn Du viele Filter-Möglichkeiten hast, sind diese Links auch hier von Vorteil. Nutze sie gern überall dort, wo es wiederkehrende Navigationselemente gibt. Damit erfüllst Du dann auch das Kriterium 2.4.1 Bypass Blocks.
Ein Beispiel, wie sowas aussehen kann:
<a href="#main-content" class="skip-link">Direkt zum Inhalt</a>
<main id="main-content">...</main>
6. Tastaturbedienung sicherstellen
Wo wir schon bei der Tabnavigation sind: Alle interaktiven/funktionalen Elemente sollten mit der Tastatur erreichbar und bedienbar sein (2.1.1 Keyboard) – und selbstverständlich musst Du die Elemente auch wieder verlassen können (2.1.2 No Keyboard Trap). Ein sichtbarer Fokusindikator hilft Usern, die aktuelle Position auf der Seite zu erkennen (2.4.7 Focus Visible). Die Reihenfolge der angetabbten Elemente muss die gleiche Logik haben wie für Menschen, die die Website mit der Maus bedienen (2.4.3 Focus Order).
Um zu testen, ob Deine Seite mit der Tastatur bedienbar ist, kannst Du einfach die Tab-Taste nutzen:
Gehe mit Tab vorwärts, mit Shift + Tab zurück.
Achte entsprechend der oben genannten Kriterien beim Testen darauf, ob
- Du jedes funktionale Element mit
Tabansteuern (und absteuern!) kannst, - ein Fokus-Indikator (z. B. ein Rahmen um das Element) sichtbar ist und
- die Reihenfolge der Elemente beim Tabben logisch ist.
7. Ausreichende Kontraste wählen
Laut 1.4.3 Contrast (Minimum) brauchen Texte ein Kontrastverhältnis von:
- 4,5:1 bei normaler Schrift
- 3:1 bei großer Schrift (ab 18pt oder 14pt fett)
Unzureichende Kontraste sind übrigens das häufigste Problem. 79,1% der analysierten Seiten von WebAIM hatten Kontrastprobleme. Wenn es auf Deiner Website Linkkacheln bestehend aus Text auf Bild gibt, hast Du sehr wahrscheinlich auch ein Kontrastproblem. Denn Schrift auf Bild erfüllt die Kontrastanforderungen meistens nicht.
Um Kontraste zu prüfen, musst Du aber nicht alles mit einem Color-Picker und mathematischen Berechnungen selbst herausfinden. Tools, wie die WAVE-Extension, helfen auch hier bei der Überprüfung.
8. Überschriften logisch strukturieren
Logische Überschriften erleichtern die Navigation, insbesondere für Screenreader-User. In den WCAG gibt es zwei Kriterien, die Du einhalten musst:
Diese Kriterien beinhalten folgende Anforderungen:
- Überschriften sind korrekt ausgezeichnet (z. B.
<h1>bis<h6>) - Überschriften-Reihenfolge ist logisch
- Text, der wie eine Überschrift aussieht, ist auch eine Überschrift
- Überschrift beschreibt den ihr folgenden Inhalt
Wenn Deine SEO-Basics in Ordnung sind, hast Du hier also wenig bis gar nichts zu tun. Möchtest Du aber über diese Kriterien hinaus die Überschriften sowohl für SEO als auch für die Barrierefreiheit verbessern, gilt das als Best Practice:
- Halte die Reihenfolge von
<h1>bis<h6>ein. - Vermeide Hierarchiesprünge (z. B.
<h2>direkt auf<h4>). - Verwende pro Seite genau eine
<h1>, am besten am Anfang.
9. Autoplay-Elemente kontrollieren
2.2.2 Pause, Stop, Hide fordert eine Kontrolle bei bewegten Inhalten, die länger als 5 Sekunden laufen, denn automatisch abspielende Inhalte wie Videos oder Slider stören und lenken ab. Das ist nicht barrierefrei. Lass User deswegen selbst entscheiden, ob sie Slider, Videos oder ähnliches abspielen. Baue Steuerelemente ein, mit denen User solche Elemente pausieren oder stoppen können.
10. Verzichte auf Accessibility-Overlays
Overlay-Tools versprechen einfache Lösungen. In der Praxis beheben sie aber nicht alle Probleme. Die EU-Kommission und die Bundesfachstelle Barrierefreiheit raten daher vom Einsatz solcher Overlays ab – und ich auch. Eine nicht barrierefreie Website wird durch ein Overlay nicht auf wundersame Weise plötzlich barrierefrei.
Mehr Details, warum es eine schlechte Idee ist wegen Deadline-Panik einfach Overlays zu installieren, findest Du in diesen Artikeln:
- Sag “Nein” zu Accessibility-Overlays (Aussagen der EU-Kommission und der Bundesfachstelle Barrierefreiheit)
- Verlass Dich nicht auf Accessibility-Overlays (Was sind Overlays und welche Gründe sprechen gegen ihren Einsatz?)
Echte Barrierefreiheit geht nur durch Arbeit an Deinen Texten und Deinem Code. Ich helfe Dir aber gern, die Maßnahmen in Deinem Projekt umzusetzen.