Zum Inhalt springen
BFSG-Compliance seit 2025

WCAG & Standards

Die Web Content Accessibility Guidelines sind der technische Maßstab, an dem digitale Barrierefreiheit gemessen wird — in Europa über die harmonisierte Norm EN 301 549. Diese Kategorie erklärt die Erfolgskriterien so, dass sie im Alltag anwendbar werden: Kontrastwerte und Textgrößen, Tastaturbedienbarkeit und sichtbarer Fokus, Zielgrößen für Bedienelemente, Bewegung und Autoplay, Formularfehler und Statusmeldungen, semantische Struktur und Namen von Bedienelementen. Wir gehen auf die Unterschiede zwischen den Konformitätsstufen ein, auf die Neuerungen von WCAG 2.2 und darauf, welche Prüfungen sich automatisieren lassen und welche zwingend manuell bleiben. Jeder Beitrag nennt konkrete Prüfschritte statt allgemeiner Appelle. Dazu kommt eine Einordnung der Werkzeuge: Was automatische Prüfungen zuverlässig finden, wo sie falsche Treffer erzeugen und warum eine Bewertung ohne manuelle Prüfung unvollständig bleibt.

WCAG 3.0: Working Draft, kein neuer PrüfmaßstabW3C-Entwurf vom 3. März 2026 - EN 301 549 bleibt für das BFSG maßgeblichReifegrade im WCAG-3-Entwurf1PlaceholderNur Platzhalter, wird ersetzt2ExploratoryRichtung wird noch gesucht3DevelopingGrob abgestimmtEntwurf 3.3.20264RefiningKonsens, bereit für Review5MatureReif für die EmpfehlungConformance-Kapitel: Reifegrad DevelopingStruktur des Entwurfs: 12 GuidelinesnormativGuidelinesNutzerzentrierte Ergebnisaussagen in einfacher SprachenormativRequirements: Core und SupplementalLösen die Erfolgskriterien-Systematik der WCAG 2 abnormativAssertionsBelegte Aussagen zu Prozessen, die Prüfer nicht messen könneninformativMethodsTechniken und Testsätze, technologiespezifisch oder -agnostischRechtlich maßgeblich in Deutschland - heuteBFSGin Kraft seit 28.06.2025EN 301 549 V3.2.1harmonisierte EU-NormWCAG 2.1 / 2.2 AAPrüfmaßstab heuteWCAG 3.0Working Draft - kein PrüfmaßstabW3C: WCAG 3 ersetzt WCAG 2 nicht - mehrere Jahre Arbeit verbleiben
WCAG & Standards 24. Juli 2026

WCAG 3.0 Entwurf 2026: Status, Zeitplan und Praxis

Am 3. März 2026 hat das W3C einen neuen WCAG-3-Working-Draft veröffentlicht. Was drinsteht, warum WCAG 2.2 AA gefordert bleibt und was Teams heute tun.

13 Min. Lesezeit
Barrierefreie Anmeldung nach WCAG 2.2 (SC 3.3.8)Kognitive Funktionstests bei der Anmeldung sind unzulässig, sofern keine Alternative existiertKognitiver Test = BarriereVerzerrtes CAPTCHA abtippenZeichen entziffern und übertragenPasswort auswendig merkenMerkaufgabe ohne Passwort-ManagerEinmalcode manuell abtippenAus SMS oder App Zeichen kopierenKonforme Wege (SC 3.3.8)Alternative: Passkey oder Magic-LinkLogin ohne Merk- oder TippaufgabeMechanismus: Passwort-Managerautocomplete nutzen, Einfügen erlaubenObjekterkennung: AlltagsgegenständeAuto, Ampel, Hund statt ZeichenPersönlicher Inhalt: eigenes BildVom Nutzer bereitgestellter InhaltZwei Stufen, ein Ziel: Anmeldung ohne kognitive HürdeSC 3.3.8 - Level AAAusnahme bei Alternative erlaubtSC 3.3.9 - Level AAAauch Objekterkennung unzulässig2xso oft nennen Menschen mitBehinderung CAPTCHA als Hürde(WebAIM Survey 10, 2024)SC 3.3.8 ist Level AA - der Maßstab, den EN 301 549 mit Version 4.1.1 (2026) übernimmt94,8% der Startseiten zeigen WCAG-Fehler - barrierefreie Logins beugen Abbrüchen vor (WebAIM Million, 2025)
WCAG & Standards 15. Juli 2026

Barrierefreie Authentifizierung: CAPTCHA-Alternativen

