BFSG Barrierefreiheitsstärkungsgesetz:
Inkrafttreten am 28. Juni 2025

BFSG-Prüf-Tools (Auswahl):
Wie barrierefrei bzw. barrierearm ist meine Website?

Die folgenden Tools (außer Generator) stellen eine Auswahl dar. Es gibt sie als Browsererweiterungen für Chrome, die meistens auch für Firefox und  Edge. Die Ergebnisse sind nicht rechtsverbindlich. Sie geben aber konkrete Hilfestellungen und vermitteln einen Überblick, auch über den Arbeitsumfang.

Die Stufen sind kumulativ. Um die Konformität mit Stufe AA zu beanspruchen, muss eine Website alle Kriterien der Stufen A und AA erfüllen. Ebenso bedeutet Konformität mit Stufe AAA, dass auch die Kriterien der Stufen A und AA erfüllt wurden.

WCAG-Standards A, AA, AAA

   WCAG-Checkliste

Es gibt über 450 (!) Hinweise und Fehler, die auf     https://www.w3.org/WAI/WCAG21/Techniques/#failures aufgeführt und detailliert beschrieben sind. 

Auch PDF-Dateien müssen barrierefrei werden!

Mehr demnächst ...

BFSG-Checklisten "Webdesign"

Auch die nachfolgenden Checklisten und Erklärungsvideos sind nicht rechtlich bindend!

Checkliste für barrierefreies = barrierearmes Webdesign

1. HTML-Struktur

• Validität des HTML-Codes

  • Verwenden Sie einen HTML-Validator (z. B. den W3C Validator), um sicherzustellen, dass Ihr HTML-Code fehlerfrei ist.
  • Achten Sie auf geschlossene Tags und eine korrekte Syntax.

• Semantische Auszeichnung

  • Verwenden Sie semantische HTML-Tags wie <header>, <main>, <footer>, <section>, um die Struktur der Seite klar zu definieren.
  • Vermeiden Sie rein optische Gestaltung mit <div> oder <span>.

• Überschriften-Hierarchie

  • Beginnen Sie mit einer einzigen <h1>-Überschrift pro Seite.
  • Verwenden Sie nachfolgende <h2> bis <h6> in hierarchischer Reihenfolge.
  • Beispiel:

    htmlCode kopieren
    <h1>Hauptüberschrift</h1>
    <h2>Unterüberschrift</h2>
    <h3>Weitere Details</h3>
    

2. Kontraste und Farben

• Farbkontrast überprüfen

  • Der Farbkontrast zwischen Text und Hintergrund muss den WCAG-Standards entsprechen:
    • Normaler Text: mindestens 4.5:1.
    • Großer Text (>18pt oder >14pt fett): mindestens 3:1.
  • Nutzen Sie Tools wie den Contrast Checker.

• Farben nicht allein zur Informationsvermittlung verwenden

  • Ergänzen Sie farbliche Hinweise durch Text oder Symbole.
  • Beispiel:

    htmlCode kopieren
    <p><span style="color:red;">* Pflichtfeld</span> Bitte ausfüllen.</p>
    

3. Bilder und Grafiken

• Alternativtexte für Bilder

  • Verwenden Sie das alt-Attribut, um Bilder zu beschreiben.
  • Beispiel für inhaltlich relevante Bilder:

    htmlCode kopieren
    <img src="beispiel.jpg" alt="Blick auf die Berge im Sonnenuntergang">
    

  • Dekorative Bilder sollten ein leeres alt haben:

    htmlCode kopieren
    <img src="linie.jpg" alt="">
    

• Komplexe Grafiken

  • Stellen Sie für Diagramme oder Infografiken eine ausführliche Beschreibung bereit, z. B. als Text oder Link zu einer erklärenden Seite.

4. Seitentitel

• Eindeutiger und beschreibender Titel
  • Der Seitentitel sollte den Inhalt der Seite zusammenfassen und in der <title>-Tag stehen.
  • Beispiel:

    htmlCode kopieren
    <title>Kontakt – Beispiel GmbH</title>
    

