9.1.1.1
Nicht-Text-Inhalt
|
nicht bestanden
|
Die Bilder im Slider „Themenschwerpunkte“ tragen lediglich Alternativtexte mit generischer Bezeichnung („Bild“) und geben keinen Aufschluss über Inhalt oder Zweck. Bitte statt generischer Ausdrücke aussagekräftige Alternativtexte hinterlegen. |
9.1.3.1
Info und Beziehungen
|
nicht bestanden
|
Mehrere Navigationselemente (Header, Main, Footer, rechte Navigation) sind nicht durch <nav> ausgezeichnet und haben keine eindeutigen aria-labels, sodass Screenreader die Bereiche kaum unterscheiden können. |
9.1.3.1
Info und Beziehungen
|
nicht bestanden
|
Die Hauptnavigation nutzt ausschließlich Überschriftsebenen zur Strukturierung (H2 für Bereich, H3/H4 für Menüpunkte), wodurch der semantische Zweck von Überschriften missbraucht wird. |
9.1.3.1
Info und Beziehungen
|
nicht bestanden
|
Die Paginierungen bei den Suchergebnissen verfügen über keine aria-labels oder aria-labelledby, wodurch Screenreader-Nutzende die beiden Navigationsbereiche nicht unterscheiden können. |
9.1.3.1
Info und Beziehungen
|
nicht bestanden
|
Die rechte Navigation auf Kontakt- und Inhaltsseite ist nicht mit HTML5-Elementen (z. B. <nav>) ausgezeichnet und bleibt für assistive Technologien unsichtbar. |
9.1.3.1
Info und Beziehungen
|
nicht bestanden
|
Hinter der Hauptnavigation ist eine H2-Überschrift ohne Inhalt vorhanden, wodurch eine leere Struktur erzeugt wird, die zu Inkonsistenzen bei der Navigation führt. |
9.1.3.1
Info und Beziehungen
|
nicht bestanden
|
Die Seite nutzt keine HTML5-Strukturierungselemente wie <header>, <main> oder <footer>, wodurch zentrale Inhaltsbereiche nicht programmatisch erfassbar sind. |
9.1.3.2
Bedeutungsvolle Reihenfolge
|
nicht bestanden
|
Sortier- und Filterelemente erscheinen im Quellcode erst nach den Suchergebnissen, sodass die Lesereihenfolge für Tastatur- und Screenreader-Nutzende unlogisch ist. Stellen Sie diese Steuerungen direkt nach dem Sucheingabefeld und vor den Ergebnissen bereit. |
9.1.4.11
Nicht-Text-Kontrast
|
nicht bestanden
|
Rahmen der Eingabefelder (Formular und Suchfeld) weisen nur 1,6:1 Kontrast gegen den Hintergrund auf. Erhöhen Sie die Rahmenfarbe auf mindestens 3:1. |
9.1.4.11
Nicht-Text-Kontrast
|
nicht bestanden
|
Visuelle Checkboxen zur Filterung haben nur 2,4:1 Kontrast zum Hintergrund. Die Checkboxen müssen so gestaltet werden, dass sie mindestens 3:1 erreichen. |
9.1.4.12
Textabstand
|
nicht bestanden
|
Im Header-Bereich überlappen sich Inhalte bei angepasstem Textabstand, wodurch Text schwer lesbar wird. Sorgen Sie für ausreichende Abstände, sodass sich Elemente niemals überlagern. |
9.1.4.13
Eingeblendeter Inhalt bei Darüberschweben (Hover) oder Fokus
|
nicht bestanden
|
Untermenüs der Hauptnavigation werden bei Fokus/Hover eingeblendet, können jedoch per Tastatur nicht geschlossen werden, was andere Inhalte überdeckt. Sorgen Sie für Steuerung per Escape/Entfernen des Fokus oder öffnen Sie Untermenüs nur aktiv per Enter/Space. |
9.2.4.3
Fokus-Reihenfolge
|
nicht bestanden
|
Nicht steuerbares Untermenü zwingt Tastaturnutzende, alle Unterpunkte durchzulaufen, bevor ein Wechsel möglich ist. Öffnen Sie Untermenüs nur explizit und erlauben Sie ein Schließen per Tastatur. |
9.2.4.3
Fokus-Reihenfolge
|
nicht bestanden
|
Im Bereich „Themen und Artikel“ führen Überschrift, Teaser-Bild und „Weiterlesen“-Link identisch zum selben Ziel, was unnötige Navigationsschritte verursacht. Reduzieren Sie Doppelverlinkungen. |
9.2.4.3
Fokus-Reihenfolge
|
nicht bestanden
|
Nach Interaktionen (Suche, Sortierung, Filterung, Paginierung) wird der Fokus automatisch an den Seitenanfang gesetzt. Setzen Sie den Fokus stattdessen z. B. auf die Überschrift „Suchergebnisse“ oder das erste Ergebnis. |
9.2.4.3
Fokus-Reihenfolge
|
nicht bestanden
|
Bei fehlerhafter Formularübermittlung wird der Fokus auf den Seitenanfang zurückgesetzt und nicht auf das erste fehlerhafte Feld. Leiten Sie den Fokus auf das erste fehlerhafte Eingabefeld oder eine verknüpfte Fehlermeldung. |
9.2.4.4
Linkzweck (im Kontext)
|
nicht bestanden
|
Im Bereich „Zusatzinformationen“ enthalten Links mehrere Beschriftungen (title, alt, H3) gleichzeitig, wodurch Screenreader die Linkbeschreibung überladen wiedergeben. Beschränken Sie die Linkbeschreibung auf eine eindeutige Textalternative. |
9.2.4.4
Linkzweck (im Kontext)
|
nicht bestanden
|
Slider-Bilder transportieren denselben Inhalt über alt-Attribute sowie den darunter stehenden Text, was Redundanzen und wiederholte Ausgaben durch Screenreader verursacht. Markieren Sie die Bilder als dekorativ (alt="" oder aria-hidden="true"). |
9.4.1.2
Name, Rolle, Wert
|
nicht bestanden
|
Das Sucheingabefeld verfügt über mehrere parallele Beschriftungen (H2 „Suche“, Label „Suchtext“, title). Verwenden Sie ein eindeutiges, konsistentes label (z. B. ein sichtbares <label>) und verzichten Sie auf widersprüchliche Alternativbeschriftungen. |
9.4.1.2
Name, Rolle, Wert
|
nicht bestanden
|
Die automatisch eingeblendete Vorschlagsliste beim Tippen wird nicht als Statusmeldung ausgezeichnet, sodass Screenreader-Nutzende nicht erkennen, dass neue Inhalte erscheinen. Kennzeichnen Sie die Vorschlagsliste als Live-Region (aria-live="polite"/role="status"). |
9.4.1.2
Name, Rolle, Wert
|
nicht bestanden
|
Obermenü-Einträge fungieren gleichzeitig als Navigation und als Steuerung der Untermenüs, was die semantische Rolle verwischt. Verwenden Sie für Steuerfunktionen Buttons oder korrekte ARIA-Rollen (aria-expanded, aria-controls, role="button"). |
9.4.1.2
Name, Rolle, Wert
|
nicht bestanden
|
Filterkategorien („Schwerpunktthema“, „Dokumenttyp“) sind als H4 markiert, jedoch nicht als interaktive Elemente mit Zustandskennung. Ersetzen Sie sie durch z. B. Button-Elemente mit aria-expanded und aria-controls. |
9.4.1.2
Name, Rolle, Wert
|
nicht bestanden
|
Visuell wie Checkboxen dargestellte Filteroptionen sind programmatisch als Links implementiert; der Status (aktiv/inaktiv) wird nicht vermittelt. Verwenden Sie echte Checkboxen mit korrektem label oder simulieren Sie role="checkbox" inklusive aria-checked und Space-Bedienung. |
9.4.1.2
Name, Rolle, Wert
|
nicht bestanden
|
Pflichtfelder im Formular sind visuell mit einem Stern gekennzeichnet, jedoch fehlt das required-Attribut, sodass Assistive Technologien die Verpflichtung nicht erkennen. Ergänzen Sie required (ggf. aria-required="true") konsistent an allen Pflichtfeldern. |