Staatliches Gutachten zur digitalen Barrierefreiheit

www.hilfetelefon.de

Nutzbarkeit mit unterschiedlichen Behinderungen

Blindheit Mit Hindernissen nutzbar

Viele WCAG‑A-Probleme bei Struktur, Alternativtexten, Navigation und Formularrückmeldungen erschweren Screenreader-Nutzung deutlich, machen sie aber nicht vollständig unmöglich.

Sehbehinderung Mit Hindernissen nutzbar

Teilweise unzureichende Kontraste, nicht skalierbare Schriftgrafiken, Fokus-Sichtbarkeitsprobleme und Layout-Verschiebungen bei Textabstand beeinträchtigen die Nutzung stark.

Hörbehinderung Weitgehend zugänglich

Fehlende Untertitel und Alternativen bei einigen Videos schränken Medieninhalte ein, der überwiegende Text- und Funktionsumfang ist aber nutzbar.

Motorische Behinderung Weitgehend zugänglich

Tastaturbedienung und Vermeidung komplexer Zeigereingaben sind gut, aber schlecht steuerbare Hover-Menüs und teils unsichtbarer Fokus erschweren die Bedienung.

Lernbehinderung Mit Hindernissen nutzbar

Konsistenzprobleme in Navigation, unklare Linktexte und unzureichende Fehlermeldungen belasten das Verständnis, werden aber durch Leichte-Sprache-Angebot teilweise kompensiert.

Neurodivergenz Mit Hindernissen nutzbar

Unruhiges Karussell mit Live-Region, Fokus- und Navigationsprobleme können überfordern, zugleich sind Sprache und Struktur überwiegend vorhersagbar und ohne Zeitdruck nutzbar.

