bundespreis-stadtgruen.de

Website nicht konform Prüfung vom 06.05.2025 ID: #1000

Umwelt öffentliche Einrichtung

Prüfbericht herunterladen (PDF)

Kurzzusammenfassung

Auftraggeber: Bundesinstitut für Bau-, Stadt- und Raumforschung (BBSR)
Prüforganisation: Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik
Stadt: Berlin
Prüfart: Vereinfachte Überwachung

Technische Umgebung

OS: Windows 11
Browser: Chrome 135.0.7049.96 (Offizieller Build) (64-Bit)
Screenreader: NVDA 2024
Auflösung:
Tools: Color Contrast Analyser (CCA), PDF Accessibility Checker (PAC), Chrome web inspector, NVDA ScreenReader, HeadingsMap (Chrome), Landmark Navigation (Chrome), Bookmarklets von bitvtest.de

Zugänglichkeits-Analyse

KI-Schnellcheck zur Nutzbarkeit

Blindheit

Kaum nutzbar

Fehlende Alternativtexte, unzureichende Semantik, problematische Navigation und keine Medienalternativen schränken Screenreader-Nutzende deutlich ein, machen die Seite aber nicht völlig unbenutzbar.

Sehbehinderung

Kaum nutzbar

Mangelnder Text- und Steuerelementkontrast, nur farbliche Linkkennzeichnung und bewegte Inhalte ohne Stopp-Funktion beeinträchtigen das Lesen und die Orientierung stark.

Hörbehinderung

Mit Hindernissen nutzbar

Fehlende oder unzureichende Untertitel und keine DGS-Angebote erschweren den Zugang zu Medieninhalten, während statische Textinhalte grundsätzlich nutzbar bleiben.

Motorische Behinderung

Mit Hindernissen nutzbar

Unzureichende Tastaturbedienbarkeit (z.B. Untermenüs, Fokusreihenfolge) und nicht optimal gestaltete Formulare erschweren, aber verhindern die Nutzung per Tastatur nicht vollständig.

Lernbehinderung

Kaum nutzbar

Inkonsistente Struktur, fehlende klare Überschriften, fehlende alternative Navigationswege und keine Leichte-Sprache-Angebote erschweren Verständnis und Orientierung erheblich.

Neurodivergenz

Mit Hindernissen nutzbar

Automatisch laufende Inhalte ohne Pausensteuerung, unklare Struktur und Navigation können stark ablenken, während Inhalte mit Aufwand dennoch auffindbar bleiben.

Wahrscheinliche Barrieren

