Staatliches Gutachten zur digitalen Barrierefreiheit
nationale-staedtebauprojekte.de
Nutzbarkeit mit unterschiedlichen Behinderungen
Blindheit Mit Hindernissen nutzbar
Zahlreiche Screenreader-relevante Fehler bei Semantik, Rollen, Formularen, Navigations- und Statusrückmeldungen erschweren Orientierung und Bedienung deutlich, machen sie aber nicht völlig unmöglich.
Sehbehinderung Mit Hindernissen nutzbar
Fehlende sichtbare Fokusanzeigen, schlecht bedienbare Menüs und teils unklare Zustände beeinträchtigen Tastatur- und Vergrößerungsnutzung, während Kontrastprobleme nicht explizit benannt werden.
Hörbehinderung Fast barrierefrei
Es werden keine audioabhängigen Inhalte oder Medienprobleme beschrieben, daher ist die Nutzung für Gehörlose weitgehend unbeeinträchtigt.
Motorische Behinderung Mit Hindernissen nutzbar
Nicht funktionale Skiplinks, schwer schließbare Untermenüs, fehlende Tastaturunterstützung und unklare Schalter-/Linkrollen sind für reine Tastatur- oder Hilfsmittelnutzende stark hinderlich.
Lernbehinderung Mit Hindernissen nutzbar
Fehlerhafte Überschriftenhierarchie, semantische Mängel und inkonsistente Beschriftungen erschweren Strukturverstehen, bieten aber noch eine grundsätzlich nachvollziehbare Seite.
Neurodivergenz Mit Hindernissen nutzbar
Unklare Zustände von Filtern und Navigation sowie fehlende strukturierende Überschriften können Konzentration und Orientierung belasten, verhindern die Nutzung aber nicht vollständig.
Hinweis: Diese Zusammenfassung mit generativer KI basiert auf den Informationen aus diesem Gutachten. Künstliche Intelligenz kann Inhalte nicht automatisch barrierefrei machen oder Prüfungen durchführen. Behinderungen sind komplex und mehrschichtig, weshalb diese Analysen nicht zutreffen müssen.
Technische Umgebung
- OS
- Windows 11
- Browser
- Chrome 134.0.6998.178 (Offizieller Build) (64-Bit)
- Screenreader
- NVDA 2024
- Tools
- Color Contrast Analyser (CCA), Colour Contrast Checker, PDF Accessibility Checker (PAC), Chrome web inspector, NVDA ScreenReader, HeadingsMap (Chrome), Landmark Navigation (Chrome)
-
https://www.nationale-staedtebauprojekte.de/NPS/DE/Home/home_node.html Web-Angebot öffnen
-
https://www.nationale-staedtebauprojekte.de/NPS/SiteGlobals/Forms/Suche/Expertensuche_Formular.html
-
https://www.nationale-staedtebauprojekte.de/NPS/DE/Service/Kontakt/kontakt_node.html
-
https://www.nationale-staedtebauprojekte.de/NPS/DE/Programm/programm_node.html
Prüfkriterien
Nicht bestanden
| Kriterium | Status | Notizen |
|---|---|---|
| Nicht funktionale Skiplinks zum Hauptmenü und zur Suche | nicht bestanden | Die Skiplinks müssen aktivierbare Links mit sichtbarer Fokusverschiebung haben oder andere sichtbare Ziele ansteuern, damit Tastaturnutzende zentralen Inhalt direkt erreichen. |
| Doppelte und uneinheitliche Beschreibung des Ministeriumslogos | nicht bestanden | title- und alt-Texte abgleichen bzw. redundant einbinden – nur eine konsistente textliche Beschreibung pro Link bereitstellen. |
| Verwendung von ­-Zeichen | nicht bestanden | Verwenden Sie keine Soft-Hyphen an sichtbaren Textstellen, da Screenreader die Worte falsch aussprechen. |
| Doppelte Verlinkung des Ministeriumslogos verursacht redundanten Tastaturfokus | nicht bestanden | Redundante, fokussierbare Logovarianten entfernen, sodass pro Linkzweck nur eine Fokusstation existiert. |
| Nicht sichtbare Überschrift wird zusätzlich ausgegeben | nicht bestanden | Die unsichtbare Überschrift „SpaltenUeberschrift“ muss entfernt oder durch inhaltlich erklärbare Struktur ersetzt werden. |
| Unzureichend beschriebener Schalter zur Quellenangabe der Deutschland-K | nicht bestanden | Der Schalter braucht einen zugänglichen Namen (z. B. aria-label) und muss ein- und ausblendbar funktionieren, statt beim Fokus automatisch zu erscheinen. |
| Fehlende semantische Auszeichnung und Beschriftung der Footer-Navigation | nicht bestanden | Die Footer-Linkgruppen müssen in semantic <nav> eingebettet und korrekt beschriftet sein; aria-labels auf <nav> statt auf Listen setzen. |
| Fehlende Screenreader-Benachrichtigung über Vorschlagliste | nicht bestanden | Beim Einblenden der Vorschlagsliste muss eine Statusmeldung oder aria-live erfolgen, damit Screenreader über veränderte Inhalte informiert werden. |
| Label der Ausklappliste „Filter“ ist nicht mit der Auswahl verbunden | nicht bestanden | Label und Dropdown müssen über for/ID oder aria-labelledby verbunden sein, damit Screenreader das passende Label erkennen. |
| Filter-Checkboxen sind fälschlich als Links umgesetzt | nicht bestanden | Checkboxartige Filter müssen als <input type="checkbox"> oder <button> mit aria-pressed umgesetzt werden, um Zustände programmatisch darzustellen. |
| Falsche Verwendung der Rolle tabpanel ohne vollständige Tabstruktur | nicht bestanden | Entweder echtes Tabset (tablist/tab) implementieren oder auf die Rolle verzichten und die Filterliste semantisch korrekt kennzeichnen. |
| Keine Möglichkeit zur Aufhebung ausgewählter Filter | nicht bestanden | Nach der Auswahl braucht es ein Bedienelement, um aktivierte Filter zu entfernen oder zurückzusetzen. |
| Mangelhafte Zuordnung der Suchergebnisse über aria-labelledby | nicht bestanden | Die aria-labelledby-Referenz muss auf ein beschreibendes Element zeigen; derzeit wird die Paginierung als Beschriftung ausgegeben und muss korrigiert werden. |
| Mehrfache und redundante Ausgabe von Beschriftungen bei Eingabefeldern | nicht bestanden | Nur das sichtbare Label verwenden; verzichten Sie auf title/placeholder, wenn keine neuen Informationen geliefert werden. |
| Fehlende Kennzeichnung einer Pflicht-Checkbox | nicht bestanden | Markieren Sie Pflichtfelder visuell (z. B. *) und programmatisch mit aria-required="true" oder dem HTML required-Attribut. |
| Fehlende aria-current-Kennzeichnung | nicht bestanden | Der aktuell aktive Navigationslink muss aria-current="page" erhalten, um den Status programmatisch darzustellen. |
| Unklare Rollenvergabe: Links verhalten sich wie Schalter in der Navigation | nicht bestanden | Verwenden Sie <button> oder ergänzen Sie <a> mit role="button", aria-expanded und Tastaturinteraktionen (Enter/Space), wenn kein Seitenwechsel erfolgt. |
| Untermenüs lassen sich nicht schließen | nicht bestanden | Fügen Sie ESC-Unterstützung und ein Toggle-Verhalten hinzu, sodass erneut Aktivieren das Menü wieder schließt. |
| Untermenüs nicht programmatisch mit Obermenü verknüpft | nicht bestanden | Verbinden Sie Untermenüs über aria-controls, aria-haspopup, aria-expanded oder verschachtelte <ul>-Strukturen mit dem Obermenüpunkt. |
| Nicht sichtbare H1 „FooterAural“ ist nicht aussagekräftig | nicht bestanden | Die H1 im Footer muss entweder entfallen oder durch eine selbsterklärende Bezeichnung (z. B. „Fußbereich“) ersetzt werden. |
| Fehlerhafte Überschriftenhierarchie im Haupttext | nicht bestanden | Die Überschrift „Stand der Programmumsetzung“ sollte auf H2 geändert werden und ähnliche Hierarchiesprünge aufgehoben werden. |
| Anzahl der Suchergebnisse nicht als Überschrift ausgezeichnet | nicht bestanden | Markieren Sie die Trefferanzahl als Überschrift (z. B. <h2>), damit Screenreader die Struktur erkennen können. |
| Kein autocomplete-Attribut bei Eingabefeldern | nicht bestanden | Setzen Sie das HTML-Attribut autocomplete mit konkreten Werten (z. B. given-name, email, postal-code) auf die entsprechenden Felder. |
| Kein sichtbarer Fokus in der Suche der Hauptnavigation | nicht bestanden | Das Such-Icon benötigt eine sichtbare Fokusmarkierung, damit Tastaturnutzende erkennen, dass der Fokus dort liegt. |
Unterstützung
Barrieren sichtbar machen kostet Geld. Hilf uns, dranzubleiben.
BarrierenWatch wird ehrenamtlich betrieben und finanziert sich über Steady-Mitgliedschaften von Menschen wie dir, die Barrierefreiheit und Inklusion voranbringen möchten. Hinter dem Projekt stehen Menschen mit Behinderung, die seit Jahren im Bereich der digitalen Barrierefreiheit oder als Aktivist*innen aktiv sind. Aktuell sind wir im Prozess der Gründung eines gemeinnützigen Vereins, der dieses Engagement beheimaten soll.
ab
5
Euro
im Monat
für Recherche, Prüfungen und den Betrieb der Plattform.