Leitfaden zur Barrierefreiheit: WCAG-Grundlagen
Erklärt die WCAG-Grundlagen wie Kontrast, Tastaturbedienung, Alternativtexte und Formularbeschriftungen anhand von Codebeispielen und zeigt, wie Sie Ihre Website selbst testen.
Aurora YazılımRedaktionsteam
6 Min. Lesezeit
Barrierefreiheit im Web bedeutet, dass alle Menschen, auch mit Seh-, Hör-, Bewegungs- oder kognitiven Einschränkungen, eine Website wahrnehmen, bedienen und nutzen können. Der internationale Maßstab sind die WCAG-Richtlinien des W3C; ausreichender Farbkontrast, vollständige Tastaturbedienung, Alternativtexte für Bilder und beschriftete Formulare sind die Grundanforderungen. Diese Prinzipien stärken sowohl die Nutzererfahrung als auch die Sichtbarkeit in Suchmaschinen.
Für wen ist Barrierefreiheit wichtig?
Barrierefreiheit wird oft nur mit blinden Nutzern verbunden. Der Kreis ist jedoch viel größer: Menschen mit Farbfehlsichtigkeit, Nutzer, die mit gebrochener Hand keine Maus bedienen können, ältere Menschen, wer ein Video in lauter Umgebung stumm schaut, und jeder, der in der Sonne auf ein Handydisplay blickt.
Deshalb ist barrierefreies Webdesign keine Zusatzarbeit für eine kleine Gruppe, sondern ein besseres Erlebnis für alle. Klare Überschriften, gut lesbarer Text und vorhersehbare Navigation erleichtern auch Nutzern ohne Einschränkung die Arbeit.
Barrierefreiheit unterstützt außerdem die Sichtbarkeit in Suchmaschinen. Eine korrekte Überschriftenhierarchie, aussagekräftige Linktexte und Bildbeschreibungen decken sich weitgehend mit dem, was Suchmaschinen hilft, eine Seite zu verstehen.
Was ist WCAG?
WCAG (Web Content Accessibility Guidelines) sind die vom W3C erarbeiteten Richtlinien für barrierefreie Webinhalte. Sie bestehen aus prüfbaren Erfolgskriterien und sind in drei Konformitätsstufen unterteilt: A, AA und AAA. Für die meisten Organisationen und Regelwerke ist Stufe AA das Ziel.
WCAG beruht auf vier Grundprinzipien. Jedes Kriterium gehört zu einem dieser Prinzipien; sie zu verstehen ist nützlicher, als einzelne Kriterien auswendig zu lernen. Den offiziellen Text finden Sie auf der Seite W3C WAI.
| Prinzip | Bedeutung | Beispiel |
|---|---|---|
| Wahrnehmbar | Informationen müssen mit mindestens einem Sinn aufgenommen werden können | Alternativtexte für Bilder, Untertitel für Videos |
| Bedienbar | Die Oberfläche muss auf verschiedenen Wegen bedienbar sein | Vollständige Tastaturnavigation, ausreichend Zeit |
| Verständlich | Inhalt und Verhalten müssen vorhersehbar sein | Klare Fehlermeldungen, einheitliches Menü |
| Robust | Muss mit assistiven Technologien kompatibel sein | Korrektes HTML, gültige Auszeichnung |
Farbkontrast und Lesbarkeit
Auf Stufe AA ist zwischen normalem Text und Hintergrund ein Kontrast von mindestens 4,5:1 erforderlich. Bei großem Text, also etwa ab 24 Pixeln oder fett ab 18,5 Pixeln, sinkt dieses Verhältnis auf 3:1. Auch für Bedienelemente wie Formularränder und Icons wird ein Verhältnis von 3:1 erwartet.
Neben dem Kontrast gibt es eine weitere Regel: Vermitteln Sie Informationen nicht allein über Farbe. Pflichtfelder nur mit einem roten Stern oder Links nur über die Farbe kenntlich zu machen, schließt Nutzer mit Farbfehlsichtigkeit aus. Verwenden Sie bei Links eine Unterstreichung und bei Fehlern einen erklärenden Text.
Auch die Schriftgröße gehört zur Lesbarkeit. Vergrößert der Nutzer den Text im Browser auf bis zu 200 Prozent, dürfen keine Inhalte verloren gehen und die Seite darf nicht auseinanderfallen.
Bedienung per Tastatur
Nutzer, die keine Maus verwenden können oder mit einem Screenreader navigieren, bewegen sich mit Tab, Shift+Tab, Enter und den Pfeiltasten durch die Website. Daher müssen Menüs, Schaltflächen, Formulare und Pop-ups ausschließlich per Tastatur vollständig bedienbar sein.
- Sichtbarer Fokus: Das fokussierte Element muss durch einen deutlichen Rahmen markiert sein; entfernen Sie die Fokuslinie nicht per CSS komplett.
- Logische Reihenfolge: Die Tab-Reihenfolge muss der visuellen Reihenfolge folgen.
- Link »Zum Inhalt springen«: Ein verborgener Link am Seitenanfang, der das Menü überspringt und zum Hauptinhalt führt.
- Keine Tastaturfalle: Aus einem geöffneten Fenster muss man mit Esc oder per Tastatur wieder herauskommen.
- Echte Schaltflächen: Für klickbare Elemente die Tags button und a statt div verwenden.
<a class="atla" href="#icerik">Zum Inhalt springen</a>
<header>...</header>
<main id="icerik">...</main>Alternativtexte und Bilder
Screenreader können Bilder nicht sehen; stattdessen lesen sie den Text im Attribut alt vor. Der Alternativtext sollte kurz die Funktion des Bildes auf der Seite beschreiben. Für ein Produktfoto genügen der Produktname und das unterscheidende Merkmal; enthält das Bild Text, muss dieser Text auch im Alternativtext stehen.
Für rein dekorative Bilder wird ein leerer alt-Wert verwendet, sodass der Screenreader sie überspringt. Besteht ein Link oder eine Schaltfläche nur aus einem Icon, muss per Text angegeben werden, was das Icon bewirkt.
<img src="zeytinyagi.webp" alt="Kaltgepresstes Olivenöl in der 500-ml-Glasflasche">
<img src="dalga-deseni.svg" alt="">
<button aria-label="Menü öffnen">
<svg aria-hidden="true">...</svg>
</button>Formulare und Screenreader-Kompatibilität
Formulare sind die Stelle, an der Barrierefreiheitsprobleme am häufigsten auftreten. Jedes Feld braucht eine sichtbare und im Code verknüpfte Formularbeschriftung. Ein Platzhaltertext, der nur im Feld steht, ersetzt die Beschriftung nicht, da er beim Tippen verschwindet. Lässt sich das Angebotsformular einer Unternehmenswebsite oder der Bezahlschritt eines Shops nicht per Tastatur und Screenreader abschließen, wird dieser Nutzer nicht zum Kunden.
Für die Screenreader-Kompatibilität müssen Fehlermeldungen mit dem betreffenden Feld verknüpft sein und klar sagen, was zu tun ist: statt »Ungültige Eingabe« besser »Die Telefonnummer muss 10 Stellen haben«. Die Sprache der Seite sollte im html-Tag über das Attribut lang angegeben werden (für Deutsch de); andernfalls liest der Screenreader den Text nach den Regeln der falschen Sprache vor.
<html lang="tr">
...
<label for="tel">Telefon</label>
<input id="tel" type="tel" autocomplete="tel"
aria-describedby="tel-hata" aria-invalid="true">
<p id="tel-hata">Die Telefonnummer muss aus 10 Ziffern bestehen.</p>Wann sollte man ARIA verwenden?
ARIA-Attribute sind für Fälle gedacht, die HTML nicht abdeckt. Die erste Regel lautet: Erfüllt ein eingebautes HTML-Element die Aufgabe, verwenden Sie es. Falsch eingesetztes ARIA kann mehr Probleme verursachen als gar keines.
Barrierefreiheit auf Mobilgeräten und Touchscreens
Auf dem Smartphone kommen zusätzliche Themen hinzu. WCAG 2.2 sieht für Touch-Ziele auf Stufe AA mindestens 24×24 CSS-Pixel vor; für komfortable Bedienung sind größere Ziele besser. Dicht nebeneinander gedrängte kleine Links führen zu Fehltipps.
Die Bildschirmausrichtung darf nicht gesperrt sein; der Inhalt muss im Hoch- und Querformat funktionieren. Einstellungen, die das Zoomen verhindern, sollten nicht verwendet werden. Weitere Punkte für Mobilgeräte finden Sie in unserem Beitrag zur mobilfreundlichen Website und auf unserer Seite zum responsiven Webdesign.
Die häufigsten Fehler
Bei den Websites, die wir in der Praxis prüfen, konzentrieren sich Barrierefreiheitsprobleme meist auf dieselben wenigen Punkte. Die gute Nachricht: Der Großteil lässt sich mit kleinen Codekorrekturen beheben und bringt eine Verbesserung, die Nutzer sofort bemerken.
- Hellgrauer Text auf hellgrauem Hintergrund, also unzureichender Kontrast.
- Produktbilder, deren Alternativtext leer ist oder mit dem Dateinamen gefüllt wurde.
- Linktexte wie »Hier klicken« oder »Weiterlesen«, die keinen Kontext liefern.
- Überschriftenebenen, die nach dem Aussehen gewählt werden; Sprünge von H1 direkt zu H4.
- Dropdown-Menüs, die sich per Tastatur nicht öffnen lassen, und Pop-ups, die sich nicht schließen lassen.
- Automatisch startende, nicht anhaltbare Slider und Videos mit Ton.
- Eine aus Designgründen komplett ausgeblendete Fokuslinie.
So testen Sie Ihre Website
Automatische Werkzeuge erkennen einen Teil der Probleme, aber nicht alle. Das beste Ergebnis entsteht, wenn Sie Werkzeuge mit kurzen manuellen Tests kombinieren. Diese Prüfung gehört selbstverständlich zu einem guten UI/UX-Design-Prozess; den Unterschied der beiden Begriffe erklären wir im Beitrag UI und UX im Vergleich.
- Legen Sie die Maus beiseite und bedienen Sie die Seite nur mit Tab und Enter.
- Erstellen Sie mit Lighthouse in den Chrome-Entwicklertools einen Barrierefreiheitsbericht.
- Hören Sie sich mit dem kostenlosen NVDA (Windows) oder dem integrierten VoiceOver (macOS, iOS) einige Seiten an.
- Vergrößern Sie die Schrift im Browser auf 200 Prozent und prüfen Sie, ob die Seite auseinanderfällt.
- Blenden Sie die Bilder aus und prüfen Sie, ob die Seite noch verständlich ist.
Häufig gestellte Fragen
01Trägt Barrierefreiheit zur SEO bei?
Auch wenn sie nicht direkt als Rankingsignal gilt, helfen eine korrekte Überschriftenstruktur, Alternativtexte und aussagekräftige Linktexte den Suchmaschinen, die Seite zu verstehen. Deshalb beruhen Barrierefreiheit und SEO-optimiertes Webdesign weitgehend auf demselben Fundament.
02Genügt ein Barrierefreiheits-Plugin oder eine Symbolleiste?
Oben auf der Seite eingefügte Symbolleisten lösen die grundlegenden Probleme im Code nicht. Ein Formular ohne Beschriftung oder ein Menü, das sich nicht per Tastatur öffnen lässt, muss an der Quelle korrigiert werden.
03Lässt sich eine bestehende Website barrierefrei machen?
Ja. Korrekturen wie Kontrast, Alternativtexte und Formularbeschriftungen lassen sich meist an der bestehenden Struktur vornehmen. Grundlegende Probleme wie Tastaturnavigation und Menüaufbau erfordern manchmal, das Design neu anzugehen.
04Gibt es eine gesetzliche Pflicht?
In manchen Ländern und bestimmten Branchen ist Barrierefreiheit gesetzlich vorgeschrieben; besonders für Unternehmen, die den europäischen Markt bedienen, gewinnt das Thema zunehmend an Bedeutung. Prüfen Sie für Ihren Fall die aktuelle Rechtslage und fragen Sie Ihren Rechtsberater.
Barrierefreiheit ist keine Aufgabe, die man einmal erledigt und dann vergisst, sondern ein Qualitätsmaßstab, der in jeder Phase von Design und Inhalt berücksichtigt wird. Um Ihre Website nach den WCAG-Grundlagen zu bewerten, sehen Sie sich unseren UI/UX-Design-Service an; zu den weiteren Bausteinen einer Unternehmenswebsite lesen Sie unseren Beitrag Was ist eine Unternehmenswebsite?. Aurora Yazılım aus Edremit entwickelt seit 2006 Webdesign-Projekte, die jeder nutzen kann.
