Headerbild zeigt ein Rollstuhlsymbol auf einer Straße

Barrierefrei Best Praktice

BFSG

Gesetz zur Umsetzung der Richtlinie (EU) 2019/882 des Europäischen Parlaments und des Rates über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen (BFSG).

 

Barrierefreiheitsstärkungsgesetz (BFSG) wird ab 28.Juni 2025 Pflicht.

  • Davon betroffen insbesondere BtC Webseiten
  • Shops aber ebenso Terminbuchungsfunktionen. (ggf. Einzelfallentscheidungen.)
  • Gilt nicht für Unternehmen mit weniger als 10 Beschäftigen oder weniger als 2 Millionen Euro Jahresumsatz / Jahresbilanzsumme
  • Die zuständige Marktüberwachungsbehörde kann zum Beispiel bestimmen, dass ein Angebot oder eine Dienstleistung nicht weiter angeboten werden dürfen, wenn sie nicht barrierefrei zur Verfügung gestellt werden.
  • Zudem kann der Verstoß als Ordnungswidrigkeit gelten, für die ein Bußgeld von bis zu 100.000 Euro fällig wird.

Layout

  • Webseite funktioniert in Hoch- wie Querformat AA
    Quelle 1
  • Webseite ist ohne Farben nutzbar A / AA
    Quelle 1
  • Überschriften sind durch Fettungen / Schriftgrößen, Einrückungen hervorgehoben / gegliedert A
    Quelle 1
  • Bei Focus auf Element wird ein Rahmen um das Element gesetzt.
  • Der Text lässt sich über den Browser ("Str" + "+") auf 200% vergrößern (1280x786) ohne Überlagerung von Elementen AA
    • Ein Bediehnung der Schriftgrößenänderung durch Buttons ist erlaubt - Barrierefreiheit dieses Buttons muss aber gegeben und 200% Größe erreicht werden.
    Quelle 1
  • Keine Schriftgrafiken (Ausnahme Logos) AA
    Quelle 1
  • Inhalte brechen um / Komplizierte Beschreibung AA
    Quelle 1
  • Kontraste von "wichtigen" Grafiken 3:1 AA
    Quelle 1
  • Zeitbegrenzungen anpassbar A
    Quelle 1
  • Sind bewegte Inhalte abschaltbar? A
    • Ablenkung durch blinkende oder sich bewegende Elemente soll vermieden werden, auf 5 Sekunden begrenzt sein oder abschaltbar sein.
    Quelle 1
  • Verzicht auf Flackern
    Quelle 1
  • Schlüssige Reihenfolge bei der Tastaturbedienung A
    • In etwa enspricht die Reihenfolge der Elemente im Quellcode dem Endergebnis auf der Webseite.
    Quelle 1
  • Aktuelle Position des Fokus deutlich (Kontrast Fokusrahmen beachten 3:1 fokusiert / nicht fokusiert) AA
    Quelle 1
  • Sind alle Unterseiten der Webseite über mindestens 2 Wege zu erreichen AA
    • Durchgängig verfügbare Navigationsmenüs
    • Sitemap
    • Suchfunktion
    • Alles bereits auf der Startseite verlinkt
    • ...
    Quelle 1

Funktional

  • Alternativen für komplexe Zeiger-Gesten A
    Quelle 1
  • Zeigergesten-Eingaben können abgebrochen oder widerrufen werden A
    Vorsicht bei Keydown Events
  • Alternative zu Ziehbewegungen (Drag Drop) vorhanden AA
    Quelle 1
  • Hauptsprache angegeben (html lang-Attr) A
    Quelle 1
  • Keine unerwartete Kontextänderung bei Fokus A
    Quelle 1
  • Konsistente Navigation AA
    Quelle 1
  • Konsistente Bezeichnung AA
    Quelle 1
  • Fokus nicht verdeckt AA
    • Lightboxen die den Fokus überdecken müssen mit ESC schließbar sein.
    Quelle 1
  • Keine Tastaturfalle vorhanden A
    Quelle 1
  • Neu Eingeblendeter Inhalt (z.B. Lightbox) bediehnbar AA
    • Wenn zusätzliche Inhalte durch Darüberfahren mit dem Zeiger erscheinen, können Benutzer den Zeiger über diesen Inhalt bewegen, ohne dass er verschwindet.
    • Es gibt die Möglichkeit, einen eingeblendeten Inhalt zu schließen, ohne den Fokus zu verschieben (z. B. durch Drücken der Escape-Taste oder durch Aktivieren des Elements, dessen Fokussierung den Inhalt einblendet).
    • Der Inhalt schließt nicht selbsttätig nach einer gewissen Zeitspanne.
    Quelle
  • Sinnvoller "title" der Webseite A
    • (Indiviudeller Teil + allgemeine Bezeichnung Webauftritt)
    Quelle 1
  • Korrekte valide HTML Syntax (nach W3C) A
    Quelle 1 W3C Validator
  • Webseite ist ohne Maus nutzbar A
    Quelle 1
  • Bereiche überspringbar A
    • Nutzung von "header, nav, main, aside, footer"
    Quelle 1

