Ist deine Website barrierefrei?
Der Struktur-Check prüft die Auszeichnung einer Seite gegen zwölf WCAG-Punkte. Der Kontrast-Check misst ihre Farben. Zu jedem Befund findest du hier die Ursache und den Code, der ihn behebt.
Der Struktur-Check sieht sich unter anderem diese Punkte an:
- Überschriften-Hierarchie
- Alternativtexte für Bilder
- Beschriftung von Formularfeldern
- Aussagekräftige Linktexte
- Sprache der Seite
- Zoom nicht gesperrt
Was deine Rolle braucht
Wähle deine Rolle. Danach siehst du einen kurzen Überblick, ein Werkzeug für den Einstieg und drei Artikel zum Weiterlesen.
Entwicklung
Die meisten Barrieren entstehen im Markup. Mit nativen Elementen und wenig ARIA bleibt eine Komponente mit Tastatur und Screenreader bedienbar.
Komponenten-Baukasten Welche Variante einer Komponente ist barrierefrei?-
Die erste Regel von ARIA
Die erste Regel von ARIA: natives HTML vor ARIA sowie warum eine Rolle ohne Verhalten schadet, alle fünf Regeln und die Fälle, in denen ARIA nötig ist.
-
Buttons vs. Links
Wann ein button gehört und wann ein Link: Entscheidungsbaum, Grenzfälle aus der Praxis, das div-Button-Problem und deaktivierte Schaltflächen.
-
Snippet-Bibliothek
Snippet-Bibliothek: kopierfertige barrierefreie Muster für Skip-Link, visually-hidden, Icon-Button, dialog, Fehlerliste, Live-Region und Fokus-Stile.
Design
Kontrast, Fokus und Zoomverhalten werden im Entwurf festgelegt. Wer sie dort prüft, spart spätere Korrekturen im Code.
Kontrast-Check Sind meine Farben gut lesbar?-
Farbkontraste richtig einstellen
Farbkontrast auf der Website: die Grenzwerte 4,5:1 und 3:1, alle Ausnahmen, Dark Mode, Markenfarben und der Stand zu APCA im Juli 2026.
-
Tastaturbedienung & sichtbarer Fokus
Tastaturbedienung prüfen und herstellen: mit der Tabulatortaste durch die Seite, Fokusring mit :focus-visible, tabindex-Regeln und sieben WCAG-Kriterien.
-
Reflow, Zoom & Textabstände
Reflow, Zoom und Textabstände nach WCAG 1.4.4, 1.4.10 und 1.4.12: 200 % Textzoom, Umbruch bei 320 CSS-Pixeln, Testrezept und die typischen Bruchstellen.
Redaktion
Überschriften, Linktexte und Alt-Texte entstehen beim Schreiben. Mit wenigen Regeln bleibt jeder Beitrag auch mit Screenreader gut nutzbar.
Alt-Text-Entscheidungshilfe Braucht mein Bild einen Alt-Text?-
Alt-Texte richtig schreiben
Alt-Text schreiben: die drei Arten von Bildern, leeres statt fehlendes alt-Attribut, die richtige Länge, Diagramme und ein Prüfweg in fünf Schritten.
-
Überschriften-Hierarchie (h1 bis h6)
Überschriftenstruktur in HTML: was h1 bis h6 bedeuten, warum genau eine h1 pro Seite gilt, keine Ebene übersprungen wird und der Rang nicht die Größe meint.
-
Leichte Sprache im Web
Leichte Sprache umsetzen: die Regeln im Detail, DIN SPEC 33429, die Prüfung durch die Zielgruppe, § 4 BITV 2.0 und § 11 BGG und was WCAG 3.1.5 dazu sagt.
Projekt und Einkauf
Wer plant oder beauftragt, muss wissen, welcher Nachweis zählt. Barrierefreiheit gehört deshalb in die Ausschreibung.
Zertifizierungs-Check Wie nah bin ich am WCAG-Zertifikat?-
BFSG-Zertifizierung & Nachweis
BFSG-Zertifizierung für Websites und Onlineshops: welches Zertifikat und Siegel als Nachweis zählt, wie Prüfung und Audit laufen und was das kostet.
-
Ausschreibung & Lastenheft
Fertige Textbausteine zum Übernehmen für Ausschreibung, Lastenheft und Vertrag: Zielwert, Geltungsbereich, Nachweise, Fremdkomponenten, Abnahme und Wartung.
-
Barrierefreiheitserklärung erstellen
Barrierefreiheitserklärung erstellen: welche Angaben BFSG § 14 und BITV § 7 verlangen, wie die Erklärung aufgebaut ist und was Prüfstellen zuerst ansehen.
Das BFSG gilt seit dem 28. Juni 2025
Das Barrierefreiheitsstärkungsgesetz verlangt von vielen Onlineshops und digitalen Diensten ein Mindestmaß an Barrierefreiheit. Zwei Werkzeuge helfen dir bei der Einordnung. Die laufenden Entwicklungen stehen unter Aktuelles zum BFSG.
Alle Themen
-
Barrierefreiheit
22 ArtikelHier lernst du die Menschen kennen, für die Barrierefreiheit gemacht ist, und die assistiven Technologien, mit denen sie das Web nutzen.
-
Semantisches HTML
17 ArtikelSemantisches HTML zeichnet Inhalte mit den Elementen aus, die ihre Bedeutung beschreiben. Das reicht von header, nav und main bis zur Überschriften-Hierarchie.
-
CSS
12 ArtikelDas Stylesheet entscheidet über Fokus, Zoom und Lesbarkeit mit. Dieser Bereich behandelt Layout, Schrift und Farbe mit genau diesem Blick.
-
WCAG & BFSG
38 ArtikelBFSG und BITV regeln, wer barrierefrei sein muss. Die WCAG beschreibt, wie das technisch aussieht, und alle 55 Kriterien der Stufen A und AA sind hier einzeln erklärt.
-
Komponenten & Codes
33 ArtikelFormulare, Menüs, Dialoge und Tabs gehören zu jeder Oberfläche. Jede Anleitung zeigt, wie sie mit Tastatur und Screenreader funktionieren.
-
SEO & KI
18 ArtikelDieselbe saubere Struktur, die Barrierefreiheit schafft, hilft Suchmaschinen und KI-Systemen, deine Inhalte zu verstehen.
-
Ressourcen
14 ArtikelSnippets, Checklisten, Muster-Erklärungen und ein Glossar liegen hier zum Nachschlagen bereit.
Wer hinter html-einfach.de steckt
Ich bin Jakob Sommer und arbeite seit rund zwei Jahrzehnten als Webdesigner und Entwickler. An Werkzeugen, Trends und Frameworks hat sich vieles geändert. Dass sich sauberes, semantisches Markup auszahlt, gehört nicht dazu.
html-einfach.de ist mein Versuch, dieses Wissen so weiterzugeben, wie ich es mir selbst oft gewünscht hätte: praxisnah, ohne Dogma und immer am echten Code orientiert.