Staatliches Gutachten zur digitalen Barrierefreiheit

www.vbl.de

Nutzbarkeit mit unterschiedlichen Behinderungen

Blindheit Mit Hindernissen nutzbar

Zahlreiche Verstöße bei Semantik, Tastaturbedienung, Fokusführung, Slider-Steuerung und Formularfeedback erschweren Screenreader-Nutzung deutlich, machen sie aber nicht vollständig unmöglich.

Sehbehinderung Kaum nutzbar

Kontrastprobleme, fehlender Reflow, Layoutbrüche bei vergrößertem Text und unzureichend sichtbare Bedienelemente beeinträchtigen die Wahrnehmung stark.

Hörbehinderung Mit Hindernissen nutzbar

Fehlende oder nicht normgerechte Untertitel und keine Hinweise auf Gebärdensprachangebote schränken Videonutzung ein, andere Inhalte bleiben aber weitgehend zugänglich.

Motorische Behinderung Mit Hindernissen nutzbar

Fehlende vollständige Tastaturzugänglichkeit, unzureichend steuerbare Hover-/Slider-Elemente und Fokusprobleme erschweren die Bedienung per Tastatur oder alternativen Eingaben deutlich.

Lernbehinderung Kaum nutzbar

Unklare Struktur, fehlende Leichte-Sprache-Hinweise, unpräzise Formularhilfen und komplexe Interaktionen (Cookie-Dialog, Slider, Navigation) belasten Nutzer mit kognitiven Einschränkungen stark.

Neurodivergenz Mit Hindernissen nutzbar

Automatische Slider-Bewegungen, unklare Fokusführung, fehlende Pause-Steuerung und komplexe Navigations- und Formularstrukturen können stark ablenken und überfordern, sind aber nicht komplett unbedienbar.

Veränderung

Aktuell angezeigt
13 gefundene Barrieren -1 zur vorherigen Prüfung
6,8/10 Ø Schwere -0,6 zur vorherigen Prüfung