5. Überschriften

• Logische und strukturierte Überschriften
  • Nutzen Sie Überschriften nicht nur für optische Zwecke. Jede Überschrift sollte den Inhalt sinnvoll gliedern.
  • Vermeiden Sie Überschriften-Sprünge (z. B. von <h1> zu <h3>).

6. Links

• Eindeutige Linktexte

  • Vermeiden Sie generische Texte wie „Hier klicken“. Der Linktext sollte den Zweck des Links beschreiben.
  • Beispiel:

    htmlCode kopieren
    <a href="kontakt.html">Kontaktformular</a>
    

• Links visuell hervorheben

  • Links sollten sich durch Unterstreichung oder eine andere visuelle Eigenschaft von normalem Text unterscheiden.
  • CSS-Beispiel:

    cssCode kopieren
    a {
      text-decoration: underline;
      color: blue;
    }
    

7. Videos

• Untertitel und Transkripte

  • Stellen Sie Untertitel für Videos bereit.
  • Ergänzen Sie ein vollständiges Transkript, wenn das Video Informationen enthält, die nur über Ton vermittelt werden.

• Audiodeskriptionen

  • Fügen Sie bei Bedarf Audiodeskriptionen für visuelle Inhalte hinzu.

• Bedienelemente

  • Videos sollten steuerbare Elemente wie Play/Pause enthalten. Diese müssen über die Tastatur zugänglich sein.
  • Beispiel:

    htmlCode kopieren
    <video controls>
      <source src="video.mp4" type="video/mp4">
      Ihr Browser unterstützt das Video-Tag nicht.
    </video>
    

8. PDF-Dokumente

• Strukturierte Dokumente erstellen

  • Nutzen Sie Tags in PDF-Dokumenten, um Inhalte strukturiert darzustellen.
  • Fügen Sie Lesezeichen, Überschriften und Alternativtexte für Bilder hinzu.

• Prüfung auf Barrierefreiheit

  • Verwenden Sie Tools wie den Adobe Acrobat Accessibility Checker, um sicherzustellen, dass die PDFs barrierefrei sind.

Konkrete Handlungs-Empfehlungen zur BFSG-Umsetzung einer Website

Wenn Sie die Vorgaben der BFSG (erst einmal) NICHT erfüllen müssen

"Take a deep breath and relax!" 😉 Atmen Sie tief durch und entspannen Sie sich. 
Anschließend überlegen Sie dann vielleicht, ob Sie nicht dennoch einige BFSG-Optimierungen an Ihrer Website durchführen möchten, um die Barrieren für Menschen mit Behinderungen zu verringern. BFSG-Optimierungen sind gleichzeitig auch SEO Suchmaschinen-Optimierungen und ein wichtiger Rankingfaktor bei Google & Co. A

Wenn Sie die Vorgaben der BFSG bis zum 28. Juni 2025 ERFÜLLEN müssen

Lesen Sie weiter!

Webdesigner finden, die sich mit BFSG auskennen

Aktuell bieten viele Webdesigner und Agenturen BFSG-Prüfungen und die Erstellung von barrierefreien Websites an. 
Eine 100% barrierefreie UND konkurrenzfähige Website kann es m. E. gar nicht geben. Barrierearm oder BFSG-konform ja, aber nicht vollkommen barrierefrei!

Deshalg gilt auch bei der Wahl der "richtigen" Webdesign-Agentur die Devise "Vertrauen ist gut, Kontrolle ist besser" und erst einmal selbst die Website des Anbieters mit WAVE checken!

Wenn die Anzahl der "Errors" und/oder "Contrast Errors" nicht "0" ist, sollten Sie weitersuchen!
Tipp: Überprüfen Sie nicht nur die Startseite, sondern auch ein paar weitere Rubriken!

BFSG-Schmankerl

Checken Sie nicht nur Ihre eigene Website, sondern zwischendurch auch mal die Websites und Shops der "ganz Großen". Viel Spaß! 

😎