Zum Inhalt springen
BFSG-Compliance seit 2025

Blog

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 →
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 →
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 →
Farbkontraste: WCAG-Anforderungen im ÜberblickText-Kontrast (1.4.3)4,5:1 MinimumNormaler Text (unter 18pt)3:1 Großer TextAb 18pt oder 14pt fettNon-Text (1.4.11)3:1 MinimumButtons, Icons, FormfelderFokusindikatorenButtonInputEnhanced (1.4.6)7:1 AAAHöchste KontrastanforderungOptimal für alle Nutzer4,5:1 für großen Text (AAA)Kontrast-Beispiele12,6:1 Pass4,9:1 Pass3,2:1 Grenz.2,1:1 Fail1,3:1 FailDark Mode KontrasteHeller Text auf dunklem Grund: 4,5:1Fokusindikatoren: 3:1 zum HintergrundPrüfungAutomatisierte KontrastprüfungBrowser-Entwicklertools | manuelles Audit48,6% aller Websites verstoßen gegen Kontrastanforderungen (WebAIM, 2024)Text 4,5:1 | Großer Text 3:1 | UI-Komponenten 3:1 | Enhanced 7:1 | Fokus 3:1
Barrierefreiheit 13. Mai 2026

Farbkontraste und Barrierefreiheit: Mehr als 4,5:1

WCAG-Kontrastanforderungen verstehen und umsetzen: Tools, Dark Mode, Fokusindikatoren und Non-Text-Kontrast für barrierefreie Websites.

12 Min. Lesezeit Lesen →
Tastaturnavigation: Vollständige Bedienbarkeit ohne MausWCAG 2.1.1 Keyboard (A) | 2.1.2 No Keyboard Trap (A) | 2.4.7 Focus Visible (AA)Tab-NavigationTabVorwärts navigierenShift+TabRückwärtsLogische Reihenfolge = DOM-ReihenfolgeInteraktionEnterLink/Button aktivierenSpaceCheckbox/ButtonPfeiltasten für Radiobuttons, Tabs, MenusSpezialaktionenEscModal schließenArrowsIn Widgets navigierenHome/End für Anfang/Ende von ListenFokus-Reihenfolge einer typischen WebseiteSkip-LinkLogo/HomeNav-LinksHauptinhaltFormulareFooterKeyboard-Traps vermeidenNutzer muss jedes Element verlassen könnenSichtbarer Fokusindikator:focus-visible mit 3:1 KontrastTab | Shift+Tab | Enter | Space | Escape | Pfeiltasten | Home | End | Page Up | Page Down
Barrierefreiheit 10. Mai 2026

Tastaturnavigation: Bedienung ohne Maus in der Praxis

Tastaturnavigation für barrierefreie Websites: Tab-Reihenfolge, Fokusmanagement, Skip-Links, Keyboard-Traps und Custom Widgets.

13 Min. Lesezeit Lesen →
Barrierefreie PDFs: Dokumentenzugänglichkeit nach PDF/UAPDF-Struktur (Tag-Baum)DocumentH1: TitelSect: AbschnittP: AbsatzFigureTags definieren Struktur und LesereihenfolgeH1-H6, P, Table, Figure, List, Link, FormPDF/UA AnforderungenVollständiger Tag-Baum (keine ungetaggten Inhalte)Korrekte LesereihenfolgeAlt-Texte für alle BilderDokumentsprache definiertTabellen mit Header-ZuordnungErstellungswege für barrierefreie PDFsWord mit FormatvorlagenInDesign mit TagsHTML zu PDFNachträgliches TaggenBasis-Struktur automatischVolle KontrolleProgrammgesteuertAcrobat ProPrüftoolsPAC 2024 (PDF Accessibility Checker)Acrobat Pro Accessibility CheckStandardsPDF/UA-1 (ISO 14289-1)PDF/UA-2 (ISO 14289-2, 2024)Tagged PDFs | Lesereihenfolge | Alt-Texte | Tabellen-Header | Formulare | Dokumentsprache | Lesezeichen
Barrierefreiheit 7. Mai 2026

Barrierefreie PDFs: Zugänglichkeit nach PDF/UA

Barrierefreie PDFs erstellen: Tagged PDFs, Lesereihenfolge, Alt-Texte, Tabellen und Formulare nach dem PDF/UA-Standard prüfen und umsetzen.

12 Min. Lesezeit Lesen →