Dokumentierte Barrieren

  • Cookie-Dialog nicht zuverlässig per Tastatur bedienbar

    Im Cookie-Banner sind einzelne Aktionen wie Schließen oder bestimmte Auswahlmöglichkeiten nicht als echte, fokussierbare Bedienelemente umgesetzt. Dadurch kann der Dialog für Tastaturnutzende oder Screenreader schwer oder gar nicht bedienbar sein.

    Auswirkung: Ich kann den Cookie-Dialog möglicherweise nicht abschließen und die Seite nicht sinnvoll nutzen. Das blockiert den Einstieg in zentrale Inhalte.

  • Fehlende oder unzureichende Tastaturbedienung bei zentralen Steuerelementen

    Mehrere wichtige interaktive Elemente wie Suchschalter, Qualitäts-Menü, Video-Kacheln und Slider-Bedienelemente sind nicht sauber als Buttons oder Links mit Rolle, Name und Status umgesetzt. Dadurch ist ihre Bedienung mit Tastatur und Screenreader unsicher oder unzuverlässig.

    Auswirkung: Ich kann einzelne Funktionen möglicherweise nicht erreichen oder nicht eindeutig auslösen. Besonders bei Suche und Navigation kann mich das an der eigentlichen Aufgabe hindern.

  • Formularfehler werden zu wenig verständlich erklärt

    Im Kontaktformular fehlen klare Hinweise auf Pflichtfelder, aussagekräftige Fehlermeldungen und Formatvorgaben wie bei E-Mail-Feldern. Fehler werden nicht immer dauerhaft sichtbar gekennzeichnet.

    Auswirkung: Ich weiß oft nicht, was genau ich falsch eingegeben habe und wie ich den Fehler beheben kann. Das kann mich daran hindern, ein Formular erfolgreich abzusenden.

  • Automatisch laufender Slider ohne wirksame Stopp-Funktion

    Der Startseiten-Slider läuft automatisch, ohne eine gut sichtbare und barrierefrei bedienbare Möglichkeit zum Anhalten oder Stoppen. Zusätzlich sind die Slider-Indikatoren nicht korrekt als bedienbare Elemente umgesetzt.

    Auswirkung: Ich werde von wechselnden Inhalten abgelenkt und kann den Bereich nicht zuverlässig kontrollieren. Für mich wird es schwer, Inhalte in Ruhe zu erfassen oder gezielt zu wechseln.

  • Fokusreihenfolge erschwert den Zugriff auf Inhalte und Formulare

    Die Fokusreihenfolge stimmt an mehreren Stellen nicht mit der visuellen Reihenfolge überein, etwa bei Meta-Navigation, „Seitenanfang“, Suchergebnissen und Formularfehlern. Nach Fehlern landet der Fokus nicht dort, wo die Korrektur beginnen sollte.

    Auswirkung: Ich verliere beim Tabben leicht die Orientierung und springe nicht direkt zu dem Punkt, an dem ich handeln muss. Das macht längere Interaktionen und Formularkorrekturen deutlich mühsamer.

  • Texte und Tabellen brechen bei Vergrößerung oder schmalem Sichtfeld

    Bei vergrößertem Text bleiben Kacheln und der Login-Link nicht stabil im Layout, und eine Tabelle im aufklappbaren Bereich ist nicht responsiv genug. Dadurch können Inhalte abgeschnitten oder nur schwer vollständig wahrnehmbar sein.

    Auswirkung: Ich muss horizontal scrollen oder sehe Inhalte nur teilweise. Das macht das Lesen und die Bedienung deutlich anstrengender, besonders bei Zoom oder Vergrößerung.

  • Videos sind ohne verlässliche Untertitel schwer verständlich

    Die aufgezeichneten Videos haben keine ordnungsgemäß bereitgestellten Untertitel. Zusätzlich fehlen Hinweise auf Inhalte in Deutscher Gebärdensprache.

    Auswirkung: Ich kann den gesprochenen Inhalt von Videos möglicherweise nicht vollständig verstehen. Für mich gehen dann wichtige Informationen oder Erklärungen verloren.

  • Wichtige Inhalte nur als Textgrafik im Slider verfügbar

    Im Slider werden Schriftgrafiken verwendet statt echter Texte. Solche Inhalte sind für Screenreader und bei Anpassungen wie Vergrößerung oder eigenem Farbkontrast schwer nutzbar.

    Auswirkung: Ich kann diese Inhalte nicht zuverlässig auslesen oder an meine Bedürfnisse anpassen. Dadurch gehen mir zentrale Hinweise oder Werbeaussagen möglicherweise verloren.

  • Wesentliche Navigation nicht klar strukturiert

    Hauptnavigation, Service-Navigation und Sprachwechsel sind nicht eindeutig semantisch ausgezeichnet. Für Nutzer mit Screenreader ist dadurch oft nicht erkennbar, welcher Navigationsbereich gerade vorliegt.

    Auswirkung: Ich muss mich in der Navigation mühsam orientieren und kann wichtige Bereiche leichter verwechseln. Das verlangsamt die Nutzung und erhöht das Risiko, die falsche Seite zu öffnen.

  • Kontraste erschweren das Erkennen von Links, Feldern und Bedienelementen

    Mehrere Links, Eingabefelder und Slider-Bedienelemente haben zu geringe Kontraste. Die aktive Seite in der Paginierung ist zudem nur über Farbe erkennbar.

    Auswirkung: Ich erkenne wichtige Bedienelemente schlechter und muss genauer hinschauen. Bei schwachem Sehvermögen kann ich Links oder aktive Zustände leicht übersehen.

  • Lange Startseitenbereiche ohne Sprungmarke erschweren den Direkteinstieg

    Ein Skiplink zum Hauptinhalt fehlt. Wer per Tastatur oder Screenreader navigiert, muss sich erst durch wiederkehrende Bereiche wie Navigation und Cookie-Elemente bewegen.

    Auswirkung: Ich brauche länger, um zum eigentlichen Inhalt zu kommen. Das ist besonders störend, wenn ich die Seite häufig nutze oder schnell eine Information suche.

  • Hinweise auf Leichte Sprache und Gebärdensprache fehlen

    Es gibt keine klaren Hinweise, wo Inhalte in Leichter Sprache oder Deutscher Gebärdensprache zu finden sind. Damit bleiben alternative Zugänge zu wichtigen Informationen unklar.

    Auswirkung: Ich finde Unterstützungsmaterialien für mein Verständnis nicht oder nur schwer. Das kann mich bei komplexen Inhalten unnötig ausschließen.

  • Barrierefreiheitserklärung nicht vollständig oder nicht leicht auffindbar

    Die Erklärung zur Barrierefreiheit ist inhaltlich nicht vollständig und soll klarer verlinkt werden. Nutzer können dadurch schwer erkennen, wie der Stand der Barrierefreiheit ist und wie sie Feedback geben können.

    Auswirkung: Ich weiß nicht sicher, welche Barrieren bekannt sind und an wen ich mich wenden kann. Das erschwert mir, Probleme zu melden oder Alternativen zu finden.

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 11
Browser
Chrome Version 138.0.7204.184 (Offizieller Build) (64-Bit)
Screenreader
NVDA 2024
Tools
Color Contrast Analyser (CCA), PDF Accessibility Checker (PAC), Chrome web inspector, NVDA ScreenReader, HeadingsMap (Chrome), Landmark Navigation (Chrome), Bookmarklets (bitvtest Werkzeuge)

