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