# html-einfach.de – Webstandards-Guide

> Digitale Barrierefreiheit nach BFSG, BITV und WCAG 2.2 – verständlich erklärt und mit semantischem HTML umgesetzt. Praxiswissen für zugängliche Websites.

Deutschsprachiger Wissens-Guide von Jakob Sommer (Webdesigner & Entwickler) rund um digitale Barrierefreiheit nach deutschem Recht (BFSG, BITV, WCAG), semantisches HTML, barrierefreie Komponenten sowie SEO & KI – inklusive einer Referenz aller WCAG-2.2-Kriterien (A/AA). Die Domain html-einfach.de ist seit dem 04.02.2009 registriert – seit über fünfzehn Jahren wird hier erklärt, wie man Websites erstellt. Startseite: https://html-einfach.de/.

## Barrierefreiheit verstehen

- [Barrierefreiheit verstehen – Übersicht](https://html-einfach.de/barrierefreiheit-verstehen.html): Barrierefreiheit verstehen: wer auf zugängliche Websites angewiesen ist, mit welchen Hilfsmitteln gesurft wird – und warum sich der Aufwand rechnet.
- [Sehbehinderung & Blindheit](https://html-einfach.de/barrierefreiheit-verstehen/sehbehinderung-und-blindheit.html): Sehbehinderung und Blindheit im Web: amtlich 558.725 Betroffene, Spektrum statt Schwarz-Weiß – was daraus für Kontrast, Zoom, Alt-Text und Struktur folgt.
- [Gehörlosigkeit & Schwerhörigkeit](https://html-einfach.de/barrierefreiheit-verstehen/gehoerlosigkeit-und-schwerhoerigkeit.html): Gehörlosigkeit und Schwerhörigkeit im Web: rund 16 % Prävalenz, 80.000 Gehörlose – was Untertitel, Transkripte, DGS und Kontaktwege leisten müssen.
- [Motorische Einschränkungen](https://html-einfach.de/barrierefreiheit-verstehen/motorische-einschraenkungen.html): Motorische Einschränkungen im Web: bei 11 % der schwerbehinderten Menschen – was Tastatur, Zielgröße, Zeitpuffer und Klickverhalten leisten müssen.
- [Kognition & Neurodiversität](https://html-einfach.de/barrierefreiheit-verstehen/kognition-und-neurodiversitaet.html): Kognition und Neurodiversität im Web: 6,2 Mio. gering literalisierte Erwachsene, 1,8 Mio. mit Demenz – und wie du die kognitive Last deiner Seite senkst.
- [Farbfehlsichtigkeit](https://html-einfach.de/barrierefreiheit-verstehen/farbfehlsichtigkeit.html): Farbfehlsichtigkeit verstehen: die vier Typen, wie viele Menschen betroffen sind, welche Farbpaare zusammenfallen – und wie Bedeutung ohne Farbe funktioniert.
- [Alter & Barrierefreiheit](https://html-einfach.de/barrierefreiheit-verstehen/alter-und-barrierefreiheit.html): Ältere Menschen sind die größte Gruppe mit Einschränkungen – meist mehreren zugleich. Was sich mit dem Alter ändert und welche acht Maßnahmen wirklich wirken.
- [Situative & temporäre Einschränkungen](https://html-einfach.de/barrierefreiheit-verstehen/situative-und-temporaere-einschraenkungen.html): Situative und temporäre Einschränkungen: gebrochener Arm, grelle Sonne, laute Bahn – dieselben Barrieren wie bei dauerhafter Behinderung, nur häufiger.
- [Wie Screenreader-Nutzer surfen](https://html-einfach.de/barrierefreiheit-verstehen/wie-screenreader-nutzer-surfen.html): Wie Screenreader-Nutzer surfen: 71,6 % springen per Überschrift, nur 6,4 % lesen linear (WebAIM 2024). Die Zahlen – und was dein Markup liefern muss.
- [Screenreader im Überblick](https://html-einfach.de/barrierefreiheit-verstehen/screenreader-ueberblick.html): Screenreader im Vergleich: NVDA, JAWS, VoiceOver, TalkBack, Orca – Verbreitung laut WebAIM 2024, echte Unterschiede und die zwei, mit denen du testest.
- [Bildschirmvergrößerung](https://html-einfach.de/barrierefreiheit-verstehen/bildschirmvergroesserung.html): Bildschirmvergrößerung erklärt: Browser-Zoom, Systemlupe und ZoomText im Vergleich – und warum bei 400 % nur noch 320 CSS-Pixel Breite übrig bleiben.
- [Sprachsteuerung](https://html-einfach.de/barrierefreiheit-verstehen/sprachsteuerung.html): Sprachsteuerung im Web: wie Dragon, Voice Control und Voice Access klicken – und warum sichtbare Beschriftung und zugänglicher Name zusammenpassen müssen.
- [Braillezeile](https://html-einfach.de/barrierefreiheit-verstehen/braillezeile.html): Braillezeile erklärt: wie die Ausgabe in Blindenschrift funktioniert, wer sie nutzt und warum 40 Zeichen pro Zeile dein Markup gnadenlos bewerten.
- [Tastatur- & Switch-Bedienung](https://html-einfach.de/barrierefreiheit-verstehen/tastatur-und-switch-bedienung.html): Tastatur- und Switch-Bedienung erklärt: wie Scanning funktioniert, welche Tastenkonventionen gelten und was daraus für Fokus, Reihenfolge und Wege folgt.
- [Zahlen & Business Case](https://html-einfach.de/barrierefreiheit-verstehen/zahlen-und-business-case.html): Barrierefreiheit in Zahlen und der Business Case dazu: 7,8 Mio. schwerbehinderte Menschen, 95,9 % fehlerhafte Startseiten – jede Zahl mit Quelle und Stand.
- [Was kostet Barrierefreiheit?](https://html-einfach.de/barrierefreiheit-verstehen/was-kostet-barrierefreiheit.html): Was Barrierefreiheit kostet: Neubau, Nachrüstung, Audit und laufender Betrieb – die Kostentreiber, realistische Größenordnungen und wo du sparst.
- [Curb-Cut-Effekt & Mythen](https://html-einfach.de/barrierefreiheit-verstehen/curb-cut-effekt-und-mythen.html): Curb-Cut-Effekt erklärt: warum Lösungen für wenige allen nützen – und was an „zu teuer“ und acht weiteren Barrierefreiheits-Mythen wirklich dran ist.
- [Recht als Auslöser](https://html-einfach.de/barrierefreiheit-verstehen/recht-als-ausloeser.html): Barrierefreiheit und Recht: von der UN-BRK über EU-Richtlinien zu BFSG und BITV – wer unter welchen Strang fällt und warum der Maßstab derselbe ist.
- [Fallstudie: Vorher & Nachher](https://html-einfach.de/barrierefreiheit-verstehen/fallstudie-relaunch.html): Ein durchgerechnetes Beispiel: 38 Befunde in einem Shop, die Reihenfolge der Behebung, der Aufwand in Personentagen und was am Ende offen blieb.
- [Für die Redaktion](https://html-einfach.de/barrierefreiheit-verstehen/fuer-die-redaktion.html): Was die Redaktion selbst verantwortet: Überschriften, Alt-Texte, Linktexte, Tabellen und Medien – mit den WCAG-Kriterien dazu und einem Prüfweg je Beitrag.
- [Für UX- & UI-Design](https://html-einfach.de/barrierefreiheit-verstehen/fuer-das-design.html): Was im Design entschieden wird: Kontraste, Fokuszustände, Zielgrößen, Zoom und Bewegung – mit den passenden WCAG-Kriterien und einem Prüfweg für Entwürfe.
- [Für Produkt & Projekt](https://html-einfach.de/barrierefreiheit-verstehen/fuer-produkt-und-projekt.html): Barrierefreiheit steuern statt hoffen: Akzeptanzkriterien, Definition of Done, Rollenverteilung und der Umgang mit Fremdsystemen, Altlasten und Budget.
- [Für Einkauf & Vergabe](https://html-einfach.de/barrierefreiheit-verstehen/fuer-einkauf-und-vergabe.html): Barrierefreiheit prüfbar einkaufen: Anforderungen in Ausschreibung und Vertrag, Nachweise richtig verlangen, Angebote vergleichen und Abnahme absichern.

## Semantisches HTML

- [Semantisches HTML – Übersicht](https://html-einfach.de/semantisches-html.html): Semantisches HTML von Grund auf: alle wichtigen HTML-Tags nach Aufgabe sortiert, dazu Struktur, Überschriften, Listen, Tabellen und die typischen Fehler.
- [Was ist semantisches HTML?](https://html-einfach.de/semantisches-html/was-ist-semantisches-html.html): Semantisches HTML heißt: Elemente nach Bedeutung wählen, nicht nach Aussehen. Was dabei im Accessibility Tree entsteht – mit Beispielen und Checkliste.
- [Struktur-Elemente](https://html-einfach.de/semantisches-html/struktur-elemente.html): header, nav, main und footer richtig setzen: wann daraus Landmarks werden und wann nicht – mit Grundgerüst, Codebeispielen und Prüfschritten.
- [article vs. section](https://html-einfach.de/semantisches-html/article-vs-section.html): article vs. section: der Unterschied verständlich erklärt – mit Entscheidungsbaum, Screenreader-Verhalten und Beispielen von Kommentar bis Karte.
- [Landmarks & Dokument-Outline](https://html-einfach.de/semantisches-html/landmarks-und-outline.html): Alle acht ARIA-Landmarks, das neue search-Element und die Dokument-Outline: So strukturierst du Seiten, durch die Screenreader-Nutzende blitzschnell navigieren.
- [Dokument-Metadaten (head, meta, link)](https://html-einfach.de/semantisches-html/dokument-metadaten.html): Dokument-Metadaten im head: charset, viewport, Title, Description, Canonical und Favicon – mit Größen, empfohlener Reihenfolge und Prüfweg für den head.
- [Überschriften-Hierarchie (h1–h6)](https://html-einfach.de/semantisches-html/ueberschriften-hierarchie.html): Ü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.
- [Listen richtig nutzen](https://html-einfach.de/semantisches-html/listen-richtig-nutzen.html): Listen richtig nutzen: wann ul, ol und dl passen, wie start, reversed und value die Nummerierung steuern – und die list-style-Falle in Safari.
- [Tabellen semantisch aufbauen](https://html-einfach.de/semantisches-html/tabellen-semantisch-aufbauen.html): Datentabellen mit th, scope und caption korrekt strukturieren – mit Screenreader-Ansage, Praxisbeispiel, mobiler Scroll-Lösung und den typischen CSS-Fallen.
- [Textauszeichnung (strong, time, abbr …)](https://html-einfach.de/semantisches-html/textauszeichnung.html): Umlaute, Sonderzeichen und geschützte Leerzeichen in HTML: wann Entities nötig sind und wann UTF-8 reicht – plus strong, em, time und abbr im Fließtext.
- [figure & figcaption](https://html-einfach.de/semantisches-html/figure-und-figcaption.html): figure und figcaption richtig einsetzen: Unterschied zum alt-Text, Position der Beschriftung, mehrere Bilder, Code und Zitate – mit Beispielen.
- [Zitate (blockquote, q, cite)](https://html-einfach.de/semantisches-html/zitate-richtig-auszeichnen.html): Zitate auszeichnen mit blockquote, q und cite: Quellenangabe richtig platzieren, Screenreader-Ansagen und dekorative Anführungszeichen.
- [details & summary](https://html-einfach.de/semantisches-html/details-und-summary.html): details & summary: Aufklappbereiche ohne JavaScript – mit open, name für Akkordeons, ::details-content zum Animieren und den Screenreader-Eigenheiten.
- [Formular-Semantik & Input-Typen](https://html-einfach.de/semantisches-html/formular-semantik.html): Formular-Semantik: das form-Element, alle 22 Input-Typen, inputmode, autocomplete und die Constraint Validation API – Bedeutung statt Optik.
- [Semantische Medien (audio, video, track)](https://html-einfach.de/semantisches-html/semantische-medien.html): Semantische Medien: video und audio mit controls, source für Formate, track für Untertitel und Kapitel sowie poster und preload für Performance.
- [div vs. span – wann was?](https://html-einfach.de/semantisches-html/div-vs-span.html): div vs. span: Block gegen Inline, beide ohne Bedeutung. Wann generische Container richtig sind, wann ein semantisches Element gehört – mit Beispielen.
- [„div-soup“ vermeiden](https://html-einfach.de/semantisches-html/div-soup-vermeiden.html): Div-Soup erkennen und beheben: woran du bedeutungslose div-Verschachtelung siehst, was sie kostet und in welcher Reihenfolge du sie ersetzt.
- [HTML validieren (W3C)](https://html-einfach.de/semantisches-html/html-validieren.html): HTML validieren mit dem W3C-Prüfdienst und lokal per vnu: die häufigsten Fehlermeldungen im Wortlaut, CI-Einbindung und der Bezug zu WCAG.

## WCAG & BFSG

- [WCAG & BFSG – Übersicht](https://html-einfach.de/wcag-und-bfsg.html): Rechtliche Pflichten und technische Standards: BFSG seit Juni 2025, BITV für den öffentlichen Sektor, WCAG 2.2 auf Stufe AA – und wie du das prüfst.
- [BFSG einfach erklärt](https://html-einfach.de/wcag-und-bfsg/bfsg-einfach-erklaert.html): BFSG einfach erklärt: Wen das Barrierefreiheitsstärkungsgesetz betrifft, was ab wann gilt und welche Pflichten entstehen – mit Fallbeispielen.
- [BFSG-Prüfung (Online-Check)](https://html-einfach.de/wcag-und-bfsg/bfsg-pruefung.html): Kostenlose BFSG-Prüfung mit Bewertung: 16 Fragen zu Pflicht, Technik und Prozessen – dazu Checkliste, Audit-Wissen und die Fristen des BFSG-Gesetzes.
- [EU-Recht: EAA & EN 301 549](https://html-einfach.de/wcag-und-bfsg/eu-recht-eaa-en-301-549.html): EAA und EN 301 549: wie Richtlinie, harmonisierte Norm und WCAG zusammenhängen, welche Kapitel die Norm hat und was Vermutungswirkung praktisch bringt.
- [BFSG-Checkliste für Websites](https://html-einfach.de/wcag-und-bfsg/bfsg-checkliste.html): BFSG-Checkliste mit Paragrafenbezug: Betroffenheit klären, WCAG 2.1 AA umsetzen, Pflichten nach § 14 erfüllen – Stand August 2026, mit Fristen und Bußgeldern.
- [Ausnahmen, Fristen & Bußgeld](https://html-einfach.de/wcag-und-bfsg/ausnahmen-fristen-bussgeld.html): BFSG-Ausnahmen und Fristen: Übergangsregeln, Kleinstunternehmen, unverhältnismäßige Belastung und mögliche Bußgelder – mit §-Bezug und Quellen.
- [Rechtsprechung & Bußgelder](https://html-einfach.de/wcag-und-bfsg/rechtsprechung-und-bussgelder.html): Was bei BFSG-Verstößen tatsächlich passiert: vier Durchsetzungswege, der dokumentierte Stand August 2026 und wie du eine Abmahnung einordnest. Quartalsweise.
- [Barrierefreiheit in Onlineshops](https://html-einfach.de/wcag-und-bfsg/barrierefreiheit-onlineshops.html): Barrierefreie Onlineshops: Checkout, Produktfilter, Zahlung und Formulare – mit den BFSG-Pflichten seit Juni 2025 und den Schwachstellen je Shopsystem.
- [Barrierefreiheit nach Plattform](https://html-einfach.de/wcag-und-bfsg/plattformen.html): WordPress, Shopware, TYPO3, Shopify oder Baukasten: Was das System übernimmt, was du selbst verantwortest – und wo die Barrieren jeweils entstehen.
- [Barrierefreiheitserklärung erstellen](https://html-einfach.de/wcag-und-bfsg/barrierefreiheitserklaerung-erstellen.html): Barrierefreiheitserklärung erstellen: welche Angaben BFSG § 14 und BITV § 7 verlangen, wie die Erklärung aufgebaut ist und was Prüfstellen zuerst ansehen.
- [Aktuelles zum BFSG](https://html-einfach.de/wcag-und-bfsg/aktuelles-zum-bfsg.html): Aktuelles zum BFSG: Marktüberwachung der MLBF, EU-Vertragsverletzungsverfahren, zweite Abmahnwelle und der Stand zu EN 301 549. Vierteljährlich aktualisiert.
- [BGG & § 12d: der öffentliche Auftrag](https://html-einfach.de/wcag-und-bfsg/bgg-und-paragraf-12d.html): BGG und § 12d: barrierefreie IT des Bundes, Überwachungsstelle und Schlichtung – der Unterbau der BITV 2.0, mit Paragrafen und Fristen erklärt.
- [BITV 2.0 erklärt](https://html-einfach.de/wcag-und-bfsg/bitv-2-0-erklaert.html): BITV 2.0 erklärt: für wen die Verordnung gilt, wie § 3 über EN 301 549 auf die WCAG verweist und was ihre zehn Paragrafen im Behördenalltag verlangen.
- [EU-Richtlinie 2016/2102](https://html-einfach.de/wcag-und-bfsg/eu-richtlinie-2016-2102.html): EU-Richtlinie 2016/2102: Pflichten öffentlicher Stellen, die Ausnahmen mit ihren Stichtagen und der Unterschied zum European Accessibility Act.
- [Pflichten öffentlicher Stellen](https://html-einfach.de/wcag-und-bfsg/pflichten-oeffentlicher-stellen.html): Pflichten öffentlicher Stellen: barrierefreie Inhalte, Erklärung, Feedback-Weg, Gebärden- und Leichte Sprache, Überwachung – mit Paragrafen und Fristen.
- [Feedback & Schlichtungsstelle](https://html-einfach.de/wcag-und-bfsg/feedback-und-schlichtung.html): Feedback-Mechanismus und Schlichtungsstelle: wie Nutzer Barrieren melden, wie § 16 BGG das Verfahren regelt und warum § 34 BFSG auch Unternehmen betrifft.
- [Länder-BGG & Landes-BITV](https://html-einfach.de/wcag-und-bfsg/landes-bgg-und-landes-bitv.html): Länder-BGG und Landes-BITV: welches Bundesland worauf verweist, wo die Unterschiede liegen und warum der technische Maßstab trotzdem überall WCAG AA ist.
- [WCAG 2.1 vs. 2.2: Versionen & Nummern](https://html-einfach.de/wcag-und-bfsg/wcag-2-1-und-2-2.html): WCAG 2.1 vs. 2.2: vier Prinzipien, 13 Richtlinien, 86 Erfolgskriterien – wie die Nummerierung funktioniert und welche Version rechtlich gilt.
- [Nur die 9 neuen 2.2-Kriterien](https://html-einfach.de/wcag-und-bfsg/wcag-2-2-kriterien.html): Nur die neun Neuzugänge in WCAG 2.2: Zielgröße, Fokus nicht verdeckt, Ziehbewegungen und zugängliche Anmeldung – mit Code, Ausnahmen und Prüfweg je Kriterium.
- [Die vier Prinzipien (POUR)](https://html-einfach.de/wcag-und-bfsg/vier-prinzipien-pour.html): Wahrnehmbar, bedienbar, verständlich, robust: die vier POUR-Prinzipien der WCAG erklärt – mit allen 13 Richtlinien, Praxisbeispielen und POUR als Prüf-Raster.
- [Konformitätsstufen A / AA / AAA](https://html-einfach.de/wcag-und-bfsg/konformitaetsstufen.html): WCAG-Konformitätsstufen A, AA und AAA: wie viele Kriterien dahinterstehen, welche fünf Bedingungen das W3C stellt – und warum AA der Zielwert ist.
- [Kriterien-Referenz: alle 55 (A & AA)](https://html-einfach.de/wcag-und-bfsg/kriterien.html): Alle 55 WCAG-2.2-Erfolgskriterien der Stufen A und AA als deutsche Referenz – je Kriterium eine Seite mit Anforderung, Code-Beispiel und Testanleitung.
- [Stufe AAA: alle 31 Kriterien](https://html-einfach.de/wcag-und-bfsg/wcag-aaa-kriterien.html): Alle 31 WCAG-AAA-Kriterien mit deutscher Bezeichnung und Einordnung: welche sich fast nebenbei erfüllen lassen und warum kein Gesetz Stufe AAA verlangt.
- [Warum 4.1.1 gestrichen wurde](https://html-einfach.de/wcag-und-bfsg/warum-4-1-1-gestrichen-wurde.html): WCAG 4.1.1 Parsing ist seit 2023 gestrichen und gilt rückwirkend als erfüllt. Was das für Audits, doppelte IDs und die HTML-Validierung bedeutet.
- [Farbkontraste richtig einstellen](https://html-einfach.de/wcag-und-bfsg/farbkontraste.html): Farbkontrast auf der Website: WCAG-Grenzwerte 4,5:1 und 3:1, alle Ausnahmen, Prüf-Tools, Dark Mode, Markenfarben – und der APCA-Stand Juli 2026.
- [Tastaturbedienung & sichtbarer Fokus](https://html-einfach.de/wcag-und-bfsg/tastatur-und-fokus.html): Tastaturbedienung deiner Website: sieben WCAG-Kriterien, Fokusring-Rezept mit :focus-visible, tabindex-Regeln und das BITV-Testrezept.
- [Reflow, Zoom & Textabstände](https://html-einfach.de/wcag-und-bfsg/reflow-zoom-textabstaende.html): Reflow, Zoom und Textabstände: WCAG 1.4.4, 1.4.10 und 1.4.12 in der Praxis – 320 CSS-Pixel, 200 % Zoom, Testrezept und typische Bruchstellen.
- [Barrierefreiheit selbst testen](https://html-einfach.de/wcag-und-bfsg/selbst-testen.html): Barrierefreiheit selbst testen: 15-Minuten-Schnelltest, Tagesprüfung und Werkzeugmatrix – plus was axe, WAVE und Lighthouse nicht finden.
- [Screenreader: Grundlagen & Tests](https://html-einfach.de/wcag-und-bfsg/screenreader-grundlagen.html): Screenreader-Grundlagen: wie aus HTML über den Accessibility Tree eine Ansage wird, was Lese- und Formularmodus unterscheidet und was ein Test belegen kann.
- [Barrierefreiheits-Overlays](https://html-einfach.de/wcag-und-bfsg/barrierefreiheits-overlays.html): Accessibility-Overlays und Barrierefreiheits-Widgets: was sie technisch tun, warum sie BFSG und BITV nicht erfüllen und was stattdessen für dasselbe Geld hilft.
- [BITV-Test, Audit & VPAT](https://html-einfach.de/wcag-und-bfsg/bitv-test-und-audit.html): BITV-Test machen lassen: 98 Prüfschritte, Ablauf bei der Prüfstelle, was ein Audit kostet und wie sich VPAT und Konformitätsbericht davon unterscheiden.
- [Mit NVDA testen (Windows)](https://html-einfach.de/wcag-und-bfsg/mit-nvda-testen.html): Mit NVDA testen: Einrichtung, NVDA-Taste, Lese- und Fokusmodus, Tastenbefehle und ein 30-Minuten-Testrezept mit WCAG-Zuordnung der Befunde.
- [Mit JAWS testen (Windows)](https://html-einfach.de/wcag-und-bfsg/mit-jaws-testen.html): Mit JAWS testen: 40-Minuten-Demomodus, Virtueller Cursor und Formularmodus, die wichtigsten Schnellnavigationstasten und ein Testrezept mit WCAG-Zuordnung.
- [Mit VoiceOver am Mac testen](https://html-einfach.de/wcag-und-bfsg/mit-voiceover-testen.html): Mit VoiceOver am Mac testen: Einrichtung, VO-Taste, Rotor und Elementliste, ein Prüfdurchlauf in sieben Schritten – und die Eigenheiten, die kein Befund sind.
- [Mit VoiceOver auf iPhone & iPad testen](https://html-einfach.de/wcag-und-bfsg/mit-voiceover-ios-testen.html): Mit VoiceOver auf iPhone und iPad testen: Kurzbefehl, Rotor, die Gesten im Überblick und ein mobiles Testrezept mit Zuordnung zu den WCAG-Kriterien.
- [Mit TalkBack testen (Android)](https://html-einfach.de/wcag-und-bfsg/mit-talkback-testen.html): Mit TalkBack auf Android testen: Einrichtung, Wischgesten, Lesesteuerung, das TalkBack-Menü – und ein mobiles Testrezept mit Zuordnung zu den WCAG-Kriterien.
- [Untertitel, Transkripte & Audiodeskription](https://html-einfach.de/wcag-und-bfsg/untertitel-und-transkripte.html): Welche Alternativen WCAG für Audio und Video verlangt – Untertitel, Transkripte und Audiodeskription – inklusive WebVTT, Qualitätsstandards und BFSG-Einordnung.
- [PDF-Barrierefreiheit](https://html-einfach.de/wcag-und-bfsg/pdf-barrierefreiheit.html): Barrierefreie PDFs: Tag-Baum, Lesereihenfolge, PDF/UA und Matterhorn-Protokoll – mit Export aus Word und InDesign und Prüf-Workflow mit PAC.
- [Barrierefreie Office-Dokumente](https://html-einfach.de/wcag-und-bfsg/barrierefreie-office-dokumente.html): Word, PowerPoint und Excel barrierefrei erstellen: Formatvorlagen, Alternativtexte, Lesereihenfolge und Tabellen – und der saubere Weg zum getaggten PDF.
- [Barrierefreie E-Mails & Newsletter](https://html-einfach.de/wcag-und-bfsg/barrierefreie-e-mails-newsletter.html): Newsletter barrierefrei gestalten: semantische Tabellenlayouts, Alt-Texte, Kontraste, Dark Mode und Nur-Text-Alternative – plus die rechtliche Einordnung.
- [Kognitive Barrierefreiheit](https://html-einfach.de/wcag-und-bfsg/kognitive-barrierefreiheit.html): Kognitive Barrieren abbauen: wer betroffen ist, die acht COGA-Ziele des W3C, die passenden WCAG-Kriterien und der Unterschied zwischen Leichter und Einfacher Sprache.
- [Leichte Sprache im Web](https://html-einfach.de/wcag-und-bfsg/leichte-sprache.html): 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.
- [WordPress](https://html-einfach.de/wcag-und-bfsg/barrierefreiheit-wordpress.html): WordPress barrierefrei machen: Theme prüfen, Page-Builder-Fallen vermeiden, Plugins auswählen und im Block-Editor sauber redigieren – mit Testrezept.
- [Shopware](https://html-einfach.de/wcag-und-bfsg/barrierefreiheit-shopware.html): Shopware 6 barrierefrei machen: Storefront-Twig anpassen, Erlebniswelten sauber bauen, Checkout prüfen und Plugins bewerten – mit konkretem Testrezept.
- [TYPO3](https://html-einfach.de/wcag-und-bfsg/barrierefreiheit-typo3.html): TYPO3 barrierefrei aufsetzen: Fluid-Templates, Inhaltselemente, EXT:form und Redaktionsregeln – mit Blick auf BITV 2.0 und den öffentlichen Sektor.
- [Shopify](https://html-einfach.de/wcag-und-bfsg/barrierefreiheit-shopify.html): Shopify barrierefrei machen: Liquid-Theme prüfen und anpassen, Apps bewerten, Checkout einordnen – und was du als Händler trotzdem verantwortest.
- [Website-Baukästen](https://html-einfach.de/wcag-und-bfsg/barrierefreiheit-baukaesten.html): Wix, Squarespace, Jimdo und Webflow barrierefrei nutzen: Was der Baukasten übernimmt, was du selbst verantwortest und wo die Grenzen wirklich liegen.
- [1.1.1 Nicht-Text-Inhalte](https://html-einfach.de/wcag-und-bfsg/kriterien/1-1-1-nicht-text-inhalte.html): WCAG 1.1.1 „Nicht-Text-Inhalte“ (A): Wann ein Bild einen Alt-Text braucht, wann alt="" richtig ist – mit Entscheidungsfrage, Code und Testrezept.
- [1.2.1 Nur-Audio & Nur-Video (aufgezeichnet)](https://html-einfach.de/wcag-und-bfsg/kriterien/1-2-1-nur-audio-nur-video.html): WCAG 1.2.1 (A): Podcasts brauchen ein Transkript, stumme Videos eine Textalternative. Abgrenzung, Codebeispiele, Testrezept und häufige Fehler.
- [1.2.2 Untertitel (aufgezeichnet)](https://html-einfach.de/wcag-und-bfsg/kriterien/1-2-2-untertitel-aufgezeichnet.html): WCAG 1.2.2 „Untertitel (aufgezeichnet)“ (A): Videos mit Ton brauchen Untertitel – WebVTT, track-Element, Qualitätskriterien und ein Testrezept.
- [1.2.3 Audiodeskription oder Medienalternative](https://html-einfach.de/wcag-und-bfsg/kriterien/1-2-3-audiodeskription-oder-medienalternative.html): WCAG 1.2.3 (A): Videos brauchen das Sichtbare als Audiodeskription oder Volltext-Alternative. Wahlrecht, Grenze zu 1.2.5, Beispiele und Testrezept.
- [1.2.4 Untertitel (live)](https://html-einfach.de/wcag-und-bfsg/kriterien/1-2-4-untertitel-live.html): WCAG 1.2.4 (AA): Livestreams und Webinare mit Ton brauchen Untertitel in Echtzeit. Ausnahmen, ASR gegen Schriftdolmetschen, Ablauf und Testrezept.
- [1.2.5 Audiodeskription (aufgezeichnet)](https://html-einfach.de/wcag-und-bfsg/kriterien/1-2-5-audiodeskription-aufgezeichnet.html): WCAG 1.2.5 (AA): Aufgezeichnete Videos brauchen eine Audiodeskription – Textfassung genügt nicht mehr. Drei Umsetzungswege, Kosten, Test und Fehler.
- [1.3.1 Info und Beziehungen](https://html-einfach.de/wcag-und-bfsg/kriterien/1-3-1-info-und-beziehungen.html): WCAG 1.3.1 „Info und Beziehungen“ (A): Struktur muss im Markup stecken, nicht nur im CSS – Überschriften, Listen, Tabellen und die acht BITV-Prüfschritte.
- [1.3.2 Bedeutungstragende Reihenfolge](https://html-einfach.de/wcag-und-bfsg/kriterien/1-3-2-bedeutungstragende-reihenfolge.html): WCAG 1.3.2 (A): Die Lesereihenfolge im Quelltext muss dem Sinn folgen. Grid- und Flexbox-Fallen, versteckte Inhalte, Testrezept und häufige Fehler.
- [1.3.3 Sensorische Eigenschaften](https://html-einfach.de/wcag-und-bfsg/kriterien/1-3-3-sensorische-eigenschaften.html): WCAG 1.3.3 „Sensorische Eigenschaften“ (A): Anweisungen dürfen nicht nur auf Farbe, Form oder Position zeigen. Signalwort-Test und bessere Formulierungen.
- [1.3.4 Ausrichtung](https://html-einfach.de/wcag-und-bfsg/kriterien/1-3-4-ausrichtung.html): WCAG 1.3.4 „Ausrichtung“ (AA): Inhalte müssen im Hoch- und Querformat funktionieren – keine erzwungene Drehung. Anforderung, CSS-Praxis, Test und Ausnahmen.
- [1.3.5 Eingabezweck bestimmen](https://html-einfach.de/wcag-und-bfsg/kriterien/1-3-5-eingabezweck-bestimmen.html): WCAG 1.3.5 „Eingabezweck bestimmen“ (AA): autocomplete-Tokens für Personendaten – die deutsche Adress-Zuordnung, Grenzfälle und ein Testrezept.
- [1.4.1 Benutzung von Farbe](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-1-benutzung-von-farbe.html): WCAG 1.4.1 „Benutzung von Farbe“ (A): Farbe nie als einziges Signal – die 3:1-Regel für Textlinks, Diagramme, Fehler und der Graustufen-Test.
- [1.4.2 Audio-Steuerelement](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-2-audio-steuerelement.html): WCAG 1.4.2 (A): Ton, der länger als drei Sekunden automatisch läuft, braucht einen Abschalter am Seitenanfang. Grenzen, Codebeispiele und Testrezept.
- [1.4.3 Kontrast (Minimum)](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-3-kontrast-minimum.html): WCAG 1.4.3 „Kontrast (Minimum)“ (AA): 4,5:1 für Text, 3:1 für großen Text. Alle Grenzwerte, die vier Ausnahmen und wie du Kontraste sauber misst.
- [1.4.4 Textgröße ändern](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-4-textgroesse-aendern.html): WCAG 1.4.4 „Textgröße ändern“ (AA): Text auf 200 % vergrößern, ohne dass Inhalt verschwindet. Prüfrezept bei 1280 × 768, rem statt px, alle Fallen.
- [1.4.5 Bilder von Text](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-5-bilder-von-text.html): WCAG 1.4.5 „Bilder von Text“ (AA): echter Text statt Schriftgrafik. Die zwei Ausnahmen, warum SVG zählt und wie der BITV-Test Schriftgrafiken aufspürt.
- [1.4.10 Reflow (Umbruch)](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-10-reflow.html): WCAG 1.4.10 „Reflow“ (AA): 320 px Breite bzw. 400 % Zoom ohne horizontales Scrollen – die Ausnahmen, typische Umbruch-Brecher und ein Testrezept.
- [1.4.11 Nicht-Text-Kontrast](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-11-nicht-text-kontrast.html): WCAG 1.4.11 „Nicht-Text-Kontrast“ (AA): 3:1 für Bedienelemente, Zustände und Grafiken – Feldrahmen, Checkboxen, Fokusringe und Diagrammfarben.
- [1.4.12 Textabstände](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-12-textabstaende.html): WCAG 1.4.12 „Textabstände“ (AA): die vier Prüfwerte, der Bookmarklet-Test und CSS, das erhöhte Zeilen- und Zeichenabstände unbeschadet übersteht.
- [1.4.13 Inhalt bei Hover oder Fokus](https://html-einfach.de/wcag-und-bfsg/kriterien/1-4-13-inhalt-bei-hover-oder-fokus.html): WCAG 1.4.13 „Inhalt bei Hover oder Fokus“ (AA): Tooltips und Flyouts müssen schließbar, überfahrbar und beständig sein – mit Code, Testrezept und Grenzfällen.
- [2.1.1 Tastatur](https://html-einfach.de/wcag-und-bfsg/kriterien/2-1-1-tastatur.html): WCAG 2.1.1 „Tastatur“ (A): Jede Funktion muss ohne Maus bedienbar sein. Die eine Ausnahme, die typischen Verstöße und der Tastatur-Durchlauf im Detail.
- [2.1.2 Keine Tastaturfalle](https://html-einfach.de/wcag-und-bfsg/kriterien/2-1-2-keine-tastaturfalle.html): WCAG 2.1.2 „Keine Tastaturfalle“ (A): Der Fokus muss aus jedem Bereich wieder heraus. Warum der Fokus-Kreis im Dialog erlaubt ist und wie du Fallen findest.
- [2.1.4 Tastenkürzel](https://html-einfach.de/wcag-und-bfsg/kriterien/2-1-4-tastenkuerzel.html): WCAG 2.1.4 „Tastenkürzel“ (A): Einzeltasten-Kürzel müssen abschaltbar, umbelegbar oder fokusgebunden sein. Warum Diktate sonst Aktionen auslösen – mit Test.
- [2.2.1 Zeitbegrenzungen anpassbar](https://html-einfach.de/wcag-und-bfsg/kriterien/2-2-1-zeitbegrenzungen-anpassbar.html): WCAG 2.2.1 „Zeitbegrenzungen anpassbar“ (A): abschalten, anpassen oder verlängern – die drei Wege, die drei Ausnahmen und der 20-Minuten-Praxistest.
- [2.2.2 Pausieren, beenden, ausblenden](https://html-einfach.de/wcag-und-bfsg/kriterien/2-2-2-pausieren-beenden-ausblenden.html): WCAG 2.2.2 (A): Bewegte Inhalte über fünf Sekunden brauchen einen Schalter – Karussells, Ticker, Animationen. Anforderung, Code, Testablauf und Ausnahmen.
- [2.3.1 Grenzwert von drei Blitzen](https://html-einfach.de/wcag-und-bfsg/kriterien/2-3-1-grenzwert-von-drei-blitzen.html): WCAG 2.3.1 (A): Nichts darf öfter als dreimal pro Sekunde blitzen. Schwellenwerte, rotes Flackern, PEAT-Prüfung, Codebeispiele und häufige Fehler.
- [2.4.1 Blöcke umgehen](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-1-bloecke-umgehen.html): WCAG 2.4.1 „Blöcke umgehen“ (A): Sprunglink, Landmarks und Überschriften als Mechanismus – mit Code, Testrezept und den typischen Fehlern.
- [2.4.2 Seitentitel](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-2-seitentitel.html): WCAG 2.4.2 „Seite mit Titel versehen“ (A): eindeutiger title aus Seitenthema und Angebotsname. Muster, der SPA-Fallstrick und die BITV-Bewertung.
- [2.4.3 Fokus-Reihenfolge](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-3-fokus-reihenfolge.html): WCAG 2.4.3 „Fokus-Reihenfolge“ (A): Tab-Reihenfolge logisch halten – CSS-Umsortierung, positives tabindex, Fokus-Management und ein Testrezept.
- [2.4.4 Linkzweck (im Kontext)](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-4-linkzweck-im-kontext.html): WCAG 2.4.4 „Linkzweck (im Kontext)“ (A): Warum „hier klicken“ durchfällt, was als Kontext zählt und wie Karten-Layouts und Datei-Links richtig aussehen.
- [2.4.5 Verschiedene Methoden](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-5-verschiedene-methoden.html): WCAG 2.4.5 (AA): Jede Seite muss auf mindestens zwei Wegen auffindbar sein. Was zählt, warum Breadcrumbs nicht zählen, Umsetzung und Testrezept.
- [2.4.6 Überschriften und Beschriftungen](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-6-ueberschriften-und-beschriftungen.html): WCAG 2.4.6 (AA): Überschriften und Labels müssen Thema und Zweck benennen. Der Überschriftenlisten-Test, englische aria-labels und die Abgrenzung zu 1.3.1.
- [2.4.7 Fokus sichtbar](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-7-fokus-sichtbar.html): WCAG 2.4.7 „Fokus sichtbar“ (AA): Der Tastaturfokus muss erkennbar sein – kein outline: none ohne Ersatz. Gute Fokus-Stile mit :focus-visible und 3:1.
- [2.4.11 Fokus nicht verdeckt (Minimum)](https://html-einfach.de/wcag-und-bfsg/kriterien/2-4-11-fokus-nicht-verdeckt.html): WCAG 2.4.11 (AA): Sticky-Header und Cookie-Banner dürfen den Tastaturfokus nicht ganz verdecken. Das scroll-margin-Rezept, Testablauf und Grenzfälle.
- [2.5.1 Zeigergesten](https://html-einfach.de/wcag-und-bfsg/kriterien/2-5-1-zeigergesten.html): WCAG 2.5.1 „Zeigergesten“ (A): Wisch- und Mehrfinger-Gesten brauchen eine Ein-Zeiger-Alternative. Warum Drag-and-drop nicht dazugehört – plus Testrezept.
- [2.5.2 Zeiger-Abbruch](https://html-einfach.de/wcag-und-bfsg/kriterien/2-5-2-zeiger-abbruch.html): WCAG 2.5.2 (A): Aktionen dürfen nicht beim Drücken auslösen, sondern erst beim Loslassen. Die vier Bedingungen, der Wegzieh-Test und typische Fehler.
- [2.5.3 Beschriftung im Namen](https://html-einfach.de/wcag-und-bfsg/kriterien/2-5-3-beschriftung-im-namen.html): WCAG 2.5.3 „Beschriftung im Namen“ (A): Der zugängliche Name muss den sichtbaren Text enthalten – sonst findet die Sprachsteuerung den Knopf nicht.
- [2.5.4 Betätigung durch Bewegung](https://html-einfach.de/wcag-und-bfsg/kriterien/2-5-4-betaetigung-durch-bewegung.html): WCAG 2.5.4 (A): Schütteln, Kippen und Kameragesten brauchen eine normale Bedienalternative und müssen abschaltbar sein. Beispiele, Test und Fehler.
- [2.5.7 Ziehbewegungen](https://html-einfach.de/wcag-und-bfsg/kriterien/2-5-7-ziehbewegungen.html): WCAG 2.5.7 „Ziehbewegungen“ (AA): Was per Drag-and-drop geht, muss auch mit einfachen Klicks gehen – Slider, Sortierlisten, Karten. Muster, Test, Ausnahmen.
- [2.5.8 Zielgröße (Minimum)](https://html-einfach.de/wcag-und-bfsg/kriterien/2-5-8-zielgroesse-minimum.html): WCAG 2.5.8 „Zielgröße (Minimum)“ (AA): 24×24 CSS-Pixel oder genug Abstand. Die fünf Ausnahmen, die Kreis-Regel und CSS-Rezepte für kleine Icons.
- [3.1.1 Sprache der Seite](https://html-einfach.de/wcag-und-bfsg/kriterien/3-1-1-sprache-der-seite.html): WCAG 3.1.1 „Sprache der Seite“ (A): lang-Attribut richtig setzen – gültige Sprachkennungen, Wirkung auf Screenreader, Braille und Silbentrennung.
- [3.1.2 Sprache von Teilen](https://html-einfach.de/wcag-und-bfsg/kriterien/3-1-2-sprache-von-teilen.html): WCAG 3.1.2 „Sprache von Teilen“ (AA): Fremdsprachige Passagen brauchen ein eigenes lang-Attribut. Wann es nötig ist, wann Fachbegriffe ausgenommen sind.
- [3.2.1 Bei Fokus](https://html-einfach.de/wcag-und-bfsg/kriterien/3-2-1-bei-fokus.html): WCAG 3.2.1 (A): Fokussieren allein darf keinen Kontextwechsel auslösen. Was als Kontextwechsel gilt, was erlaubt bleibt, Codebeispiele und Testrezept.
- [3.2.2 Bei Eingabe](https://html-einfach.de/wcag-und-bfsg/kriterien/3-2-2-bei-eingabe.html): WCAG 3.2.2 (A): Eine Auswahl zu treffen darf die Seite nicht wechseln oder das Formular absenden. Die Ausnahme, Änderungen unterhalb, Test und Fehler.
- [3.2.3 Konsistente Navigation](https://html-einfach.de/wcag-und-bfsg/kriterien/3-2-3-konsistente-navigation.html): WCAG 3.2.3 (AA): Wiederkehrende Navigation steht auf jeder Seite in derselben Reihenfolge. Erlaubte Abweichungen, Umsetzung, Test und Fehler.
- [3.2.4 Konsistente Erkennung](https://html-einfach.de/wcag-und-bfsg/kriterien/3-2-4-konsistente-erkennung.html): WCAG 3.2.4 (AA): Gleiche Funktion, gleicher Name – überall. Was konsistent sein muss, Menüeintrag gegen Zielüberschrift, Test und häufige Fehler.
- [3.2.6 Konsistente Hilfe](https://html-einfach.de/wcag-und-bfsg/kriterien/3-2-6-konsistente-hilfe.html): WCAG 3.2.6 „Konsistente Hilfe“ (A): Kontakt, Chat und FAQ müssen auf jeder Seite an derselben Stelle stehen. Was zählt, was erlaubt ist, wie geprüft wird.
- [3.3.1 Fehlererkennung](https://html-einfach.de/wcag-und-bfsg/kriterien/3-3-1-fehlererkennung.html): WCAG 3.3.1 „Fehlererkennung“ (A): Fehlerhafte Felder benennen und den Fehler im Text beschreiben – Muster, Fehlerzusammenfassung und Testrezept.
- [3.3.2 Beschriftungen oder Anweisungen](https://html-einfach.de/wcag-und-bfsg/kriterien/3-3-2-beschriftungen-oder-anweisungen.html): WCAG 3.3.2 (A): Jedes Eingabefeld braucht eine sichtbare Beschriftung oder Anleitung – Pflichtfelder, Formatangaben und warum Platzhalter kein Label sind.
- [3.3.3 Fehlervorschlag](https://html-einfach.de/wcag-und-bfsg/kriterien/3-3-3-fehlervorschlag.html): WCAG 3.3.3 „Fehlervorschlag“ (AA): Kennt das System die Korrektur, muss es sie nennen. Formulierungen, Code mit aria-describedby, Sicherheitsvorbehalt.
- [3.3.4 Fehlervermeidung (rechtlich, finanziell, Daten)](https://html-einfach.de/wcag-und-bfsg/kriterien/3-3-4-fehlervermeidung.html): WCAG 3.3.4 (AA): Verbindliche Vorgänge brauchen Prüfen, Korrigieren oder Widerrufen. Die drei Sicherungen, Checkout-Muster, Test und häufige Fehler.
- [3.3.7 Redundante Eingabe](https://html-einfach.de/wcag-und-bfsg/kriterien/3-3-7-redundante-eingabe.html): WCAG 3.3.7 „Redundante Eingabe“ (A): Was im selben Vorgang schon eingegeben wurde, darf nicht erneut abgetippt werden müssen. Ausnahmen, Code und Test.
- [3.3.8 Zugängliche Authentifizierung (Minimum)](https://html-einfach.de/wcag-und-bfsg/kriterien/3-3-8-zugaengliche-authentifizierung.html): WCAG 3.3.8 (AA): Anmeldung ohne kognitiven Funktionstest – die vier Ausnahmen, Einfügen erlauben, Passkeys, CAPTCHA und ein Testrezept.
- [4.1.2 Name, Rolle, Wert](https://html-einfach.de/wcag-und-bfsg/kriterien/4-1-2-name-rolle-wert.html): WCAG 4.1.2 „Name, Rolle, Wert“ (A): Jedes Bedienelement muss Name, Rolle und Zustand melden. Natives HTML zuerst, ARIA nur wo nötig – mit Testrezept.
- [4.1.3 Statusmeldungen](https://html-einfach.de/wcag-und-bfsg/kriterien/4-1-3-statusmeldungen.html): WCAG 4.1.3 „Statusmeldungen“ (AA): Meldungen ansagen, ohne den Fokus zu stehlen – role=status, Timing-Fallen und ein Testrezept mit NVDA.

## Komponenten

- [Komponenten – Übersicht](https://html-einfach.de/barrierefreie-komponenten.html): Barrierefreie Komponenten verstehen: Name, Rolle, Zustand, Tastatur – warum HTML vor ARIA kommt und wie du Formulare, Dialoge und Tabellen angehst.
- [Labels & Beschriftungen](https://html-einfach.de/barrierefreie-komponenten/labels-und-beschriftungen.html): Formularfelder mit label, for und id eindeutig beschriften: die zwei korrekten Muster, versteckte Labels, Floating Labels und ein Testrezept in fünf Schritten.
- [Fehlermeldungen barrierefrei](https://html-einfach.de/barrierefreie-komponenten/fehlermeldungen-barrierefrei.html): Fehlermeldungen barrierefrei: aria-describedby und aria-invalid richtig setzen, Fehlerübersicht mit Fokus, Zeitpunkt der Prüfung und Textmuster.
- [Validierung & Pflichtfelder](https://html-einfach.de/barrierefreie-komponenten/validierung-und-pflichtfelder.html): Validierung und Pflichtfelder barrierefrei: Pflichtfelder doppelt kennzeichnen, die Grenzen der nativen Browsermeldungen kennen und Fehler richtig ansagen.
- [fieldset & legend](https://html-einfach.de/barrierefreie-komponenten/fieldset-und-legend.html): fieldset und legend richtig einsetzen: Radio- und Checkbox-Gruppen benennen, Pflichtangaben in der Legende, Styling zurücksetzen, ARIA nur im Notfall.
- [Toggle-Switches & Custom-Checkboxen](https://html-einfach.de/barrierefreie-komponenten/toggles-und-custom-controls.html): Schalter, eigene Checkboxen und Radios barrierefrei umsetzen – mit appearance:none statt Verstecken, role=switch vs. aria-pressed, Kontrastmodus und Zielgröße.
- [Mehrstufige Formulare & Wizards](https://html-einfach.de/barrierefreie-komponenten/mehrstufige-formulare.html): Mehrstufige Formulare barrierefrei: Fortschritt dreifach anzeigen, Fokus beim Schrittwechsel führen, WCAG 3.3.7 und 2.2.1 erfüllen, Prüfseite vor dem Absenden.
- [Datums- & Zeitauswahl (Datepicker)](https://html-einfach.de/barrierefreie-komponenten/datepicker.html): Barrierefreier Datepicker: Textfeld mit Format, natives input type=date oder Kalender-Dialog nach ARIA APG – mit vollem Tastaturmodell und Testrezept.
- [Buttons vs. Links](https://html-einfach.de/barrierefreie-komponenten/buttons-vs-links.html): Wann ein button und wann ein Link gehört – mit Entscheidungsbaum, Grenzfällen aus der Praxis, dem div-Button-Problem und deaktivierten Schaltflächen.
- [Menüs & Dropdowns](https://html-einfach.de/barrierefreie-komponenten/menues-und-dropdowns.html): Dropdown-Menüs barrierefrei: Disclosure statt role=menu, aria-expanded richtig führen, Esc und Hover, Hamburger-Menü und wann aria-haspopup falsch ist.
- [Mega-Menüs](https://html-einfach.de/barrierefreie-komponenten/mega-menues.html): Große, mehrspaltige Navigationsmenüs zugänglich bauen – Disclosure-Muster, Tastatur, WCAG 1.4.13 bei Hover, mobiles Pendant und Praxis-Test.
- [Skip-Links](https://html-einfach.de/barrierefreie-komponenten/skip-links.html): Skip-Link korrekt umsetzen: erstes fokussierbares Element, bei Fokus sichtbar, Ziel mit tabindex – komplettes Rezept nach WCAG 2.4.1 samt BITV-Prüfpraxis.
- [Breadcrumbs](https://html-einfach.de/barrierefreie-komponenten/breadcrumbs.html): Breadcrumbs barrierefrei: nav mit aria-label, geordnete Liste, aria-current am letzten Element, Trenner im CSS und BreadcrumbList als JSON-LD.
- [Pagination & „Mehr laden"](https://html-einfach.de/barrierefreie-komponenten/pagination-und-mehr-laden.html): Pagination, „Mehr laden“ und Infinite Scroll barrierefrei: aria-current, Zielgrößen, Live-Regionen, Fokusstrategien und der SEO-Teil dazu.
- [Klickbare Cards](https://html-einfach.de/barrierefreie-komponenten/klickbare-cards.html): Ganze Karten klickbar machen, ohne die Barrierefreiheit zu opfern – das Stretched-Link-Muster, Fokus mit :has(), Textauswahl und der Umgang mit Zweitlinks.
- [Dialoge / Modals](https://html-einfach.de/barrierefreie-komponenten/dialoge-und-modals.html): Barrierefreies Modal mit dem dialog-Element: showModal() liefert Fokusfalle, Esc und Backdrop automatisch – dazu Initialfokus, ARIA-Fallback und Prüfpraxis.
- [Akkordeons](https://html-einfach.de/barrierefreie-komponenten/akkordeons.html): Barrierefreies Akkordeon mit details/summary statt ARIA: name-Attribut, hidden=until-found, Browser-Support Juli 2026 und die BITV-Prüfschritte.
- [Tabs](https://html-einfach.de/barrierefreie-komponenten/tabs.html): Barrierefreie Tabs nach dem APG-Pattern: tablist, aria-selected, Roving Tabindex, Pfeiltasten – und wann automatische oder manuelle Aktivierung richtig ist.
- [Slider / Karussells](https://html-einfach.de/barrierefreie-komponenten/slider-und-karussells.html): Karussells barrierefrei: Pause-Button nach WCAG 2.2.2, aria-roledescription, verdeckte Folien aus der Tabreihenfolge, prefers-reduced-motion und Swipe-Ersatz.
- [Tooltips & Popover-API](https://html-einfach.de/barrierefreie-komponenten/tooltips-und-popover.html): Tooltips barrierefrei umsetzen und die native Popover-API nutzen: aria-describedby, WCAG 1.4.13 mit Esc und Hover-Brücke, Anchor Positioning.
- [Comboboxen & Autocomplete](https://html-einfach.de/barrierefreie-komponenten/comboboxen-und-autocomplete.html): Comboboxen und Autocomplete barrierefrei: vom nativen datalist über gestaltbares select bis zum ARIA-1.2-Pattern mit aria-activedescendant.
- [Karten & Drag-and-drop](https://html-einfach.de/barrierefreie-komponenten/karten-und-drag-and-drop.html): Karten und Drag-and-drop barrierefrei: der Klick-Weg zu jeder Ziehbewegung nach WCAG 2.5.7, Adresse als Text, Ergebnisliste statt Karten-Zwang, Statusansagen.
- [Cookie-Banner](https://html-einfach.de/barrierefreie-komponenten/cookie-banner.html): Cookie-Banner barrierefrei: natives dialog, Fokus-Management, gleichwertige Buttons – mit § 25 TDDDG, VG Hannover und BFSG-Einordnung.
- [Alt-Texte richtig schreiben](https://html-einfach.de/barrierefreie-komponenten/alt-texte-schreiben.html): Alt-Texte schreiben: die drei Arten von Bildern, leeres statt fehlendes alt, Länge, Diagramme, Text im Bild und ein Prüfweg in fünf Schritten.
- [Icons & SVGs](https://html-einfach.de/barrierefreie-komponenten/icons-und-svgs.html): Icons barrierefrei einbinden: Deko verstecken, Icon-Buttons benennen, role=img richtig setzen – dazu Sprites, Icon-Fonts, Kontrast und Zielgröße.
- [Komplexe Datentabellen](https://html-einfach.de/barrierefreie-komponenten/komplexe-datentabellen.html): Komplexe Tabellen barrierefrei: scope für Gruppen, headers und id bei mehreren Kopfebenen, caption plus Struktursatz und der Test per Tabellennavigation.
- [Sortierbare & filterbare Tabellen](https://html-einfach.de/barrierefreie-komponenten/sortierbare-tabellen.html): Sortierbare Tabellen barrierefrei: Button im Spaltenkopf, aria-sort am th, Trefferzahl per Live-Region, bedienbare Filter und der Fallback ohne JavaScript.
- [Barrierefreie Diagramme](https://html-einfach.de/barrierefreie-komponenten/barrierefreie-diagramme.html): Barrierefreie Diagramme: Kernaussage als Text, Daten als Tabelle, Farben mit zweitem Merkmal, SVG statt Canvas – mit Graustufen-Test und Auswahlkriterien.
- [Barrierefreier Media-Player](https://html-einfach.de/barrierefreie-komponenten/media-player.html): Barrierefreier Media-Player: native Controls zuerst, echte Buttons, Zeitleiste als Slider, Untertitel-Umschaltung und kein erzwungenes Autoplay.
- [Die erste Regel von ARIA](https://html-einfach.de/barrierefreie-komponenten/erste-regel-von-aria.html): Die erste Regel von ARIA: natives HTML vor ARIA – warum eine Rolle ohne Verhalten schadet, alle fünf Regeln und die Fälle, in denen ARIA nötig ist.
- [Rollen, States & Properties](https://html-einfach.de/barrierefreie-komponenten/rollen-states-properties.html): Wie Rollen, Zustände und Eigenschaften in ARIA zusammenspielen – mit Accessibility Tree, Name/Rolle/Wert und praktischen Beispielen.
- [Live-Regionen (aria-live)](https://html-einfach.de/barrierefreie-komponenten/live-regionen.html): Live-Regionen mit aria-live: polite oder assertive, die Rollen status und alert, aria-atomic – und warum die Region vorher im DOM stehen muss.
- [Status, Fortschritt & Benachrichtigungen](https://html-einfach.de/barrierefreie-komponenten/status-fortschritt-benachrichtigungen.html): Ladeindikatoren, Fortschrittsbalken und Toasts barrierefrei: natives progress, role=progressbar, aria-busy und Live-Regionen nach WCAG 4.1.3.
- [Barrierefreiheit nach Framework](https://html-einfach.de/barrierefreie-komponenten/frameworks.html): React, Vue, Angular und Tailwind im Verhältnis zur Barrierefreiheit: was jedes Werkzeug erschwert, was es mitbringt und welche vier Probleme gleich sind.
- [React](https://html-einfach.de/barrierefreie-komponenten/barrierefreiheit-react.html): React barrierefrei: Fokus nach Routenwechsel, useId statt fester IDs, Fragmente statt Wrapper, Portale für Dialoge und eslint-plugin-jsx-a11y im Einsatz.
- [Vue](https://html-einfach.de/barrierefreie-komponenten/barrierefreiheit-vue.html): Vue barrierefrei: v-if gegen v-show, Attribut-Vererbung und useId, Fokus nach Router-Wechsel, Teleport für Dialoge, Transitions und prefers-reduced-motion.
- [Angular](https://html-einfach.de/barrierefreie-komponenten/barrierefreiheit-angular.html): Angular barrierefrei: Host-Elemente und generierte Wrapper, das CDK-a11y-Paket mit LiveAnnouncer und FocusTrap, Router-Fokus und Template-Linting.
- [Tailwind CSS](https://html-einfach.de/barrierefreie-komponenten/barrierefreiheit-tailwind.html): Tailwind barrierefrei: der entfernte Fokusring und focus-visible, sr-only richtig einsetzen, Kontraste der Standardpalette, motion-safe und dark-mode-Fallen.

## SEO & KI

- [SEO & KI – Übersicht](https://html-einfach.de/seo-und-ki.html): SEO und KI: wie Semantik, strukturierte Daten und Performance die Sichtbarkeit in klassischer Suche und KI-Systemen stärken – mit GEO und CWV.
- [Title-Tag & Meta-Description](https://html-einfach.de/seo-und-ki/title-und-meta-description.html): Wie lang dürfen Title-Tag und Meta-Description sein? 50–60 und rund 155 Zeichen – plus Pixelgrenzen, Googles Umschreibequote und der Prüfweg pro Seite.
- [Suchintention verstehen](https://html-einfach.de/seo-und-ki/suchintention.html): Suchintention herausfinden: die vier Typen erkennen, an der SERP ablesen und Inhalte so ausrichten, dass sie die tatsächlich gestellte Frage beantworten.
- [Interne Verlinkung als Strategie](https://html-einfach.de/seo-und-ki/interne-verlinkung.html): Interne Verlinkung als Strategie: Topic-Cluster, Ankertexte, Klicktiefe und der HTML-Code dahinter – so bauen Links Themenautorität auf und führen Nutzer.
- [Bild-SEO](https://html-einfach.de/seo-und-ki/bild-seo.html): Bild-SEO in der Praxis: Format, Dateiname, Alt-Text, srcset und sizes, das LCP-Bild und og:image – gefunden werden, ohne die Seite auszubremsen.
- [E-E-A-T: Vertrauen als Faktor](https://html-einfach.de/seo-und-ki/eeat.html): E-E-A-T erklärt: was hinter Experience, Expertise, Authoritativeness und Trust steckt, warum es kein Rankingfaktor ist – und welche Signale zählen.
- [Semantik & SEO](https://html-einfach.de/seo-und-ki/semantik-und-seo.html): SEO und HTML: welche Tags Suchmaschinen wirklich auswerten – von title und h1 bis canonical – was semantisches Markup bringt und was nachweislich nicht.
- [GEO-Grundlagen (KI-Suche)](https://html-einfach.de/seo-und-ki/geo-grundlagen.html): Generative Engine Optimization erklärt: Was die Forschung belegt, wie KI-Antworten entstehen und wie du Inhalte für KI-Zitate optimierst.
- [AI Overviews & SGE](https://html-einfach.de/seo-und-ki/ai-overviews-und-sge.html): AI Overviews und KI-Modus: wie Google Quellen auswählt, was das in Deutschland an Klicks kostet und welches HTML eine Passage zitierfähig macht.
- [Strukturierte Daten / Schema.org](https://html-einfach.de/seo-und-ki/strukturierte-daten.html): Strukturierte Daten mit JSON-LD und Schema.org: welche Typen sich 2026 noch lohnen, wie @graph Typen verbindet und womit du das Markup prüfst.
- [Schema.org-Typen im Detail](https://html-einfach.de/seo-und-ki/schema-typen.html): Die wichtigsten Schema.org-Typen als JSON-LD: Article, Organization, BreadcrumbList und Product – mit @id-Verschachtelung und Stand nach dem FAQ-Aus.
- [KI-Crawler steuern](https://html-einfach.de/seo-und-ki/ki-crawler-steuern.html): KI-Crawler steuern: welche Bots trainieren, welche live abrufen, wie du beide per robots.txt trennst – und wo die Datei aufhört zu wirken.
- [llms.txt einrichten](https://html-einfach.de/seo-und-ki/llms-txt-einrichten.html): llms.txt einrichten: Aufbau, Erzeugung auf einer statischen Seite – und die nüchterne Einordnung, dass Google die Datei bis heute nicht auswertet.
- [Canonical & Duplicate Content](https://html-einfach.de/seo-und-ki/canonical-und-duplicate-content.html): Canonical-Tag richtig setzen: rel=canonical im Detail, Abgrenzung zu 301, noindex und robots.txt – und was die Duplikat-Meldungen der Search Console bedeuten.
- [robots.txt & XML-Sitemaps](https://html-einfach.de/seo-und-ki/robots-txt-und-sitemaps.html): robots.txt und XML-Sitemap einrichten: Pfad-Muster, Regel-Vorrang, was Google ignoriert – und warum Disallow nicht dasselbe ist wie Noindex.
- [Open Graph & Social-Vorschauen](https://html-einfach.de/seo-und-ki/open-graph-und-social.html): Wie geteilte Links auf Social Media und in Messengern als Vorschaukarte erscheinen – mit den richtigen Open-Graph-Tags, dem passenden Bild und og:image:alt.
- [Semantik, Barrierefreiheit, SEO & Performance](https://html-einfach.de/seo-und-ki/semantik-a11y-seo-performance.html): Semantik, Barrierefreiheit, SEO und Performance hängen an derselben Struktur: eine Entscheidung, vier Wirkungen – und die wenigen Stellen, wo es sich reibt.
- [Core Web Vitals](https://html-einfach.de/seo-und-ki/core-web-vitals.html): Was LCP, INP und CLS messen, wie Google die Werte erhebt und wie du alle drei verbesserst – mit Praxisbeispiel: 100 Punkte auf dem Mittelklasse-Handy.
- [LCP & INP gezielt optimieren](https://html-einfach.de/seo-und-ki/lcp-und-inp-optimieren.html): LCP und INP optimieren: die neun Maßnahmen nach Wirkung sortiert, LCP Phase für Phase, INP mit weniger JavaScript – mit Messwegen, Code und Zeitbudgets.

## Ressourcen

- [Ressourcen – Übersicht](https://html-einfach.de/ressourcen.html): Werkzeugkiste zum Nachschlagen: fünf Online-Werkzeuge, Snippet-Bibliothek, Checklisten, Muster-Erklärung, Glossar und kommentierte Tool-Liste.
- [Struktur-Check (Online-Tool)](https://html-einfach.de/ressourcen/struktur-check.html): Struktur-Check: URL eingeben und die HTML-Struktur gegen zwölf WCAG-Kriterien prüfen – mit Fundstelle, Erklärung und dem Weg zur Behebung.
- [Kontrast-Check (Online-Tool)](https://html-einfach.de/ressourcen/kontrast-check.html): Kostenloser Kontrast-Check: URL eingeben und Farbkontraste automatisch nach WCAG prüfen – mit Bewertung, Farbvorschlägen und Paletten-Vergleich.
- [Alt-Text-Entscheidungshilfe](https://html-einfach.de/ressourcen/alt-text-entscheidungshilfe.html): Alt-Text-Entscheidungshilfe: in drei Fragen klären, ob ein Bild ein leeres alt-Attribut braucht oder eine Beschreibung – mit Code-Beispiel zum Kopieren.
- [Komponenten-Baukasten](https://html-einfach.de/ressourcen/komponenten-baukasten.html): Komponenten-Baukasten: barrierefreie Muster für Dialog, Tabs und Akkordeon vergleichen, Code kopieren und den Tastaturweg Schritt für Schritt nachvollziehen.
- [BFSG-Schnelltest: Betrifft mich das Gesetz?](https://html-einfach.de/ressourcen/bfsg-schnelltest.html): BFSG-Schnelltest: In vier Fragen klären, ob Website oder Onlineshop unter das Gesetz fallen – mit Begründungen, Ausnahmen und den nächsten Schritten.
- [Snippet-Bibliothek](https://html-einfach.de/ressourcen/snippet-bibliothek.html): Snippet-Bibliothek: kopierfertige barrierefreie Muster für Skip-Link, visually-hidden, Icon-Button, dialog, Fehlerliste, Live-Region und Fokus-Stile.
- [Cheat-Sheets & Checklisten](https://html-einfach.de/ressourcen/cheat-sheets-und-checklisten.html): Cheat-Sheets und Checklisten zu Semantik, WCAG, BFSG und SEO: Element-Spickzettel, Kontrast-Richtwerte, Formular- und Tastatur-Check zum Abhaken.
- [Glossar](https://html-einfach.de/ressourcen/glossar.html): Begriffe rund um Barrierefreiheit, semantisches HTML und SEO verständlich erklärt – von ARIA über BITV und Braillezeile bis WCAG.
- [Prüfwerkzeuge im Vergleich](https://html-einfach.de/ressourcen/werkzeugvergleich.html): axe, WAVE, Lighthouse und BITV-Test im Vergleich: Was jedes Werkzeug findet, was es systematisch übersieht und welches du wann einsetzt.
- [Tools](https://html-einfach.de/ressourcen/tools.html): Tools für Barrierefreiheit und SEO: automatische Prüfer, Kontrast- und Fokus-Werkzeuge, Screenreader und Performance-Tests – kuratiert und kommentiert.
- [Muster-Barrierefreiheitserklärung](https://html-einfach.de/ressourcen/muster-barrierefreiheitserklaerung.html): Muster-Barrierefreiheitserklärung: kopierfertige Vorlagen für Unternehmen nach BFSG und für öffentliche Stellen nach BITV – mit Ausfüllhinweisen.
- [Prüfbericht-Vorlage](https://html-einfach.de/ressourcen/muster-pruefbericht.html): Kopierfertige Vorlage für einen Barrierefreiheits-Prüfbericht: Kopfdaten, Seitenauswahl, Befundtabelle, Bewertungsstufen und Zulieferung für die Erklärung.
- [Ausschreibung & Lastenheft](https://html-einfach.de/ressourcen/ausschreibung-und-lastenheft.html): Fertige Textbausteine für Ausschreibung, Lastenheft und Vertrag: Zielwert, Geltungsbereich, Nachweise, Fremdkomponenten, Abnahme und Wartung – zum Übernehmen.

## Volltext

- [llms-full.txt](https://html-einfach.de/llms-full.txt): Volltext aller Wissensseiten in einer Datei – dieselben Inhalte wie oben verlinkt, ohne Einzelabrufe.

## Über das Projekt

- [Über mich](https://html-einfach.de/ueber-mich.html): Autorenprofil von Jakob Sommer: Websites seit 2006, html-einfach.de seit 2009, Studium Informationsmanagement (Hochschule Neu-Ulm), HarvardX-Zertifikat CS50B.
- [Kontakt](https://html-einfach.de/kontakt.html): Direkter Draht zum Autor – Fragen, Hinweise, gefundene Barrieren.
- [Gratis E-Book](https://html-einfach.de/gratis-ebook.html)

## Autor im Netz

- [LinkedIn](https://www.linkedin.com/in/jakobsommer/): Profil von Jakob Sommer
- [Xing](https://www.xing.com/profile/Jakob_Sommer): Profil von Jakob Sommer
- [ki-praxisbeispiele.de](https://ki-praxisbeispiele.de/): weiteres Projekt des Autors – KI-Anwendungsfälle aus der Praxis