Veränderung nach WCAG-Kriterien

01.09.2025 Vereinfachte Überwachung
angezeigtes 43 nicht bestanden 0 weitgehend 0 bestanden
11.06.2024 Vereinfachte Überwachung Gutachten ansehen
22 nicht bestanden 1 weitgehend 31 bestanden
Vergleich der Prüfergebnisse nach Prüfungsdatum und Prüfart
Prüfungsdatum Prüfart Abweichende Prüfart Nicht bestanden Im Wesentlichen bestanden Bestanden
01.09.2025 Vereinfachte Überwachung Nein 43 0 0
11.06.2024 Vereinfachte Überwachung Nein 22 1 31
  • https://www.vbl.de/de/startseite Web-Angebot öffnen
  • https://www.vbl.de/de/suche?_com_liferay_portal_search_web_portlet_SearchPortlet_formDate=1718087454026&p_p_lifecycle=0&p_p_mode=view&_com_liferay_portal_search_web_portlet_SearchPortlet_mvcPath=%2Fsearch.jsp&_com_liferay_portal_search_web_portlet_SearchPortlet_redirect=https%3A%2F%2Fwww.vbl.de%2Fde%2Fstartseite%3Fp_p_id%3Dcom_liferay_portal_search_web_portlet_SearchPortlet%26p_p_lifecycle%3D0%26p_p_state%3Dnormal%26p_p_mode%3Dview&_com_liferay_portal_search_web_portlet_SearchPortlet_keywords=arbeit&_com_liferay_portal_search_web_portlet_SearchPortlet_scope=this-site&q=Arbeitgeber
  • https://www.vbl.de/de/kontakt/kontaktformular/
  • https://www.vbl.de/de/entgeltumwandlung Weitere Gutachten vorhanden
  • https://www.vbl.de/de/vblerklärfilme
  • https://www.vbl.de/de/downloadcenter/-/document_library/6oDNANrPoVE8/view_file/133019?_com_liferay_document_library_web_portlet_DLPortlet_INSTANCE_6oDNANrPoVE8_fileEntryId=133019

Prüfkriterien

Nicht bestanden