Dokumentierte Barrieren

  • Videos sind ohne Untertitel und Alternativen schwer nutzbar

    Auf der Videoseite fehlen Untertitel, Audiodeskriptionen und eine alternative Beschreibung der Videoinhalte. Damit sind die Inhalte für viele Nutzende nicht vollständig zugänglich.

    Auswirkung: Wenn ich nicht gut hören kann, bekomme ich den gesprochenen Inhalt nicht mit. Wenn ich visuelle Informationen nicht sehen kann, fehlen mir wichtige Teile der Aussage.

  • Fokusreihenfolge ist unübersichtlich und teils doppelt

    Die Tastaturreihenfolge springt in Karussells, Menüs und Kacheln teils unerwartet durch die Seite. Außerdem erscheinen einige Elemente doppelt im Fokus oder der Fokus ist auf wichtigen Elementen nicht sichtbar.

    Auswirkung: Ich weiß oft nicht, wo ich mich gerade befinde und muss mehrmals testen. Das kann die Bedienung stark verlangsamen oder einzelne Funktionen praktisch unauffindbar machen.

  • Fehlermeldungen im Formular sind zu kurz und nicht eindeutig

    Nach dem Absenden erscheint die Fehlermeldung nur kurz als Tooltip und nennt das betroffene Feld nicht. Das fehlerhafte Feld ist außerdem nicht klar markiert.

    Auswirkung: Ich finde den Fehler nicht zuverlässig und weiß nicht, was ich korrigieren muss. Dadurch kann ich ein Formular mehrfach falsch absenden oder ganz abbrechen.

  • Hover-Menüs lassen sich per Tastatur nicht zuverlässig schließen

    Untermenüs im Hauptmenü öffnen sich per Mouseover und lassen sich mit der Tastatur nicht wieder schließen. Sie bleiben dadurch offen und überlagern andere Inhalte.

    Auswirkung: Ich kann in der Navigation festhängen oder andere Seitenelemente verdecken. Das macht die Bedienung deutlich mühsamer und kann einzelne Wege blockieren.

  • Text- und Layoutanpassungen führen zu Überlappungen

    Wenn Textabstände angepasst werden, entstehen überlappende oder verschobene Inhalte, zum Beispiel beim Link „Leichte Sprache“ und im Footer. Schriftgrafiken in Kacheln lassen sich außerdem nicht an eigene Bedürfnisse anpassen.

    Auswirkung: Wenn ich größere Abstände oder andere Textdarstellung brauche, kann die Seite kaputt aussehen oder schwer lesbar werden. Ich verliere dann Inhalte oder muss zoomen und horizontal scrollen.

  • Aktive Zustände und Rollen werden für Screenreader nicht klar ausgegeben

    Einige Bedienelemente melden ihren Zustand oder ihre Rolle nicht korrekt, zum Beispiel Karussell-Punkte, aktive Navigation oder Registerkarten. Dadurch ist nicht erkennbar, was gerade ausgewählt ist.

    Auswirkung: Ich kann nicht sicher feststellen, welches Element aktiv ist oder wie ein Steuerelement funktioniert. Das macht vor allem die Navigation mit Screenreader deutlich schwieriger.

  • Skiplinks führen nicht zum aktuellen Seitenbereich

    Auf Unterseiten springen die Skiplinks nicht in den gewünschten Inhaltsbereich, sondern zurück zur Startseite. Damit verlieren sie ihren eigentlichen Zweck als Schnellnavigation.

    Auswirkung: Ich kann wiederkehrende Bereiche nicht sinnvoll überspringen. Statt schneller zum Inhalt zu kommen, lande ich auf einer anderen Seite und muss neu suchen.

  • Falsche oder unklare Überschriften- und Seitenstruktur

    Mehrere Seiten haben zwei Hauptüberschriften und eine unlogische Überschriftenreihenfolge. Außerdem sind wichtige Bereiche und Linkgruppen nicht sauber als Listen oder eindeutige Navigationsbereiche ausgezeichnet.

    Auswirkung: Ich kann Inhalte und Bereiche schlechter überfliegen und finde Informationen langsamer. Mit Screenreader wird die Seite unübersichtlich und schwerer zu verstehen.

  • Screenreader liest Inhalte in falscher Reihenfolge

    Navigation und Suchfeld werden teils erst nach dem Hauptinhalt vorgelesen. Einzelne Links werden zudem wegen Zeilenumbrüchen nicht zusammenhängend ausgegeben.

    Auswirkung: Ich höre wichtige Bedienelemente zu spät und verliere beim Zuhören den Überblick. Dadurch kann ich die Seite deutlich langsamer oder nur mit Umwegen bedienen.

  • Unklare oder fehlende Beschriftung von Links und Bildern

    Einige Bilder und Links sind nicht aussagekräftig beschriftet oder werden gar nicht richtig benannt. Dazu gehören etwa Bildkacheln, Links unter „Seite empfehlen“ und der Nach-oben-Link.

    Auswirkung: Ich kann nicht sicher erkennen, wohin ein Link führt oder was ein Bild bedeutet. Besonders mit Screenreader muss ich mehr raten und brauche länger, um das Richtige zu finden.

  • Hohe grafische Bedienelemente sind schwer erkennbar

    Einige nicht-textliche Bedienelemente, etwa Karussell-Punkte, Formularrahmen oder das Twitter-Icon, haben zu wenig Kontrast. Dadurch sind aktive und inaktive Zustände nicht gut unterscheidbar.

    Auswirkung: Ich erkenne nicht zuverlässig, was anklickbar oder aktiv ist. Gerade bei schwächerem Sehen oder auf schlechtem Bildschirm kann ich Bedienelemente leichter übersehen.

  • Linkzweck ist an mehreren Stellen nicht verständlich

    Mehrere Linktexte sagen nicht klar, wohin ein Link führt, etwa Sprachlinks und „Notausstieg“. Bei Kacheln wird sogar der Mouseover-Text als Linktext ausgegeben.

    Auswirkung: Ich kann Ziele nicht sicher vorab einschätzen und klicke eher auf Verdacht. Das erhöht Fehler und macht die Orientierung besonders für Screenreader-Nutzende schwer.

  • Karussell-Bedienung und Kennzeichnung sind missverständlich

    Die Karussell-Navigation nutzt nur Zahlen und der aktive Zustand ist für Screenreader nicht klar erkennbar. Zudem werden Karussell-Inhalte teils automatisch vorgelesen.

    Auswirkung: Ich kann nicht gut erkennen, welcher Punkt gerade aktiv ist oder was die Schalter bedeuten. Das lenkt ab und kann gerade für Screenreader-Nutzende sehr störend sein.

  • Suchseite hat abweichende Navigation und fehlende Seitenelemente

    Auf der Suchseite werden linke Subnavigation und rechte Links nicht angezeigt. Dadurch sieht die Seite anders aus als andere Bereiche der Website.

    Auswirkung: Ich finde gewohnte Wege und Funktionen nicht an der erwarteten Stelle. Das kann Orientierung kosten und besonders bei wiederholter Nutzung verwirrend sein.

  • Formulare merken sich Eingaben nicht automatisch

    Nutzerdatenfelder auf der Formularseite haben kein autocomplete-Attribut. Dadurch kann der Browser Eingaben nicht zuverlässig automatisch ergänzen.

    Auswirkung: Ich muss wiederkehrende Angaben häufiger selbst eintippen. Das kostet Zeit und ist besonders mühsam, wenn ich mobil oder mit Hilfsmitteln arbeite.

  • Bestimmte Inhalte in der Suche sind schwer lesbar

    Auf der Suchseite unterschreiten einzelne Texte den nötigen Farbkontrast. Das betrifft vor allem rot dargestellte Suchergebnis-Texte.

    Auswirkung: Ich kann Treffer schlechter lesen und übersehe Details eher. Bei Sehschwäche oder auf ungünstigen Bildschirmen wird die Suche dadurch anstrengender.

