WCAG 2.1 verstehen — Die Grundlagen erklärt
Ein Überblick über die vier Kernprinzipien von WCAG 2.1 und warum sie für deine Website wichtig sind.
Mehr erfahrenBarrierefreies Web in Deutschland
Praktische Leitfäden zu WCAG 2.1, BITV 2.0 und inklusivem Design — für alle, die das Web zugänglicher machen möchten
Web-Barrierefreiheit ist keine optionale Funktion. Sie’s ein rechtliches Erfordernis in Deutschland und ein Zeichen von gutem Design. Hier findest du konkrete, umsetzbaren Anleitungen — von den Grundlagen bis zur Implementierung.
Leitfäden und Praktische Ressourcen
Lernen, verstehen und umsetzen — Schritt für Schritt
Tastaturnavigation implementieren — So geht’s
Schritt-für-Schritt Anleitung zur Implementierung vollständiger Tastaturnavigation auf deiner Website.
Mehr erfahren
Bildschirmleser testen — Praktische Tipps
Wie du deine Website mit NVDA und JAWS testest, um sicherzustellen, dass sie für Nutzer mit Sehbeeinträchtigung funktioniert.
Mehr erfahren
BITV 2.0 — Deutsche Anforderungen verstehen
Was ist die BITV 2.0 und wie unterscheidet sie sich von WCAG? Ein praktischer Überblick für deutsche Webseiten.
Mehr erfahrenDie vier Grundprinzipien barrierefreien Designs
WCAG 2.1 basiert auf diesen vier Säulen — jede ist essentiell
Wahrnehmbar
Alle Informationen müssen für die Sinne wahrnehmbar sein. Das bedeutet: Alternativer Text für Bilder, Kontrast für Farben, Untertitel für Videos.
Bedienbar
Alle Funktionen müssen per Tastatur nutzbar sein. Keine Fallen für Nutzer, die nur mit der Tastatur arbeiten.
Verständlich
Der Text muss lesbar sein, die Navigation logisch, und die Eingaben sollten vorhersehbar sein. Nutzer verstehen sofort, wie deine Website funktioniert.
Robust
Dein HTML muss sauberer Code sein, damit Assistive Technologien ihn korrekt interpretieren können.
So startest du mit Barrierefreiheit
Fünf konkrete Schritte für den Anfang
1
Semantisches HTML verwenden
Nutze echte HTML-Elemente wie <button>, <nav>, <header> statt überall <div> zu verwenden. Das’s die Grundlage für alles andere.
2
Farbkontrast überprüfen
Stelle sicher, dass Text und Hintergrund genug Kontrast haben (mindestens 4.5:1). Tools wie WebAIM helfen dabei sofort.
3
Alt-Texte für alle Bilder
Jedes Bild braucht einen aussagekräftigen Alt-Text. Beschreibe, was im Bild ist — nicht einfach “Bild1.jpg”.
4
Mit Tastatur testen
Schalte deine Maus aus und navigiere nur mit Tab und Enter. Wenn du nicht überall hinkommst, haben Nutzer mit Sehbeeinträchtigung auch Probleme.
5
Mit einem Bildschirmleser testen
NVDA (kostenlos) ist einfach zu bedienen. Starte deine Website damit und höre, wie Nutzer mit Sehbeeinträchtigung sie erleben würden.