BFSG CHECKLISTE
BY VAST FORWARD

• Nicht-Textinhalte identifizieren

• • Alle relevanten Elemente (Bilder, Grafiken, Objekte, etc.) festlegen.

• Textalternativen bereitstellen

• • Für jedes Element eine aussagekräftige, gleichwertige Beschreibung (z.B. mittels alt-Attribut) implementieren.

• Ergänzende Langbeschreibungen

• • Falls der Alternativtext nicht ausreichend ist, eine detaillierte Beschreibung anbieten und im Alternativtext darauf verweisen.

• Dekorative Inhalte kennzeichnen

• • Für rein dekorative Grafiken leere alt-Attribute verwenden oder diese anderweitig vor Screenreadern verbergen.

• CAPTCHAs

• • Grafische CAPTCHAs vermeiden oder durch barrierefreie Alternativen ersetzen.

• Aufgezeichnete Audio- und Videoinhalte

• • Audio: Für alle aufgezeichneten Audio-Medien sind Textabschriften bereitzustellen.
  • Video: Für aufgezeichnete Video-Medien müssen entweder Textabschriften vorliegen oder sie sind mit Textabschriften bzw. Audio-Beschreibungen ausgestattet.

• Untertitel

• • Aufgezeichnete Videos: Müssen mit synchronen Untertiteln versehen sein.
  • Live-Audio: Erfordert ebenfalls synchrone Untertitel.

• Audiodeskription und Medienalternativen

• • Audio (z.B. Podcasts): Müssen beschreibende Textabschriften besitzen.
  • Video: Soll mit beschreibender Text- oder Audio-Beschreibung versehen sein, wobei aufgezeichnete Videos zusätzliche Audio-Beschreibungen für visuelle Inhalte enthalten, die nicht in der Standardbeschreibung enthalten sind.

• Info und Beziehungen

• • Überschriften: Durch richtige Markup Verwendung (h1 bis h6) muss die Struktur des Dokuments klar vermittelt werden können.
  • Listen: Aufzählungen als Listen (ul, ol, dl) formatieren.

  • Formulare

  • • Gruppierung zusammengehöriger Informationsblöcke sicherstellen
    • Logische Verknüpfung von Beschriftungen und zugehörigen Eingabefeldern

  • Daten-Tabellen

  • • Markup korrekt nutzen (Spalten-, Zeilen- und Tabellenüberschriften, Zusammenfassungen)
    • Seriell lesbar und nicht für Layoutzwecke verwenden
  • Zeichenverwaltung: Spezieller Text (z.B. Zitate, Quellenangaben) korrekt formatieren (z.B. mittels

    und ).

• Bedeutungstragende Reihenfolge

• • Stellen Sie sicher, dass die logische Reihenfolge auch ohne CSS bzw. für Screenreader erhalten bleibt!
  • Inhalte in Tabellen müssen korrekt linearisiert werden (keine leeren Zellen zur Abstandserzeugung).
  • Abstand nicht mittels Leerzeichen sondern durch CSS realisieren.
  • Keine inhaltliche Verwirrung durch positionierte Inhalte mit CSS.

• Sensorische Eigenschaften

• • Keine ausschließlich optischen oder akustischen Anweisungen verwenden (z.B. "den grünen Schalter links betätigen").

• Ausrichtung

• • Die Inhalte dürfen ihre Ansicht und Bedienung nicht auf eine einzige Bildschirm-Ausrichtung (z.B. Hoch- oder Querformat) beschränken, es sei denn, eine bestimmte Ausrichtung ist unerlässlich.

Die Idee ist, dass Inhalte auf verschiedene Arten dargestellt werden können, ohne dass Informationen oder Strukturen verloren gehen.¹

• Farbverwendung

• • Informationen dürfen nicht ausschließlich über Farbe vermittelt werden.
  • Bei farblicher Unterscheidung (z.B. Für Links) muss ein Kontrastverhältnis von mindestens 3:1 zum Fließtext bestehen.

• Audio-Steuerelemente

• • Spielt Audio automatisch länger als 3 Sekunden, muss ein Stoppschalter vorhanden sein.