Hinweis: Diese Zusammenfassung mit generativer KI basiert auf den Informationen aus diesem Gutachten. Künstliche Intelligenz kann Inhalte nicht automatisch barrierefrei machen oder Prüfungen durchführen. Behinderungen sind komplex und mehrschichtig, weshalb diese Analysen nicht zutreffen müssen.

Technische Umgebung

OS
Windows 10 Enterprise
Browser
Google Chrome 116.0.5845.180
Screenreader
NVDA 2023.2
Tools
Color Contrast Analyser (CCA), WCAG Color contrast checker, PDF Accessibility Checker (PAC), Chrome Web Developer Tools, NVDA Screenreader, Landmark Navigation (Chrome), HTML Validator, WCAG Parsing Bookmarklet
  • https://www.hilfetelefon.de/ Web-Angebot öffnen
  • https://www.hilfetelefon.de/index.php?id=32&tx_indexedsearch_pi2[action]=search&tx_indexedsearch_pi2[controller]=Search
  • https://www.hilfetelefon.de/kontakt.html
  • https://www.hilfetelefon.de/beratung-fuer-frauen.html
  • https://www.hilfetelefon.de/materialien/videos-audios/interview-zur-beratung.html
  • https://www.hilfetelefon.de/fileadmin/content/04_Materialien/1_Materialien_Bestellen/Jahresberichte/2022/BAFZA_Hilfetelefon_Jahresbericht_Das_Jahr_in_Zahlen_2022_web_bf.pdf

Prüfkriterien

Nicht bestanden

