Zum Inhalt springen
BFSG-Compliance seit 2025

Praxis & Umsetzung

Barrierefreiheit entsteht in der täglichen Arbeit: in Komponenten, Redaktionsvorlagen, Dokumenten und Testroutinen. Diese Kategorie sammelt Beiträge aus der Umsetzung — barrierefreie Navigationen, Dialoge und Karussells, Alternativtexte und Bildbeschreibungen, Untertitel und Transkripte, Tabellen und Datenvisualisierungen, PDF-Dokumente sowie native Apps. Dazu kommen Themen wie Screenreader-Tests, assistive Technologien, leichte Sprache und die Einbindung von Menschen mit Behinderungen in die Prüfung. Ebenso behandeln wir die organisatorische Seite: Schulung von Redaktion und Entwicklung, Abnahmekriterien in Ausschreibungen, Dokumentation von Prüfergebnissen und der Umgang mit Altbeständen, die nicht auf einmal überarbeitet werden können. Ebenso geht es darum, Prüfergebnisse so festzuhalten, dass sie bei der nächsten Änderung noch nachvollziehbar sind und nicht mit dem Projektende verloren gehen.

Eine Oberfläche, zwei Plattformen barrierefrei umsetzeniOS · VoiceOverJetzt kaufen„Jetzt kaufen,Schaltfläche“Touch-Ziel 44 ptASchrift bis 200 %Android · TalkBackJetzt kaufen„Jetzt kaufen,Schaltfläche“Touch-Ziel 48 dpASchrift bis 200 %Gemeinsamer StandardEN 301 549 · Kapitel 11WCAG 2.1 · Stufe AAverbindlich seit 2025gilt für beide PlattformenVier Pflichten für jede AppScreenreader-LabelsVoiceOver, TalkBackTouch-Ziele44 pt / 48 dpKontrast und Schrift4,5:1 · bis 200 %Ohne Gesten-ZwangEinzeiger-Alternative
Praxis & Umsetzung 8. Juli 2026

Barrierefreie Apps: BFSG-Pflichten für iOS und Android

Das BFSG erfasst seit 2025 auch native Apps. Was iOS- und Android-Apps für WCAG 2.1 AA und EN 301 549 erfüllen müssen: Labels, Touch-Ziele, Kontrast, Fokus.

14 Min. Lesezeit
Barrierefreiheit als Redaktionsprozess: Gates statt Nachpflege1Bild-UploadAlt-Text Pflichtfeldoder dekorativ markierenWCAG 1.1.1 erfüllt1.1.12StrukturÜberschriften H1-H3ohne Sprung-EbenenWCAG 1.3.1 / 2.4.61.3.13Linktextsprechende Linkzielekein "hier klicken"WCAG 2.4.4 erfüllt2.4.44PDF und Sprachegetaggtes PDF, LeichteSprache wo gefordertEN 301 549 erfülltPDF/UAVeröffentlichenbarrierefrei ab Tag einsStichprobe und Monitoring: kein Wieder-VerbarrierenSchulungsmatrix: wer lernt was im RedaktionsteamRolleSchwerpunkt der SchulungTurnusRedaktionAlt-Texte, Linktexte, Überschriften-StrukturOnboardingFachautorenLeichte und Einfache Sprache, TabellenhalbjährlichGrafik und LayoutKontraste, Bild-Typen, getaggte PDFshalbjährlichVerantwortlicheBFSG-Pflichten, Erklärung, FeedbackjährlichFehlender Alt-Text auf 55,5 Prozent und übersprungene Überschriften auf 39 Prozent der Startseiten (WebAIM Million, 2025)
Praxis & Umsetzung 3. Juli 2026

Barrierefreie Inhalte: Schulung fürs Redaktionsteam

Barrierefreiheit ist ein laufender Redaktionsprozess: Alt-Texte, Linktexte, Überschriften und barrierefreie PDFs im Team schulen und Wieder-Verbarrieren vermeiden.

