Zum Inhalt springen
BFSG-Compliance seit 2025

Blog — Seite 2

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 Maenner haben eine Farbsehschwaeche (Colour Blind Awareness)
WCAG 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 Lesen →
Barrierefreie Navigation: Skip-Links, Menues 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="Hauptmenue">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
Barrierefreiheit 22. Juni 2026

Barrierefreie Navigation: Skip-Links, Menues und Fokus

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

14 Min. Lesezeit Lesen →
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 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 Lesen →
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 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 Lesen →
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 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 Lesen →
Barrierefreiheitserklärung: Pflichtbestandteile nach BFSGErklärung zur BarrierefreiheitStand: 12.06.20261. KonformitätsstatusTeilweise konformGrundlage: WCAG 2.2 AA, EN 301 549, BFSG Anlage 32. Bekannte nicht barrierefreie InhalteAlt-PDF ohne Tags (Korrektur bis Q4 2026)Drittanbieter-Video ohne UntertitelOnline-Formular: barrierefrei umgesetzt3. Feedback und KontaktIhre E-Mail (für Rückmeldung)Welche Barriere ist Ihnen begegnet?Barriere meldenAntwort in angemessener FristBFSG-PflichtangabenKonformitätsstatus benennenNicht barrierefreie InhalteBegründung von AusnahmenFeedback-Mechanismus mit LinkKontakt der zuständigen StelleDatum der ErstellungBarrierefreies Format der ErklärungDurchsetzungsverfahrenVerweis auf Marktüberwachung (MLBF)Eskalation bei ausbleibender AntwortLeicht auffindbar wie Impressum7,9 Mio. schwerbehinderte Menschen in Deutschland (Statistisches Bundesamt, 2024)
BFSG 12. Juni 2026

Barrierefreiheitserklärung und Feedback-Mechanismus

Was die Barrierefreiheitserklärung nach BFSG und EN 301 549 enthalten muss: Konformitätsstatus, nicht barrierefreie Inhalte, Feedback-Mechanismus und Kontakt.

13 Min. Lesezeit Lesen →
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 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 Lesen →
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 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 Lesen →
BFSG-Durchsetzung: Vom Hinweis zur MaßnahmeEskalationsstufen der Marktüberwachung nach BFSG (Paragraphen 19 bis 25)1MängelmeldungNutzer, Verbände oderBehörde meldet Barrierean die Aufsichtsstelle2PrüfungBehörde fordert Unterlagenund Konformitätsnachweisvom Unternehmen an3AufforderungFrist zur Beseitigungder Barrieren wirdgesetzt4MaßnahmenAnordnung, Untersagungoder Bußgeld imgesetzlichen RahmenWer kann reagieren?Marktüberwachungsbehörden der LänderAnerkannte Verbände (Verbandsklage)Betroffene Nutzerinnen und NutzerWas schützt das Unternehmen?Dokumentierte WCAG 2.2 AA KonformitätAktuelle Erklärung zur BarrierefreiheitFunktionierender Feedback-MechanismusRisiko sinkt mit nachweisbarer KonformitätAudit-Protokoll - Maßnahmenplan - Erklärung zur Barrierefreiheit - Re-Audit - Dokumentation der Behebung
BFSG 5. Juni 2026

BFSG-Durchsetzung: rechtliche Risiken sicher senken

Wie das BFSG durchgesetzt wird: Marktüberwachung, Verbandsklagerecht, Mängelmeldungen, Fristen und gesetzliche Maßnahmen. Sachlich erklärt, mit Handlungsplan.

13 Min. Lesezeit Lesen →