Kriterium Status Notizen
Nicht-Text-Inhalte besitzen Alternativtexte nicht bestanden * Startseite: Der Alternativtext für das erste Foto im Karussell ist identisch zur <h2>-Überschrift "Gemeinsam finden wir Antworten". * Startseite, Inhaltsseite: Nicht alle Bilder in den Kacheln haben einen aussagekräftigen Alternativtext. * Alle Seiten: Die Links unter "Seite empfehlen" und der nach-oben-Link sind nur durch einen title beschriftet und werden vom Screenreader als "unbeschriftet" ausgegeben.
Aufgezeichnete Audio-Inhalte besitzen Untertitel nicht bestanden * Videoseite: Audio-Inhalte besitzen keine Untertitel.
Aufgezeichnete Video-Inhalte besitzen Alternativen nicht bestanden * Videoseite: Video-Inhalte besitzen keine Alternativen.
Aufgezeichnete Video-Inhalte besitzen Audiodeskriptionen nicht bestanden * Videoseite: Video-Inhalte besitzen keine Audiodeskriptionen.
Informationen, Struktur und Beziehungen sind identifizierbar nicht bestanden * Startseite: Die Seite hat zwei <h1>-Überschriften und eine abweichende Hierarchie (z. B. <h2> gefolgt von <h4>). Kacheln und Links unter "Aktuelles" sowie die sechs Links auf der rechten Seite sind nicht als Listen strukturiert. * Suchseite: Suchergebnisse sind ebenfalls nicht als Liste strukturiert. * Such-, Kontakt- und Inhaltsseite: Jeweils zwei <h1>-Überschriften und fehlerhafte Hierarchie. * Alle Seiten: Mehrere <nav>-Bereiche ohne aria-label.
Sinnvolle Lesereihenfolge ist gegeben nicht bestanden * Startseite und Inhaltsseite: Linke Navigation und Suchfeld werden vom Screenreader erst nach Karussell/Inhaltsbereich ausgegeben. * Alle Seiten außer Suchseite: Links wie "Beratung per Telefon" sind mit <br> getrennt und werden nicht zusammenhängend ausgegeben.
Zweck von Formularfeldern für Nutzer-Daten ist identifizierbar nicht bestanden * Formularseite: Nutzerdatenfelder haben kein autocomplete-Attribut.
Schriftgrafiken sind anpassbar oder unverzichtbar nicht bestanden * Startseite, Inhaltsseite: Schriftgrafiken in den Kacheln können nicht an individuelle Bedürfnisse angepasst werden.
Kontrastabstand von Nicht-Text-Inhalten ist ausreichend nicht bestanden * Startseite: Navigationselemente des Karussells (aktiv/nicht aktiv) liegen unter 3:1. * Alle Seiten: Grauer Rahmen der Formularelemente und Twitter-Icon erfüllen 3:1 nicht.
Textabstände sind anpassbar nicht bestanden * Startseite: Anpassung zeigt Ränder nicht sichtbarer Texte in den Kacheln. * Alle Seiten: "Leichte Sprache"-Link im Header überlappt, Footer-Links verschieben sich.
Bei Fokussierung eingeblendete Inhalte sind steuerbar nicht bestanden * Alle Seiten: Per Mouseover geöffnete Untermenüs im Hauptmenü lassen sich per Tastatur (z. B. ESC) nicht schließen.
Wiederkehrende Bereiche können übersprungen werden nicht bestanden * Alle Seiten außer Startseite: Skiplinks verlinken immer zur Startseite statt zum Anker innerhalb der aktuellen Seite.
Fokusreihenfolge ist aufgabenangemessen nicht bestanden * Startseite: Animiertes Karussell erhält Fokus, ohne Funktion. * Startseite: Unter "Aktuelles" werden zwei Links mit identischem Ziel fokussiert. * Startseite, Inhaltsseite: Kacheln fokussieren von oben nach unten statt links nach rechts, Überschriften und ganze Kachel bekommen jeweils Fokus. * Alle Seiten: Cookie-Banner erst am Ende fokussierbar und überlagert Inhalte. * Alle Seiten: "Seite anonym besuchen" und "Notausstieg" erscheinen als Links und Buttons und erhalten jeweils doppelten Fokus. * Alle Seiten: TAB führt zunächst durch Untermenü bis zum nächsten Hauptnavigationselement. * Alle Seiten: Unter "Seite empfehlen" wird zuerst das Twitter- und dann das Facebook-Icon fokussiert.
Linkzweck ist verständlich (im Kontext) nicht bestanden * Startseite, Inhaltsseite: Mouseover-Text der Kacheln wird als Linktext ausgegeben. * Alle Seiten: Linktexte der Sprachverlinkungen im Header sind nicht aussagekräftig. * Alle Seiten: Linktext "Notausstieg" ist nicht aussagekräftig.
Überschriften und Label beschreiben Thema oder Zweck nicht bestanden * Startseite: Buttons der Karussell-Navigation sind mit "1" oder "2" beschriftet und somit nicht aussagekräftig.
Tastaturfokus ist sichtbar nicht bestanden * Startseite: Fokus bei Links im Karussell nicht sichtbar. * Alle Seiten außer Suchseite: Fokus auf Absenden-Button der Suche nicht sichtbar; bei Fokus auf "Sofort-Chat" verschwindet Zusatztext. * Alle Seiten: Fokus auf Logo "Bundesamt für Familie…" nicht sichtbar.
Navigation ist konsistent aufgebaut nicht bestanden * Suchseite: Linke Subnavigation und Links auf der rechten Seite werden nicht angezeigt.
Fehlermeldungen sind in Textform vorhanden nicht bestanden * Formularseite: Nach Absenden fehlerhaften Formulars erscheint Fehlermeldung nur wenige Sekunden als Tooltip am ersten fehlerhaften Feld; benennt nicht das fehlerhafte Feld; das Feld ist visuell und programmatisch (aria-invalid) nicht wahrnehmbar.
Syntaxspezifikationen sind erfüllt nicht bestanden * Alle Seiten: HTML enthält WCAG-relevante Syntaxfehler (z. B. Duplicate ID).
Name, Rolle und Wert sind identifizierbar nicht bestanden * Startseite: Karussell-Navigation (Bullets) macht für Screenreader nicht erkennbar, welches Element aktiv ist. * Formularseiten: Aktiver Menüpunkt der linken Navigation ist für Screenreader nicht als solcher wahrnehmbar. * Inhaltsseite: Registerkarten-Fokus wird zusätzlich mit Rolle "Dokument" ausgegeben; Rolle "Registerkarte" ist nicht korrekt (Akkordeon). * Alle Seiten: Links im Hauptmenü, die Untermenüs öffnen, werden als Links ohne Hinweis auf geöffnetes Untermenü ausgegeben.
Statusmeldungen werden ohne Fokussierung ausgegeben nicht bestanden * Startseite: Animiertes Karussell ist mit aria-live="polite" ausgezeichnet; Screenreader liest Inhalte beim Wechsel automatisch vor.

