BFSG Portal, Prüfstelle für digitale Barrierefreiheit Kostenlos prüfen

Die BFSG-Checkliste: zehn Punkte im Einzelnen

Jeder Punkt mit seinem Erfolgskriterium, dem Fehler, der in der Praxis am häufigsten auftritt, und der konkreten Behebung. Zum Abarbeiten gedacht, nicht zum Überfliegen. Neun der zehn Punkte messen wir automatisch, den zehnten kann nur ein Mensch beurteilen.

Grundlage: Das BFSG nennt keine technische Norm, sondern verweist über die BFSGV auf die harmonisierte europäische Norm EN 301 549. Deren Kapitel 9 übernimmt für Webinhalte die Erfolgskriterien der WCAG 2.1 auf Stufe AA. Die Nummern hinter jedem Punkt sind diese Kriterien.

  1. Alternativtexte für Bilder

    WCAG 1.1.1
    Worum es geht
    Jedes Bild, das Information trägt, braucht eine Textalternative. Jedes Bild, das nur schmückt, braucht ein leeres alt="", damit Screenreader es überspringen.
    Was meistens schiefgeht
    Nicht der fehlende Alternativtext ist der häufigste Fehler, sondern der nichtssagende: alt="Bild", alt="Grafik" oder der Dateiname aus der Kamera. Formal erfüllt, praktisch wertlos. Der zweite häufige Fehler ist der umgekehrte: Dekoration bekommt eine Beschreibung und lärmt im Screenreader mit.
    Was zu tun ist
    Fragen Sie sich bei jedem Bild: Wenn ich es durch meinen Text ersetze, geht dann etwas verloren? Wenn ja, beschreiben Sie, was zu sehen ist. Wenn nein, alt="". Bei Produktfotos gehört das Produkt hinein, nicht das Wort Produktfoto. Bei Bildern, die gleichzeitig Links sind, beschreibt der Alternativtext das Ziel, nicht das Bild.

  2. Sprache der Seite

    WCAG 3.1.1
    Worum es geht
    Im <html>-Element steht, in welcher Sprache die Seite verfasst ist. Screenreader wählen daran ihre Aussprache.
    Was meistens schiefgeht
    Das Attribut fehlt ganz, oder es steht noch lang="en" aus der Vorlage darin. Eine deutsche Seite, die als englisch ausgezeichnet ist, wird von der Sprachausgabe englisch vorgelesen und ist damit unverständlich.
    Was zu tun ist
    Ein Attribut: <html lang="de">. Fremdsprachige Abschnitte innerhalb der Seite bekommen ihr eigenes lang, etwa bei einem englischen Zitat. Das ist die billigste Korrektur der ganzen Liste und wird trotzdem oft übersehen.

  3. Überschriftenstruktur

    WCAG 1.3.1
    Worum es geht
    Überschriften sind die Gliederung des Dokuments, nicht eine Schriftgröße. Wer nicht sieht, springt mit dem Screenreader von Überschrift zu Überschrift durch die Seite.
    Was meistens schiefgeht
    Text wird fett und groß formatiert, statt eine Überschrift zu sein. Oder die Ebenen springen, weil die H2 optisch zu groß wirkte und jemand eine H4 genommen hat. Oder es gibt mehrere H1, weil das Logo eine bekommen hat.
    Was zu tun ist
    Eine H1 je Seite, die sagt, worum es auf dieser Seite geht. Darunter H2 für die Hauptabschnitte, H3 für Unterabschnitte, ohne Ebenen zu überspringen. Größe und Gewicht regelt das Aussehen, nicht die Gliederung.

  4. Beschriftung von Formularfeldern

    WCAG 3.3.2
    Worum es geht
    Jedes Eingabefeld braucht eine sichtbare, programmatisch verknüpfte Beschriftung, damit klar ist, was hineingehört.
    Was meistens schiefgeht
    Der Platzhaltertext dient als Beschriftung. Das ist gleich dreifach ein Problem: Er verschwindet beim Tippen, sein Kontrast ist meist zu gering, und viele Screenreader lesen ihn nicht als Beschriftung vor. Ebenfalls häufig: ein Label, das optisch danebensteht, aber nicht mit dem Feld verknüpft ist.
    Was zu tun ist
    Ein <label for="feldname"> zu jedem Feld mit passender id. Wenn die Beschriftung aus gestalterischen Gründen nicht sichtbar sein soll, bleibt sie im Quelltext und wird optisch versteckt, nicht weggelassen. Pflichtfelder werden benannt, nicht nur mit einem Sternchen markiert.

  5. Kontrast

    WCAG 1.4.3, 1.4.11
    Worum es geht
    Text muss sich ausreichend vom Hintergrund abheben. Es gibt drei Schwellen: 4,5 zu 1 für Fließtext, 3 zu 1 für große Schrift ab 18 Punkt oder ab 14 Punkt fett, und 3 zu 1 für Bedienelemente und grafische Objekte.
    Was meistens schiefgeht
    Die Markenfarbe. Helle Gelb-, Orange- und Türkistöne sehen auf Weiß gut aus und fallen fast immer durch. Danach kommen Platzhaltertexte, graue Hinweistexte unter Feldern, deaktivierte Schaltflächen und heller Text über Fotos, wo der Kontrast je nach Bildstelle wechselt.
    Was zu tun ist
    Messen statt schätzen, das Auge täuscht hier zuverlässig. Die Markenfarbe muss nicht weichen: Sie kann als Fläche mit dunklem Text darauf weiterleben, statt als Textfarbe auf Weiß. Text über Bildern bekommt eine abdunkelnde Ebene.

  6. Bedienbarkeit mit der Tastatur

    WCAG 2.1.1, 2.1.2, 2.4.7
    Worum es geht
    Alles, was mit der Maus geht, muss auch mit der Tastatur gehen, in sinnvoller Reihenfolge, mit jederzeit sichtbarer Position, und ohne Sackgassen.
    Was meistens schiefgeht
    Der Fokusrahmen wird im Stylesheet abgeschaltet, weil er als unschön empfunden wurde. Damit ist die Seite für Tastaturnutzer blind bedienbar geworden. Dazu kommen Sackgassen in Aufklappfenstern, eigene Menüs aus <div>-Elementen, die der Tabulator gar nicht erreicht, und Kalender, die sich nur klicken lassen.
    Was zu tun ist
    Maus weglegen und die Seite einmal ganz durchtabben, bis zur Bestellung. Sichtbaren Fokus wiederherstellen und gestalten, statt ihn zu entfernen. Aufklappfenster so bauen, dass Escape sie schließt und der Fokus dahin zurückkehrt, wo er herkam.

  7. Name, Rolle und Zustand von Bedienelementen

    WCAG 4.1.2
    Worum es geht
    Assistive Technik muss erkennen können, was ein Element ist, wie es heißt und in welchem Zustand es sich befindet, also etwa: Schaltfläche, Menü aufklappen, derzeit geschlossen.
    Was meistens schiefgeht
    Schaltflächen, die aus einem <div> mit Klickereignis bestehen. Für die Maus funktionieren sie, für alles andere sind sie unsichtbarer Text. Ebenso häufig: Symbolschaltflächen ohne jeden Text, etwa das Kreuz zum Schließen oder der Warenkorb.
    Was zu tun ist
    Echte Elemente verwenden: <button> für Aktionen, <a> für Ziele. Das bringt Rolle, Fokussierbarkeit und Tastaturbedienung geschenkt. Reine Symbolschaltflächen bekommen einen Namen über aria-label. Zustände wie aufgeklappt oder ausgewählt gehören ins Markup, nicht nur in die Farbe.

  8. Aussagekräftige Linktexte

    WCAG 2.4.4
    Worum es geht
    Aus dem Linktext muss hervorgehen, wohin er führt. Screenreader können sich alle Links einer Seite als Liste ausgeben lassen, und diese Liste muss verständlich bleiben.
    Was meistens schiefgeht
    „Hier klicken“, „mehr“, „weiterlesen“, zwanzigmal auf einer Seite. In der Linkliste steht dann zwanzigmal dasselbe Wort. Dazu Links, die als nackte Adresse ausgeschrieben sind und Zeichen für Zeichen vorgelesen werden.
    Was zu tun ist
    Das Ziel in den Linktext: „Preise ansehen“ statt „hier“. Wenn das Layout ein kurzes „mehr“ verlangt, ergänzen Sie den Zusammenhang unsichtbar im Markup, sodass daraus „mehr über die laufende Prüfung“ wird.

  9. Informationen zur Barrierefreiheit

    § 14 BFSG, Anlage 3
    Worum es geht
    Der einzige Punkt der Liste, der nicht aus der WCAG stammt, sondern unmittelbar aus dem Gesetz. Sie schulden einen öffentlichen Text mit vier Angaben, deutlich wahrnehmbar veröffentlicht.
    Was meistens schiefgeht
    Es wird eine „Erklärung zur Barrierefreiheit“ aus dem Behördenrecht übernommen, die die eigenen Lücken auflistet. Das ist das falsche Dokument, und es wirkt gegen Sie. Oder der Text fehlt ganz, weil niemand von der Pflicht wusste.
    Was zu tun ist
    Die vier Angaben nach Anlage 3 veröffentlichen und die MLBF namentlich nennen. Was genau hineingehört und was nicht, steht ausführlich auf unserer Seite zur Barrierefreiheitserklärung.

  10. Der Bestellweg bis zur Zahlung

    Nur von Hand prüfbar
    Worum es geht
    Der gesamte Vorgang vom Warenkorb bis zur Bestätigung muss ohne Maus und mit assistiver Technik durchlaufbar sein. Genau hier entscheidet sich, ob jemand bei Ihnen kaufen kann.
    Warum das kein Werkzeug prüfen kann
    Weil es dafür einen echten Kauf bräuchte. Ein automatischer Test kann die Startseite abrufen, aber nicht Ihre Kasse durchlaufen, ohne zu bezahlen. Wer Ihnen für diesen Punkt ein grünes Häkchen setzt, hat ein Ergebnis erfunden.
    Was zu tun ist
    Einmal selbst durchgehen, ohne Maus: Produkt wählen, Menge ändern, in den Warenkorb, Adresse eingeben, Versandart wählen, Zahlungsart wählen, bestellen. Achten Sie besonders auf Fehlermeldungen. Sie müssen im Text benennen, welches Feld betroffen ist und was falsch war, nicht nur den Rahmen rot färben. Denken Sie an fremde Bausteine: Zahlungsfenster, Cookie-Hinweis und Chat-Fenster gehören zu Ihrem Bestellweg, auch wenn sie von anderen stammen.

