Kurzzusammenfassung
- Auftraggeber
- Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik
- Prüforganisation
- Materna Information & Communications SE
- Prüfart
- eingehende Überwachung
Gutachten
Zugänglichkeits-Analyse
Blindheit
Mit Hindernissen nutzbar
Mehrere zentrale A‑ und AA‑Fehler bei Alternativtexten, Struktur, Formular-Beschriftungen, Navigation, Name/Rolle/Wert und fehlender Audiodeskription erschweren Screenreader-Nutzung deutlich, machen sie aber nicht vollständig unmöglich.
Sehbehinderung
Kaum nutzbar
Probleme bei Mindest- und Nicht-Text-Kontrast, Reflow, Textabstand, Benutzerpräferenzen sowie Fokus-Sichtbarkeit und nur farblich markierten Links beeinträchtigen die Nutzung für sehbehinderte Personen stark.
Hörbehinderung
Weitgehend zugänglich
Fehlende Audiodeskriptionen betreffen vor allem blinde Nutzer; für Gehörlose sind Inhalte weitgehend nutzbar, da keine gravierenden Untertitel- oder Audio-only-Probleme berichtet werden.
Motorische Behinderung
Mit Hindernissen nutzbar
Schwer bedienbare oder teils unzugängliche Tastatur-Navigation, Fokusprobleme und Drag&Drop-artige Bedienmuster schränken die Nutzbarkeit für motorisch eingeschränkte Menschen deutlich ein.
Lernbehinderung
Mit Hindernissen nutzbar
Inkonsequente Struktur, fehlerhafte Formularkennzeichnung, unklare Linkzwecke und Probleme bei Lesbarkeit und Navigation sind belastend, werden aber teilweise durch vorhandene Leichte-Sprache-Angebote abgemildert.
Neurodivergenz
Mit Hindernissen nutzbar
Unlogische Fokus-Reihenfolge, komplexe Navigation, fehleranfällige Formulare und teils schlechte Lesbarkeit können Überforderung und Desorientierung auslösen, sind aber nicht durchgehend kritisch.
Hinweis: Diese Einschätzung 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.
Empfehlung
Korrigieren Sie die aufgeführten Konformitätsdefizite in den Bereichen Alternativtexte, Tastaturbedienbarkeit, Strukturmarkup, Kontrastkontrolle, Formularerkennung sowie Dokumentation und nationale Zusatzanforderungen, um die WCAG 2.1 A/AA und zusätzlichen nationalen Vorgaben zu erfüllen.
| Kriterium | Status | Notizen |
|---|---|---|
|
4.9.1.1.1.a Alternativtexte für Bedienelemente |
nicht bestanden | Das grafische Bedienelement ‚Anfahrtsskizze Bonn‘ hat nur den Text ‚Anfahrtsskizze Bonn‘; die Funktion (Lightbox öffnen, Inhalte der Karte) muss im alt-Attribut mitgegeben werden. |
|
4.9.1.1.1.c Leere alt-Attribute für Layoutgrafiken |
nicht bestanden | Layoutgrafiken verwenden teilweise nicht-leere alt- oder title-Attribute; diese dekorativen Elemente müssen konform mit leerem alt implementiert werden, damit Screenreader keinen unnötigen Inhalt ausgeben. |
|
4.9.1.2.3 Audiodeskription oder Medienalternative (aufgezeichnet) |
nicht bestanden | Videos auf ‚Erklärfilme Freihandel‘ enthalten visuelle Informationen (Handlung, Kontext), für die weder eine Audiodeskription noch eine vollständige Volltext-Alternative vorliegt und der direkte Link zur Transkript-Datei nicht funktioniert. |
|
4.9.1.2.5 Audiodeskription (aufgezeichnet) |
nicht bestanden | Auf der Seite ‚Erklärfilme Freihandel‘ fehlt die Audiodeskription zu mehreren visuellen Informationen, dieser Inhalt wird blinden Nutzern nicht vermittelt. |
|
4.9.1.3.1.b HTML-Strukturelemente für Listen |
nicht bestanden | Listenartige Inhalte (z. B. im Impressum) verwenden keine HTML-list-Elemente; stattdessen sind sichtbare und funktionale Listen ohne ul/ol/li markiert. Kennzeichnen Sie die Einträge korrekt, damit assistive Technologien Listen überspringen können. |
|
4.9.1.3.1.h Beschriftung von Formularelementen programmatisch ermittelbar |
nicht bestanden | Die Gruppenbeschriftung ‚Lieferungsspezifikationen‘ wird beim Fokus auf die zugehörigen Auswahlfelder nicht ausgegeben; versehen Sie die Gruppe mit einem legend-Element, damit Screenreader die Gruppierung erkennen. |
|
4.9.1.3.5 Eingabezweck bestimmen |
nicht bestanden | Mehrere Formularfelder (Vorname, Name, Straße, Ort etc.) verfügen nicht über das autocomplete-Attribut; tragen Sie eindeutige Eingabezwecke ein, damit Browser und Hilfssoftware sinnvolle Vorschläge bieten. |
|
4.9.1.4.3 Kontrast (Minimum) |
nicht bestanden | Einige Texte definieren nur eine Vordergrund- oder nur eine Hintergrundfarbe; Benutzer, die eigene Systemfarben verwenden, sehen dadurch nicht vorhersehbar kontrastierte Texte. Stellen Sie sicher, dass bei jedem Text sowohl Vorder- als auch Hintergrundfarbe genannt sind. |
|
4.9.1.4.7 Nicht-Text-Kontrast |
nicht bestanden | Grafiken und Bedienelemente verfügen zwar über Vordergrundfarben, aber keine Hintergrundfarben; individuelle Systemfarben führen dazu, dass der Kontrast unvorhersehbar ist. Geben Sie stets Vorder- und Hintergrundfarbe oder Konturen an. |
|
4.9.2.1.1 Tastatur |
nicht bestanden | Die mobile Navigation lässt sich nur schwer ohne Maus bedienen: manche Untermenüs sind gar nicht erreichbar, andere müssen über eine umständliche Drag&Drop-artige Steuerung verschoben werden; fügen Sie logische Tastenfolgen und Fokusmanagement hinzu. |
|
4.9.2.4.3 Fokus-Reihenfolge |
nicht bestanden | Im mobilen Menü springt der Fokus beim Tabben mehrfach und der Reiter ‚Mediathek‘ wird nur mit Shift+Tab erreichbar, Registerkarten werden in falscher Reihenfolge durchlaufen; optimieren Sie die Fokusfolge so, dass alle Tabs und Untermenüs nachvollziehbar erreichbar sind. |
|
4.9.2.4.7 Fokus sichtbar |
nicht bestanden | Die markierten Bedienelemente im mobilen Menü zeigen beim Tastaturfokus keine sichtbare Hervorhebung; Ergänzen Sie eine deutliche Fokushervorhebung, damit die aktuelle Position erkennbar ist. |
|
4.9.4.1.1 Syntaxanalyse |
nicht bestanden | Der W3C-Validator zeigt auf der Startseite mehrere Syntaxfehler und weitere Fehler liegen auf anderen Seiten vor; überarbeiten Sie das Markup, damit es valide ist und assistive Technologien die Seite korrekt interpretieren. |
|
4.9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Das mobile Menü verwendet kaum WAI-ARIA-Auszeichnungen, sodass Name, Rolle und Zustand der Tabs für Screenreader nicht ermittelbar sind; implementieren Sie passende roles, aria-selected und Fokusmanagement nach dem ARIA Tab Panel Pattern. |
|
4.9.6 Konformitätsanforderungen der WCAG |
nicht bestanden | Da die geprüften Seiten nicht durchgehend alle Anforderungen der Konformitätsstufen A und AA erfüllen (siehe z. B. Tastatur, Kontrast, Struktur), ist die WCAG-Konformität nicht gegeben. |
|
4.11.7 Benutzerpräferenzen |
nicht bestanden | Mit benutzerdefinierten Systemeinstellungen (eigene Schriftarten, Farben, Schriftgröße) werden einzelne Elemente so kontrastarm, dass sie kaum noch erkennbar sind; versehen Sie die Elemente mit Hintergrundfarbe oder Kontur, die auch bei Systemfarben behalten wird. |
|
4.12.1.2 Barrierefreie Dokumentation |
nicht bestanden | Die Erklärung zur Barrierefreiheit übernimmt die allgemeinen Auffälligkeiten dieses Berichts, deshalb erfüllt die Seite nicht alle Vorgaben des Abschnitts 4.5 bis 4.11; überarbeiten Sie sie entsprechend der genannten Mängel. |
|
5.1 Technische Dokumentprüfung |
nicht bestanden | Das PDF ‚Anfahrtsskizze_Bonn.pdf‘ enthält keine Tags, ist nicht PDF/UA-konform und liefert Screenreadern inkorrekte Straßennamen; strukturieren Sie das PDF mit Tags, Alternativtexten und korrekter Lesereihenfolge. |
| Kriterium | Status | Notizen |
|---|---|---|
|
4.9.1.1.1.b Alternativtexte für Grafiken und Objekte |
im Wesentlichen bestanden | Die alternativen Texte ‚Tage‘, ‚Stunden‘ und ‚Stadt‘ verdeutlichen nicht, dass es um Datum, Uhrzeit und Veranstaltungsort einer Veranstaltung geht; beschreibende Texte (z. B. ‚Datum der Veranstaltung‘) sind erforderlich. |
|
4.9.1.3.1 HTML-Strukturelemente für Überschriften |
im Wesentlichen bestanden | Die Überschriftenstruktur ist inkonsistent (h3 statt h2, Überschriften ohne zugehörigen Inhalt) und einige visuelle Überschriften wurden nur mit strong ausgezeichnet; kennzeichnen Sie sie mit den passenden heading-Tags, damit Screenreader die Seitenstruktur richtig übermitteln. |
|
4.9.1.3.1.d Inhalte gegliedert |
im Wesentlichen bestanden | Absätze werden teilweise mit mehreren <br>-Elementen umgesetzt, was beim Auslesen im Screenreader zu ‚leer‘ führt; nutzen Sie stattdessen <p>-Elemente und steuern Sie Abstände über CSS. |
|
4.9.1.3.2 Bedeutungsvolle Reihenfolge |
im Wesentlichen bestanden | Visualisierte Karussells verstecken die nachfolgenden Beiträge mittels aria-hidden=true und eine zusätzliche Anzeige ist nur über eine umständlich zu nutzende Tastatursteuerung erreichbar; entfernen Sie aria-hidden oder implementieren Sie eine barrierefreie Karussellsteuerung. |
|
4.9.1.4.1 Benutzung von Farbe |
im Wesentlichen bestanden | Die hervorgehobenen Fließtextlinks sind nur farblich markiert und weisen ein Kontrastverhältnis von 2,5:1 auf; ergänzen Sie zusätzliche Markierungen (Unterstreichung, Symbol) oder erhöhen Sie den Kontrast auf mindestens 3:1. |
|
4.9.1.4.6 Automatischer Umbruch (Reflow) |
im Wesentlichen bestanden | Bei 320 CSS-Pixeln Breite entsteht ein Element, das nicht umbricht, und weitere Inhalte sind nur durch Drag&Drop oder Pfeiltasten erreichbar; gliedern Sie den Inhalt so, dass keine zweidimensionale Scrollrichtung erforderlich ist. |
|
4.9.1.4.8 Textabstand |
im Wesentlichen bestanden | Durch eine Erhöhung der Textabstände gemäß WCAG-Vorgaben werden Teile der Elemente abgeschnitten, was die Lesbarkeit einschränkt; gestalten Sie die Container flexibler, damit erhöhter Zeilen-, Zeichen- oder Wortabstand nicht zu Clipping führt. |
|
4.9.2.4.1 Blöcke überspringen |
im Wesentlichen bestanden | Versteckte Bereichsüberschriften erweitern die Struktur unnötig, es fehlt ein role=search für die Suche und ein iframe trägt kein title-Attribut; verwenden Sie stattdessen HTML5-Landmarks, definieren Sie role=search und beschriften Sie eingebundene Inhalte aussagekräftig. |
|
4.9.2.4.4 Linkzweck (im Kontext) |
im Wesentlichen bestanden | Im Warenkorb und auf Kontaktseiten stehen mehrfach identische Linktexte wie ‚Zum Feld‘ oder ‚hier‘; formulieren Sie die Linktexte so, dass sie den Zweck oder das Ziel eindeutig beschreiben (z. B. ‚Zum Feld Vorname‘). |
|
4.9.3.1.2 Sprache von Teilen |
im Wesentlichen bestanden | Ein fremdsprachlicher Abschnitt im Datenschutz ist im HTML nicht mit lang ausgezeichnet, daher liest der Screenreader die falsche Wortliste; versehen Sie die Passagen mit dem passenden lang-Attribut. |
|
4.9.3.3.3 Vorschlag bei Fehler |
im Wesentlichen bestanden | Für das E-Mail-Feld wird die gleiche Fehlermeldung sowohl bei fehlender als auch bei ungültiger Eingabe angezeigt; differenzieren Sie die Meldungen (z. B. ‚Dieses Feld muss ausgefüllt werden‘ vs. ‚Bitte geben Sie eine gültige Adresse ein‘). |
|
5.2 Erklärung zur Barrierefreiheit |
im Wesentlichen bestanden | Die Erklärung listet nur beispielhaft nicht barrierefreie Inhalte auf und nennt keine Gründe; ergänzen Sie die vollständigen nicht barrierefreien Teile sowie die Ursachen und ggf. Alternativen. |
|
5.4 Erläuterungen in Leichter Sprache |
im Wesentlichen bestanden | Leichte-Sprache-Inhalte beschreiben zwar die wesentlichen Inhalte, es fehlen aber textliche Hinweise zur Navigation; ergänzen Sie erklärende Navigationstexte und Verweise in Leichter Sprache. |
|
5.5 Erläuterungen in Gebärdensprache |
im Wesentlichen bestanden | Die Videoseiten enthalten zwar Informationen und Hinweise, aber Nutzer erhalten keine Aussagen zur Dateigröße und das offizielle Gebärdensprachenlogo wird nicht durchgängig genutzt; ergänzen Sie diese Angaben und verwenden Sie immer das korrekte Logo. |
Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik
Prüfung vom 15.03.2021
BFIT Bund
Prüfung vom 26.02.2021
Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik (BFIT-Bund)
Prüfung vom 03.03.2021