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.

• Bestimmung des Eingabezwecks

• • Der Zweck jedes Eingabefeldes, das Informationen über den Benutzer erfasst, kann durch Software bestimmt werden, wenn:
  • • das Eingabefeld einem Zweck dient, der im Abschnitt Eingabezwecke für Bestandteile der Benutzerschnittstelle bestimmt ist; und
    • der Inhalt mit Technologien implementiert wird, die die Bestimmung der erwarteten Bedeutung für Formulareingabedaten unterstützen.

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.

• Umfluss (Reflow)*

• • Inhalte können ohne Informations- oder Funktionsverlust dargestellt werden, ohne dass dafür ein Scrollen in zwei Dimensionen erforderlich ist für:
  • • vertikal scrollenden Inhalt mit einer Breite, die 320 CSS-Pixeln entspricht.
    • horizontal scrollenden Inhalt mit einer Höhe, die 256 CSS-Pixeln entspricht.

• Nicht-Text-Kontrast

• • Ein Kontrastverhältnis von mindestens 3:1 zu benachbarten Farben gilt für die visuelle Präsentation von:
  • • Bestandteile der Benutzerschnittstelle: Visuelle Informationen, die zur Identifizierung von Bestandteilen der Benutzerschnittstelle und Zuständen benötigt werden, außer bei inaktiven Bestandteilen oder wenn das Aussehen des Bestandteils durch den Benutzeragenten bestimmt und nicht vom Autor geändert wird.
    • Grafische Objekte: Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind, es sei denn, eine bestimmte Präsentation von Grafiken ist unentbehrlich für die zu vermittelnde Information.

• Textabstand**

• • Bei Inhalten, die mit Auszeichnungssprachen implementiert werden, die die folgenden Stileigenschaften für Text unterstützen, kommt es zu keinem Verlust von Inhalt oder Funktionalität, wenn man sämtliche folgenden Einstellungen vornimmt und keine andere Stileigenschaft ändert:
  • • Zeilenhöhe (Zeilenabstand) auf mindestens das 1,5-Fache der Schriftgröße.
    • Abstand nach Absätzen auf mindestens das 2-Fache der Schriftgröße.
    • Buchstabenabstand (Laufweite) auf mindestens das 0,12-Fache der Schriftgröße.
    • Wortabstand auf mindestens das 0,16-Fache der Schriftgröße.

• Inhalt bei Überfahren mit dem Zeiger oder Tastaturfokus ("Hover" oder "Focus")***

• • Wenn durch das Überfahren mit dem Zeiger oder durch Tastaturfokus zusätzlicher Inhalt sichtbar wird, der anschließend bei Entfernen des Zeigers oder des Tastaturfokus wieder ausgeblendet wird, muss folgendes zutreffen:
  • • Verwerfbar (Dismissible): Es gibt einen Mechanismus, um den zusätzlichen Inhalt zu verwerfen, ohne den Zeiger oder den Tastaturfokus zu bewegen, es sei denn, der zusätzliche Inhalt kommuniziert einen Eingabefehler oder verdeckt oder ersetzt andere Inhalte nicht.
    • Überfahrbar (Hoverable): Wenn zusätzlicher Inhalt durch Überfahren mit dem Zeiger ausgelöst werden kann, dann kann der Zeiger über den zusätzlichen Inhalt bewegt werden, ohne dass der zusätzliche Inhalt verschwindet.
    • Beständig (Persistent): Der zusätzliche Inhalt bleibt sichtbar, bis der Auslöser des „Hover“ oder „Focus“ entfernt wird, der Benutzer ihn verwirft oder die dazugehörige Information nicht mehr gültig ist.

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

^*AUSNAHME: Ausgenommen sind Inhaltsbereiche, die für Nutzung oder Verständnis zwingend ein zweidimensionales Layout benötigen.

^*HINWEIS:

• 320 CSS-Pixel entsprechen einer anfänglichen Viewport-Breite von 1280 CSS-Pixeln bei 400% Zoom. Für Webinhalte, die zum horizontalen Scrollen gestaltet sind (z. B. mit vertikalem Text), entsprechen 256 CSS-Pixel einer anfänglichen Viewport-Höhe von 1024 CSS-Pixeln bei einem Zoom von 400%.
• Beispiele für Inhalte, die ein zweidimensionales Layout erfordern, sind Bilder, Karten, Diagramme, Videos, Spiele, Präsentationen, Datentabellen und Benutzerschnittstellen, bei denen es notwendig ist, Werkzeugleisten im Blick zu behalten, während der Inhalt bearbeitet wird.

^**AUSNAHME: Menschliche Sprachen und Schriften, die eine oder mehrere dieser Textstileigenschaften im geschriebenen Text nicht verwenden, können dieses Erfolgskriterium erfüllen, indem sie nur die Eigenschaften verwenden, die für diese Kombination von Sprache und Schrift existieren.