Was diese zehn Punkte nicht sind

Sie sind keine vollständige Konformitätsprüfung. Die WCAG 2.1 auf Stufe AA umfasst 50 Erfolgskriterien. Diese zehn sind die, an denen Websites in der Praxis am häufigsten scheitern, und sie decken den Teil ab, der sich zuverlässig prüfen lässt.

Warum das trotzdem der richtige Anfang ist: Wer diese zehn Punkte nicht erfüllt, erfüllt die Anforderungen sicher nicht. Wer sie erfüllt, hat die häufigsten und offensichtlichsten Barrieren beseitigt und steht an einer belastbaren Stelle. Der Unterschied zwischen „wir haben nichts geprüft“ und „wir haben die zehn wichtigsten Punkte dokumentiert geprüft“ ist größer als der zwischen zehn und fünfzig.

Häufige Fragen

Welche Norm gilt für die Barrierefreiheit einer Website nach dem BFSG?

Das BFSG selbst nennt keine technische Norm, sondern verweist über die Barrierefreiheitsstärkungsgesetz-Verordnung auf die harmonisierte europäische Norm EN 301 549. Deren Kapitel 9 übernimmt für Webinhalte die Erfolgskriterien der WCAG auf den Stufen A und AA. Wer die WCAG 2.1 auf Stufe AA erfüllt, erfüllt damit den technischen Kern der Anforderungen.