13 Min. Lesezeit
Barrierefreie Navigation: Skip-Links, Menüs und FokusWCAG 2.4.1 Bypass Blocks (A) | 2.4.3 Focus Order (A) | 4.1.2 Name Role Value (A) | 2.4.7 Focus Visible (AA)1. Skip-LinkZum Hauptinhalt springenErster fokussierbarer LinkSichtbar nur bei :focushref="#main" -> <main tabindex="-1">spart bis zu 20 Tab-Stops2. Navigation<nav aria-label="Hauptmenü">aria-currentaria-expandedPfeiltastenEsc schließtDisclosure-Muster statt role=menuLandmark wird von Screenreadern erkannt3. Sichtbarer FokusFokussiertes Element:focus-visible, Kontrast 3:1mind. 2px, nicht outline:none2.4.11 Focus Not Obscured (AA)Logische Fokus-Reihenfolge per TabSkip-LinkNavigationHauptinhaltFormularFooter71,6% der Screenreader-Nutzer navigieren zuerst über Überschriften (WebAIM 2024)Skip-Links, Landmarks und sichtbarer Fokus ergänzen einander zu einer barrierefreien Navigation
Praxis & Umsetzung 22. Juni 2026

Barrierefreie Navigation: Skip-Links, Menüs und Fokus

Barrierefreie Navigation nach WCAG 2.2: Skip-Links, zugängliche Menüs mit ARIA, aria-current, Landmarks und sichtbares Fokusmanagement in der Praxis.

14 Min. Lesezeit
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
Praxis & Umsetzung 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
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
Praxis & Umsetzung 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
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
Praxis & Umsetzung 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
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
Praxis & Umsetzung 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
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
Praxis & Umsetzung 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
Accessibility by Design: früh verankern statt teuer nachrüstenSanierungskosten über die ProjektphasenKostenKonzeptDesignEntwicklungBetriebVon Anfang anNachträglich saniertKlare Rollen, ein gemeinsames ZielUXUX und DesignKontrast, Fokus, Design-TokensDevEntwicklungSemantik, Tastatur, ARIA-ZuständeRedRedaktionAlt-Texte, Struktur, klare SpracheDefinition of Done: barrierefrei heißt fertigShift-Left: Barrierefreiheit über den gesamten Prozess1KonzeptionZielgruppen undAnforderungen klären2Design-TokensKontrast und Fokusim System verankern3EntwicklungSemantik, Tastatur,ARIA von Beginn an4Definition of DoneBarrierefrei alsAbnahmekriterium5BetriebMonitoring undRedaktionsroutine
Praxis & Umsetzung 11. Mai 2026

Accessibility by Design: Barrierefreiheit von Anfang an

Barrierefreiheit früh verankern statt teuer nachrüsten: Kostenvorteil der Shift-Left-Strategie, klare Rollen, Design-Tokens und Definition of Done fürs BFSG.

12 Min. Lesezeit
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
Praxis & Umsetzung 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
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
Praxis & Umsetzung 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
Accessibility Testing: Automatisiert und manuell prüfenAutomatisierte TestsDecken 30-40% der WCAG-Kriterien abBrowser-PrüfungEntwicklertools im BrowserDOM-RegelprüfungWCAG-RegelbasisKontrast-ScanFarb- und UI-KontrastCI/CD-TestsPipeline-IntegrationManuelle TestsDecken die übrigen 60-70% abTastatur-TestTab, Enter, EscapeScreenreaderWindows, macOS, iOSKognitiver TestVerständlichkeitUser TestingBetroffene NutzerProfessionelles WCAG-Audit = Automatisiert + Manuell + User TestingNur die Kombination deckt alle WCAG 2.2 Erfolgskriterien abKontrast-PrüfungAutomatisiert + Browser-EntwicklertoolsText 4,5:1 | UI 3:1 | Fokus 3:1Struktur-PrüfungHeading-Hierarchie, LandmarksARIA-Attribute, SemantikInteraktions-PrüfungFormulare, Navigation, ModalsFokus-Management, Live RegionsErgebnis: Priorisierter MaßnahmenplanKritisch: Sofort behebenSchwer: Kurzfristig planenModerat: Mittelfristig umsetzen
Praxis & Umsetzung 4. Mai 2026

Accessibility Testing: Methoden und Prüfansätze

Barrierefreiheitstests für Websites: Automatisierte und manuelle Prüfmethoden, Tastatur- und Screenreader-Tests sowie das professionelle WCAG-Audit im Überblick.

13 Min. Lesezeit