Text

  • Kontrast Text Hintergrund 4,5:1 AA
    • Wenn Schrift kleiner als 24px oder 18,7px bei fetter Schrift
    • Ab großer Schrift (24px) gilt 3:1 Kontrast (4,5 bei AAA)
    Quelle 1
  • Textabstände anpassbar (1,5 Fache der Textgröße, Absätze auf 2 Fache ohne Informationsverlust - Verdeckung) AA
    • Wenn Textabstände geändert werden, dürfen keine Elemente Abgeschnitten oder überlappt werden
    Quelle 1
  • Aussagekräftige Überschriften und Beschriftungen A
    Quelle 1
  • Andersprachige Wörter / Textabschnitte mit "lang"-Attribute ausgezeichnet AA
    Quelle 1
  • Bei Aufzählungen Listen auch entsprechende HTML Elemente nutzten (ul ol) A
    Quelle 1
  • Doppelte "<br />" Elemente vermeiden A
    Quelle 1
  • HTML-Strukturelemente (h1-h6) für Überschriften nutzen - Strukturiert verwenden nicht aus Layoutgründen (Größe) A
    Quelle 1
  • HTML-Strukturelemente (blockquote) für Zitate nutzen A
    Quelle 1
  • Schriftgröße mindestens 16px
  • Sind Zitate korrekt mit blockquote umgesetzt / Keine Verwendung von blockquotes als Layoutelement A
  • Zeilenumbrüche über br br sollte vermieden werden A

Buttons / Links / Menüs

  • Aussagekräftige Linktexte / Bedienelemente A
    • Ziel / Zweck muss aus Linktext oder direktem Kontext erkennbar sein
    Quelle 1
  • Sind Bedienelemente (Grafik / Iconbuttons / Links) mit Alternativtexten versehen A
    Quelle 1
  • Sind Bedienelemente ohne sensorische Merkmale nutzbar AA
    • Gemeint sind Kombinationen aus Texten, die auf sensorische Inhalte hinweisen - "Klicken Sie auf den grünen Pfeil" ...
  • Ausgewählte Menüeinträge / Links haben einen Kontrastunterschied von mehr als 3:1 oder Einrückungen, Unterstreichen ... AA Tool Quelle 1
  • Minimale Größe Bediehnelemente mindestens 24px x 24px AA
    Quelle - Ausnahmen

Beispiel:

Mehr erfahren

Bilder

Innenraumbereich mit Türen
  • Sind Grafiken (informationsorentierte Grafiken / Bilder) mit Alternativtexten (z.B. Alt Tags) versehen A
    Quelle 1
  • Layoutgrafiken -> haben diese leere "ALT Tags" A
    Quelle 1

Struktur

  • Korrekte HTML Syntax A
    W3C Validator Tool
  • Keine Layouttabellen A
    Quelle
  • Sinnvolle Reihenfolge der Elemente (Test -> CSS ausschalten) A
    Quelle
  • Gibt es mindestens zwei unterschiedliche Zugangswege AA
    Quelle 1
    • Sind Unterseiten z.B. durch Navigation, eine Suchfunktion oder Sitemap zu finden
  • Werden Komponenten erzeugt aus Elementen die von Natur aus nicht interaktiv sind, so müssen diese bestimmte Bedingungen erfüllen A
    Quelle

Video / Audio

  • Haben stumme Videodateien eine Medienalternative A
    • Ausnahme es sind Medienalternativen zu Text
    Quelle 1
  • Haben aufgezeichnete Videoseinen Untertitel A
    Quelle 1
  • Haben Audiodateien eine Medienalternative (Ausnahme es sind Medienalternativen zu Text) A
    Quelle 1
  • Haben die (Live-)Videos einen Untertitel AA
    Quelle 1
  • Haben Audios eine Volltext Alternative A
    Quelle 1 Quelle 2
  • Für informationstragende visuelle Videoinhalte muss eine Audiodeskription bereitgestellt werden. A
  • Töne / Musik die automatisch starten (über 3s) müssen abschaltbar sein. A
    Quelle 1

Formular

Wählen Sie ihre Pizza Zutaten aus:

Bitte füllen Sie die folgenden Felder aus um das Kontaktformular ab zu schicken.