Reicht es, die zehn Punkte dieser Checkliste zu erfüllen?

Nein, und das sagen wir offen. Die WCAG 2.1 auf Stufe AA umfasst 50 Erfolgskriterien. Diese zehn Punkte sind die, an denen Websites in der Praxis am häufigsten scheitern, und sie decken den Teil ab, der sich zuverlässig messen lässt. Wer sie erfüllt, hat die häufigsten und offensichtlichsten Barrieren beseitigt, ist aber nicht automatisch vollständig konform.

Was ist der häufigste Fehler bei Alternativtexten?

Der häufigste Fehler ist nicht der fehlende Alternativtext, sondern der nichtssagende. Ein Text wie Bild, Foto, Grafik oder der Dateiname aus der Kamera erfüllt das Kriterium formal und hilft niemandem. Der zweite häufige Fehler ist der umgekehrte: dekorative Bilder bekommen eine Beschreibung, obwohl sie ein leeres alt-Attribut tragen müssten, damit Screenreader sie überspringen.

Wie prüfe ich die Tastaturbedienbarkeit selbst?

Legen Sie die Maus beiseite und gehen Sie mit der Tabulatortaste durch die Seite. Drei Dinge müssen stimmen: Sie erreichen jedes Bedienelement, Sie sehen jederzeit, wo Sie gerade sind, und Sie kommen überall wieder heraus. Bleiben Sie in einem Element hängen, ist das eine Tastaturfalle. Prüfen Sie besonders Menüs, Aufklappelemente, Bildergalerien, Kalender und den gesamten Bestellweg bis zur Zahlung.

Genügt ein Kontrast von 4,5 zu 1 überall?

Nein, es gibt drei Schwellen. Für Fließtext gilt 4,5 zu 1. Für große Schrift, also ab 18 Punkt oder ab 14 Punkt fett, genügen 3 zu 1. Für Bedienelemente und grafische Objekte, an denen man sich orientieren muss, gelten ebenfalls 3 zu 1. Häufig übersehen werden Platzhaltertexte in Formularfeldern, deaktivierte Schaltflächen und heller Text auf Fotos.

Neun dieser Punkte messen wir für Sie.

Adresse eingeben, etwa zwanzig Sekunden warten, Befund lesen. Jeder offene Punkt einzeln benannt, mit dem betroffenen Element. Kostenlos, ohne Konto, ohne Zahlungsdaten.

Website jetzt kostenlos prüfen