Barrierefreie Anmeldung nach WCAG 2.2 (SC 3.3.8): Passwort-Manager, Magic-Link, Passkeys und CAPTCHA-Alternativen mit Objekterkennung und Audio-Option.

13 Min. Lesezeit
Barrierefreier KI-Chatbot: vom Dialog zur Screenreader-AusgabeKISupport-Assistentrole=log, aria-live=politeBot, 14:02 UhrWie kann ich helfen?Sie, 14:02 UhrWo ist meine Bestellung?Bot, 14:03 UhrIhre Sendung ist unterwegs.Lieferung morgen bis 18 Uhr.Nachricht eingeben ...Audio abspielenAls Text lesenSenden (Enter)Fokus bleibt im Eingabefeldkein Sprung an den SeitenanfangWas der Screenreader ansagtProtokoll: Bot sagt, Sendung ist unterwegsNeue Nachricht, 14:03 Uhr, von AssistentEingabefeld, Nachricht eingeben, bearbeitbarpolite: wartet auf Sprechpause, unterbricht nichtVier Konformitätssäulen1TastaturTab, Enter, Escapekomplett ohne Maus bedienbar2Live-Regionrole=log, politeneue Antwort wird vorgelesen3Fokuskein Fokusverlustbleibt nach Senden im Dialog4TextpfadAlternative zu AudioVoice-Bot stets auch als Text
WCAG & Standards 1. Juli 2026

Barrierefreie KI-Chatbots: WCAG-konforme Voice-Bots

Warum KI-Chatbots und Voice-Assistenten unter das BFSG fallen und wie Conversational UI mit ARIA-Live-Regions, Fokus-Management und Textpfad WCAG-konform wird.

14 Min. Lesezeit
Barrierefreier Routenwechsel in einer Single-Page-App1. Link aktiviertKlick / Enter auf LinkRoute wechselt, kein Reload2. Router rendert Viewdocument.title setzenNeuer Inhalt im DOM3. Fokus setzenfocus() auf H1 / Regiontabindex=-1 am Ziel4. Ankündigungaria-live=politeScreenreader liest Titelapp.de/start -> app.de/produkteOhne Fokus-ManagementFokus bleibt am alten Link hängen.Screenreader meldet den Wechsel nicht.Mit Fokus-ManagementH1: Produkte (Fokus, sichtbarer Ring)Fokus auf neuer Überschrift,Titel wird vorgelesen.Drei zentrale WCAG-Bezüge2.4.3 Fokus-ReihenfolgeFokus folgt dem Routenwechsel sinnvoll.4.1.3 StatusmeldungenLive-Region kündigt die neue Ansicht an.2.4.2 Seitentiteldocument.title spiegelt die Route wider.Frameworks: React, Vue, Angular, Sveltebrauchen alle ein bewusstes Fokus-Konzept.95,9 Prozent der Startseiten hatten 2024 WCAG-Verstöße, im Schnitt 56,8 je Seite (WebAIM Million, 2024)
WCAG & Standards 26. Juni 2026

Fokus-Management in Single-Page-Apps barrierefrei

Barrierefreie Routenwechsel in Single-Page-Apps: Fokus auf die neue Überschrift setzen, Seitentitel pflegen und View-Wechsel per Live-Region ankündigen nach WCAG 2.4.3.

14 Min. Lesezeit
Barrierefreies Diagramm: Muster, Beschriftung, Textalternative und Tabellen-FallbackSäulendiagramm: Umsatz je QuartalQ1Q2Q3Q412016095180Muster statt nur Farbe + direkte WertebeschriftungTextalternative (1.1.1)Kurzer alt-Text plus lange Beschreibungalt: Säulendiagramm Umsatz je Quartal in Tsd. EuroHöchster Wert Q4 mit 180, niedrigster Q3 mit 95Tabellen-Fallback: dieselben Daten als TabelleQuartalUmsatz Tsd. EuroQ1120Q2160Q3 / Q495 / 180Vier Säulen zugänglicher DatenvisualisierungNicht nur FarbeMuster, Form, LabelKontrast 3 zu 1Flächen unterscheidbarTextalternativealt plus LangtextTabellen-FallbackRohdaten zugänglichRund 8 Prozent der Männer haben eine Farbsehschwäche (Colour Blind Awareness)
WCAG & Standards 24. Juni 2026

Barrierefreie Diagramme und Datenvisualisierungen