Label verwenden - ggf. verstecken (wichtig richtige Versteckart)
Placeholdertexte sind auch eine Möglichkeit - wird aber eher von abgeraten - Vorsicht auch wegen Kontrastverhältnis (wird oft heller dargestellt)!!!

  • Interresante Seite zum Thema Barrierefreie Formulare:
    Hier
  • Beschriftung von Formularelementen programmatisch ermittelbar (Label + for-Attribute) A
    Quelle 1
  • Eingabefelder zu Nutzerdaten (Formulare) vermitteln den Zweck AA
    Quelle 1 Autocomplete Nutzung
  • Sichtbare Beschriftung von Bediehnelementen ist Teil des zugänglichen Namens A
    Quelle 1
  • Fehlerausgabe bei Formularen A
    • z.B.: Am Seitenbeginn, Felder werden hervorgehoben, Labeltexte angepasst, Fehlermeldungen in der Nähe des Feldes (mit labelledby, aria-descibedby getagt)
    Quelle 1
  • Hilfe bei Fehlern -> Hilfe zur Fehlerkorrektur AA
    Quelle 1
  • Keiner redundante (wiederholende) Eintragungen nötig A
    • Ausname: Sicherheitsnotwendige Eintragungen
    Quelle 1
  • Beschriftungen von Formularelementen vorhanden A
    Quelle 1
  • Fehlervermeidung (Überprüfung der Eingaben und Korrektur möglich) bei rechtlich bindenden Verpflichtungen in Formulare AA
    Quelle 1
  • Redudanter Eintrag (Vorausfüllung von Formularen anhand vorheriger Formulare möglich) A
    Quelle 1
    • Ausnahmen z.B.: aus Sicherheitsgründen
  • Eine Authentifizierung (Login) darf keine kognitive Funktiontest enthalten AA
    Quelle 1
  • Statusmeldungen programmatisch verfügbar AA
    Quelle 1
    • Gibt es z.B. nach Formularversand, (z.B. beim Hinzufügen eines Produktes in den Warenkorb) eine Ausgabe (barrierefrei) / Meldungsbox wird als "aria-live" Region getagt
    • aria-live = none -> Werden nicht im Screenreader ausgegeben
    • aria-live = polite -> Geringe Dringlichkeit (Erst Info wenn keine Aktivität)
    • aria-live = assertive -> hier Dringlichkeit - Unmittelbare Information
    aria-live-region
  • Pflichtfelder in Formularen sind z.B. mit * gekennzeichnet
  • Statusmeldung programatisch verfügbar AA
    • Wird die Seite nach dem Formularversand neu geladen mit einer Statusmeldung entfällt der Schritt
    • Ist die generierte Statusmeldung bzw. deren Container mit dem ARIA-Live-Region / role="status" ausgezeichnet.
    Quelle 1 Aria Role Info
  • Informationen aller Falsch / richtig werden nicht nur z.B. über Rot Grün kommuniziert. A
    • Icon wechselt auf Klick nicht nur Farbe sondern auch Beschriftung.
    Quelle 1
  • Name, Rolle, Wert verfügbar A
    • Werden z.B. durch Javascript Bediehnelemente mit anderen Elemente gebaut, die normalerweise eine andere Funktion haben. So sind hier durch Aria Attribute zu hinterlegen die über diese neue Rolle des Elements hinweisen, so das dieses z.B. für Blinde mit Screenreader nachvollziehbar ist,
    • Inbesonders beachten bei gestylten input Elementen - Select - Checkbox - Radio
    Quelle 1
    Alternative für Selectrify Checkbox
  • Grafische Buttons mit alt Tag ausstatten
    • <input type="image" alt="Jetzt abschicken" / >
  • Formularelemente endweder mit Label ausstatten oder title aber nicht beidem!

Accordion + Beispiel

  • Bei Accordions ist einniges zu beachten:
    Quelle 1

Accordion Beispiel:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Captchas

  • Captchabilder müssen so beschrieben sein (alt-Tag), dass der Zweck von Ihnen deutlich ist und wie man eine nicht bildbasierende Alternative findet (+ Vorhanden ist) AA
    Quelle 1
  • Umgedreht gilt dieses auch für Audiocaptchas AA
    Quelle 1

Lightbox

bild 1 bild 2 bild 3 bild 4 bild 5 bild 6

Tabellen

  • Korrekte Nutzung und Aufbau von Datentabellen A
    Quelle 1 Zusatz Ausnahmen
  • Korrekte Syntrax Tabelle / Zeilenspaltenüberschriften mit "th" getagt A

Noch to dodos

  • PDFs auf Webseiten - AGBs ?
  • Mehrere Möglichkeiten der Kontaktaufnahme anbisten
  • https://www.verdure.de/magazin/strategie/barrierefreiheitsstarkungsgesetz-websites-2025-bfsg-bitv-wcag/