Im Wesentlichen bestanden

Kriterium Status Notizen
Kontrastabstand von Text zu Hintergrund ist ausreichend (Minimalkontrast) im Wesentlichen bestanden * Suchseite: Einzelne Texte (z. B. rote Texte in Suchergebnissen) unterschreiten den geforderten Minimalkontrast (4,5:1 bzw. 3:1).

Bestanden

Kriterium Status
Aufgezeichnete Audio-only- und Video-only-Dateien besitzen Alternativen bestanden
Anweisungen sind ohne Bezug auf sensorische Merkmale verständlich bestanden
Bildschirmausrichtung ist änderbar bestanden
Farbe ist nicht einziger Informationsträger bestanden
Automatisch abgespielte Audio-Inhalte sind steuerbar bestanden
Schriftgröße kann angepasst werden bestanden
Inhalte brechen in einspaltiges Layout um bestanden
Tastaturbedienbarkeit ist gegeben bestanden
Tastaturfallen sind nicht vorhanden bestanden
Zeichen-Tastenkürzel sind abschaltbar oder anpassbar bestanden
Zeitbegrenzungen sind steuerbar bestanden
Automatisch gestartete Animationen sind steuerbar bestanden
Blitzen wird vermieden bestanden
Titel beschreiben Thema oder Zweck bestanden
Seiten sind über verschiedene Möglichkeiten auffindbar bestanden
Komplexe Zeigerbedienung ist verzichtbar bestanden
Zeiger-Eingaben können abgebrochen oder widerrufen werden bestanden
Label enthält sichtbare Beschriftung bestanden
Bewegungsaktivierung ist verzichtbar bestanden
Sprache ist ausgezeichnet bestanden
Abweichende Sprache einzelner Abschnitte ist ausgezeichnet bestanden
Fokussierung führt nicht zu Kontextänderung bestanden
Eingabe führt nicht zu Kontextänderung bestanden
Elemente sind konsistent bezeichnet bestanden
Label enthalten Eingabehinweise bestanden
Fehlermeldungen enthalten Korrekturvorschläge bestanden
Fehlervermeidung wird unterstützt (rechtlich, finanziell, Daten) bestanden
A.1
Erklärung zur Barrierefreiheit ist vorhanden
bestanden
A.2
Feedback-Mechanismus ist vorhanden
bestanden
A.3
Leichte Sprache ist vorhanden
bestanden
A.4
Gebärdensprache-Video ist vorhanden
bestanden
B.1
PAC3 Test ergibt PDF/UA-konform
bestanden

Unterstützung

Barrieren sichtbar machen kostet Geld. Hilf uns, dranzubleiben.

BarrierenWatch wird ehrenamtlich betrieben und finanziert sich über Steady-Mitgliedschaften von Menschen wie dir, die Barrierefreiheit und Inklusion voranbringen möchten. Hinter dem Projekt stehen Menschen mit Behinderung, die seit Jahren im Bereich der digitalen Barrierefreiheit oder als Aktivist*innen aktiv sind. Aktuell sind wir im Prozess der Gründung eines gemeinnützigen Vereins, der dieses Engagement beheimaten soll.

ab 5 Euro
im Monat

für Recherche, Prüfungen und den Betrieb der Plattform.