Diagramme barrierefrei gestalten: Muster statt nur Farbe, ausreichende Kontraste, Textalternativen nach WCAG 1.1.1 und ein Tabellen-Fallback für Charts.

13 Min. Lesezeit
ARIA Live: Fehler- und Statusmeldungen ankündigenBestellformularE-Mail*anna@beispiel!Bitte eine vollständige E-Mail eingebenaria-describedby verknüpft Feld und FehlerPostleitzahl*31185Zahlungspflichtig* Pflichtfeldrole=alertScreenreader: Fehler. Bitte einevollständige E-Mail eingeben.role=status / aria-live=politeScreenreader: Bestellung wirdgeprüft, bitte warten.WCAG 4.1.3: Statusmeldungen ohne Fokuswechsel ankündigenassertive = dringend (Fehler)polite = abwarten (Status)Region steht schon im DOM95,9 Prozent der Startseiten weisen erkennbare WCAG-Fehler auf (WebAIM Million, 2024)
WCAG & Standards 19. Juni 2026

ARIA Live: Barrierefreie Fehler- und Statusmeldungen

Barrierefreie Fehler- und Statusmeldungen nach WCAG 4.1.3: ARIA Live Regions, role=alert, role=status und aria-describedby für Formulare und dynamische Inhalte.

13 Min. Lesezeit
Barrierefreies Modal: Fokus-Falle, Hintergrund inert, ESC und Fokus zurückSeiteninhaltinert + aria-hiddennicht fokussierbar, kein Klickrole=dialog aria-modal=truearia-labelledby: Newsletter abonnierenE-Mail-AdresseErstfokusAbonnierenAbbrechenFokus-Falle: Tab bleibt im Dialogletztes Element -> erstes ElementESCschließtDialogFokus zurückAuslöser-Button96 Prozent aller Startseiten hatten 2024 erkennbare WCAG-Verstöße, im Schnitt 56,8 pro Seite (WebAIM Million, 2024)
WCAG & Standards 17. Juni 2026

Barrierefreie Modals und Overlays richtig umsetzen

Modale Dialoge barrierefrei umsetzen: role=dialog, aria-modal, Fokus-Falle, ESC, Fokusrückgabe und inerter Hintergrund nach WCAG 2.4.3 und ARIA Dialog Pattern.

13 Min. Lesezeit
Barrierefreie Datentabelle: caption, th mit scope und programmatische Beziehungencaption: Preise je Tarif und LaufzeitcaptionTarifMonatlichJährlichSupportscope=colscope=colscope=colscope=colBasisProTeam9 EUR19 EUR39 EUR90 EUR190 EUR390 EURE-MailChatTelefonth scope=row<table><caption>Preise je Tarif</caption><th scope="col">Monatlich</th><th scope="row">Basis</th><td headers="..."> für komplexe Tabellen</td></table>Screenreader sagt anZelle mit Kontext, nicht nur den WertSpalte Monatlich, Zeile Pro: 19 EURSpalte Support, Zeile Team: TelefonWCAG 1.3.1 Checklisteth statt td für Kopfzellenscope=col und scope=row gesetztcaption als TabellentitelLayout-Tabellen ohne th und captionKomplexe Tabellen: headers und idResponsiv ohne Verlust der BezügeNur 16,8 Prozent von über 1 Mio. erkannten Tabellen hatten gültige Datentabellen-Auszeichnung (WebAIM Million, 2024)
WCAG & Standards 15. Juni 2026

Barrierefreie Datentabellen und komplexe Inhalte umsetzen

Datentabellen barrierefrei umsetzen: th mit scope, caption, headers und id für komplexe Tabellen, Layout- gegen Datentabellen, responsiv nach WCAG 1.3.1.

13 Min. Lesezeit
Barrierefreie Medien: Untertitel, Transkript und Audiodeskription- Schritt eins: das Ventil schließen.[ruhige Musik]CCUntertitel an0:41 / 2:13Audiodeskriptionaktiv (1.2.5 AA)Sprache: DETranskriptdurchsuchbar00:00Sprecherin: Willkommen zur Anleitung.00:09[Bild: Hand greift zum roten Hebel]00:14Schritt eins: das Ventil schließen.00:22[ruhige Musik, Anzeige blinkt grün]00:41Schritt zwei: den Druck prüfen.Volltext für Hören und Sehen - synchron zum Video.Transkript herunterladenWCAG 2.2 Richtlinie 1.2 - Zeitbasierte Medien1.2.1 Audio-/Videoalternative (A)1.2.2 Untertitel, aufgezeichnet (A)1.2.3 Audiodeskription oder Volltext (A)1.2.4 Untertitel, live (AA)1.2.5 Audiodeskription, aufgezeichnet (AA)EN 301 549 und BFSG verweisen auf diese Kriterien85 Prozent der Facebook-Videos werden ohne Ton angesehen (Digiday, 2016)
WCAG & Standards 10. Juni 2026