Barriere	Auswirkung	Melden
Medieninhalte ohne ausreichende Alternativen Das eingebettete Video ist nicht ausreichend gekennzeichnet und verfügt offenbar weder über brauchbare Untertitel noch über eine vollständige Audiodeskription oder Textalternative. Visuelle Informationen im Video bleiben dadurch teilweise unzugänglich.	Wenn ich nicht sehen oder hören kann, fehlen mir wichtige Inhalte aus dem Video. Ich erfasse dann den eigentlichen Informationsgehalt nur unvollständig oder gar nicht.	Melden
Untermenüs nicht zuverlässig per Tastatur bedienbar Untermenüs lassen sich offenbar nicht sauber per Tastatur öffnen, schließen und bedienen. Auch der Zustand der Menüs wird für Hilfsmittel nicht klar genug vermittelt.	Wenn ich mit der Tastatur navigiere, komme ich möglicherweise nicht an alle Unterpunkte. Das bremst oder verhindert den Zugriff auf zentrale Navigationsbereiche.	Melden
Fehlende oder unklare Seitenstruktur Wichtige Seitenbereiche haben keine saubere Überschriftenstruktur, etwa fehlt eine klare h1, Projektbereiche sind nicht korrekt gegliedert und das Kontaktformular hat keine passende Überschrift. Auch Listen und Navigationsbereiche sind teilweise nicht semantisch richtig ausgezeichnet.	Ich kann mir die Seite mit einem Screenreader schlechter erschließen und Abschnitte schwerer überspringen. Das erschwert besonders das schnelle Finden von Projekten, Preisträgern oder dem Kontaktformular.	–
Formularhinweise und Fehler schwer verständlich Im Kontaktformular sind Pflichtfelder nicht klar genug erklärt und Fehlermeldungen geben offenbar keine konkreten Korrekturhinweise, etwa für die E-Mail-Adresse. Außerdem sind Formularfelder visuell nicht deutlich genug vom Hintergrund abgegrenzt.	Ich weiß möglicherweise nicht, was ich ausfüllen muss oder wie ich Eingabefehler behebe. Das kann das Absenden des Formulars deutlich erschweren oder verzögern.	Melden
Unzureichender Kontrast von Text und Bedienelementen Mehrere Texte und Bedienelemente haben zu wenig Farbkontrast zum Hintergrund, etwa in der Top-Navigation, im Footer, bei Formularfeldern und beim Senden-Schalter. Dadurch können wichtige Inhalte und Steuerungen schwer lesbar oder schwer erkennbar sein.	Ich muss mich stark anstrengen, um Menüs, Hinweise oder Formularfelder zu sehen. Besonders bei schwachem Sehvermögen kann ich Inhalte übersehen oder Bedienelemente nicht sicher finden.	–
Fokus landet auf versteckten oder unnötigen Links In der Fokusreihenfolge erscheinen Links, die nicht sichtbar oder für die aktuelle Ansicht nicht relevant sind. Das betrifft zum Beispiel redundante Links nach dem Logo oder mobile Hamburger-Links auf dem Desktop.	Ich springe beim Tabben an Stellen, die ich nicht sehen oder sinnvoll nutzen kann. Dadurch verliere ich Orientierung und brauche deutlich länger, um die Seite zu bedienen.	–
Nicht erkennbare oder unklare Links Einige Links sind nur über Farbe unterscheidbar oder bestehen aus Bildern ohne ausreichende Beschriftung. Dadurch sind Ziel und Zweck von Links, Logos oder Grafiken nicht immer verständlich.	Ich erkenne nicht sicher, was anklickbar ist oder wohin ein Link führt. Das macht das gezielte Navigieren und Öffnen wichtiger Inhalte unnötig schwer.	–
Veralteter Tracker läuft automatisch weiter Ein automatisch laufendes Element auf der Seite lässt sich offenbar nicht pausieren, stoppen oder ausblenden. Das kann Aufmerksamkeit binden und andere Inhalte überdecken oder ablenken.	Ich werde beim Lesen oder Bedienen ständig abgelenkt. Für manche Nutzende wird es dadurch deutlich schwerer, sich auf Inhalte und Formulare zu konzentrieren.	–
Fehlende alternative Zugänge und Orientierungshilfen Es fehlen zusätzliche Navigationswege wie Suche, Sitemap, Breadcrumbs oder ähnliche Orientierungshilfen. Auch Hinweise in Deutscher Gebärdensprache und Leichter Sprache sind nicht vorhanden, ebenso fehlt die Barrierefreiheitserklärung.	Ich bin stärker auf die Hauptnavigation angewiesen und finde Inhalte schwerer wieder. Wenn ich DGS oder Leichte Sprache brauche, bekomme ich keinen passenden Zugang zu wichtigen Informationen.	–

Hinweis: Diese Einschätzung mit generativer KI basiert auf den Informationen aus diesem Gutachten. Künstliche Intelligenz kann Inhalte nicht automatisch barrierefrei machen oder Prüfungen durchführen. Behinderungen sind komplex und mehrschichtig, weshalb diese Analysen nicht zutreffen müssen.

Getestete Angebote

Webangebot öffnen

https://bundespreis-stadtgruen.de/
https://bundespreis-stadtgruen.de/startseite/wettbewerb/
https://bundespreis-stadtgruen.de/preise/
https://bundespreis-stadtgruen.de/faq/

Empfehlung & Status

Die zahlreichen Fehler in Bereichen wie Navigationsstruktur, Kontrast, Alternativtexte, mediale Alternativen und zusätzliche Sprachressourcen sollten gemäß den beschriebenen Empfehlungen behoben werden, um die vollständige BITV-Konformität sicherzustellen.

Prüfkriterien

Nicht bestanden

