Zum Inhalt springen
BFSG-Compliance seit 2025

Blog — Seite 3

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 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 Lesen →
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 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 Lesen →
Barrierefreiheit als Wertungskriterium in AusschreibungenBarrierefreiheits-Gate im VergabeverfahrenAngebot Amit NachweisAngebot Bohne NachweisWertung des AngebotsEN 301 549 / BITV 2.0ZuschlagAngebot wertungsfähigAusschlussnicht wertungsfähigNachweis okNachweis fehltwertbarausgeschlossenGeforderte Nachweise in IT-Ausschreibungen1Konformitätsbericht(ACR / VPAT)Belegt Klausel für Klauseldie Erfüllung der EN 301 549im angebotenen Produkt.Muss-Kriterium2Barrierefreiheits-erklärungÖffentliche Erklärung mitKonformitätsstatus undFeedback-Mechanismus.Pflichtangabe3BITV-Test /PrüfberichtUnabhängiger Nachweisder Barrierefreiheit nachanerkanntem Verfahren.EN 301 549Auftragsvolumen 2024: 135,2 Mrd. Euro - kein Angebot ohne Nachweis wertungsfähig
Vergabe & Recht 29. Mai 2026

Barrierefreiheit in öffentlichen Ausschreibungen

Barrierefreiheit als Muss-Kriterium in IT-Ausschreibungen: BITV 2.0, EN 301 549, geforderte Nachweise wie Konformitätsbericht, VPAT und das Ausschluss-Risiko.

13 Min. Lesezeit Lesen →
Barrierefreie Typografie: die vier StellschraubenZeilenhöhe1,5xline-heightAbsatzabstand2xnach AbsatzZeichenabstand0,12xletter-spacingWortabstand0,16xword-spacingDiese Textabstände muss ein Layout zulassen, ohne dass Inhalt verloren geht (W3C WCAG 2.2, 1.4.12)Klar unterscheidbare BuchstabenformenI l 1leicht verwechselbarI l 1Atkinson Hyperlegible200-Prozent-Skalierung100%200%ohne Layoutbruch (WCAG 1.4.4)10 %der Menschen sind vonLegasthenie betroffen(British Dyslexia Association)Bessere Lesbarkeit ohne SpezialfontLinksbündiger Satz, sans-serife Screen-Schrift undanpassbare Abstände statt Legasthenie-Font(Annals of Dyslexia, British Dyslexia Association)
Webdesign 27. Mai 2026

Barrierefreie Typografie: Schrift, Größe und Lesbarkeit

Lesbare Schrift, Größe, Zeilenabstand und 200-Prozent-Skalierung nach WCAG 2.2: barrierefreie Typografie richtig umsetzen, ohne Legasthenie-Font-Mythos.

12 Min. Lesezeit Lesen →
BFSG 2025: Gesetzliche Anforderungen im ÜberblickBarrierefreiheitsstärkungsgesetz (BFSG) - In Kraft seit 28. Juni 2025Wer ist betroffen?E-Commerce-AnbieterDienstleistungserbringerBanken, TelekommunikationWas wird verlangt?WCAG 2.2 AA KonformitätBarrierefreie DokumenteErklärung zur BarrierefreiheitWelche Strafen?Bußgelder bis 100.000 EURVertriebsverboteAbmahnrisikoErste SchritteIst-Analyse durchführenBarrieren priorisierenMaßnahmenplan erstellenZeitstrahl BFSG2021Verabschiedung06/2025Inkrafttreten2025+MarktüberwachungLaufendBußgelderBetroffene BranchenE-Commerce und Online-ShopsBankdienstleistungenTelekommunikationPersonenbeförderungBFSG-Compliance-ChecklisteWCAG 2.2 AuditBarrierefreiheitserklärungFeedbackmechanismusRegelmäßige PrüfungBußgelder bis 100.000 EUR | Vertriebsverbot | Abmahnungen | Marktüberwachung durch Behörden
Barrierefreiheit 25. Mai 2026

BFSG 2025: Was Unternehmen jetzt wissen müssen

Das Barrierefreiheitsstärkungsgesetz ist seit Juni 2025 in Kraft. Wer betroffen ist, welche Fristen gelten und welche ersten Schritte jetzt nötig sind.

14 Min. Lesezeit Lesen →
WCAG 2.2: Neue Erfolgskriterien im DetailWCAG 2.2 - Veröffentlicht Oktober 2023 - 9 neue ErfolgskriterienFocus Not Obscured2.4.11 (AA) / 2.4.12 (AAA)Fokus darf nicht verdeckt werdenSticky Header, Modals, OverlaysDragging Movements2.5.7 (AA)Alternative zu Drag-and-DropSlider, Sortierung, Datei-UploadRedundant Entry3.3.7 (A)Keine doppelte DateneingabeAutofill, Übernahme, CheckboxWeitere AA-Kriterien2.4.13 Focus Appearance2.5.8 Target Size3.2.6 Consistent Help3.3.8 Accessible AuthKonformitätsstufenLevel ALevel AALevel AAABFSG verlangt mindestens AA-KonformitätPraxisrelevanz der neuen KriterienMobile Nutzung optimiertKognitive Barrieren reduziertMotorische Einschränkungen berücksichtigtTouch-Interaktion verbessertVon WCAG 2.1 zu 2.2: 9 neue Kriterien | 6 auf AA-Level | 3 auf A/AAA-LevelFokus-Management | Touch-Ziele | Drag-Alternativen | Authentifizierung | Hilfe-Konsistenz | Eingabe-Reduktion
Barrierefreiheit 22. Mai 2026