Barrierefreie Medien: Untertitel und Transkripte 2026

Untertitel, Transkripte und Audiodeskription nach WCAG-Richtlinie 1.2 und BFSG: Was Video- und Audioinhalte 2026 barrierefrei macht - praxisnah erklärt.

13 Min. Lesezeit
Alt-Texte richtig schreiben: gut, schlecht, dekorativ, komplexInformativ: guter Alt-Textalt="Rote Wanderschuhevon der Seite, Profilsohle"Zweck erfülltkurz, konkretInformativ: schlechter Alt-Textalt="IMG_2381.jpg"alt="Bild Bild Foto"Dateiname, redundantkein NutzenDekorativ: leerer Alt-Textalt="" (leer)role="presentation"Screenreader überspringtKomplex: Diagramm + LangbeschreibungUmsatz je Quartal 2025 (Mio. Euro)1,8Q12,4Q23,1Q33,9Q4Kurz-Alt: "Balkendiagramm Umsatz 2025,steigend von Q1 bis Q4. Daten unten."Langbeschreibung (Text + Tabelle)Q1 1,8 | Q2 2,4 | Q3 3,1 | Q4 3,9Anstieg über das Jahr: plus 117 Prozent.verlinkt via aria-describedby / figcaptionWCAG 1.1.1 erfülltDaten vollständig21,6 Prozent aller Startseiten-Bilder hatten 2024 keinen Alternativtext (WebAIM Million, 2024)
WCAG & Standards 8. Juni 2026

Barrierefreie Bilder und Alt-Texte richtig schreiben

Alt-Texte nach WCAG 1.1.1 richtig schreiben: informative, dekorative und komplexe Bilder, Diagramme und Infografiken mit Langbeschreibung zugänglich machen.

13 Min. Lesezeit
WAI-ARIA: Rolle, Zustand und Live-Region im Accessibility Tree1. Rolle (role)Erste Regel: natives HTML vor role nutzenbuttonnativ fokussierbarrole=tabkein HTML-Pendantlandmark | widget | document | abstractRolle definiert, was ein Element ist2. Zustand und Eigenschaftaria-expanded=falsearia-selected=truearia-checked=mixedaria-disabled=trueZustand ändert sich per JavaScriptScreenreader sagt: eingeklappt / ausgeklappt3. Live-Region: dynamische Ankündigungaria-live=politewartet auf SprechpauseStatusmeldung, Filterzahlaria-live=assertiveunterbricht sofortnur kritische Fehlerrole=status / alertRegion muss vorab im DOM seinsonst keine AnsageGrundregel: No ARIA is better than bad ARIA (W3C WAI)Mit echten Screenreadern testen | nicht nur automatisch prüfen
WCAG & Standards 3. Juni 2026

ARIA richtig einsetzen: Rollen, Zustände, Live-Regions

WAI-ARIA in der Praxis: Rollen vs. natives HTML, Zustände wie aria-expanded und aria-selected, Live-Regions mit polite und assertive sowie häufige Fehler.

13 Min. Lesezeit
Barrierefreies Formular: Label, Fehler und ValidierungKontaktformularName*Anna BeispielE-Mail*anna@beispiel!Bitte eine vollständige E-Mail eingeben (Endung fehlt)TelefonOptional - Format: 0123 4567890Nachricht*Absenden* PflichtfeldKorrekte Verknüpfunglabel for=emailinput id=emailaria-required=truearia-invalid=truearia-describedby=errautocomplete=emailrole=alertWCAG 2.2 Formular-Kriterien3.3.1 Fehler-Identifikation3.3.2 Beschriftungen3.3.3 Korrekturvorschläge1.3.5 Eingabezweck (autocomplete)3.3.7 Redundante Eingabe3.3.8 Barrierefreie Authentifizierung
WCAG & Standards 1. Juni 2026

Barrierefreie Formulare: Labels und Validierung

Barrierefreie Formulare nach WCAG 2.2: programmatische Labels, Pflichtfeld-Kennzeichnung, Fehlermeldungen mit aria-describedby sowie Fokus-Management.

13 Min. Lesezeit