Prüfbericht BIK BITV-Test (Web): mobil.nrw gemäß BITV 2.0 / EN 301 549

Netzdiagramm zu nicht konformen, konformen und nicht anwendbaren Prüfschritten je geprüfter Seite
Seitekonformnicht konformnicht anwendbar
Seite 1: Startseite29 Prüfschritte19 Prüfschritte50 Prüfschritte
Seite 2: Mobilitätsgarantie NRW33 Prüfschritte18 Prüfschritte47 Prüfschritte
Seite 3: Wanderrouten in NRW29 Prüfschritte14 Prüfschritte55 Prüfschritte
Seite 4: Wandernd NRW entdecken29 Prüfschritte15 Prüfschritte54 Prüfschritte
Seite 5: Einfach-Weiter-Ticket28 Prüfschritte16 Prüfschritte54 Prüfschritte
Seite 6: Kontakt32 Prüfschritte14 Prüfschritte52 Prüfschritte
Seite 7: Regionalverkehrsplan25 Prüfschritte20 Prüfschritte53 Prüfschritte
Seite 8: Fahrplanauskunft30 Prüfschritte17 Prüfschritte51 Prüfschritte
Seite 9: Aktuelle Verkehrsinfos27 Prüfschritte15 Prüfschritte56 Prüfschritte
Seite 10: Vernetzt mobil dank Mobilstationen27 Prüfschritte17 Prüfschritte54 Prüfschritte
Seite 11: Mobimat30 Prüfschritte15 Prüfschritte53 Prüfschritte

Projektdaten

URL des Webauftritts
https://www.mobil.nrw/
Prüfzeitraum
10.10.2022 - 25.10.2022
Datum Prüfbericht
25.10.2022
Prüfstelle
Marcus Hermann
Prüfer*in
Marcus Herrmann
Art des Tests
Zur Veröffentlichung geeignet
Ergebnis
0 von 11 der ausgewählten Seiten einer unabhängigen, repräsentativen Seitenauswahl wurden als BITV- / EN 301 549-konform bewertet.
  • 11 Seiten nicht konform
Rahmenbedingungen des Prüfauftrags
Auftraggebende Organisation
CP//COMPARTNER
Umfang der Prüfung
11 Seiten sind eingehend zu prüfen.
Standard
BITV 2.0 (Mai 2019) / anzuwendender Standard EN 301 549 (PDF)
Prüfverfahren
BIK BITV-Test (Web), gemäß EN 301 549
Prüfumgebung
Werkzeugliste BITV-Test (Web)
Gültigkeit
Das Prüfergebnis gilt nur für die geprüfte Seitenauswahl, nicht für den gesamten Webauftritt.
Seitenauswahl
Die Seitenauswahl wurde von der Prüfstelle durchgeführt und ist repräsentativ.
Veröffentlichung
Zur Veröffentlichung geeignet
Konformität und Auswertung

Hinweis zur Konformitätsaussage

Grundlage für den BITV-Test ist die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) vom 21. Mai 2019 bzw. die in der BITV referenzierte EN 301 549 V3.2.1 (PDF). Die europäische Norm EN 301 549 enthält neben den WCAG 2.1-Kriterien für den Bereich Web weitere verpflichtende Anforderungen (siehe Annex A, Tabelle A.1 (PDF)). Diese werden seit 01.03.2021 im BITV-Test geprüft. Hinsichtlich der Konformitätsaussage gilt zu beachten:

  • Eine Webseite gilt als BITV- / EN 301 549-konform, wenn sie alle Anforderungen der BITV 2.0 / EN 301 549 für den Bereich Web erfüllt.
  • Wird einer der Prüfschritte des BITV-/EN 301 549-Tests für eine Webseite als „nicht erfüllt“ oder als nur „teilweise erfüllt“ bewertet, so kann diese Seite nicht als BITV-konform gelten.
  • Die Konformitätsaussage gilt nur für geprüfte Seiten. Es kann nicht ausgeschlossen werden, dass auf Seiten, die nicht Teil der Seitenauswahl sind, Mängel auftreten.

Hinweis zur Testauswertung

Die EN 301 549 formuliert für den Bereich Web 88 Anforderungen, diese werden im BIK BITV-Test (Web) in 98 Prüfschritten geprüft. Die Anzahl der Prüfschritte weicht von der Anzahl der Anforderungen ab, da einzelnen Anforderungen mehrere Prüfschritten zugeordnet sind.

  • Ist die Prüfung einer Anforderung auf mehrere Prüfschritte aufgeteilt, so werden bei der Auswertung die Ergebnisse einzelner Prüfschritte zusammengefasst.
  • Wenn einer der Prüfschritte einer Anforderung „nicht erfüllt“ ist, ist auch die Anforderung „nicht erfüllt“, selbst wenn andere Prüfschritte dieser Anforderung erfüllt sind.
Seitenauswahl für den Prüfauftrag
Anmerkungen

Anmerkungen zur Seitenauswahl

Ausgeschlossen wurden die Subdomains ticketshop, infoportal und pressebereich. Alle drei sind nach Ansicht der Prüfstelle autarke Bereiche, die teilweise redundante Funktionen zum Prüfgegenstand bieten bzw. nicht essentiell wichtig zur Nutzung des Prüfgegenstandes sind.

Ergebnisse im Überblick

5 Allgemeine Anforderungen Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
5.2 Aktivierung von Barrierefreiheitsfunktionen konform
5.3 Biometrie nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
5.4 Erhaltung von Barrierefreiheitsinformationen bei Konvertierung nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6 Zwei-Wege-Sprachkommunikation Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
6.1 Audiobandbreite für Sprache nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.1.1 Textkommunikation in Echtzeit nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.1.2 Gleichzeitige Sprache und Text nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.2.1 Visuell unterscheidbare Anzeige von Textnachrichten nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.2.2 Programmatisch unterscheidbare Anzeige von Textnachrichten nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.2.3 Sprecheridentifizierung nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.2.4 Echtzeitanzeige von Sprech-Aktivität nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.3 Interoperabilität von Echtzeit-Textkommunikation nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.2.4 Reaktionsgeschwindigkeit der Echtzeit-Textkommunikation nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.3 Anrufer-Identifizierung nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.4 Alternativen zu sprachbasierten Diensten nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.5.2 Auflösung bei Videotelefonie nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.5.3 Bildwiederholfrequenz bei Videotelefonie nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.5.4 Synchronität bei Videotelefonie nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.5.5 Visuelle Anzeige von Audio-Aktivität nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
6.5.6 Sprecher-Anzeige für Gebärdensprachen-Kommunikation nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7 Videofähigkeiten Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
7.1.1 Wiedergabe von Untertiteln nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.1.2 Synchrone Untertitel nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.1.3 Erhaltung von Untertiteln nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.1.4 Untertitel-Anpassungen nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.1.5 Gesprochene Untertitel nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.2.1 Wiedergabe von Audiodeskription nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.2.2 Synchrone Audiodeskription nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.2.3 Erhaltung von Audiodeskription nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
7.3 Bedienelemente für Untertitel und Audiodeskription nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.1 Textalternativen Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.1.1.1a Alternativtexte für Bedienelemente nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.1.1.1b Alternativtexte für Grafiken und Objekte nicht konform nicht konform nicht konform konform nicht konform konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.1.1.1c Leere alt-Attribute für Layoutgrafiken konform konform konform konform konform konform nicht anwendbar konform konform konform konform
9.1.1.1d Alternativen für CAPTCHAs nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.2 Zeitbasierte Medien Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.1.2.1 Alternativen für Audiodateien und stumme Videos nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar konform nicht anwendbar
9.1.2.2 Aufgezeichnete Videos mit Untertiteln nicht anwendbar nicht konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.2.3 Audiodeskription oder Volltext-Alternative für Videos nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.2.4 Videos (live) mit Untertiteln nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.2.5 Audiodeskription für Videos nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.3 Anpassbar Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.1.3.1a HTML-Strukturelemente für Überschriften nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform konform nicht konform nicht konform nicht konform konform
9.1.3.1b HTML-Strukturelemente für Listen konform konform konform konform konform konform nicht anwendbar konform konform konform konform
9.1.3.1c HTML-Strukturelemente für Zitate nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.3.1d Inhalt gegliedert konform konform konform konform konform konform konform konform konform konform konform
9.1.3.1e Datentabellen richtig aufgebaut nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht konform konform nicht anwendbar nicht anwendbar nicht anwendbar
9.1.3.1f Zuordnung von Tabellenzellen nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.3.1g Kein Strukturmarkup für Layouttabellen nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform konform
9.1.3.2 Sinnvolle Reihenfolge nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.1.3.3 Ohne Bezug auf sensorische Merkmale nutzbar konform konform konform konform konform konform konform konform konform konform konform
9.1.3.4 Keine Beschränkung der Bildschirmausrichtung konform konform konform konform konform konform konform konform konform konform konform
9.1.3.5 Eingabefelder zu Nutzerdaten vermitteln den Zweck nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.4 Unterscheidbar Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.1.4.1 Ohne Farben nutzbar konform konform konform konform konform konform konform konform konform konform konform
9.1.4.2 Ton abschaltbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.1.4.3 Kontraste von Texten ausreichend nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.1.4.4 Text auf 200 % vergrößerbar konform konform konform konform konform konform nicht konform konform konform konform konform
9.1.4.5 Verzicht auf Schriftgrafiken nicht konform konform konform konform konform konform konform konform konform konform konform
9.1.4.10 Inhalte brechen um konform konform konform konform konform konform nicht konform konform konform konform konform
9.1.4.11 Kontraste von Grafiken und grafischen Bedienelementen ausreichend nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.1.4.12 Textabstände anpassbar konform konform konform konform konform konform konform konform konform konform nicht konform
9.1.4.13 Eingeblendete Inhalte bedienbar konform konform konform nicht konform konform konform konform konform konform konform konform
9.2.1 Per Tastatur zugänglich Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.2.1.1 Ohne Maus nutzbar nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.2.1.2 Keine Tastaturfalle konform konform konform konform konform konform konform konform konform konform konform
9.2.1.4 Tastatur-Kurzbefehle abschaltbar oder anpassbar konform konform konform konform konform konform konform konform konform konform konform
9.2.2 Ausreichend Zeit Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.2.2.1 Zeitbegrenzungen anpassbar konform konform konform konform konform konform konform konform konform konform konform
9.2.2.2 Bewegte Inhalte abschaltbar nicht konform konform konform konform nicht konform konform konform konform konform nicht konform nicht konform
9.2.3 Anfälle Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.2.3.1 Verzicht auf Flackern konform konform konform konform konform konform konform konform konform konform konform
9.2.4 Navigierbar Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.2.4.1 Bereiche überspringbar nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.2.4.2 Sinnvolle Dokumenttitel konform konform konform konform konform konform konform konform konform konform konform
9.2.4.3 Schlüssige Reihenfolge bei der Tastaturbedienung nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.2.4.4 Aussagekräftige Linktexte konform nicht konform konform konform konform nicht anwendbar nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar
9.2.4.5 Alternative Zugangswege konform
9.2.4.6 Aussagekräftige Überschriften und Beschriftungen nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform konform nicht konform nicht konform nicht konform nicht konform
9.2.4.7 Aktuelle Position des Fokus deutlich nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.2.5 Eingabemodalitäten Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.2.5.1 Alternativen für komplexe Zeiger-Gesten nicht konform nicht anwendbar nicht anwendbar nicht konform konform nicht anwendbar konform nicht anwendbar nicht konform nicht konform nicht anwendbar
9.2.5.2 Zeigergesten-Eingaben können abgebrochen oder widerrufen werden konform konform konform konform konform konform konform konform konform konform konform
9.2.5.3 Sichtbare Beschriftung Teil des zugänglichen Namens konform konform konform konform konform konform nicht konform konform konform konform konform
9.2.5.4 Alternativen für Bewegungsaktivierung nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.3.1 Lesbar Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.3.1.1 Hauptsprache angegeben konform konform konform konform konform konform nicht konform konform konform konform konform
9.3.1.2 Anderssprachige Wörter und Abschnitte ausgezeichnet konform nicht konform nicht anwendbar konform nicht anwendbar nicht anwendbar nicht anwendbar nicht konform nicht anwendbar nicht konform nicht konform
9.3.2 Vorhersehbar Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.3.2.1 Keine unerwartete Kontextänderung bei Fokus konform konform konform konform konform konform konform konform konform konform konform
9.3.2.2 Keine unerwartete Kontextänderung bei Eingabe konform nicht anwendbar konform nicht anwendbar nicht anwendbar konform konform nicht anwendbar nicht anwendbar nicht anwendbar konform
9.3.2.3 Konsistente Navigation konform
9.3.2.4 Konsistente Bezeichnung konform
9.3.3 Hilfestellung bei der Eingabe Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.3.3.1 Fehlererkennung nicht konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar konform nicht konform nicht konform nicht anwendbar nicht anwendbar nicht konform
9.3.3.2 Beschriftungen von Formularelementen vorhanden nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform konform
9.3.3.3 Hilfe bei Fehlern konform nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar konform konform konform nicht anwendbar nicht anwendbar konform
9.3.3.4 Fehlervermeidung wird unterstützt nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
9.4.1 Kompatibel Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
9.4.1.1 Korrekte Syntax konform konform konform konform konform konform nicht konform konform konform konform konform
9.4.1.2 Name, Rolle, Wert verfügbar nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform nicht konform
9.4.1.3 Statusmeldungen programmatisch verfügbar nicht konform nicht konform nicht anwendbar nicht anwendbar nicht konform nicht anwendbar nicht konform nicht konform nicht anwendbar nicht anwendbar nicht anwendbar
11.7 Benutzerdefinierte Einstellungen Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
11.7 Benutzerdefinierte Einstellungen konform konform konform konform konform konform konform konform konform konform konform
11.8 Autorenwerkzeuge Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
11.8.2 Barrierefreie Erstellung von Inhalten nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
11.8.3 Erhaltung von Barrierefreiheitsinformationen bei Transformation nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
11.8.4 Reparaturassistenz nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
11.8.5 Vorlagen nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar nicht anwendbar
12 Dokumentation und Support Ansicht 1 Ansicht 2 Ansicht 3 Ansicht 4 Ansicht 5 Ansicht 6 Ansicht 7 Ansicht 8 Ansicht 9 Ansicht 10 Ansicht 11
12.1.1 Dokumentation von Kompatibilität und Barrierefreiheit nicht anwendbar
12.1.2 Barrierefreie Dokumentation nicht anwendbar
12.2.2 Technischer Support nicht anwendbar
12.2.3 Effektive Kommunikation nicht anwendbar
12.2.4 Vom Support bereitgestellte Dokumentation nicht anwendbar