WCAG 2.2: Neue Erfolgskriterien verstehen und umsetzen

WCAG 2.2 bringt neun neue Erfolgskriterien. Focus Not Obscured, Dragging Movements und Redundant Entry praxisnah erklärt.

13 Min. Lesezeit Lesen →
Barrierefreier Checkout: Zugänglicher Bestellprozess1. Warenkorb2. Adresse3. Zahlung4. BestätigungZugängliche FormularfelderVorname *MaxE-Mail *max@beispiel.dePLZ *Bitte geben Sie eine gültige PLZ einlabel + aria-describedby + aria-invalid + autocompleteBarrierefreie ZahlungsauswahlKreditkarteSEPA-LastschriftKauf auf Rechnungrole=radiogroup + aria-checked + TastaturnavigationBarrierefreiheits-Anforderungen im CheckoutAlle Felder mit LabelInline-FehlermeldungenTastatur-BedienbarScreenreader-optimiertAutocomplete-Attributearia-live RegionenSkip-LinksFortschrittsanzeigeErgebnis: Höhere Conversion durch barrierefreien Checkout+12% Conversion Rate71% weniger Formularfehler15% der Bevölkerung erreicht
Barrierefreiheit 19. Mai 2026

Barrierefreier Checkout: Kunden nicht verlieren

Barrierefreier Checkout-Prozess: Zugängliche Zahlungsformulare, Fehlermeldungen, Adressfelder und Fortschrittsanzeigen für Online-Shops.

13 Min. Lesezeit Lesen →
Barrierefreie E-Mail: worauf es ankommtBetreff: Ihre Bestellung ist unterwegsVon: Beispiel-Shop • an: kundin@example.comlang=deBestellbestätigungEchter Text statt Bild: vorlesbar, skalierbarund auch bei blockierten Bildern sichtbar.alt: Sneaker, seitlichrole=presentationSendung verfolgenKontrast 4,5:1geprüftSchriftgröße rund 14–16 px, per Zoom skalierbarFarben robust in hellem und dunklem Moduslang-AttributWCAG 3.1.162% ohne (EMC)Alt-TextWCAG 1.1.148% ohne (EMC)Kontrast 4,5:1WCAG 1.4.3Text auf HintergrundLayout-Tabellerole=presentation84% ohne (EMC)Schriftgrößeskalierbarrund 14–16 pxDark Moderobustin beiden Modi lesbar99,88%der HTML-E-Mails miternsten Barrieren (EMC)47,88%der Bilder ohneAlt-Text (EMC)So besteht die E-Mail den TestEchter Text, ausgezeichnete Sprache, geprüfter Kontrast, robust im Dark Mode
E-Mail-Marketing 18. Mai 2026

Barrierefreie Newsletter: E-Mail-Marketing nach BFSG

Barrierefreie Newsletter und Transaktionsmails nach BFSG und WCAG 2.1: lang-Attribut, Alt-Texte, Kontrast, echter Text und Dark Mode praktisch umsetzen.

13 Min. Lesezeit Lesen →
Screenreader-Optimierung: Semantische Seitenstrukturrole=banner | Navigationsleiste | Skip-Link: Zum Inhalt springenLandmarksrole=bannerrole=navigationrole=mainrole=complementaryrole=contentinforole=searchScreenreader-Navigationper Landmark springenrole=mainh1: Seitentitel (einmal pro Seite)Einleitungstext mit semantischem Markuph2: AbschnittsüberschriftAbsatztext (p-Elemente, nicht div)img alt=BeschreibungDekorative: alt=leeraria-live=politeDynamische InhalteHeading-Hierarchie: h1 - h2 - h3 - h4Keine Ebenen überspringenARIA Rollenaria-labelaria-describedbyaria-expandedaria-hiddenaria-currentaria-liveErste Regel: NativesHTML bevorzugen!Testen mit Screenreadern unter Windows, macOS, iOS und Androidrole=contentinfo | Footer mit Kontakt, Links und Barrierefreiheitserklärung
Barrierefreiheit 16. Mai 2026

Screenreader-Optimierung: Website vorlesbar machen

Screenreader-Optimierung für Websites: ARIA Landmarks, Roles, Live Regions, semantisches HTML und Screenreader-Tests auf allen Plattformen.

14 Min. Lesezeit Lesen →