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.

Dokumentierte Barrieren

  • Aktive Filter lassen sich nicht entfernen

    Nach dem Setzen von Filtern gibt es offenbar keine klare Möglichkeit, sie wieder aufzuheben. Damit bleibt die Ergebnisliste in einem Zustand hängen, den man schwer zurücksetzen kann.

    Auswirkung: Ich komme möglicherweise nicht mehr zurück zu einer breiteren Ergebnisansicht. Das kann die Suche nach passenden Inhalten stark behindern.

  • Untermenüs bleiben offen

    Ein geöffnetes Untermenü lässt sich nicht sauber schließen. Es fehlt ein erwartbares Toggle- oder Escape-Verhalten.

    Auswirkung: Ich kann in der Navigation feststecken und muss zusätzliche Umwege gehen. Das macht die Menübedienung für Tastatur- und Screenreader-Nutzende unnötig schwierig.

  • Skiplinks springen nicht sinnvoll

    Die Sprunglinks zum Hauptmenü und zur Suche funktionieren nicht zuverlässig oder führen nicht sichtbar zum Ziel. Dadurch wird der direkte Einstieg in zentrale Bereiche für Tastaturnutzende erschwert.

    Auswirkung: Ich muss mich dann durch viele Bedienelemente tabben, bevor ich die eigentlichen Inhalte oder die Suche erreiche. Das kostet Zeit und macht die Navigation unnötig mühsam.

  • Filteroptionen verhalten sich nicht wie echte Checkboxen

    Filter werden wie Links statt wie zustandsbehaftete Schalter umgesetzt. Der aktuelle Zustand ist dadurch nicht eindeutig programmatisch erkennbar.

    Auswirkung: Ich kann oft nicht sicher wissen, ob ein Filter aktiv ist oder nicht. Das macht die Ergebnissteuerung unzuverlässig.

  • Navigation verhält sich widersprüchlich

    Links in der Navigation wirken wie Schalter, ohne passend umgesetzt zu sein. Dadurch ist für Assistenztechnik nicht klar, ob ein Klick eine neue Seite öffnet oder nur einen Zustand ändert.

    Auswirkung: Ich kann die Bedienung nicht zuverlässig vorhersagen. Das erhöht die Gefahr, dass ich falsche Aktionen ausführe oder doppelt klicke.

  • Suchsymbol hat keinen sichtbaren Fokus

    In der Hauptnavigation fehlt beim Such-Icon eine sichtbare Fokusmarkierung. Tastaturnutzende erkennen daher nicht zuverlässig, wo sie sich gerade befinden.

    Auswirkung: Ich verliere beim Navigieren mit Tab schnell die Orientierung. Das kann dazu führen, dass ich Bedienelemente überspringe oder falsch auslöse.

  • Quellen-Schalter ist unverständlich

    Ein Schalter zur Quellenangabe ist schlecht benannt und erscheint zudem beim Fokus automatisch. Dadurch ist nicht klar, was er auslöst oder wie er bedient werden soll.

    Auswirkung: Ich kann unsicher sein, ob ich gerade einen sinnvollen Bedienpunkt erwische oder nur ein aufploppendes Element. Das erschwert die Orientierung und kann Bedienfehler auslösen.

  • Suchvorschläge werden nicht angekündigt

    Wenn Vorschläge in der Suche erscheinen, bekommt man als Screenreader-Nutzer keine verlässliche Rückmeldung. Die Änderung auf dem Bildschirm bleibt damit akustisch verborgen.

    Auswirkung: Ich weiß nicht sicher, ob neue Treffer oder Vorschläge verfügbar sind. Dadurch kann ich die Suche schlechter steuern und muss öfter manuell prüfen.

  • Tabpanel-Rolle ohne echtes Tabset

    Ein Bereich ist als Tabpanel ausgezeichnet, obwohl die passende Tab-Struktur fehlt. Für Hilfstechnologien wirkt die Navigation dadurch inkonsistent.

    Auswirkung: Ich erhalte eine falsche Orientierung über die Seitenstruktur und Bedienlogik. Das kann mich daran hindern, Inhalte oder Filter logisch zu wechseln.

  • Pflichtfeld wird nicht als Pflicht erkannt

    Eine Pflicht-Checkbox ist nicht eindeutig als verpflichtend gekennzeichnet. Dadurch ist nicht klar, dass sie vor dem Absenden gesetzt werden muss.

    Auswirkung: Ich kann ein Formular möglicherweise unvollständig absenden, ohne den Grund zu verstehen. Das führt zu Fehlern und unnötigem Nacharbeiten.

  • Filter sind nicht korrekt mit ihrem Label verbunden

    Die Auswahlliste für Filter ist nicht sauber mit ihrer Beschriftung verknüpft. Dadurch wird der Zweck des Steuerelements nicht zuverlässig angesagt.

    Auswirkung: Ich kann nicht eindeutig erkennen, welche Auswahl ich gerade ändere. Das erhöht die Gefahr, den falschen Filter zu setzen.

  • Suchergebnisse sind schlecht beschriftet

    Die Zuordnung der Treffer über aria-labelledby ist fehlerhaft und verweist auf das falsche Element. Dadurch wird die Ergebnisliste für Screenreader missverständlich angekündigt.

    Auswirkung: Ich kann einzelne Treffer schlechter voneinander unterscheiden und schneller erfassen. Das erschwert mir, das passende Ergebnis auszuwählen.

  • Untermenüs sind nicht korrekt mit dem Obermenü verknüpft

    Zwischen Hauptmenüpunkt und Untermenü fehlt eine klare programmatische Verbindung. Dadurch wird die Navigationsstruktur für Hilfstechnologien nicht sauber vermittelt.

    Auswirkung: Ich verstehe weniger gut, welche Unterpunkte zu welchem Menü gehören. Das erschwert die Orientierung im Aufbau der Website.

  • Redundante Logo-Verlinkung

    Das Ministeriumslogo ist doppelt und uneinheitlich beschrieben und zusätzlich mehrfach als Fokusziel vorhanden. Dadurch entstehen überflüssige Sprünge und uneindeutige Ansagen.

    Auswirkung: Ich lande mehrfach auf praktisch demselben Ziel und verliere dadurch den Überblick. Für mich wirkt die Navigation unnötig lang und verwirrend.

  • Footer-Navigation ist semantisch schlecht erkennbar

    Die Linkgruppen im Footer sind nicht sauber als Navigation ausgezeichnet und beschriftet. Dadurch werden sie für Hilfstechnologien nicht als eigenständige Navigationsbereiche erkennbar.

    Auswirkung: Ich finde wichtige Service- und Informationslinks im Fußbereich schlechter. Das verlängert die Suche nach Kontakt-, Impressums- oder Zusatzinformationen.

  • Aktiver Menüpunkt ist nicht markiert

    Der aktuell ausgewählte Navigationspunkt wird nicht als aktiv gekennzeichnet. Dadurch fehlt eine wichtige Orientierung im Seitenmenü.

    Auswirkung: Ich weiß schlechter, auf welcher Seite oder in welchem Bereich ich mich gerade befinde. Das erschwert das sichere Wechseln zwischen Bereichen.

  • Überschriftenhierarchie ist fehlerhaft

    Die Überschriften im Haupttext folgen nicht der erwarteten Reihenfolge. Dadurch wird die Seitenstruktur semantisch unsauber vermittelt.

    Auswirkung: Ich kann Inhalte schlechter nach Themen und Ebenen erfassen. Das erschwert das schnelle Springen zwischen Abschnitten.

  • Trefferanzahl ist nicht als Überschrift erkennbar

    Die Anzahl der Suchergebnisse ist nicht als strukturgebender Abschnitt gekennzeichnet. Damit fehlt ein klarer Einstiegspunkt in die Ergebnisliste.

    Auswirkung: Ich finde die Ergebnisübersicht schlechter und kann sie nicht so leicht ansteuern. Das kostet Zeit beim Durchsehen der Treffer.

  • Schreibweise wird falsch vorgelesen

    In sichtbaren Texten werden Soft-Hyphen-Zeichen verwendet. Screenreader können dadurch Wörter unnatürlich oder falsch aussprechen.

    Auswirkung: Ich verstehe einzelne Begriffe womöglich nur schwer oder falsch. Das stört den Lesefluss und kann Inhalte missverständlich machen.

  • Formularfelder haben redundante Beschriftungen

    Eingabefelder werden mehrfach mit ähnlichen Informationen beschriftet, etwa über sichtbares Label, Titel und Platzhalter. Das erzeugt unnötige Wiederholungen in der Ausgabe.

    Auswirkung: Ich höre oder sehe dieselbe Information mehrfach und kann dadurch langsamer arbeiten. Die Eingabefelder wirken unruhig und schwerer verständlich.

  • Unverständliche Überschrift im Footer

    Im Fußbereich wird eine nicht sichtbare Überschrift mit einem technischen Namen ausgegeben. Diese Bezeichnung ist für Nutzende nicht aussagekräftig.

    Auswirkung: Ich bekomme eine irritierende Strukturansage statt einer hilfreichen Bereichsbezeichnung. Das macht den Seitenaufbau schwerer nachvollziehbar.

  • Eingabefelder merken sich Eingaben nicht gut

    Bei Formularfeldern fehlt das autocomplete-Attribut. Dadurch können Browser und Hilfsmittel Eingaben schlechter vorbefüllen oder passend anbieten.

    Auswirkung: Ich muss wiederkehrende Angaben häufiger selbst eintippen. Das ist langsamer und fehleranfälliger.

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.