Kriterium	Status	Notizen
9.1.1.1 Nicht-Text-Inhalt (Dekorative Listensymbole)	nicht bestanden	Kennzeichnen Sie die dekorativen quadratischen Listensymbole als aria-hidden oder rein visuelles CSS-Design, damit Screenreader sie ignorieren.
9.1.1.1 Nicht-Text-Inhalt (Logo-Alternative)	nicht bestanden	Alternativtext des Logos so gestalten, dass sowohl der Inhalt als auch der Linkzweck zur Startseite beschrieben werden oder das Bild als dekorativ markieren und den Link separat beschriften.
9.1.1.1 Nicht-Text-Inhalt (Video-Kennung)	nicht bestanden	Das eingebettete Video muss per figcaption, aria-label oder visuelle Kennzeichnung als Medientyp beschrieben werden sowie den Zweck und zentrale Inhalte nennen.
9.1.2.2 Untertitel (aufgezeichnet)	nicht bestanden	Ein erweiterter Untertitel muss synchronisiert sämtliche gesprochene Inhalte und relevante Geräusche beinhalten, über ein zugängliches Steuerungselement aktivierbar sein und keine Bildinhalte verdecken.
9.1.2.3 Audiodeskription oder Medienalternative (aufgezeichnet)	nicht bestanden	Sorgen Sie für eine zusätzliche Beschreibung visueller Inhalte durch eine Audiodeskription oder eine vollständige Textalternative, damit blinde und sehbehinderte Nutzende alle Informationen erfassen können.
9.1.2.5 Audiodeskription (aufgezeichnet)	nicht bestanden	Ergänzen Sie eine Audiodeskription als separate Spur oder integrierte Version für relevante Szenenwechsel, Gestik, Mimik und Texteinblendungen bzw. kennzeichnen Sie das Fehlen visueller Informationen.
9.1.3.1 Info und Beziehungen (Liste von Preisträgerinnen und Preisträgern)	nicht bestanden	Bilden Sie die Preisträger:innen-Auflistung als semantisch korrekte Liste (<ul><li>…) aus, damit assistive Technologien die Gruppenzugehörigkeit erkennen.
9.1.3.1 Info und Beziehungen (fehlende h1-Überschrift)	nicht bestanden	Definieren Sie eine sichtbare h1-Überschrift und korrigieren Sie die leere erste h3, um eine klare strukturierende oberste Ebene bereitzustellen.
9.1.3.1 Info und Beziehungen (inkonsistente Überschriftenstruktur)	nicht bestanden	Verwenden Sie für Posterbeschreibungen keine <h3>-Elemente, sondern semantisch passende Elemente wie <p>, <span> oder <figcaption>, damit die Hierarchie konsistent bleibt.
9.1.3.1 Info und Beziehungen (mehrere Navigationsbereiche)	nicht bestanden	Stellen Sie sicher, dass jeder <nav>-Bereich ein eigenes aria-label oder aria-labelledby erhält, um die verschiedenen Navigationen programmatisch zu unterscheiden.
9.1.3.1 Info und Beziehungen (fehlende übergeordnete Projektüberschrift)	nicht bestanden	Fügen Sie vor der Liste der Projekte eine passende übergeordnete Überschrift (z. B. Ebene 2) ein, die den Abschnitt als zusammenhängende Gruppierung kennzeichnet.
9.1.3.1 Info und Beziehungen (Kontaktformular ohne Überschrift)	nicht bestanden	Versehen Sie das Kontaktformular mit einer semantisch passenden Überschrift (z. B. Ebene 2 oder 3), damit assistive Technologien den Abschnitt erkennen.
9.1.3.3 Sensorische Eigenschaften (Verweis auf sensorische Merkmale)	nicht bestanden	Ersetzen Sie die rein visuelle Ortsangabe durch eine strukturierte Bezugnahme, beispielsweise mit Überschriftstext oder Direktlink zum Formularbereich.
9.1.4.1 Benutzung von Farbe (Links nur farblich unterscheidbar)	nicht bestanden	Fügen Sie eine zusätzliche optische Kennzeichnung von Links (z. B. Unterstreichung oder Fettdruck) hinzu, damit Nutzer:innen mit Farbsehschwäche links erkennen können.
9.1.4.3 Kontrast (Minimum) – Menüeinträge	nicht bestanden	Erhöhen Sie den Farbkontrast der Top-Navigation auf mindestens 4,5:1, damit die Menüeinträge sichtbar und lesbar sind.
9.1.4.3 Kontrast (Minimum) – Copyright-Information	nicht bestanden	Verbessern Sie den Kontrast der Copyright-Zeile im Footer auf mindestens 4,5:1, damit sie auch für Personen mit geringer Sehfähigkeit lesbar ist.
9.1.4.11 Nicht-Text-Kontrast (Senden-Schalter)	nicht bestanden	Erhöhen Sie den Kontrast zwischen Schaltertext und Hintergrund auf mindestens 3:1, beispielsweise durch dunklere Farbe oder stärkeren Rahmen.
9.1.4.11 Nicht-Text-Kontrast (Eingabefelder)	nicht bestanden	Heben Sie Formularfelder durch einen stärkeren Hintergrund oder deutliche Rahmen vom weißen Seitenhintergrund ab und erreichen Sie mindestens 3:1 Kontrast.
9.1.4.13 Eingeblendeter Inhalt bei Hover oder Fokus (Untermenüs)	nicht bestanden	Ermöglichen Sie die Steuerung der Untermenüs per Tastatur, z. B. Öffnen per Enter/Pfeil, Schließen per ESC oder erneute Aktivierung und kennzeichnen Sie Zustand sowie Fokusübergang.
9.2.2.2 Pausieren, stoppen, ausblenden (automatisch laufender Tracker)	nicht bestanden	Fügen Sie sichtbare Steuerungselemente zum Pausieren, Stoppen oder Ausblenden des Trackers hinzu, die per Tastatur und Screenreader erreichbar sind.
9.2.4.2 Seite mit Titel (Startseite)	nicht bestanden	Ergänzen Sie im Title-Tag einen Hinweis auf die Startseite, z. B. „Startseite – Bundespreis Stadtgrün 2024“, um Zweck und Kontext klar zu kommunizieren.
9.2.4.3 Fokus-Reihenfolge (nicht sichtbare Links)	nicht bestanden	Entfernen Sie redundante, nicht sichtbare Links (z. B. nach dem Logo) und blenden Sie mobile Hamburger-Links aus der Desktop-Fokusreihenfolge aus („display:none“ oder aria-hidden).
9.2.4.4 Linkzweck (im Kontext) – Posterbereich	nicht bestanden	Geben Sie Links im Posterbereich eine vollständige Beschriftung oder ein sprechendes aria-label, das den Zweck oder das Ziel des Links beschreibt.
9.2.4.4 Linkzweck (im Kontext) – verlinkte Poster	nicht bestanden	Stellen Sie sicher, dass jeder anklickbare Bereich eine sichtbare Beschriftung oder ein aussagekräftiges aria-label erhält, das den Inhalt oder das Ziel des Posters benennt.
9.2.4.4 Linkzweck (im Kontext) – Logos im Footer	nicht bestanden	Ergänzen Sie alt-Texte oder aria-labels für jedes verlinkte Logo im Footer, die die Zielseite oder Organisation beschreiben.
9.2.4.4 Linkzweck (im Kontext) – verlinkte Grafiken (Projekte)	nicht bestanden	Versehen Sie die Projektbilder entweder mit sprechenden Alternativtexten oder beschrifteten Links, damit der Linkzweck auch ohne Bild erkennbar ist.
9.2.4.5 Verschiedene Möglichkeiten (Navigationswege)	nicht bestanden	Bieten Sie neben der Hauptnavigation alternative Zugänge wie Suchfunktion, Sitemap, Thema-Kacheln oder Breadcrumbs an, um unterschiedliche Nutzervorlieben abzudecken.
9.3.2.3 Konsistente Navigation (Weiterleitung auf Subdomains)	nicht bestanden	Kennzeichnen Sie Links zu Archivseiten deutlich (z. B. „(Archiv)“) oder passen Sie das Layout der Subdomains an, damit der Kontextwechsel nachvollziehbar bleibt und Rücknavigationsmöglichkeiten vorhanden sind.
9.3.3.2 Beschriftungen (Labels) oder Anweisungen (Pflichtfelder)	nicht bestanden	Erklären Sie oberhalb des Formulars oder direkt im Label, dass mit * markierte Felder Pflichtfelder sind, und nutzen Sie aria-required, damit dies auch assistiven Technologien zugänglich ist.
9.3.3.3 Vorschlag bei Fehler (E-Mail-Feld)	nicht bestanden	Ergänzen Sie die Fehlermeldung um einen konkreten Korrekturhinweis, z. B. „Bitte geben Sie eine gültige E-Mail-Adresse im Format name@domain.de ein“.
9.4.1.2 Name, Rolle, Wert (Navigationselemente)	nicht bestanden	Ersetzen Sie die Menüpunkte mit Untermenüs durch semantisch korrekte Schalter (z. B. <button>), setzen Sie aria-haspopup="menu" und aria-expanded entsprechend dem Zustand, und stellen Sie Tastatursteuerung sicher.
Zusatzkriterien: Deutsche Gebärdensprache und Leichte Sprache Links zu Informationen in Deutscher Gebärdensprache und Leichter Sprache	nicht bestanden	Die Hinweise und Links zu DGS- und Leichte-Sprache-Inhalten fehlen auf allen Stichproben, ergänzen Sie entsprechend verfügbare Inhalte zur Navigation, wesentlichen Inhalten und Barrierefreiheitserklärung.
Zusatzkriterien: Barrierefreiheitserklärung Barrierefreiheitserklärung vorhanden und formal geprüft	nicht bestanden	Die Erklärung zur Barrierefreiheit inklusive formaler Prüfung fehlt, stellen Sie diese bereit und dokumentieren Sie die Prüfung, wie gesetzlich gefordert.

Kurzzusammenfassung

Technische Umgebung

KI-Schnellcheck zur Nutzbarkeit ✨

Wahrscheinliche Barrieren

Getestete Angebote

Empfehlung & Status

Prüfkriterien

Nicht bestanden

KI-Schnellcheck zur Nutzbarkeit