• Kontrast (Minimum)

• • Normaler Text: Mindestkontrast von 4,5:1.
  • Große, fettgedruckte Texte (ab 18 Pt bzw. 14 Pt fett): Mindestkontrast von 3:1.
  • • Gilt für alle Texte, Hinweise, Eingabefeldränder und informative Grafiken – ausgenommen Logos, Schriftzüge und rein dekorative Grafiken.

• Textgröße ändern

• • Schriftgrößen in CSS relativ (% oder em) definieren, um eine Vergrößerung per Browser-Zoom oder Textvergrößerung zu ermöglichen

• Bilder von Textinhalten

• • Bevorzuge echten Text statt Schriftgrafiken.
  • Ausnahmen: Inhalte, die skalierbar und ohne CSS lesbar sind oder notwendige Elemente wie Logos/Markennamen darstellen; hier können alt- und title-Attribute als Alternative genutzt werden.

Ziel ist, dass Benutzer*Innen keine Probleme haben, Inhalte zu sehen und zu hören (einschließlich der Trennung zwischen Vordergrund und Hintergrund).

• Tastaturzugänglichkeit

• • Alle Seitenfunktionen, Seitenelemente, Formularfelder, Kontrollelemente und Schalter müssen über die Tastatur (mittels Tabulatortaste) erreichbar und bedienbar sein.
  • Es darf keine festgelegte zeitliche Begrenzung für einzelne Tasteneingaben bestehen.

• Vermeidung von Tastaturfallen

• • Der Tastaturfokus darf bei keinem Element blockiert sein.
  • Jedes Element muss per Tastatur angesteuert und wieder verlassen werden können.
  • Die Benutzer*innen werden informiert, wenn andere Tastaturtasten als die üblichen (Tabulator-, Pfeiltasten) verwendet werden.

• Zeiteinteilung anpassbar

• • Standard: Eine Seite hat keine Zeitlimitierung.
  • Ausnahmen: Falls Zeitbegrenzungen vorhanden sind, müssen Benutzer*Innen vor der Interaktion die Möglichkeit haben, diese abzuschalten oder anzupassen.

• Pausieren, beenden, ausblenden

• • Für automatisch gestartete, bewegte, blinkende, scrollende oder sich aktualisierende Inhalte (länger als 5Sek.) einen Mechanismus bereitstellen, der es ermöglicht, diese zu stoppen, zu beenden oder auszublenden.
  • Bei Autoaktualisierungen zusätzlich die Option bieten, die Aktualisierung zu beenden, auszublenden oder die Frequenz zu kontrollieren.

• Blinkende Elemente erfassen

• • Identifizieren Sie alle Elemente, die blinkende Effekte enthalten.
  • Stellen Sie sicher, dass kein Element mehr als dreimal pro Sekunde blinkt.
  • Überprüfen Sie, ob der Blitz unterhalb des definierten Intensitäts-Grenzwerts liegt (Grenzwert festgelegt von W3C).

  • Frequenz

  • • Es dürfen nicht mehr als 3 Flash-Ereignisse innerhalb einer Sekunde in einem zusammenhängenden Bereich auftreten.

  • Fläche

  • • Der relevante Bereich beträgt 341 x 256 CSS-Pixel (entspricht ca. 87.296 CSS-Pixel), also dem zentralen Sichtfeld, in dem Menschen besonders empfindlich reagieren.

  • Helligkeitsänderung

  • • SDR-Inhalte: Ein Flash wird definiert als eine Änderung der Helligkeit von mindestens 20cd/m², wenn der dunklere Zustand unter 160cd/m² liegt.
    • HDR-Inhalte: Hier gilt als Schwellenwert ein Michelson-Kontrast von 1/17 oder mehr.

Das Ziel ist Inhalte nicht auf Arten zu gestalten, von denen bekannt ist, dass sie zu Anfällen führen.

• Blöcke umgehen

• • Sie sollten Sprungmarken einbauen, um sich wiederholende Informationsblöcke überspringen zu können.
  • Sich wiederkehrende Blöcke gruppieren oder mit Überschriften kennzeichnen.

