Staatliches Gutachten zur digitalen Barrierefreiheit
bundespreis-stadtgruen.de
Nutzbarkeit mit unterschiedlichen Behinderungen
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.
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 135.0.7049.96 (Offizieller Build) (64-Bit)
- Screenreader
- NVDA 2024
- Tools
- Color Contrast Analyser (CCA), PDF Accessibility Checker (PAC), Chrome web inspector, NVDA ScreenReader, HeadingsMap (Chrome), Landmark Navigation (Chrome), Bookmarklets von bitvtest.de
-
https://bundespreis-stadtgruen.de/ Web-Angebot öffnen
-
https://bundespreis-stadtgruen.de/startseite/wettbewerb/
-
https://bundespreis-stadtgruen.de/preise/
-
https://bundespreis-stadtgruen.de/faq/
Prüfkriterien
Nicht bestanden
| Kriterium | Status | Notizen |
|---|---|---|
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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). |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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“. |
| 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. |
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.