^***AUSNAHME: Die visuelle Darstellung des zusätzlichen Inhalts wird durch den Benutzeragenten gesteuert und nicht durch den Autor verändert.

^***HINWEIS:

• Zu den Beispielen für zusätzliche Inhalte, die vom Benutzeragenten gesteuert werden, zählen Browser-Tooltips, die durch die Verwendung des HTML-title-Attributs erzeugt werden.
• Durch den Autor definierte Tooltips, Untermenüs und andere nicht modale Popups, die bei „Hover“ und „Focus“ angezeigt werden, sind Beispiele für zusätzliche Inhalte, die unter dieses Kriterium fallen.

• 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.

• Zeichentastenbefehle

• • Wenn ein Tastaturkürzel im Inhalt nur mit Buchstaben (sowohl Groß- als auch Kleinbuchstaben), Satzzeichen, Zahlen oder Symbolen implementiert ist, dann ist mindestens eine der folgenden Bedingungen erfüllt:
  • • Abschaltbar: Ein Mechanismus ist verfügbar, um den Befehl abzuschalten.
    • Neu belegbar: Ein Mechanismus ist verfügbar, um das Tastaturkürzel so neu zu belegen, dass er eine oder mehrere nicht druckbare Tasten enthält (z. B. Strg, Alt).
    • Nur bei Fokus aktiv: Das Tastaturkürzel für einen Bestandteil der Benutzerschnittstelle ist nur aktiv, wenn dieser Bestandteil den Fokus hat.

• 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.

• Zeigergesten*

• • Alle Funktionalitäten, die Mehrpunkt- oder pfadbasierte Gesten zur Bedienung verwenden, sind mit einem einzelnen Zeiger ohne pfadbasierte Geste bedienbar, es sei denn, eine Mehrpunkt- oder pfadbasierte Geste ist unentbehrlich.

• Zeigeraufhebung**

• • Für eine Funktionalität, die mit einem einzelnen Zeiger bedient werden kann, muss mindestens eine der folgenden Bedingungen erfüllt sein:
  • • Kein Down-Event: Das Down-Event des Zeigers wird nicht zur Ausführung eines Teils der Funktion verwendet;
    • Abbrechen oder rückgängig machen: Die Funktion wird mit dem Up-Event abgeschlossen, und es gibt einen Mechanismus, um die Funktion vor dem Abschluss abzubrechen oder nach dem Abschluss rückgängig zu machen.
    • Rückgängig bei Up-Event (Up Reversal): Das Up-Event macht jedes Ergebnis des vorangegangenen Down-Events rückgängig.
    • Unentbehrlich: Das Abschließen der Funktion beim Down-Event ist unentbehrlich.

• Beschriftung (Label) im Namen***

• • Bei Bestandteilen der Benutzerschnittstelle mit Beschriftungen (Labels), die Text oder Bilder eines Textes enthalten, enthält der Name den Text, der visuell angezeigt wird.

• Auslösen durch Bewegung****

• • Funktionalitäten, die durch Bewegung von Geräten oder durch Bewegung von Benutzern bedient werden können, müssen auch durch Bestandteile der Benutzerschnittstelle bedient werden können, und die Reaktion auf die Bewegung kann deaktiviert werden, um ein versehentliches Auslösen zu verhindern.

Erleichtern Sie Benutzer*innen die Bedienung von Funktionen durch andere Eingabearten als die Tastatur.

^*HINWEIS: Diese Anforderung gilt für Webinhalte, die Zeigeraktionen interpretieren (d.h. sie bezieht sich nicht auf Aktionen, die zur Bedienung des Benutzeragenten oder assistierender Technik erforderlich sind).

^**HINWEIS:

• Funktionen, die den Tastenanschlag einer Tastatur oder eines Ziffernblocks emulieren, gelten als unentbehrlich.
• Diese Anforderung gilt für Webinhalte, die Zeigeraktionen interpretieren (d.h. sie bezieht sich nicht auf Aktionen, die zur Bedienung des Benutzeragenten oder assistierender Technik erforderlich sind).

^***HINWEIS: Eine bewährte Vorgehensweise ist, den Text der Beschriftung (des Labels) an den Anfang des Namens zu setzen.

^****AUSNAHME:

• Unterstützte Schnittstelle: Die Bewegung wird verwendet, um Funktionen über eine Barrierefreiheit unterstützende Schnittstelle zu bedienen.
• Unentbehrlich: Die Bewegung ist unentbehrlich für die Funktion, und die Aktivität würde dadurch ungültig werden.

• 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.

• Statusmeldungen

• • In Inhalten, die mit Auszeichnungssprachen implementiert sind, können Statusmeldungen mittels Rollen oder Eigenschaften durch Software bestimmt werden, so dass sie dem Benutzer von assistierenden Techniken präsentiert werden können, ohne Fokus zu erhalten.

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