Kriterium Status Notizen
Nicht-Text-Inhalt nicht bestanden Markieren Sie dekorative Teaser-Bilder als Layoutgrafiken (leeres alt-Attribut oder CSS-Hintergrund), um Screenreader-Nutzenden unnötige Informationen zu ersparen.
Untertitel (aufgezeichnet) nicht bestanden Stellen Sie die Untertitel als abschaltbare, individuell konfigurierbare Closed Captions bereit (vollständig, synchron und korrekt).
Info und Beziehungen nicht bestanden Beschriften Sie die Hauptnavigation programmatisch eindeutig (z. B. aria-label="Hauptmenü"), damit sie gegenüber anderen Navigationsbereichen unterscheidbar ist.
Info und Beziehungen nicht bestanden Versehen Sie die Meta-/Service-Navigation mit einem semantischen nav-Element und einem eindeutigen aria-label (z. B. „Service-Navigation“).
Info und Beziehungen nicht bestanden Kennzeichnen Sie die Sprachwechsel-Links als Sprachnavigation (z. B. aria-label="Sprachnavigation") und verwenden Sie beschreibende Linktexte wie „Seite auf Deutsch anzeigen“.
Info und Beziehungen nicht bestanden Zeichnen Sie Datumsangaben semantisch, z. B. mit <time> und datetime-Attribut, aus, damit assistive Technologien den Kontext als Datum erkennen.
Info und Beziehungen nicht bestanden Kennzeichnen Sie Kategorien im Footer und in Untermenüs als Überschriften (h2–h6 entsprechend der Struktur).
Info und Beziehungen nicht bestanden Statten Sie die Überschrift im Cookie-Banner mit einer echten Heading-Auszeichnung aus.
Info und Beziehungen nicht bestanden Stellen Sie die Kachelüberschriften auf die richtige Hierarchieebene (z. B. h2) und vermeiden Sie falsche Unterordnung unter „Top-Downloads“.
Info und Beziehungen nicht bestanden Markieren Sie Filterkategorien als Überschriften, damit ersichtlich ist, dass es sich um Bereicheüberschriften handelt.
Info und Beziehungen nicht bestanden Statten Sie die Zwischenüberschriften im Kontaktbereich (z. B. „Ihre Kundendaten“) mit Heading-Tags aus.
Info und Beziehungen nicht bestanden Korrigieren Sie die Zuordnung der Kachelüberschriften auf der Inhaltsseite, sodass sie der richtigen Struktur (h3 unter h2 „Beispiel“) folgen.
Info und Beziehungen nicht bestanden Werten Sie Zwischenüberschriften in aufklappbaren Bereichen semantisch als Überschriften auf.
Info und Beziehungen nicht bestanden Die leere Überschriftenzelle im Tabellenbereich „Beispiel“ muss eine sinnvolle Beschriftung erhalten.
Bedeutungsvolle Reihenfolge nicht bestanden Positionieren Sie den Cookie-Dialog im DOM vor den restlichen Inhalten (nahe <body>) und ergänzen Sie role="dialog" sowie aria-modal="true".
Bedeutungsvolle Reihenfolge nicht bestanden Passen Sie DOM- und Fokusreihenfolge so an, dass Meta-Navigation vor der Hauptnavigation ausgegeben wird und so der visuellen Reihenfolge entspricht.
Eingabezweck bestimmen nicht bestanden Fügen Sie für Kontaktformularfelder autocomplete-Attribute hinzu (z. B. autocomplete="given-name", "email"), damit der Eingabezweck programmatisch ersichtlich ist.
Benutzung von Farbe nicht bestanden Erhöhen Sie den Kontrast der Linkfarbe gegenüber dem umliegenden Text, damit Links besser erkennbar sind.
Benutzung von Farbe nicht bestanden Kennzeichnen Sie die aktive Seite in der Paginierung zusätzlich zum Farbton mit einem weiteren visuellen Merkmal (z. B. Umrandung oder Symbol).
Bilder von Text nicht bestanden Ersetzen oder ergänzen Sie die Schriftgrafiken im Slider durch echten Text, damit Inhalte anpassbar und für blinde Nutzer zugänglich sind.
Automatischer Umbruch (Reflow) nicht bestanden Ermöglichen Sie horizontales Scrollen oder responsive Anpassung der Tabelle im ausklappbaren Bereich „Beispiel“, damit sie vollständig wahrnehmbar bleibt.
Nicht-Text-Kontrast nicht bestanden Verbessern Sie den Kontrast der Slider-Bedienelemente (mindestens 3:1) gegenüber den wechselnden Hintergründen.
Nicht-Text-Kontrast nicht bestanden Erhöhen Sie den Kontrast der grauen Rahmen der Eingabefelder, damit sie auf weißem Hintergrund sichtbarer sind.
Textabstand nicht bestanden Passen Sie das Kachel-Layout an, sodass Text bei vergrößerten Abständen im vorgesehenen Bereich bleibt (responsive Container, automatische Höhenanpassung).
Textabstand nicht bestanden Stellen Sie sicher, dass der Login-Link (Grafik „Meine VBL“) bei vergrößertem Text nicht abgeschnitten wird (skalierbares Layout, flexible Container).
Eingeblendeter Inhalt bei Darüberschweben (Hover) oder Fokus nicht bestanden Ergänzen Sie eine Möglichkeit, eingeblendete Untermenüs per Escape oder erneutes Auslösen zu schließen, um den Fokusfluss zu kontrollieren.
Tastatur nicht bestanden Nutzen Sie echte Schaltflächen (button) mit korrektem Namen und Rolle für „Schließen“ und Webanalyse im Cookie-Dialog, damit sie per Tab/Enter erreichbar sind.
Tastatur nicht bestanden Ersetzen Sie die paginierenden Slider-Indikatoren durch fokussierbare Elemente (button oder a) mit statusausgebender ARIA (aria-current/aria-selected).
Pausieren, stoppen, ausblenden nicht bestanden Bieten Sie eine gut sichtbare, per Tastatur und Screenreader bedienbare Steuerung zum Stoppen, Anhalten und Fortsetzen des automatisch laufenden Sliders.
Blöcke überspringen nicht bestanden Fügen Sie einen sicht- und fokussierbaren Skiplink am Seitenanfang hinzu, der direkt zum Hauptinhalt führt (z. B. href="#maincontent").
Fokus-Reihenfolge nicht bestanden Passen Sie den Button „Seitenanfang“ so an, dass der Fokus direkt auf die erste sinnvolle Zielposition (z. B. Hauptüberschrift) gesetzt wird.
Fokus-Reihenfolge nicht bestanden Vermeiden Sie doppelte Linkziele in den Suchergebnissen, indem nur ein Element (z. B. Überschrift) fokussierbar ist.
Fokus-Reihenfolge nicht bestanden Richten Sie den Fokus nach Absenden eines fehlerhaften Formulars auf das erste fehlerhafte Feld statt auf den Submit-Button.
Linkzweck (im Kontext) nicht bestanden Beschränken Sie Linktexte der News-Kacheln auf den wesentlichen Informationskern (z. B. Nachrichtentitel) und machen zusätzliche Angaben outside oder aria-hidden.
Fehlerkennzeichnung nicht bestanden Stellen Sie sicher, dass Fehlermeldungen beim Formular nicht nur einmalig als Live-Region angesagt werden, sondern auch dauerhaft sichtbar und kennzeichnend bleiben.
Beschriftungen (Labels) oder Anweisungen nicht bestanden Erklären Sie vor oder innerhalb des Formulars, dass mit * gekennzeichnete Felder Pflichtfelder sind, und nutzen Sie aria-required="true".
Vorschlag bei Fehler nicht bestanden Ergänzen Sie bei fehlerhafter E-Mail-Eingabe den Hinweis auf das erwartete Format („Bitte geben Sie eine gültige E-Mail-Adresse ein“).
Name, Rolle, Wert nicht bestanden Versehen Sie die Video-Kacheln mit einer semantischen Rolle (button/link), einem aussagekräftigen Namen und sichtbarer Fokus- und Hoveranzeige.
Name, Rolle, Wert nicht bestanden Passen Sie die Suchschalter-Auszeichnung an (kein aria-haspopup oder passende Beschriftung/aria-expanded), damit Screenreader die eigentliche Funktion erkennen.
Name, Rolle, Wert nicht bestanden Weisen Sie dem Qualitäts-Menü eine klare Rollenbeschreibung und einen sichtbaren Status zu (z. B. button mit aria-expanded und Hervorhebung).
Hinweise auf weitere vorhandene Informationen in Deutscher Gebärdensprache
Hinweise auf weitere vorhandene Informationen in Deutscher Gebärdensprache
nicht bestanden Ergänzen Sie Hinweise auf weiterführende Inhalte in Deutscher Gebärdensprache, um die Nutzerführung barrierearm zu unterstützen.
Hinweise auf weitere vorhandene Informationen in Leichter Sprache
Hinweise auf weitere vorhandene Informationen in Leichter Sprache
nicht bestanden Fügen Sie Hinweise ein, wo weiterführende Inhalte in Leichter Sprache bereitstehen, um die Nutzungsfreundlichkeit zu erhöhen.
Barrierefreiheitserklärung formal geprüft
Barrierefreiheitserklärung formal geprüft
nicht bestanden Überarbeiten Sie die Erklärung zur Barrierefreiheit (Geltungsbereich, Rechtsgrundlage, Stand, Prüfmethode, Feedback etc.) und verlinken Sie sie klar benannt auf jeder Seite.

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.