Ergebnisse nach Prüfschritten

Filter
  • 5 Allgemeine Anforderungen

    Prüfschritte
  • 6 Zwei-Wege-Sprachkommunikation

    Prüfschritte
  • 7 Videofähigkeiten

    Prüfschritte
  • 9.1.1 Textalternativen

    Prüfschritte
    • 9.1.1.1a. Alternativtexte für Bedienelemente,

      Details
      • 11 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Der Absendebutton im Fahrplanauskunft-Widget hat keinen zugänglichen Namen, da die darin befindliche Pfeil-nach-rechts-Grafik als dekorative Grafik umgesetzt wurde, somit kein "Namensgeber" für den Button sein kann. Zur Behebung ist entweder die dekorative Grafik in eine inhaltstragende Grafik umzuwandeln (Alternativtext dann "Suchen"), oder dem Button ist beispielsweise per aria-label-Attribut ebenfalls der zugängliche Name "Suchen" zu geben.

        3. Im Fahrplanauskunft-Widget hat der "Ortungssymbol"-Button im Start-Eingabefeld keinen zugänglichen Namen, da die darin befindlicheGrafik als dekorative Grafik umgesetzt wurde, somit kein "Namensgeber" für den Button sein kann. Zur Behebung ist entweder die dekorative Grafik in eine inhaltstragende Grafik umzuwandeln (Alternativtext dann "Automatisch orten"), oder dem Button ist beispielsweise per aria-label-Attribut ebenfalls der zugängliche Name "Automatisch orten" zu geben.

        4. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        5. Der Absende-Button im "Newsletter abonnieren"-Widget besitzt keinen Alternativtext, da die darin befindliche Pfeil-nach-rechts-Grafik als dekorative Grafik umgesetzt wurde, somit kein "Namensgeber" für den Button sein kann. Zur Behebung ist entweder die dekorative Grafik in eine inhaltstragende Grafik umzuwandeln (Alternativtext dann "Abonnieren"), oder dem Input-Element ist beispielsweise per aria-label-Attribut ebenfalls der zugängliche Name "Abonnieren" zu geben.

        6. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        7. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        8. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        3. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        4. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        5. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        6. Der Button "Sucheinstellungen anpassen" (.icon-einstellungen) hat keinen Alternativtext (es existiert ein versteckter Text vorhanden, dieser wird aber mit display:none versteckt. Stattdessen sollte folgende Strategie gewählt werden: https://barrierefrei.link/visuell-verborgen).

        7. Die Buttons zur Auswahl von Start und Ziel auf der Karte ( .map-btn) und dem Einstellungsmenü haben jeweils keinen Alternativtext.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        3. Der Absende-Button im "Newsletter abonnieren"-Widget besitzt keinen Alternativtext, da die darin befindliche Pfeil-nach-rechts-Grafik als dekorative Grafik umgesetzt wurde, somit kein "Namensgeber" für den Button sein kann. Zur Behebung ist entweder die dekorative Grafik in eine inhaltstragende Grafik umzuwandeln (Alternativtext dann "Abonnieren"), oder dem Input-Element ist beispielsweise per aria-label-Attribut ebenfalls der zugängliche Name "Abonnieren" zu geben.

        4. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        5. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        6. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        3. Der Absende-Button im "Newsletter abonnieren"-Widget besitzt keinen Alternativtext, da die darin befindliche Pfeil-nach-rechts-Grafik als dekorative Grafik umgesetzt wurde, somit kein "Namensgeber" für den Button sein kann. Zur Behebung ist entweder die dekorative Grafik in eine inhaltstragende Grafik umzuwandeln (Alternativtext dann "Abonnieren"), oder dem Input-Element ist beispielsweise per aria-label-Attribut ebenfalls der zugängliche Name "Abonnieren" zu geben.

        4. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        5. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        6. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        7. Das verlinkte Bild mit dem abgebildeten Wanderfolder hat den Alternativtext "Ein Mockup des Wanderfolders 2022 auf einem Holzhintergrund", woraus allerdings das Linkziel nicht klar wird. Es ist ergänzend im Alternativtext zu beschreiben, beispielsweise "… - zur Großansicht".

        8. Anmerkung ohne Bewertung: Die rein dekorativen Collagen unterhalb "Detaillierte Infos zu den Touren" können als dekorative Bilder (d. h. mit alt="") ausgezeichnet werden, da die existierenden Alternativtexte die Collagen ohnehin nicht beschreiben. Um dennoch den ganzen Teaser klickbar zu machen, wird empfohlen, das Card-Pattern anzuwenden: https://barrierefrei.link/cards (englisch).

        9. Das komoot-Logo verlinkt auf komoot.de, das sich im Link befindliche Bild hat allerdings kein alt-Attribut. Zur Behebung ist in diesem das Abgebildete und das Linkziel zu beschreiben.

          Klickbare Symbole auf der komoot-Karte sind als dekorative Bilder umgesetzt. Sie sind in inhaltstragende Bilder zu wandeln (https://barrierefrei.link/svg-inline-alt, englisch) oder dem umgebenden Button ist per aria-label-Attribut ein Alternativtext zu geben, der die Funktion des Buttons beschreibt (z. B. "Vollbild", "Herauszoomen").

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Die Tarif-Gebiet-Karte linkt auf eine vergrößerte Darstellung ihrer selbst in einem modalen Fenster. Das Linkziel geht allerdings nicht aus dem Alternativtext des Bildes hervor, er beschreibt nur - wenn auch angemessen - den Bildinhalt. Ein Hinweis wie z. B. "…- öffnet vergrößerte Darstellung" ist im Alternativtext deswegen zu ergänzen.

        2. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        3. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        4. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        5. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        6. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        3. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        4. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        5. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Sobald man Streckendaten, d. h. Start- und Zielpunkt eingegeben hat, erscheint im Textfeld genannter Stationen ein Mülleimer-Symbol, das aber als Iconfont, d. h. dekoratives Bild eingebunden ist (und dessen Elternelement ein klickbares span ist, siehe 9.4.1.2). Diese Symbole sind zur Behebung am einfachsten in inhaltstragende Bilder umzuwandeln, mit einem Alternativtext wie "Eingabe löschen".

          Das gleiche Fehlermuster, das heißt span und Iconfont, tritt im Fenster auf, das nach Eingabe und Klick auf "Ankunft anfordern" erscheint, inklusive dem Schließen-X.

          Das gleiche gilt ebenfalls für die Pfeile neben den Textfeldern in Bezug auf Abfahrtszeit und -datum.

          Das gleiche gilt auch für die "Einklapper" der Seitenleisten (visuell Dreiecke nach rechts bzw. links zeigend).

        2. Das Icon auf dem Absendebutton unterhalb der Überschrift "Haltestellensuche" ist mit einer Iconfont umgesetzt, der Text des Buttons somit ein nichtssagendes "r" (visuell: ein Dreieck, nach rechts gewandt). Vorschlag zur Behebung: Umwandlung in ein Button-Element, <button type="submit" aria-label="Absenden"><!-- Hier Icon --></button>.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        3. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        4. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        5. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        6. Das Zahnrad-Icon im oberen Teil des Suchformulares hat keinen Alternativtext, da einerseits das Zahnrad-Bild als dekoratives eingesetzt wurde, andererseits der sich im Bild befindliche Text per display: none vor allen Nutzungsformen versteckt wurde. Zur Behebung ist der Text nur visuell zu verbergen: https://barrierefrei.link/visuell-verborgen .

        7. Das graue Marker-Icon rechts hat keinen Alternativtext, da das im Button befindliche Bild als dekoratives eingebunden wurde. Zur Behebung muss das Bild entweder als inhaltstragendes eingebunden werden (mit Alternativtext "Auf Karte anzeigen"), oder dem Button z. B. mit aria-label ein gleichlautender zugänglicher Name gegeben werden.

          Das gleiche gilt für das danebenstehende Zahnrad-Icon auf grauem Hintergrund, sowie das Schließen-X, wenn die Karte sichtbar gemacht wurde (hier ist zudem die Rolle falsch - siehe 9.4.1.2 - und die Tastaturerreichbarkeit nicht gegeben - siehe 9.2.1.1).

        8. Klickt man auf ein graues Marker-Icon auf der rechten Seite, wird die eingegebene Station auf einer Karte dargestellt. Die Karten-Bedienelemente wie Zoom oder Suche sind klickbare img-Elemente ohne Alternativtext (falsche Rolle: siehe 9.4.1.2). Wird die richtige Rolle button hergestellt, so brauchen die Bilder einen entsprechenden Alternativtext, der die jeweilige Funktion beschreibt, oder das Element mit der Rolle button ein namensgebendes Attribut wie aria-label (ebenfalls mit einer Funktionsbeschreibung).

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        3. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        4. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        5. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        6. Interaktive Elemente auf der Karte, seien es Kontrollelemente zum Erreichen der Vollbildansicht, Einblenden eines Menüs, die Menüpunkte darin oder einzelne Marker auf der Karte sind als dekorative Bilder umgesetzt. Dadurch, dass ihre umgebenden Kontrollelemente auch nicht auf andere Arten programmatisch beschriftet sind, liegen in der Karte eine Vielzahl von unbeschrifteten Kontrollfeldern vor. Diese Beschriftung ist nachzureichen, entweder durch die Umwandlung in inhaltstragende Bilder mit die Funktion beschreibendem Alternativtext, oder mit namensgebenden Attributen wie aria-label auf den Kontrollelementen selbst.

          Grundsätzlich ist die Verkehr.NRW-Karte unzugänglich und übermäßig komplex, siehe 9.4.1.2. Die Nennung der Barrieren hat deswegen keinen Anspruch auf Vollständigkeit und wird auch durch die eigene Barrierefreiheitserklärung des Kartenwidgets ergänzt.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Marker auf der Karte unterhalb der Überschrift "Ein NRW-​weites Netz von Mobilstationen" haben keinen zugänglichen Namen, da der einzige Geber für den zugänglichen Namen ein in der Marker-Schaltfläche befindliches Bild ist - das allerdings kein alt-Attribut hat. Dies ist entweder mit dem Ortsnamen des Markereintrags zu ersetzen, oder, im Falle von Cluster-Markern, mit der Menge der dann aufklappenden Marker im Cluster.

        2. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        3. Der Alternativtext des Umschlag-Symbols im grauen Fußbereich lautet "Newsletter Icon", damit wird das Linkziel des verlinkten Bildes nicht klar beschrieben (im Gegensatz zu den Alternativtexten der verlinkten Bilder in unmittelbarer Nähe). Ein besserer Text wäre schlicht "Newsletter" oder "Newsletter-Anmeldung".

        4. Öffnet man die "Cookie-Einstellungen" aus dem Fussbereich heraus, und klickt dann neben einer Cookie-Art auf das Fragezeichensymbol (das keinen Alternativtext hat, siehe dazu aber 9.4.1.2), öffnet sich ein weiterer Dialog (der genauso wie der erste auch keinerlei Dialog-Semantik hat, siehe 9.4.1.2). Der Schließen-Button dieses zweiten Dialogs hat keinen Alternativtext, obwohl sich ein SVG in ihm befindet. Diesem SVG ist durch die folgende Instandsetzung (englischer Artikel) ein Alternativtext zu geben: https://barrierefrei.link/svg-inline-alt .

        5. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieses Symbol, und damit auch sein umgebender Button hat keinen zugänglichen Namen. Da es sich um ein SVG handelt, ist folgende Strategie für Alternativtexte bei SVGs zu wählen: https://barrierefrei.link/svg-inline-alt (englisch).

        6. Das Schließen-X, dass das offene mobile Menü wieder einklappt hat nur ein dekoratives Bild (genauer gesagt: ein CSS-Konstrukt, dass zwei Striche übereinanderlegt) in sich. Dies, in Kombination mit dem Fehlen eines namensgebenden Attributs wie z. B. aria-label führt dazu, dass die Schaltfläche unbeschriftet ist. Eine Beschriftung ist wie erwähnt z. B. über aria-label herzustellen, oder das dekorative ist in ein informatives Bild umzuwandeln, das den Alternativtext "Navigation schließen" trägt.

          Das gleiche Fehlermuster tritt auf Seite 8 auf, wenn man die Kartendarstellung einer Haltestelle aktiviert (dort "X" über der Karte) oder einen Zwischenhalt angibt (dort "X" neben den Zwischenhalt-Eingabefeldern).

          Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        7. Die verlinkten Bilder, die die Kampagnenmotive im unteren Bereich der Seite abbilden haben Alternativtexte, aus denen das jeweilige Linkziel nicht klar wird. Es ist ergänzend im Alternativtext zu beschreiben, beispielsweise "… - zur Großansicht".

        8. Verlinkte Bilder auf der eingebundenen Karte haben kein alt-Attribut. Es ist nachzuliefern, der Alternativtext muss jeweils der Ortsname bzw. die Adresse sein. Zusätzlich ist im Alternativtext anzukündigen, dass eine Aktivierung eine Markergroßansicht öffnet.

        9. Das verlinkte Bild unter "Einheitliches Design mit Wiedererkennungswert" hat den Alternativtext "Eine Infografik, die den Aufbau der Stelen an Mobilstationen zeigt.", woraus allerdings das Linkziel nicht klar wird. Es ist ergänzend im Alternativtext zu beschreiben, beispielsweise "… - zur Großansicht".

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Das mobil.nrw-Logo (im Kopf- und Fußbereich) verlinkt auf die Startseite, das geht aber nicht aus seinem Alternativtext hervor. Er sollte entsprechend "Logo mobil.nrw - zur Startseite" lauten. Auf Seite 11 ist der Alternativtext gar "Content and Sales Logo".

        2. Die Facebook- und Instragram-Icon verlinkten auf die entsprechenden Social-Media-Präsenzen von mobilove. Die Links haben allerdings keinen zugänglichen Namen, da das jeweils in ihm befindliche Bild als dekorative Grafik eingebunden wurde, und der vorhandene Text unzulässig versteckt wurde. Die einfachste Behebungsart wäre es, den Text mit folgendem Ansatz korrekt visuell (aber nicht vor Screenreadern) zu verstecken: https://barrierefrei.link/visuell-verborgen .

    • 9.1.1.1b. Alternativtexte für Grafiken und Objekte,

      Details
      • 2 Seiten konform
      • 9 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Die Alternativtexte der Bildkacheln unterhalb des "Fahrplanauskunft-Widgets" beschreiben nicht, was auf den Bildern zu sehen ist. So ist beispielsweise "Dreh deine Extrarunde - bis zum Jahresende" ein Marketingsatz, aber keine angemessene Bildbeschreibung, die abgebildete Personen, Gegenstände und ggf. Stimmungen reproduziert. Es muss beschrieben werden, was auf dem Bild zu sehen ist, oder, im Falle von Bildcollagen ohne Informationswert, das Bild als dekorativ markiert werden (alt="").

        2. Die Icons für Datum (Kalender), Uhrzeit (Uhr) und "Start/Ziel tauschen" (Pfeile, nur Seite 8) haben keinen Alternativtext.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Ähnlich der Bildkacheln auf Seite 1 beschreiben die Alternativtexte der Kacheln auf dieser Seite ebenfalls nicht ausreichend die sichtbaren Bilder, sondern geben nur den Text der sich in den Kacheln befindlichen Überschriften wieder. Zur Behebung siehe Seite 1, Kacheln, in diesem Prüfschritt.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Das Bild, dass das Smartphone im Bereich der Apps abbildet, hat den Alternativtext "{". Dies ist durch einen aussagekräftigeren Text zu ersetzen.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Die Präsentation der Start- und Zielpunkte auf der Karte gilt selbst als eine alternative Darstellung.

        2. In der Ergebnisdarstellung (bei eingegebenem Start- und Endpunkt) sind inhaltstragende Bilder (z. B. ob es sich um einen Bus oder eine S-Bahn für das Teilstück der Verbindung handelt) als dekorative Bilder, genauer: Iconfont-Bilder, gelöst. Dies ist zu korrigieren: Eine Umwandlung in inhaltstragende Bilder (z. B. <img>-Element) mit aussagekräftigen Alternativtexten, die die Information abbilden, die auch visuell zu sehen ist, ist vorzunehmen.

        3. In der Ergebnisdarstellung (bei eingegebenem Start- und Endpunkt): In jeder einzelnen Station einer Fahrt gibt es einen kleinen farbigen Kreis, dessen Bedeutung weiter oben in einer Tabelle erklärt wird: Keine Informationen, Pünktlich oder von Verkehrslage beeinflusst. Diese Bilder sind deswegen inhaltstragend, doch weder in den einzelnen Stationen, noch in der Legende als inhaltstragendes Bild umgesetzt. Dies ist zu gewährleisten.

        4. Vor den Eingabefeldern zum Datum der Fahrt und der Uhrzeit der Fahrt gibt es jeweils ein Kalender- und Uhr-Icon. Beide wurden als dekoratives Bild umgesetzt. Auch hier ist eine Umwandlung in ein inhaltstragendes Bild vorzunehmen, der Alternativtext muss entsprechend "Datum" und "Uhrzeit" lauten.

        5. Die Icons für Datum (Kalender), Uhrzeit (Uhr) und "Start/Ziel tauschen" (Pfeile, nur Seite 8) haben keinen Alternativtext.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Für die eingebundene Karte muss ein Alternativinhalt bereitgestellt werden (da die Daten rein visuell präsentiert werden, dies für Screenreader-Nutzende nicht bedienbar ist und zumal die Karte gegen andere Prüfschritte verstößt, z. B. 9.1.1.1a und 9.4.1.2). Es ist beispielsweise unter der Karte ein Link auf eine alternative, z. B. tabellarische Ausprägung der Kartendaten und Markerinhalte zu setzen (vergleichbar mit der Komoot-Karte auf Seite 4).

          Grundsätzlich ist die Verkehr.NRW-Karte unzugänglich und übermäßig komplex, siehe 9.4.1.2. Die Nennung der Barrieren hat deswegen keinen Anspruch auf Vollständigkeit und wird auch durch die eigene Barrierefreiheitserklärung des Kartenwidgets ergänzt.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Für die eingebundene Karte muss ein Alternativinhalt bereitgestellt werden (da die Daten rein visuell präsentiert werden, dies für Screenreader-Nutzende nicht bedienbar ist und zumal die Karte gegen andere Prüfschritte verstößt, z. B. 9.1.1.1a und 9.4.1.2). Es ist beispielsweise unter der Karte ein Link auf eine alternative, z. B. tabellarische Ausprägung der Kartendaten und Markerinhalte zu setzen (vergleichbar mit der Komoot-Karte auf Seite 4).

          Grundsätzlich ist die Verkehr.NRW-Karte unzugänglich und übermäßig komplex, siehe 9.4.1.2. Die Nennung der Barrieren hat deswegen keinen Anspruch auf Vollständigkeit und wird auch durch die eigene Barrierefreiheitserklärung des Kartenwidgets ergänzt.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Das "#mobilove"-Logo ist als dekoratives Bild eingebunden, aber inhaltstragend. Es ist als solches, z. B. als <img>-Element, einzubinden mit dem Alternativtext "mobilove-Logo".

        2. Für das animierte Inline-SVG ist wiefolgt ein Alternativtext zu gewährleisten: https://barrierefrei.link/svg-inline-alt (englisch), der beschreibt, welche Transportarten Gegenstand der Umfrage sind.

    • 9.1.1.1c. Leere alt-Attribute für Layoutgrafiken,

      Details
      • 10 Seiten konform
      • 1 Seite nicht anwendbar
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: In Sachen Bildkachel-Teaser siehe Seite 1, 9.1.1.1a.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        konform
        Details
        1. Anmerkung mit geringer Abwertung: Für die Teaserhintergründe unterhalb von "Könnte auch interessant sein" wäre es angemessen, die Bilder als dekorative Bilder zu markieren, also das alt-Attribut zu leeren, zumal die Bildbeschreibungen nur den sichtbaren Text wiederholen und nicht das Bild beschreiben. Andernfalls wird der programmatische Linktext eines einzelnen Links negativ beeinflusst. Der erste Link (zum Zeitpunkt der Prüfung) hat beispielsweise den aus Alternativ- und sichtbaren Text zusammengesetzten Namen: "Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW".

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        konform
        Details
        1. Anmerkung mit geringer Abwertung: Für die Teaserhintergründe unterhalb von "Könnte auch interessant sein" wäre es angemessen, die Bilder als dekorative Bilder zu markieren, also das alt-Attribut zu leeren, zumal die Bildbeschreibungen nur den sichtbaren Text wiederholen und nicht das Bild beschreiben. Andernfalls wird der programmatische Linktext eines einzelnen Links negativ beeinflusst. Der erste Link (zum Zeitpunkt der Prüfung) hat beispielsweise den aus Alternativ- und sichtbaren Text zusammengesetzten Namen: "Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW".

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        konform
        Details
        1. Anmerkung mit geringer Abwertung: Für die Teaserhintergründe unterhalb von "Könnte auch interessant sein" wäre es angemessen, die Bilder als dekorative Bilder zu markieren, also das alt-Attribut zu leeren, zumal die Bildbeschreibungen nur den sichtbaren Text wiederholen und nicht das Bild beschreiben. Andernfalls wird der programmatische Linktext eines einzelnen Links negativ beeinflusst. Der erste Link (zum Zeitpunkt der Prüfung) hat beispielsweise den aus Alternativ- und sichtbaren Text zusammengesetzten Namen: "Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW".

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht anwendbar
        Details

        Keine Anmerkungen vorhanden

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        konform
        Details
        1. Anmerkung mit geringer Abwertung: Für die Teaserhintergründe unterhalb von "Könnte auch interessant sein" wäre es angemessen, die Bilder als dekorative Bilder zu markieren, also das alt-Attribut zu leeren, zumal die Bildbeschreibungen nur den sichtbaren Text wiederholen und nicht das Bild beschreiben. Andernfalls wird der programmatische Linktext eines einzelnen Links negativ beeinflusst. Der erste Link (zum Zeitpunkt der Prüfung) hat beispielsweise den aus Alternativ- und sichtbaren Text zusammengesetzten Namen: "Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW Digitaler Erstattungsantrag für die Mobilitätsgarantie NRW".

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

    • 9.1.1.1d. Alternativen für CAPTCHAs,

      Details
      • 1 Seite konform
      • 10 Seiten nicht anwendbar
  • 9.1.2 Zeitbasierte Medien

    Prüfschritte
  • 9.1.3 Anpassbar

    Prüfschritte
    • 9.1.3.1a. HTML-Strukturelemente für Überschriften,

      Details
      • 2 Seiten konform
      • 9 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. Die Überschriften der Kacheln/Newsteaser sind <h3> und erscheinen der <h2> Fahrplanauskunft untergeordnet, obwohl kein direkter Zusammenhang besteht. Entweder sollte mit einer visuell verborgenen <h2> (Name z. B. "Neuigkeiten", https://barrierefrei.link/visuell-verborgen) gearbeitet werden, oder die Kachel-Überschriften werden zu <h2>s.

        4. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. Die h2 "Blättert euch durch den Wanderfolder" sollte man der h2 "Wandernd NRW entdecken" untergeordnet, sprich: als h3 sehen. Das gleiche gilt auch für folgende h2 wie z.B. "Detaillierte Infos zu den Touren".

        4. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        konform
        Details
        1. Anmerkung mit geringer Abwertung: Klickt man auf eine Station auf der Karte, so ist der Ortsname dieser Station im dann folgenden Dialog als seine Überschrift (ggf. im Kontext des bestehenden Überschriftenbaums als h1) zu sehen.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Was das Handling von "Dachzeilen", also kleineren Texten direkt über Überschriften angeht, kann man auf der Seite trotz visuell identischem Ergebnis zwei technische Ansätze feststellen:

          1. Auszeichnung der Dachzeile als Absatz (z. B. Hero Seite 5).
          2. Auszeichnung der Dachzeile als Teil der Überschrift (z. B. Kacheln auf Seite 1).

          Hier sollte vereinheitlicht werden.

        2. Die Spalten im Fußbereich (Desktopansicht) haben jeweils eine verlinkte visuelle Überschrift, die allerdings trotz entsprechender inhaltlicher Funktion semantisch keine ist. Zur Behebung ist es denkbar, mit einer visuell verborgenen Überschrift 2. Ordnung (https://barrierefrei.link/visuell-verborgen) zu arbeiten, die den Fußbereich und alle Überschriften in ihm beschreibt, und die angesprochenen Links dann als Überschriften dritter Ordnung auszuzeichnen.

          Das würde auch die Fehlzuordnung der <h3>"Betriebsqualität auf einen Blick" zu einer ggf. existierenden dort befindlichen <h2> wie "Könnte auch interessant sein" unterbinden.

        3. "Teilen" im unteren Bereich des Hauptinhalts hat die Funktion einer Überschrift, da es die Social-Media-Links ankündigt, sollte im Kontext eine <h2> oder <h3> sein.

        4. Der Text "Unter #DuGibstDenTonAn können Bürger*innen aus der Stadtregion Köln zeigen, wie sie dank der Angebote von Mobilstationen ans Ziel kommen." ist als h4 ausgezeichnet, ohne dass er Überschriftenfunktion hat. Er ist in einen Absatz zu wandeln.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        konform
        Details
        1. Anmerkung ohne Bewertung: Die "visuelle Dachzeile", z. B. "1/10 Thema: Wunsch" ist als <h2> denkbar (der wie eine Überschrift ausssehende Text die Frage und damit die Gruppenbeschriftung für die Radio-Eingabefelder).

    • 9.1.3.1b. HTML-Strukturelemente für Listen,

      Details
      • 10 Seiten konform
      • 1 Seite nicht anwendbar
    • 9.1.3.1c. HTML-Strukturelemente für Zitate,

      Details
      • 11 Seiten nicht anwendbar
    • 9.1.3.1d. Inhalt gegliedert,

      Details
      • 11 Seiten konform
    • 9.1.3.1e. Datentabellen richtig aufgebaut,

      Details
      • 1 Seite konform
      • 1 Seite nicht konform
      • 9 Seiten nicht anwendbar
    • 9.1.3.1f. Zuordnung von Tabellenzellen,

      Details
      • 11 Seiten nicht anwendbar
    • 9.1.3.1g. Kein Strukturmarkup für Layouttabellen,

      Details
      • 11 Seiten nicht anwendbar
    • 9.1.3.1h. Beschriftung von Formularelementen programmatisch ermittelbar,

      Details
      • 1 Seite konform
      • 10 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

        2. Im Fahrplanauskunfts-Widget sollten die Radio-Auswahlfelder, die bestimmen, ob die eingegebene Uhrzeit die Abfahrt- oder Ankunftszeit ist ("Ab", "An"), in einer Gruppe zusammengefasst und mit einem Gruppenbezeichner versehen werden: https://barrierefrei.link/radiogroup-en (englisch).

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Einzelne Texteingabefelder, z. B. die Haltestellensuche sind von einem <fieldset>-Element umschlossen, das keinen Bezeichner hat. Eine Gruppierung eines einzelnen Elementes ergibt keinen Sinn und ist zu entfernen.

          Ferner sind im gleichen, links platzierten Widget <span>-Elemente gruppiert, was keinen Sinn ergibt, da dort keine direkte Dateneingabe möglich ist. Auch hier ist die Gruppierung per <fieldset> zu entfernen.

          Nach angeforderter Auskunft erscheint ein select/Auswahlfeld, das mit "Alle außer ICE" vorausgewählt ist. Dieses Feld hat ebenfalls keinen zugänglichen/programmatischen Namen. Hier ist zur Behebung eine sichtbare Beschriftung via <label> zu empfehlen, die per for/id mit dem Select assoziiert ist.

        2. Das Eingabefeld direkt unter der Überschrift "Haltestellensuche" hat keinen programmatischen Namen. Zur Behebung ist z. B. der genannten Überschrift eine id zu geben, und dann aus dem Eingabefeld heraus per aria-labelledby-Attribut auf diese zu verweisen.

          Die einzelnen Textfelder zur Uhrzeit und zum Datum haben ebenfalls keine programmatisch ermittelbaren Namen. Auch hier ist (beim jeweils ersten Feld) eine aria-labelledby-Assoziation mit dem sichtbaren Label möglich. Für die "restlichen" Felder, die sich auf z. B. Minuten, den Monat oder das Jahr einer Eingabe beziehen, sollte mit dem Attribut aria-label und entsprechend aussagekräftigen Werten gearbeitet werden.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

        2. Im Fahrplanauskunfts-Widget sollten die Radio-Auswahlfelder, die bestimmen, ob die eingegebene Uhrzeit die Abfahrt- oder Ankunftszeit ist ("Ab", "An"), in einer Gruppe zusammengefasst und mit einem Gruppenbezeichner versehen werden: https://barrierefrei.link/radiogroup-en (englisch).

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Fussbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das zwar einen placeholder, aber keinen programmatischen Namen hat. Dieser ist z. B. per aria-label herzustellen (ein placeholder gilt allerdings nicht als zulässige visuelle Beschriftung, siehe 9.3.3.2).

          Das gleiche Fehlermuster zeigt sich im "Newsletter"-Widget: auch dort ist das Texteingabefeld nur mit placeholder beschriftet. Behebung wie oben.

        2. Das nur mit placeholder beschriftete Suchfeld "PLZ oder Ort eingeben" in der Karte oben links hat keine programmatisch ermittelbare Beschriftung, da eine Textvorbelegung zu diesem Zweck nicht ausreichend. Andere Wege, wie z. B. ein label/for-Konstrukt, oder aria-label auf dem Textfeld, sind einzuschlagen.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

    • 9.1.3.2. Sinnvolle Reihenfolge,

      Details
      • 11 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

        4. Im Karussell sind im jeweiligen Moment nicht-sichtbare Slides unzulässig versteckt, sodass sie im Lesemodus des Screenreaders vorgelesen werden, siehe auch Details in 9.4.1.2.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

        4. Anmerkung ohne Bewertung: In den Kacheln wird im Screenreader NVDA jeweils eine unsichtbare Dachzeile vor der jeweiligen Überschrift vorgelesen.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Die Textinhalte der visuellen Karte werden im Screenreader NVDA ohne informativen Bezug zueinander vorgelesen. Die Karte ist vor Screenreadern und Tastaturnutzenden zu verstecken (aria-hidden="true" und tabindex="-1" auf dem Kartencontainer), da es eine dokumentierte alternative Nutzungsform gibt (die allerdings selbst auch fehlerhaft ist - siehe v .a. Prüfschritt 9.4.1.2).

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. In der mobilen Ausprägung ist die geschlossene mobile Navigation technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell versteckt sind: Anstelle einer absoluten Positionierung im CSS bei gleichzeitiger max-height von 0 ist das nicht ausgeklappte mobile Menü per display: none zu verstecken.

        2. Das geschlossene Suchfenster (genauer gesagt: der Such-Dialog), der über das Lupen-Icon zu erreichen ist, ist technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl es visuell versteckt sind: Anstelle einer absoluten Positionierung iist das nicht offene Suchdialog per display: none zu verstecken.

        3. Im Desktop-Design sind Hauptnavigationspunkte der zweiten Ebene technisch unzulässig versteckt, damit bei Screenreader- und Tastaturbedienung erreichbar, obwohl sie visuell verborgen sind: Anstelle einer absoluten Positionierung im CSS ist das nicht ausgeklappte mobile Untermenü per display: none zu verstecken.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Unabhängig davon, welche Frage gerade visuell sichtbar ist, sind alle Fragen im Dokument erreichbar - sowohl bereits beantwortete, als auch zukünftige Fragen. Weiterhin werden im Lesemodus des Screenreaders auch die Fehlermeldungstexte vorgelesen, und das unabhängig davon, ob sich das Formular im Fehlerzustand befindet. Inaktive Fragen sind somit z. B. per CSS-Anweisung display: none zu verstecken (und auch aus der Gesamtheit der tastaturerreichbaren Elemente zu nehmen, siehe 9.2.4.3).

    • 9.1.3.3. Ohne Bezug auf sensorische Merkmale nutzbar,

      Details
      • 11 Seiten konform
    • 9.1.3.4. Keine Beschränkung der Bildschirmausrichtung,

      Details
      • 11 Seiten konform
    • 9.1.3.5. Eingabefelder zu Nutzerdaten vermitteln den Zweck,

      Details
      • 1 Seite nicht konform
      • 10 Seiten nicht anwendbar
  • 9.1.4 Unterscheidbar

    Prüfschritte
    • 9.1.4.1. Ohne Farben nutzbar,

      Details
      • 11 Seiten konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        konform
        Details
        1. Der Farbhelligkeits- bzw. Konstrastabstand zwischen aktiven und inaktiven Paginationspunkten direkt unterhalb von Karussels/"Slidern" beträgt nur 1,6 zu 1 (Unterschied zwischen grau, inaktiv und rot, aktiv). Hier muss mindestens ein Wert von 3:1 erreicht werden.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        konform
        Details
        1. Gilt nur für niedrige Zoomstufen: Einzelne Linien werden allein über ihre Farbe kommuniziert, was bei Farbfehlsichtigkeit dazu führen kann, dass diese nicht auseinander zu halten sind. Ergänzend zur Farbe sollte im Netzdiagramm mit Beschriftungen zwischen den einzelnen Stationen, in der Nähe der gezeichneten Linie, gearbeitet werden, oder aber unterschiedlichen Schraffierungen/Texturen der einzelnen Linien.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        konform
        Details
        1. Gibt man einen Startpunkt und einen Zielort ein, erscheint eine Tabelle von passenden Fahrten für diese Route. Unter dieser Tabelle ist eine Detailansicht der jeweiligen Fahrt, wobei es eine Legende darüber gibt, ob Fahrtinformationen oder Informationen zur Pünktlichkeit in den einzelnen Stationen vorliegen. Diese Information ist durch verschiedenfarbige Kreise gegeben. Bei Farbfehlsichtigkeiten wird diese Art der Informationsvermittlung zu einem Problem, entsprechend ist kann eine Behebung zum Beispiel durch andere Formen der aktuell nur bedeutungsgebenden Farben erfolgen (Kreis, Quadrat, Dreieck, usw.).

          Ferner sind die Kreise/Indikatoren als inhaltstragende Bilder zu betrachten, aber als dekorative umgesetzt (siehe 9.1.1.1b).

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        konform
        Details
        1. Der Farbhelligkeits- bzw. Konstrastabstand zwischen aktiven und inaktiven Paginationspunkten direkt unterhalb von Karussels/"Slidern" beträgt nur 1,6 zu 1 (Unterschied zwischen grau, inaktiv und rot, aktiv). Hier muss mindestens ein Wert von 3:1 erreicht werden.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

    • 9.1.4.2. Ton abschaltbar,

      Details
      • 11 Seiten nicht anwendbar
    • 9.1.4.3. Kontraste von Texten ausreichend,

      Details
      • 11 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

        3. Die Platzhalter-Textfarbe im Texteingabefeld im Widget "Newsletter abonnieren" ist mit 4,2:1 unterhalb der Mindestgrenze von 4,5:1. Dies ist zu korrigieren. Ohnehin ist die Verwendung des placeholder-Attributs keine zulässige Beschriftung eines Formularfeldes, siehe 9.3.3.2.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

        3. Befinden sich Links in "Mehr-dazu"- oder "Info"-Infoboxen, so entsteht ein Textkontrast von nur 2,5:1 ausserhalb des Kontrastmodus und 1,8:1 innerhalb des Kontrastmodus gegen die graue Hintergrundfarbe (der Modus verschlechtert hier also die Kontraste!). Hier sind, wie bei allen Texten dieser Formatierung, mindestens 4,5:1 zu erreichen.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

        3. Die Platzhalter-Textfarbe im Texteingabefeld im Widget "Newsletter abonnieren" ist mit 4,2:1 unterhalb der Mindestgrenze von 4,5:1. Dies ist zu korrigieren. Ohnehin ist die Verwendung des placeholder-Attributs keine zulässige Beschriftung eines Formularfeldes, siehe 9.3.3.2.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

        3. Befinden sich Links in "Mehr-dazu"- oder "Info"-Infoboxen, so entsteht ein Textkontrast von nur 2,5:1 ausserhalb des Kontrastmodus und 1,8:1 innerhalb des Kontrastmodus gegen die graue Hintergrundfarbe (der Modus verschlechtert hier also die Kontraste!). Hier sind, wie bei allen Texten dieser Formatierung, mindestens 4,5:1 zu erreichen.

        4. Die Platzhalter-Textfarbe im Texteingabefeld im Widget "Newsletter abonnieren" ist mit 4,2:1 unterhalb der Mindestgrenze von 4,5:1. Dies ist zu korrigieren. Ohnehin ist die Verwendung des placeholder-Attributs keine zulässige Beschriftung eines Formularfeldes, siehe 9.3.3.2.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Da der Kontrastmodus der Rest des Webauftrittes hier nicht wirkt, werden im RVP-Interface keine Textkontraste erhöht und folgende Fehler bleiben bestehen:

          • Hat eine Verbindung Verspätung, so wird das durch eine rote Schrift auf grau-transparentem Hintergrund angezeigt. Der Kontrast beträgt hier nur 2:1, sollte aber mindestens 4,5:1 betragen.
          • Ist eine Verbindung fahrplangemäß, so wird das durch eine grüne Schrift auf grau-transparentem Hintergrund angezeigt. Der Kontrast beträgt hier nur 2:1, sollte aber mindestens 4,5:1 betragen.
        2. Der Platzhaltertext unterhalb der Haltestellensuche ("Kein Start definiert"/"Kein Ziel definiert") ist mit 2,4:1 zu gering. Hier müssen mindestens 4,5:1 erreicht werden.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

        3. Der Link "EN" hat nur einen Kontrast von 2,1:1 auf seinen weißen Hintergrund. Mindestens 4,5:1 muss für Texte dieser Formatierung erreicht werden.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Noch bevor der Besucher die Gelegenheit hat, den Kontrast-Modus zu aktivieren und damit die Schriftkontraste zu verbessern, wird er mit dem Cookie-Dialog konfrontiert. Dort haben die Schaltflächen "Akzeptieren", "Ablehnen" und "Mehr Informationen" mit 3,3:1 einen zu schlechten Kontrast/Helligkeitsabstand. Hier muss jeweils mindestens 4,5:1 erreicht werden.

          Im mobilen Layout kann der Kontrastmodus nur über die mobile Hauptnavigation erreicht werden, die aber andere Barrieren (siehe z. B. 9.4.1.2) aufweist und dessen je nach Hintergrundbild kaum sichtbar ist.

        2. In dem aus der Navigation im Fussbereich ausgelösten Dialog "Cookie-Einstellungen" hat der Button "Einstellungen speichern" nur einen Textkontrast von 3,3:1, wobei mindestens 4,5:1 verlangt werden.

          Der gleiche, zu schlechte Textkontrast gilt für die Linkfarbe des Links "Usercentrics Consent Management".

          Das gleiche gilt ebenfalls für den Speichern-Button des Dialogs, der sich öffnet, wenn man im ersten Dialog ein Fragezeichen-Symbol klickt.

          Der Link bzw. Registerreiter ist kaum sichtbar, seine hellgraue Textfarbe erzeugt nur einen Textkontrast von 1,4:1 zu weiß. Hier ist ebenfalls mindestens ein Wert von 4,5:1 zu erreichen.

        3. Befinden sich Links in "Mehr-dazu"- oder "Info"-Infoboxen, so entsteht ein Textkontrast von nur 2,5:1 ausserhalb des Kontrastmodus und 1,8:1 innerhalb des Kontrastmodus gegen die graue Hintergrundfarbe (der Modus verschlechtert hier also die Kontraste!). Hier sind, wie bei allen Texten dieser Formatierung, mindestens 4,5:1 zu erreichen.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Folgende Textkontrastfehler sind festzustellen, da der Kontrastmodus des Rests der Seite hier keine Wirkung zeigt:

          • Die Textfarbe des "zurück"-Links kontrastiert nur mit 2,4:1 vor seinem Hintergrund. Hier müssen mindestens 4,5:1 erreicht werden.
          • Die große Überschrift "Wie flexibel mobil bist du" kontrastiert nur mit 2,8:1 (oder schlechter) vor ihrem Hintergrund. Hier müssen mindetens 3:1 erreicht werden.
          • Der gleiche schlechte Kontrast gilt auch für das Wort "SCROLL". Hier müssen aufgrund der Schriftgröße 4,5:1 erreicht werden.
          • Die Dachzeile des Fragetexts erreicht nur 3,3:1, muss aber aufgrund der Schriftgröße 4,5:1 erreichen.
          • Der Schriftzug "#mobilove", der über den Social Media Links steht, erreicht nur 3,1:1, muss aber aufgrund der Schriftgröße 4,5:1 erreichen.
    • 9.1.4.4. Text auf 200 % vergrößerbar,

      Details
      • 10 Seiten konform
      • 1 Seite nicht konform
    • 9.1.4.5. Verzicht auf Schriftgrafiken,

      Details
      • 10 Seiten konform
      • 1 Seite nicht konform
    • 9.1.4.10. Inhalte brechen um,

      Details
      • 10 Seiten konform
      • 1 Seite nicht konform
    • 9.1.4.11. Kontraste von Grafiken und grafischen Bedienelementen ausreichend,

      Details
      • 11 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Zum Besuch der Seite öffnet sich der Start-/Hilfe-Dialog. Sein Schließen-Button ist allerdings kaum wahrnehmbar (Kontrast von 1,4:1, Mindestwert ist hier 3:1).

          Ebenfalls im Dialog ist der Farb-/Kontrastabstand zwischen Scrollbar-Anfasser und -Strecke mit einem Abstand von nur 2,4:1 zu gering. Der Mindestwert von 3:1 gilt hier ebenfalls.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Klappt man das Untermenü des Zahnradsymbols auf, wird offensichtlich, dass die dortigen Checkboxes sowohl im Normal- (#F0F0F0) , als auch Fokuszustand/angehaktem Zustand (#FF8300) einen zugeringen Kontrast haben (1,1:1 im ersten, 2,5:1 im zweiten Fall. Mindestens 3:1 muss aber erreicht werden).

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        5. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

        2. Die Hintergrundfarbe des body-Elementes ist nicht definiert, was bei einer Veränderung (User Stylesheet) durch die nutzende Person zu unleserlichen Kontrasten führen kann.

        3. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

        4. Mobile Layouts: Bei Seiten mit großflächigen Hintergrundbildern (v. a. auf der Startseite) ist der Hamburger-Button teilweise sehr schlecht erkennbar. Das ist abhängig von den jeweiligen Hintergrundbildern.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Die Checkboxen im Dialog "Cookie-Einstellungen", der aus dem Fussbereich der Seiten aktiviert werden kann, haben mit 2,5:1 einen zu schwachen Helligkeitsabstand/Kontrast (grün gegen weiß). Hier sind mindestens 3:1 zu erreichen. Der aktive Kontrastmodus ist hier nicht wirksam.

    • 9.1.4.12. Textabstände anpassbar,

      Details
      • 10 Seiten konform
      • 1 Seite nicht konform
    • 9.1.4.13. Eingeblendete Inhalte bedienbar,

      Details
      • 10 Seiten konform
      • 1 Seite nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. In der Karte unterhalb der Überschrift "Die 9 Touren im Überblick" finden sich diverse Markierungen. Ein Hover-Event über diese Markierungen löst ein so genanntes "Tooltip"-Widget aus, dass aber eine der drei Bedingungen dieses Prüfschrittes nicht erfüllt: Es lässt sich nicht "offen" bzw. eingeblendet halten, wenn man mit dem Mauszeiger über das durch den Marker ausgelöste Tooltip fährt. Zur Korrektur ist ein alternatives Nutzungsmuster zum Tooltip-Einsatz empfehlenswert, so genannte "Toggle Tips". Mehr Details dazu auf englisch: https://barrierefrei.link/toggletips .

        2. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        konform
        Details

        Keine Anmerkungen vorhanden

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        konform
        Details
        1. Inhalte, die bei Fokuserhalt automatisch eingeblendet werden, müssen schließbar sein, ohne den Fokus zu verschieben. Z.B. mithilfe der ESC-Taste. (vergleiche https://barrierefrei.link/esc-tooltip-en - engliscj).

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

  • 9.2.1 Per Tastatur zugänglich

    Prüfschritte
    • 9.2.1.1. Ohne Maus nutzbar,

      Details
      • 11 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Die Radio-Buttons "ab" und "an" im Fahrplanauskunft-Widget werden aus unbekannter Ursache bei reiner Tastaturbedienung übersprungen. Dies ist abzustellen.

        2. Der "Weitere laden"-Button unterhalb der Kacheln ist aus unbekannten Gründen nicht tastaturerreich- und -bedienbar. Diese Funktionen sind herzustellen.

        3. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Dass der Kartenausschnitt per Pfeiltasten auf der Tastatur veränderbar ist, sollte dokumentiert sein, z. B. in einem Absatz unter oder über dem Karten-Widget.

        2. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Wählt man einen Start- und Zielpunkt, aktiviert dann "Auskunft anfordern" erscheint ein Dialog, in dem die für diese Route gefundenen Verbindungen tabellarisch gelistet werden. Die Optionentabelle sowie die einzelnen Verbindungsdetails lassen sich auf- und zuklappen (mit der Maus), die entsprechenden Schaltflächen sind aber nicht tastaturerreich- und -bedienbar. Dies muss mit mindestens tabindex="0"auf einzelnen interaktiven Elementen sichergestellt werden. Am einfachsten ginge dies durch Verwendung des <button>-Elementes, das auch gleich die verwandten und in 9.4.1.2 angesprochenen Rollen-Probleme lösen würde.

          Die gleiche Problemstellung findet sich im Panel auf der rechten Seite: Der Hilfs-Dialog-Aktiviator ist ebenfalls nicht tastaturerreich- und -bedienbar. Lösung wie oben skizziert.

        2. Die Kartenansicht ist nicht per Tastatur verschieb- oder zoombar. Zur Behebung sollten die entsprechenden Kontrollfelder mindestens mit tabindex="0" versehen werden, noch besser aber in <button>-Elemente umgewandelt werden.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Klickt man auf ein graues Marker-Icon auf der rechten Seite, wird die eingegebene Station auf einer Karte dargestellt. Der Schließen-Button ("X"), um diese Karte wieder auszublenden, ist ein klickbares span-Element, damit nicht tastaturerreich- und -bedienbar (und es hat die falsche Rolle - siehe 9.4.1.2).

          Ebenfalls in diesem Zustand sind als Kartenkontrollfelder klickbare img-Elemente im Einsatz, die nicht tastaturerreichbar sind.

          In beiden Fällen ist zur Korrektur mindestens das Attribut tabindex="0" zu vergeben, besser wäre aber jeweils der Einsatz eines <button>-Elementes, da zusätzlich auch die falsche Rolle für interaktive Elemente verwendet wurde (siehe 9.4.1.2).

        2. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Die im Rechtsklickmenü auf der Karte befindlichen Optionen (Start und Ziele setzen, Zoomen usw.), sowie die Aktivierung des Menüs an sich sind nicht per Tastatur möglich. Es gibt zwar im "Hamburger-Menu" einen alternativen Weg der Angabe von Start und Ziel ("Route"), allerdings ist der "Hamburger"-Auslöser weder tastaturerreichbar noch -bedienbar.

          Grundsätzlich ist die Verkehr.NRW-Karte unzugänglich und übermäßig komplex, siehe 9.4.1.2. Die Nennung der Barrieren hat deswegen keinen Anspruch auf Vollständigkeit und wird auch durch die eigene Barrierefreiheitserklärung des Kartenwidgets ergänzt.

        2. Die einzelnen Baustellen-Einträge auf der Karte sind per Maus anwählbar (es öffnet sich ein Popup mit erweiterten Informationen zur Baustelle). Diese einzelnen Einträge sind nicht per Tastatur-Erreichbar und müssen, neben der richtigen Rolle (siehe 9.4.1.2) mindestens via tabindex="0"tastaturerreichbar gemacht werden.

        3. Der Kartenausschnitt ist nur per Interaktion per Zeigegerät verschiebbar, aber nicht per Tastatur. Zur Behebung sollten entsprechend funktionale Schaltflächen auf der Karte etabliert werden.

        4. Wesentliche Funktionen für die Routenplanung auf der Karte sind nur per Mausbedienung (konkret: Rechtsklick) erreichbar. Dies ist zu korrigieren durch immer sichtbare oder durch einen Ausklapp-Bereich sichtbar zu machende Kartenfunktionen. Analog Seite 7 muss auch für diese Routenplanung eine reine formulargestütze Alternative für die dort gelisteten Funktionen existieren (oder eine bereits existierende verlinkt werden).

        5. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist nicht tastaturerreich- und -bedienbar, zudem mit der falschen Rolle umgesetzt (siehe 9.4.1.2).

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Der "Zurück"-Link ist nicht tastaturerreichbar, da er kein href-Attribut hat.

    • 9.2.1.2. Keine Tastaturfalle,

      Details
      • 11 Seiten konform
    • 9.2.1.4. Tastatur-Kurzbefehle abschaltbar oder anpassbar,

      Details
      • 11 Seiten konform
  • 9.2.2 Ausreichend Zeit

    Prüfschritte
  • 9.2.3 Anfälle

    Prüfschritte
  • 9.2.4 Navigierbar

    Prüfschritte
    • 9.2.4.1. Bereiche überspringbar,

      Details
      • 11 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Der nav-Bereich um das Zahnrad-Symbol hat den zugänglichen Namen "Origin options menu" - dies ist zu übersetzen.

        5. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die komoot-Karteneinbindung geschieht per iframe, der allerdings keinen zugänglichen Namen hat. Per title-Attribut ist dieses zu gewährleisten, z. B. "Wanderstandorte".

        5. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Seitenbereiche sind unzureichend mit Bereichsüberschriften erschlossen, Sprunglinks nicht existent und der Landmarken-Einsatz beschränkt sich auf den doppelten fehlerhaften Einsatz von main. Viel eher kann man die visuelle Karte als Hauptbereich und die "Seitenwidgets" links und rechts als generische Gruppen ansehen und auszeichnen (Details: https://barrierefrei.link/group-en - englisch).

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die Karteneinbindung geschieht per iframe, der allerdings keinen zugänglichen Namen hat. Per title-Attribut ist dieses zu gewährleisten, z. B. "Baustellenkarte und visueller Routenplaner für NRW".

        5. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Im Fussbereich gibt es einige Navigationslandmarken, die keinen zugänglichen Namen haben, deswegen nicht zu unterscheiden sind. Zur Behebung ist ihnen je ein zugänglicher Name zu geben (wie es bereits bei der Hauptnavigation und der Navigation wichtiger Seiten passiert ist). Eine Verschachtelung von Headern und Footer im Footer führt nicht dazu, dass weitere ARIA-Landmarken entstehen, bringt keinen semantischen Gewinn und kann daher ausgebaut werden.

        2. Anmerkung ohne Bewertung: Ein Sprunglink zum Hauptinhalt ist zwar implementiert, allerdings fehlerhaft (erreicht wird immer der Hauptinhalt der Startseite). Weitere Sprungmarken zu anderen Bereichen fehlen. Ferner ist z. B. der Footer nicht per Bereichsüberschrift erschlossen (siehe dazu Vorschlag in 9.1.3.1a) und die Landmarken sind fehlerhaft umgesetzt (siehe andere Anmerkung).

        3. Der Sprunglink "Zum Seiteninhalt springen" springt nicht zum Seiteninhalt im gleichen Dokument (das ist die Absicht dieser Links), sondern immer zum Hauptinhalt auf der Startseite. Erklärung ist, dass der Link ./#go-to-content (aufgelöst nach: https://www.mobil.nrw/#go-to-content) anstatt #go-to-content lautet.

        4. Die Suchfunktion sollte in einem eigenständigen Bereich (z.B. role="search") positioniert werden.

        5. Der iFrame des YouTube-Videos hat den Titel "#mobilove-Tutorial: Mobilstationen sind #mobilove!", kündigt damit ein Tutorial/eine Anleitung an, die das Video aber nicht liefert. Es ist eher ein Imagefilm, dessen Inhalte auch in nahen Absätzen ausreichend beschrieben werden. Die Empfehlung: Änderung des Videotitels in "Imagefilm #mobilove".

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Auf dieser Seite gibt es keinen Hauptinhalt, die entsprechenden Inhalte sind stattdessen im Fußbereich (footer-Landmarke) untergebracht. Für die Fragen und ihr Formular ist stattdessen das main-Element zu nutzen.

          Eigentliche Footer-Inhalte sind am ehesten die Social-Media-Links zu mobilove.

        2. Es gibt mehrere Navigations-Landmarken. Zum einen im Kopfbereich, der aber nur aus einem Link zur Hauptseite besteht, zum anderen um den Absende-Button herum. Mindestens letztgenannter ist zu entfernen.

    • 9.2.4.2. Sinnvolle Dokumenttitel,

      Details
      • 11 Seiten konform
    • 9.2.4.3. Schlüssige Reihenfolge bei der Tastaturbedienung,

      Details
      • 11 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Anmerkung ohne Bewertung in diesem Prüfschritt: Im Karussell sind im jeweiligen Moment nicht-sichtbare Slides unzulässig versteckt, sodass sie im Lesemodus des Screenreaders vorgelesen werden und das gleiche gilt auch für die Tastaturbedienung ohne Screenreader (interaktive Elemente in Slides, die nicht sichtbar sind, sind tastaturerreichbar - damit unsichtbare Fokushaltepunkte). Siehe dazu 9.1.3.2 und 9.4.1.2.

        3. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Besucht man die Seite in einem neuen privaten Fenster, bzw. ohne im Vorfeld den Cookie-Banner weggeklickt zu haben, startet die RVP-Applikation mit zwei offenen Dialogen gleichzeitig. Das führt zu zwei Problemen:

          • Der Tastaturfokus startet nicht im "obersten" Dialog, dem Cookie-Dialog. Es ist zu erkennen, dass der Fokus im Start-/Hilfe-Dialog dahinter ist. Behebung: Der Tastaturfokus muss in/auf den Cookie-Dialog gesetzt werden, sofern er existiert.
          • Selbst wenn man es schafft, den Tastaturfokus in den Cookie-Dialog zu bekommen, löst ein Schließen dieses Dialogs kein aktives Fokusmanagement aus, dass den Tastaturfokus in den dahinterliegenden Dialog versetzt. Das ist zu gewährleisten.
      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

        3. Anmerkung mit geringer Abwertung: Die Tastaturbedienung der Suchfelder und der umgebenden Schaltflächen ist unnachvollziehbar. Nachdem die Suchfelder den Tastaturfokus erhalten haben, wird der Fokus nicht etwa auf die fokussierbaren Elemente unterhalb gesetzt, sondern die Marker- und Zahnradsymbole oberhalb. Die die technische Fokusreihenfolge ist der visuellen Reihenfolge der Elemente anzugleichen.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Suchdialog bzw. das geschlossene mobile Hauptmenü und Untermenüpunkte in der Desktop-Ausprägung sind unzulässig versteckt, sorgen deswegen für eine verwirrende Tastaturbedienung im Kopfbereich der Seite - siehe Prüfschritt 9.1.3.2.

        2. Aktiviert man den Cookie-Einstellungen-Dialog (erreichbar per "Cookie-Einstellungen"-Link im Fussbereich), so wird der Tastaturfokus nach Öffnen des Dialogs nicht auf oder in ihn versetzt. Stattdessen verbleibt der Fokus "hinter" dem Dialog und sogar der grauen Abdunklung des Interfaces. Ein Versetzen muss gewährleistet werden. Weiterhin muss der Fokuszugang bei offenem Dialog auf ihn beschränkt werden (in ihm "gefangen" sein) und beim Schließen des Dialogs muss der Fokus wieder zurück zum ursprünglichen Auslöser wandern.

        3. Links innerhalb der Marker-Popups auf der Karte sind nicht intuitiv tastaturerreichbar und -bedienbar. Hier muss nach Öffnen eines solchen Popups aktives Fokusmanagement erfolgen und der Tastaturfokus per .focus()-Methode in das Popup versetzt werden.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Unabhängig davon, welche Frage gerade visuell sichtbar ist, sind alle Fragen im Dokument erreichbar - sowohl bereits beantwortete, als auch zukünftige Fragen (siehe 9.1.3.2). Weiterhin werden im Lesemodus des Screenreaders auch die Fehlermeldungstexte vorgelesen, und das unabhängig davon, ob sich das Formular im Fehlerzustand befindet. Inaktive Fragen sind somit z. B. per CSS-Anweisung display: none zu verstecken (und auch aus der Gesamtheit der tastaturerreichbaren Elemente zu nehmen, da sonst eine Vielzahl von unsichtbaren Fokushaltepunkten erzeugt werden).

    • 9.2.4.4. Aussagekräftige Linktexte,

      Details
      • 5 Seiten konform
      • 1 Seite nicht konform
      • 5 Seiten nicht anwendbar
    • 9.2.4.5. Alternative Zugangswege,

      Details
      • 11 Seiten konform
      konform
      Details

      Keine Anmerkungen vorhanden

    • 9.2.4.6. Aussagekräftige Überschriften und Beschriftungen,

      Details
      • 1 Seite konform
      • 10 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Die zugänglichen Namen der einzelnen Punkte der Karusell-Pagination ist "Go to slide 3" (beispielsweise). Diese Namen sind zu übersetzen.

        4. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Die zugänglichen Namen der einzelnen Punkte der Karusell-Pagination ist "Go to slide 3" (beispielsweise). Diese Namen sind zu übersetzen.

        4. Die programmatische Beschriftung der Karussell-Bläterpfeile lautet "Next Slide" und "Previous Slide". Dies ist zu übersetzen.

        5. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        konform
        Details
        1. Anmerkung ohne Bewertung: Die wenigen mit der korrekten Rolle umgesetzten Beschriftungen von Kontrollelementen (siehe 9.4.1.2) sowie die Überschriften sind aussagekräftig.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

        3. Die zugänglichen Namen der einzelnen Punkte der Karusell-Pagination ist "Go to slide 3" (beispielsweise). Diese Namen sind zu übersetzen.

        4. Die Kontrollfelder in der Karte, die im Zusammenhang mit Zoomen stehen, sind englisch beschriftet ("Zoom in", "Zoom out"). Dies ist zu übersetzen.

        5. Die programmatische Beschriftung der Karussell-Bläterpfeile lautet "Next Slide" und "Previous Slide". Dies ist zu übersetzen.

        6. Überschriften in Versalien werden häufig wie Abkürzungen vorgelesen (also "S.T.E.L.L.E.N" statt "stellen"). Hintergrund ist hier, dass die Großschrift so im HTML-Dokument vorkommt. Zur Behebung sind die Überschriften in Klein-/Großschrift, entsprechend Grammatik-Regeln, zu schreiben und nur per CSS als Versalien zu formatieren: text-transform: uppercase. Bei einem Teil der Überschriften auf der Seite erfolgt das bereits, der andere Teil ist anzugleichen.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Der zugängliche Name des Auslösers für die mobile Navigation ("Hamburger-Icon") ist "Toggle Navigation". Dies ist einerseits zu übersetzen, andererseits ist die Nutzung des Attributs aria-expanded herzustellen (aktuell bleibt es immer auf false, siehe 9.4.1.2). Ist das Attribut instandgesetzt, kommuniziert es, ob das Menü offen oder geschlossen ist und der aussagekräftige Name des Auslösers kann schlicht "Navigation" lauten.

        2. Der zugängliche Name des Sucheingabefeldes im Suchfenster ist "Search". Dies ist zu übersetzen.

    • 9.2.4.7. Aktuelle Position des Fokus deutlich,

      Details
      • 11 Seiten nicht konform
      • Details
        1. Alle Links unterhalb der orangefarbenen Schaltflächen im Cookie-Dialog haben keine Fokushervorhebung (das Usercentrics-Logo, der Textlink "Impressum", der Textlink "Datenschutzbestimmungen"). Ursache ist hier die CSS-Anweisung .usercentrics-button #uc-banner-modal :focus, .usercentrics-button #uc-central-banner-modal :focus { outline: 0; } und .usercentrics-button button:focus, .usercentrics-button .uc-btn:focus, .usercentrics-button a:focus { outline: none; }. Sie sind zu entfernen und mit beispielsweise ähnlichen Fokusstilen wie die der Schaltflächen zu ersetzen.

        2. Anmerkung ohne Bewertung: Als Fokushervorhebung des Suchfeldes nach öffnen des Suchdialogs kann zwar der blinkende Textcursor gelten, dennoch ist empfehlenswert, zusätzlich mit einer Umrandung im Fokuszustand zu arbeiten (vergleiche Fokushervorhebung der Eingabefelder auf Seite 6).

      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Im "Fahrplanauskunft"-Widget haben die Radio-Buttons "Ab" und "An" (Kontext: Uhrzeit) jeweils keine Fokushervorhebung (und sie sind grundsätzlich auch nicht tastaturerreich- und bedienbar, siehe 9.2.1.1). Ratsam zur Behebung wäre eine Nutzung des bereits im Widget etablierten Fokus-Stils (rote Umrandung), sowie eine grundsätzliche Ertüchtigung, was die Tastaturerreichbarkeit der Buttons angeht

        2. Anmerkung ohne Bewertung: Als Fokushervorhebung des Eingabefelds unterhalb von "Newsletter abonnieren" kann zwar der blinkende Textcursor gelten, dennoch ist empfehlenswert, zusätzlich mit einer Umrandung im Fokuszustand zu arbeiten (vergleiche Fokushervorhebung der Eingabefelder auf Seite 6).

        3. Die "Mehr erfahren"-Links im Karussell haben keine Fokushervorhebung. Grund dafür ist die ungültige CSS-Anweisung für den Fokuszustand 1px auto -webkit-focus-ring-color (die erstaunlicherweise noch nicht mal in Webkit-Browsern funktioniert). Hier ist der System-Fokuskranz zuzulassen oder für eine ausreichend kontrastierende benutzerdefinierte Gestaltung zu sorgen (z. B. solide Outline).

        4. Siehe auch Anmerkungen zu allen Seiten
      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Der Fokuszustand der Auswahlfelder ist formal konform, aber dennoch kaum zu sehen. Besser wäre es, wenn sich neben der Farbe auch die Dicke der Umrisslinien im Fokuszustand ändern würde.

        2. Siehe auch Anmerkungen zu allen Seiten
      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details

        Siehe Anmerkungen zu allen Seiten

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Einzelne Punkte oder Cluster auf der Komoot-Karte sind nicht tastaturerreichbar, haben folgerichtig auch keine Fokusverhervorhebungen. Auch der Link "Ganze Collection bei komoot ansehen" hat keine Fokushervorhebung, hier ist zumindest der Systemfokuskranz wiederherzustellen.

          Weiterhin erzeugt die Fokushervorhebung der Links "Maplibre" und "© komoot" unten rechts auf der Karte einen nur unzureichenden Kontrast von 1,6:1 vor dem hellgrünen Hintergrund. Hier sind mindestens 3:1 zu erreichen.

        2. Siehe auch Anmerkungen zu allen Seiten
      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details

        Siehe Anmerkungen zu allen Seiten

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Die Checkbox, um die Datenschutzhinweise vor Formularversand zu akzeptieren, besitzt keine Fokushervorhebung, da im CSS für den Fokus-Zustand die outline auf 0 gesetzt wird. Dies ist zu entfernen.

        2. Siehe auch Anmerkungen zu allen Seiten
      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Links im Start-/Hilfe-Dialog sind nur durch einen sehr dünne/schwachen Umriss gekennzeichnet, wenn sie sich im Fokus-Zustand befinden. Hier wäre ein benutzerdefinierter Fokusstil besser, der mit soliden Umrandungen arbeitet, oder auch der Standard-Fokusstil des Browsers, d. h. ein Entfernen jedwegen benutzerdefinierten Stils.

        2. Der Schließen-Button des Start-/Hilfe-Dialogs hat keinen Fokusstil, da dieser per .fancybox-button:focus { outline: none: }unterdrückt wird. Hier wäre ein benutzerdefinierter Fokusstil besser, der mit soliden Umrandungen arbeitet, oder auch der Standard-Fokusstil des Browsers, d. h. ein Entfernen jedwegen benutzerdefinierten Stils.

        3. Anmerkung ohne Bewertung in diesem Prüfschritt: Einige Schaltflächen, darunter sowohl die klickbaren Bahnhöfe, die sich nach ihrer Aktivierung öffnenden Kontextmenüs, interaktive Elemente im Verbindungsfenster nach Angabe eines Start- und Zielorts (u. a. "Auf- und Zuklapper") und interaktive Elemente im rechtsseitigen Panel, u. a. auch die Schaltfläche "Hinweise zur Bedienung", sind mit der falschen semantischen Rolle umgesetzt (siehe 9.4.1.2), deswegen weder tastaturbedien- noch -erreichbar (siehe 9.2.1.1) - und folgerichtig auch ohne Fokushervorhebung.

        4. Gibt man einen Start- und Zielort an, klickt dann auf "Auskunft anfordern", erscheint dann das Verbindungsfenster mit Verbindungsoptionen und einem Auswahlfeld (es hat weder eine programmatische, noch visuelle Beschriftung), das initial den Wert "Alle außer ICE" hat. Dieses Auswahlfeld hat keine Fokushervorhebung. Hier wäre ein benutzerdefinierter Fokusstil besser, der mit soliden Umrandungen arbeitet, oder auch der Standard-Fokusstil des Browsers, d. h. ein Entfernen jedwegen benutzerdefinierten Stils bzw. seiner Unterdrückung per CSS.

        5. Siehe auch Anmerkungen zu allen Seiten
      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Alle Schaltflächen und Checkboxes innerhalb des Fahrplanauskunft-Widgets haben keine Fokushervorhebung durch die CSS-Anweisung outline: none; im Selektor .nsk-wrap #nskContentContainer button:focus, .nsk-wrap #nskContentContainer input:focus. Diese Unterdrückung ist zu entfernen und mindestens der Fokus-Systemkranz zu verwenden, alternativ auch der benutzerdefinierte Fokusstil für Eingabefelder (rote Umrandung).

        2. Wenn sich der Button mit dem Pfeil nach oben und dem Pfeil nach unten (der Start und Ziel tauscht) im Fokuszustand befindet, wird er unsichtbar. Dies ist abzustellen.

        3. Klappt man das Untermenü des Zahnradsymbols auf, wird offensichtlich, dass die dortigen Checkboxes keinen Fokusstil besitzen. Ein ausreichend kontrastierender (d. h. mindestens 3:1 zu umgebenden Farben und dem Normalzustand) ist nachzureichen.

        4. Siehe auch Anmerkungen zu allen Seiten
      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung in diesem Prüfschritt: Die Baustellen auf der Verkehrsinfo-Karte sind klickbar, aber nicht tastaturerreichbar und -bedienbar (siehe 9.2.1.1). Folgerichtig haben sie keine Fokushervorhebung.

        2. Anmerkung ohne Bewertung in diesem Prüfschritt: Die "Hamburger"-Schaltfläche in der Verkehrinfo-Karte ist mit der falschen Rolle umgesetzt (complementary, also <aside> statt button, deswegen nicht tastaturerreich- und bedienbar (siehe 9.2.1.1 und 9.4.1.2). Folgerichtig hat sie keine Fokushervorhebung.

        3. Siehe auch Anmerkungen zu allen Seiten
      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details

        Siehe Anmerkungen zu allen Seiten

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Die Radio-Buttons in der #mobilove-Umfrage haben keine Fokushervorhebung, da sie als autordefiniert gestaltete Radiobuttons umgesetzt wurden. Hier ist beim CSS-Selektor zum Fokusstil folgendes zu beachten (englisch): https://barrierefrei.link/input-style-en .

        2. Siehe auch Anmerkungen zu allen Seiten
  • 9.2.5 Eingabemodalitäten

    Prüfschritte
  • 9.3.1 Lesbar

    Prüfschritte
  • 9.3.2 Vorhersehbar

    Prüfschritte
  • 9.3.3 Hilfestellung bei der Eingabe

    Prüfschritte
    • 9.3.3.1. Fehlererkennung,

      Details
      • 1 Seite konform
      • 4 Seiten nicht konform
      • 6 Seiten nicht anwendbar
    • 9.3.3.2. Beschriftungen von Formularelementen vorhanden,

      Details
      • 1 Seite konform
      • 10 Seiten nicht konform
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Das Texteingabefeld im Newsletter-Widget, also unterhalb von "Newsletter abonnieren" ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

        2. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        3. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

        4. Im Fahrplanauskunft-Widget sind die Felder "Start", "Ziel" nur durch Vorbelegungen (placeholder) beschriftet. Dies ist keine gültige und persistierende Beschriftungsart. Zur Behebung ist die Beschriftung per <label>und for/id zu wählen.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        2. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        2. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Das Texteingabefeld im Newsletter-Widget, also unterhalb von "Newsletter abonnieren" ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

        2. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        3. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        2. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        2. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Das Auswahlfeld/Select, bei dem der Wert "Alle außer ICE" voreingestellt ist (nach einer angeforderten Auskunft) hat weder eine direkte noch indirekte Beschriftung.

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        2. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

        3. Im Fahrplanauskunft-Widget sind die Felder für Start und Ziel nur durch Vorbelegungen (placeholder) beschriftet. Dies ist keine gültige und persistierende Beschriftungsart. Zur Behebung ist die Beschriftung per <label>und for/id zu wählen.

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        2. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Das Sucheingabefeld im Suchfenster, nach Aktivierung der Schalftfläche mit dem Lupensymbol, ist nur mit dem placeholder-Attribut beschriftet. Dies ist nicht ausreichend, da es bei Nutzereingaben verschwindet. Es ist ein visuelles Label (bestenfalls) oberhalb des Texteingabefeldes zu platzieren.

          Das gleiche Fehlermuster tritt auch bei Eingabefeldern zur Newsletter-Anmeldung auf. Behebung wie oben.

        2. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben in diesem zweiten findet sich ein Suchfeld, das nur durch einen placeholder, also eine Textvorbelegung beschriftet ist. Dies gilt nicht als zulässige, persistente Beschriftung, entsprechend ist z. B. über dem Suchfeld ein dauerhaftes <label> mit "Suchdienste" zu platzieren.

        3. Im Karten-Widget ist das Feld "PLZ oder Ort eingeben" nur durch Vorbelegung (placeholder) beschriftet. Dies ist keine gültige und persistierende Beschriftungsart. Zur Behebung ist die Beschriftung per <label>und for/id zu wählen.

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        konform
        Details

        Keine Anmerkungen vorhanden

    • 9.3.3.3. Hilfe bei Fehlern,

      Details
      • 5 Seiten konform
      • 6 Seiten nicht anwendbar
    • 9.3.3.4. Fehlervermeidung wird unterstützt,

      Details
      • 11 Seiten nicht anwendbar
  • 9.4.1 Kompatibel

    Prüfschritte
    • 9.4.1.1. Korrekte Syntax,

      Details
      • 10 Seiten konform
      • 1 Seite nicht konform
    • 9.4.1.2. Name, Rolle, Wert verfügbar,

      Details
      • 11 Seiten nicht konform
      • Details
        1. Der Cookie-Dialog hat keinen zugänglichen Namen, aber eine ausgesprochen lange zugängliche Beschreibung ("Wir nutzen Cookies, um unsere Services anzubieten, diese stetig zu verbessern und unser Informationsangebot entsprechend Ihrer Interessen anzupassen. Mit Klick auf „Akzeptieren“ willigen Sie in die Verwendung von Cookies ein. Sie können Ihre Cookie-Einstellungen jederzeit ändern oder widerrufen. Mehr erfahren Sie in der Datenschutzerklärung. "). Dies ist vor allem in Anbetracht dessen wenig optimal, dass der Dialog das erste und auch automatisch fokussierte Element ist.

        2. Der Cookie-Dialog besitzt keine programmatische Angabe über seinen modalen Zustand, braucht diese aber, z. B. in Form des Attributs aria-modal="true".

      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Im Karussell sind im jeweiligen Moment nicht-sichtbare Slides unzulässig versteckt, sodass sie im Lesemodus des Screenreaders vorgelesen werden und das gleiche gilt auch für die Tastaturbedienung ohne Screenreader (interaktive Elemente in Slides, die nicht sichtbar sind, sind tastaturerreichbar - damit unsichtbare Fokushaltepunkte). Zur Behebung bietet folgender Artikel mehr Informationen über einen richtigen strukturellen Aufbau eines Karussells: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefreie-karussells#die-folien

        6. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        7. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        8. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        9. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        10. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        11. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        12. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        13. Siehe auch Anmerkungen zu allen Seiten
      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Im Karussell sind im jeweiligen Moment nicht-sichtbare Slides unzulässig versteckt, sodass sie im Lesemodus des Screenreaders vorgelesen werden, vergleichbar mit der Karussell-Situation auf Seite 1. Zur Behebung bietet folgender Artikel mehr Informationen über einen richtigen strukturellen Aufbau eines Karussells: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefreie-karussells#die-folien

        6. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        7. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        8. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        9. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        10. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        11. Vor der Einbindung des YouTube-Videos gibt es einen weiteren User-Centrics-Cookie-Dialog direkt auf dem Poster-Bild des Videos. Dieses ist nicht semantisch als Dialog ausgezeichnet (siehe andere Anmerkungen in diesem Prüfschritt dazu).

        12. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        13. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        14. Siehe auch Anmerkungen zu allen Seiten
      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        6. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        7. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        8. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        9. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        10. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        11. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        12. Siehe auch Anmerkungen zu allen Seiten
      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        6. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        7. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        8. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        9. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        10. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        11. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        12. Siehe auch Anmerkungen zu allen Seiten
      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Klickt man auf die Kartengrafik der Verkehrsbereiche in NRW öffnet sich ein modaler Dialog. Dieses Element mit der Rolle dialog ist als modal anzusehen, muss noch im offenen Zustand das Attribut aria-modal="true" bekommen. Ferner hat der Dialog aktuell keinen zugänglichen Namen, dieser kann beispielsweise per aria-label="Vergrößerte Kartengrafik"zur Verfügung gestellt werden.

        6. Im Karussell sind im jeweiligen Moment nicht-sichtbare Slides unzulässig versteckt, sodass sie im Lesemodus des Screenreaders vorgelesen werden, vergleichbar mit der Karussell-Situation auf Seite 1. Zur Behebung bietet folgender Artikel mehr Informationen über einen richtigen strukturellen Aufbau eines Karussells: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefreie-karussells#die-folien

        7. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        8. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        9. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        10. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        11. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        12. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        13. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        14. Siehe auch Anmerkungen zu allen Seiten
      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        6. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        7. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        8. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        9. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        10. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        11. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        12. Siehe auch Anmerkungen zu allen Seiten
      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Nutzt man z. B. die interaktive Karte, in dem man per Maus den Start- und Endpunkt einer Reise angibt, wird eine Ergebnisinformation generiert, die anzeigt, welche Optionen man für die Route hat. Diese Informationen umfassen zumeist mehrere Verbindungen, inklusive unterschiedlicher Reiselängen und Preisstufen. Diese Matrix an Optionen sind wiederum in Tabellenform ausgezeichnet, was grundsätzlich richtig ist.

          Allerdings ist sowohl Ausklapp-Auslöser als auch Ausklapp-Bereich nicht nach dem sogenannten "Disclosure-Widget"-Muster umgesetzt, und damit u. a. auch im geschlossenen Zustand vor Screenreader-Nutzenden nicht versteckt. Der Auslöser ist mit der Rolle button umzusetzen (inklusive mindestens dem Attribut tabindex="0" für die Tastaturerreichbarkeit, Tastatureventlistener eines Buttons, und einem zugänglichen Namen, z. B. per aria-label). Der Ausklappbereich selbst ist im geschlossenen Zustand zuverlässig zu verstecken. Mehr Details: https://barrierefrei.link/expando-tabellen (englisch).

        2. Einige Schaltflächen, darunter sowohl die klickbaren Bahnhöfe, die sich nach ihrer Aktivierung öffnenden Kontextmenüs, interaktive Elemente in ihnen im Verbindungsfenster nach Angabe eines Start- und Zielorts (auch: Aufklappfunktion und Druckansichten) und interaktive Elemente im rechtsseitigen Panel, u. a. auch die Schaltfläche "Hinweise zur Bedienung", sind mit der falschen semantischen Rolle umgesetzt. Alle angesprochenen Interaktionsflächen benötigen die Rolle button, Tastaturerreichbarkeit mindestens über das Attribut tabindex="0", Tastatureventhandler für die Leer- und Eingabetaste sowie angemessene zugängliche Namen (siehe dazu 9.2.4.6).

          Aufklappfunktion sind mit dem "Disclosure-Widget"-Muster umzusetzen, d. h. unter anderem, dass ein auslösender Button per aria-expanded kommunizieren muss, ob sein direkt im Dokument folgender beeinflusster Bereich offen oder geschlossen ist. Mehr Details zu dem Muster: https://barrierefrei.link/ausklapp .

        3. Die Kontrollfelder zum Verschieben und zum Zoomen des Kartenausschnitts sind div-Elemente mit Klick-Event-Listener, damit mit der falschen Rolle (und auch nicht tastaturerreichbar, siehe 9.2.1.1) umgesetzt. Interaktionselemente dieser Art benötigen die Rolle button (die einfachste Variante wäre es, das <button>-Element zu nutzen, dann wäre auch die Tastaturerreichbarkeit und -bedienbarkeit gegeben). Weiterhin brauchen diese Kontrollfelder nach Instandsetzung als Button aussagekräftige zugängliche Namen, wie zum Beispiel "Vollbildansicht", "Hereinzoomen", "Herauszoomen", "Kartenansicht nach rechts verschieben" und so weiter.

        4. Beim Nicht-Ausfüllen der Start- und Zielfelder einer Route erscheint zwar eine Fehlermeldung in einem visuellen Dialog, diesem fehlt aber Dialogsemantik, vergleichbar mit den anderen Anmerkungen bezüglich Dialogen in diesem Prüfschritt. Aufgrund Prüfschritt 9.3.3.1 sollte die Rolle hier alertdialogsein.

          Der Schließen-Button in diesem Dialog muss zudem die Rolle button und Tastaturerreichbarkeit bekommen (ebenfalls wie bereits mehrfach in diesem Prüfschritt erklärt).

        5. Es gibt zwar zwei Arten der Bedienung des Regionalverkehrsplan (Suchbasierte und grafische Nutzung) und es wird auch im Start-/Hilfe-Dialog auf beide deutlich hingewiesen, allerdings hat die suchbasierte Variante eine Vielzahl von Fehlern in z. B. Bezug auf 9.1.1.1a, 9.2.1.1 und auch hier in 9.4.1.2, sodass die suchbasierte Variante nicht als Alternativversion für die grafische Nutzung gelten kann, der RVP beispielsweise bei Screenreader-Nutzung in beiden Ausprägungen barrierebehaftet ist. Die in den genannten Prüfschritten befindlichen Anmerkungen sind zu korrigieren.

        6. Siehe auch Anmerkungen zu allen Seiten
      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        6. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        7. Klickt man bei einem Start- oder Zielort auf das Marker-Symbol, um den jeweiligen Ort auf einer Karte anzuzeigen, wird unterhalb des Formulars eine Karte sichtbar.

          Auf dieser Karte sind img-Elemente direkt mit Click-Event-Handlern ausgestattet, diese Kontrollfelder haben somit die falsche Rolle (benötigt wird die Rolle button, am Einfachsten durch die Verwendung des <button>-Elements zu erreichen). Auch ein zugänglicher, die Funktion beschreibender Name wird benötigt (siehe 9.1.1.1a, Seite 8).

          Betroffen von einer falschen Rollenzuweisung ist auch das Schließen-X, das die eingeblendete Karte wieder ausblendet (Behebung wie oben).

        8. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        9. Die Vorschlagsliste nach Texteingabe ist als sog. "Combobox" umzusetzen: https://barrierefrei.link/combobox (englisch).

        10. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        11. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        12. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        13. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        14. Siehe auch Anmerkungen zu allen Seiten
      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        6. Die "Hamburger"-Schaltfläche in der Verkehrinfo-Karte ist mit der falschen Rolle umgesetzt (complementary, also <aside>, statt korrekterweise button). Da ein Bereich nach Aktivierung der Fläche sichtbar wird und dieser im Dokument direkt nach dem Auslöser kommt, ist das Ausklapp-/Disclosure-Widget-Muster zu befolgen: https://barrierefrei.link/ausklapp .

        7. Die Auslöser für erweiterte Baustelleninformationen, die man per Klick auf einzelne Baustellen-Symbole erhält, sind zum einen nicht tastaturerreichbar und -bedienbar (siehe 9.2.1.1), zum anderen wurde das canvas-Element mit indirektem Klick-Event-Listener dafür genutzt. Die einzelnen Auslöser sollten vielmehr Buttons sein, das Gesamtkonstrukt ein Ausklappbereich (mehr dazu: https://barrierefrei.link/ausklapp ).

        8. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        9. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        10. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        11. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        12. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        13. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        14. Grundsätzlich ist die Verkehr.NRW-Karte unzugänglich und übermäßig komplex. Deswegen ist keine intensive und vollständige Prüfung möglich, die Auflistung der Findings in anderen Prüfschritten von Seite 9 erhebt keinen Anspruch auf Vollständigkeit. Aber auch schon die gelisteten Punkte verhindern eine Konformitätserklärung von Seite 9.

        15. Siehe auch Anmerkungen zu allen Seiten
      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Im Karussell sind im jeweiligen Moment nicht-sichtbare Slides unzulässig versteckt, sodass sie im Lesemodus des Screenreaders vorgelesen werden, vergleichbar mit der Karussell-Situation auf Seite 1. Zur Behebung bietet folgender Artikel mehr Informationen über einen richtigen strukturellen Aufbau eines Karussells: https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/barrierefreie-karussells#die-folien

        6. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        7. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        8. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog. Klickt man in ihm auf ein Fragezeichensymbol, öffnet sich ein weiterer. Ganz oben links in diesem zweiten findet sich ein "Hamburger-Symbol", das die Seitenleiste ein- und ausklappt. Dieser Button ist als Ausklapp-Bereich umzusetzen: https://barrierefrei.link/ausklapp .

        9. Besucht man die Desktop-Hauptnavigation mit dem Screenreader NVDA, so erfährt man zwar, dass ein Menüpunkt ein Untermenü hat, aber bei Aktivierung nicht, ob es offen oder geschlossen ist. Siehe Anmerkung zur menu-Rolle in Navigationen und Behebung durch das Ausklapp-Muster.

        10. Die programmatischen Werte der Betriebsqualität-Statusbalken, genauer gesagt, der aria-valuenow-Wert, entspricht nicht den sichtbaren Beschriftungen und irritiert bei Screenreader-Nutzung deshalb.

          Grundsätzlich ist die Rolle progressbar semantisch die falsche Wahl, siehe 9.1.3.1h.

        11. Vor der Einbindung des YouTube-Videos gibt es einen weiteren User-Centrics-Cookie-Dialog direkt auf dem Poster-Bild des Videos. Dieses ist nicht semantisch als Dialog ausgezeichnet (siehe andere Anmerkungen in diesem Prüfschritt dazu).

        12. Klickt man im Cookie-Dialog auf "Weitere Informationen", so öffnet sich ein weiterer Dialog, der einen visuelle Schaltfläche "Speichern und Schließen". Dieses Kontrollfeld ist mit der falschen Rolle (Soll: button) und zudem tastaturunerreichbar umgesetzt (siehe 9.2.1.1).

        13. Im Fussbereich findet sich ein Widget in Bezug auf die Betriebsqualität (Gesamt- und Einzelwerte). Alle Werte sind mit Fortschrittsbalken umgesetzt (erreichter Prozentwert). Diese Fortschrittsbalken (Rolle progressbar) sind allerdings die falsche sematische Wahl, da sie für dynamische Fortschrittsbalken vorgesehen sind. Richtig wäre das meter-Element: https://barrierefrei.link/meter (englischer Link).

        14. Siehe auch Anmerkungen zu allen Seiten
      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht konform
        Details
        1. Der Auslöser-Button für die aufklappbare mobile Navigation besitzt zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei aufgeklapper mobiler Navigation auf false. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von offener Navigation also true sein.

        2. In der Desktop-Ausprägung des Hauptmenüs gibt es Menüpunkte erster Navigationsordnung, die jeweiligen Auslöser für die Unternavigation (zweiter Ordnung) besitzen zwar das Attribut aria-expanded, und auch die Grundstruktur entspricht einem Ausklapp-Bereich, allerdings bleibt der Attribut-Wert auch bei eingeklappter Unternavigation auf true. Behebung: Der Wert von aria-expanded muss den Zustand der Navigation wiederspiegeln, im Falle von geschlossener Sub-Navigation also false sein.

          Der gleiche Fehler liegt innerhalb der offenen mobilen Navigation vor, dort ebenfalls die zweite Navigationsebene betreffend.

        3. Sowohl die mobile, als auch die Desktop-Navigation ist mit der Rolle menu umgesetzt. Diese Rolle ist nicht für Website-Navigationen gedacht, sondern für betriebssystem-artige Menüs in Applikationen (mehr Details auf Englisch hier: https://barrierefrei.link/no-menu-for-sitenav ). Stattdessen sollte die Navigation in beiden Ausprägungen mit dem (auch technisch weniger restriktivem) Ausklapp-Muster ("Disclosure") umgesetzt werden, Beispiel: https://barrierefrei.link/ausklapp-nav-en (englisch).

          Hinzu kommt, dass die von den Rollen menu und menuitem angekündigte Tastaturbedienung (z. B. in Bezug auf die Pfeiltasten) nicht umgesetzt wurde.

        4. Das Suchfenster/der Suchdialog hat zwar die richtige Rolle (dialog) und den richtigen Zustand (aria-modal="true"), allerdings keinen zugänglichen Namen. Dieser kann z. B. per aria-label="Suchformular auf dem Element mit der Rolle dialog gewährleistet werden.

        5. Der Klick auf "Cookie-Einstellungen" im Fussbereich öffnet einen Dialog, der zwar optisch, aber nicht semantisch ein modaler ist: So fehlt ihm die Rolle dialog, die WAI-ARIA-Zustandsbeschreibung aria-modal sowie ein zugänglicher Name, der beispielsweise mit einer ID-Referenz zur Überschrift "Cookie-Einstellungen" und aria-labelledby hergestellt werden könnte. Auch das für modale Dialoge nötige Fokusmanagement ist nicht gewährleistet (siehe 9.2.4.3).

          Das gleiche gilt auch für den weiteren Dialog, der sich nach Klick auf ein Fragezeichensymbol im ersten Dialog öffnet.

        6. Klickt man im Fußbereich auf "Cookie-Einstellungen", öffnet sich ein Dialog mit gleichem Namen. Hinter jeder Cookie-Kategorie und noch vor der zugeordneten Checkbox findet sich je eine Fragezeichen-Schaltfläche, die einen weiteren Dialog öffnet. Diese Schaltfläche ist als klickbares div-Element umgesetzt, sie müsste allerdings die Rolle button besitzen, tastaturerreich- und -bedienbar sein und einen zugänglichen Namen besitzen, z. B. "Detaileinstellungen".

        7. Die versuchte Zuordnung zwischen Gruppenlabel (<legend>) und der Liste an Fragen per for/id ist gut gemeint, aber unzulässig.

        8. Siehe auch Anmerkungen zu allen Seiten
    • 9.4.1.3. Statusmeldungen programmatisch verfügbar,

      Details
      • 5 Seiten nicht konform
      • 6 Seiten nicht anwendbar
      • Seite 1 — Startseite

        Startseite - mobil.nrw
        nicht konform
        Details
        1. aria-live-Attribute, also Live-Regionen, auf (mehrheitlich) automatisch wechselnden Karusell-Slides sind dringend zu entfernen. Gerade bei einem automatischen Slide-Wechsel (der nicht abstellbar ist, siehe 9.2.2.2) kann andernfalls die Screenreaderausgabe jeweils alle etwa 10 Sekunden von der Wechsel-Ansage unterbrochen werden.

      • Seite 2 — Mobilitätsgarantie NRW

        Mobilitätsgarantie - mobil.nrw
        nicht konform
        Details
        1. aria-live-Attribute, also Live-Regionen, auf (mehrheitlich) automatisch wechselnden Karusell-Slides sind dringend zu entfernen. Gerade bei einem automatischen Slide-Wechsel (der nicht abstellbar ist, siehe 9.2.2.2) kann andernfalls die Screenreaderausgabe jeweils alle etwa 10 Sekunden von der Wechsel-Ansage unterbrochen werden.

      • Seite 3 — Wanderrouten in NRW

        Wandertouren - mobil.nrw
        nicht anwendbar
        Details
        1. Anmerkung ohne Bewertung: Da für die Auflistung der gefundenen Wanderrouten keine HTML-Liste verwendet wurde, entsprechend keine schnelle Ausgabe der Menge der gefundenen Routen für Screenreader-Nutzende ersichtlich ist, bietet sich nach erfolgtem Filtern mit den Auswahlfeldern an, eine Live-Region-Ausgabe zu etablieren, die über die Gesamtzahl der Filterergebnisse informiert. Mehr Details zur Implementierung von Live-Regionen hier: https://barrierefrei.link/live .

      • Seite 4 — Wandernd NRW entdecken

        Wandernd NRW entdecken - mobil.nrw
        nicht anwendbar
        Details

        Keine Anmerkungen vorhanden

      • Seite 5 — Einfach-Weiter-Ticket

        EinfachWeiterTicket NRW - mobil.nrw
        nicht konform
        Details
        1. aria-live-Attribute, also Live-Regionen, auf (mehrheitlich) automatisch wechselnden Karusell-Slides sind dringend zu entfernen. Gerade bei einem automatischen Slide-Wechsel (der nicht abstellbar ist, siehe 9.2.2.2) kann andernfalls die Screenreaderausgabe jeweils alle etwa 10 Sekunden von der Wechsel-Ansage unterbrochen werden.

      • Seite 6 — Kontakt

        Kontakt - mobil.nrw
        nicht anwendbar
        Details

        Keine Anmerkungen vorhanden

      • Seite 7 — Regionalverkehrsplan

        NRW-Regionalverkehrsplan
        nicht konform
        Details
        1. Wird über die Haltestellensuche ein Suchauftrag gestartet, in dem ein Start- und Zielort angegeben wird, erzeugt der Screenreader NVDA (bzw. alle Screenreader) keine Ausgabe, wenn Ergebnisse gefunden wurden.

          Hier sind WAI-ARIA-Live-Regions für diese Status-Kommunikation einzusetzen;im Erfolgsfall muss "X Verbindungen gefunden" in der Live-Region erzeugt werden (wobei natürlich X der Anzahl der Ergebnisse entspricht). Mehr Details zur Implementierung von Live-Regionen hier: https://barrierefrei.link/live .

      • Seite 8 — Fahrplanauskunft

        Fahrplanauskunft - mobil.nrw
        nicht konform
        Details
        1. Anmerkung ohne Bewertung: Wenn bei einer Eingabe eines Start- und Zielpunkts (ggf. auch Zwischenzielen) mehr als ein Ergebnis gefunden wird, sollte die Menge der gefundenen Verbindungen via WAI-ARIA-Live-Region angesagt werden, vor allem da die Ergebnisauflistung nicht in einer semantischen HTML-Liste aufgegeben wird, der/die Nutzende somit durch alle Ergebnisse gehen müsste, um die Gesamtzahl der Ergebnisse der Suchanfrage zu erfahren. Mehr Details zur Implementierung von Live-Regionen hier: https://barrierefrei.link/live .

        2. Dauert eine Suchanfrage etwas länger, wird das visuell Nutzenden durch eine das gesamte Interface überdeckende Ladegrafik kommuniziert. Der Screenreader NVDA (bzw. alle Screenreader) erzeugen für diesen Zwischenzustand allerdings keine Ausgabe, entsprechend ist der/die Nutzende dieser Hilfstechnologie nicht über den Ladezustand informiert (übrigens auch nicht über den ggf. erfolgreichen Abschluss des Suchvorgangs).

          Für beide Situationen sind hier WAI-ARIA-Live-Regions einzusetzen; für die erste sollte die Ausgabe "Lade Ergebnisse…", für die zweite "X Verbindungen gefunden" erzeugt werden (wobei natürlich X der Anzahl der Ergebnisse entspricht). Mehr Details zur Implementierung von Live-Regionen hier: https://barrierefrei.link/live .

      • Seite 9 — Aktuelle Verkehrsinfos

        Verkehr.NRW - mobil.nrw
        nicht anwendbar
        Details

        Keine Anmerkungen vorhanden

      • Seite 10 — Vernetzt mobil dank Mobilstationen

        Mobilstationen - mobil.nrw
        nicht anwendbar
        Details

        Keine Anmerkungen vorhanden

      • Seite 11 — Mobimat

        Der mobimat - mobil.nrw
        nicht anwendbar
        Details

        Keine Anmerkungen vorhanden

  • 11.7 Benutzerdefinierte Einstellungen

    Prüfschritte
  • 11.8 Autorenwerkzeuge

    Prüfschritte
  • 12 Dokumentation und Support

    Prüfschritte
    • 12.1.1. Dokumentation von Kompatibilität und Barrierefreiheit,

      Details
      • 11 Seiten nicht anwendbar
      nicht anwendbar
      Details

      Keine Anmerkungen vorhanden

    • 12.1.2. Barrierefreie Dokumentation,

      Details
      • 11 Seiten nicht anwendbar
      nicht anwendbar
      Details

      Keine Anmerkungen vorhanden

    • 12.2.2. Technischer Support,

      Details
      • 11 Seiten nicht anwendbar
      nicht anwendbar
      Details

      Keine Anmerkungen vorhanden

    • 12.2.3. Effektive Kommunikation,

      Details
      • 11 Seiten nicht anwendbar
      nicht anwendbar
      Details

      Keine Anmerkungen vorhanden

    • 12.2.4. Vom Support bereitgestellte Dokumentation,

      Details
      • 11 Seiten nicht anwendbar
      nicht anwendbar
      Details

      Keine Anmerkungen vorhanden