• Seiten-Titel

• • Jede Webseite benötigt einen aussagekräftigen <title>-Tag im Metabereich, der Thema oder Zweck beschreibt.

• Logische Fokus-Reihenfolge

• • Die Reihenfolge der Links in Navigation und Inhalt muss nachvollziehbar und logisch sein.

• Linkzweck im Kontext

• • Linktexte sollen ohne weitere Erklärung verständlich sein oder durch den Kontext unterstützt werden.
  • Hinweise auf Formatwechsel im Linktext oder Kontext einfügen.

• Zusätzliche Navigationsmethoden

• • Neben der internen Navigation mindestens eine alternative Methode (z.B. Suchfunktion, Sitemap/Inhaltsverzeichnis) zur internen Navigation bereitstellen.

• Überschriften und Beschriftungen

• • Informative Überschriften gliedern den Inhalt eindeutig.
  • Formulare benötigen sinnvolle Label-Beschriftungen.
  • Bei Imagemaps und Karten sind aktive Zonen sowie deren Funktionen bzw. Instruktionen klar erkennbar.

• Sichtbarer Fokus

• • Elemente mit Fokus werden bei der Ansteuerung mit der Tastatur sichtbar hervorgehoben.
  • Sprunglinks werden beim Ansteuern sichtbar.

Es geht darum Mittel anzubieten, damit Nutzer*Innen Inhalte finden und ihre Standorte erkennen können.

• Sprache der Seite

• • Jede Webseite muss eine korrekte Sprachdeklaration besitzen (z.B. <html lang="de">).

• Sprache von Teilen

• • Anderssprachige Textabschnitte und einzelne anderssprachige Wörter, die sonst missverständlich wären, mit dem lang-Attribut auszeichnen.

• Bei Fokus

• • Sie sollten sicherstellen, dass sich der Inhalt nicht ändert, wenn ein Element den Fokus erhält.

• Bei Eingabe

• • Kein automatischer Wechsel des Inhalts, wenn Benutzer*Innen eine Eingabe tätigen, ohne dass dies den Benutzer*Innen vorher angekündigt wurde.

• Konsistente Navigation

• • Die Navigationselemente müssen innerhalb des gesamten Webauftritts einheitlich angeordnet und aufgebaut sein.

• Konsistente Erkennung

• • Elemente mit gleicher Funktion bleiben innerhalb eines Webauftritts gleich.

• Konsistente Hilfe

• • Wenn eine Webseite einen oder mehrere der folgenden Hilfemechanismen anbietet und diese Mechanismen sich auf mehreren Seiten innerhalb eines zusammengehörigen Webauftritts wiederholen, sollen sie in derselben Reihenfolge im Verhältnis zum übrigen Seiteninhalt erscheinen, sofern keine Änderung durch die Nutzer*innen initiiert wird:
  • • Persönliche Kontaktdaten
    • Mechanismus für den direkten menschlichen Kontakt
    • Selbsthilfe-Option
    • Vollautomatisierter Kontaktmechanismus

• Fehlererkennung

• • Automatisch erkannte Eingabefehler geben in der Fehlermeldung einen klaren Hinweis auf das fehlerhafte Element in Textform.

• Beschriftungen/Anweisungen

• • Bei erwarteten Benutzereingaben müssen eindeutige Labels oder Hinweise bereitgestellt werden.

• Fehlerempfehlung

• • Bei fehlerhaften Eingaben müssen konkrete Korrekturempfehlungen gegeben werden.

• Fehlervermeidung (rechtliche/finanzielle Daten)

• • Eingaben mit rechtlichen oder finanziellen Folgen müssen vor dem Absenden überprüft, geändert, gelöscht oder bestätigt werden können.

• Syntaxanalyse

• • Die verwendete Markup-Sprache HTML oder XHTML muss standardkonform und fehlerfrei sein.

• Name, Rolle, Wert

• • Bei generierten und selbst programmierten Inhalten muss Markup so benutzt werden, dass es die Barrierefreiheit unterstützt.

Hier geht es darum, die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken, zu maximieren.