Staatliches Gutachten zur digitalen Barrierefreiheit
wecobis.de
Nutzbarkeit mit unterschiedlichen Behinderungen
Blindheit Mit Hindernissen nutzbar
Mehrere kritische Verstöße bei Semantik, Navigation, Formular- und Suchbedienung erschweren Screenreader-Nutzung deutlich, lassen die Seite aber grundsätzlich nutzbar erscheinen.
Sehbehinderung Kaum nutzbar
Unzureichender Text- und Nicht-Text-Kontrast, fehlender Reflow und Probleme bei Zoom/Responsivität beeinträchtigen die Lesbarkeit deutlich.
Hörbehinderung Mit Hindernissen nutzbar
Fehlende Untertitel und keine Inhalte in DGS schränken Multimedia- und Serviceverständnis ein, der überwiegend textbasierte Inhalt bleibt aber nutzbar.
Motorische Behinderung Mit Hindernissen nutzbar
Fehlerhafte oder fehlende Tastaturbedienbarkeit zentraler Funktionen (Menüs, Buttons, Skiplink) führt zu erheblichen Hürden für reine Tastatur- und Schalter-Nutzende.
Lernbehinderung Mit Hindernissen nutzbar
Unklare Struktur, fehlende Überschriften und unzureichende Fehlermeldungen erschweren Orientierung und Formularbedienung, ohne die Nutzung vollständig zu verhindern.
Neurodivergenz Mit Hindernissen nutzbar
Inkonsequente Struktur, komplexe Navigation und nicht optimierte Fokusreihenfolgen können Überforderung und Desorientierung auslösen, sind aber mit Aufwand kompensierbar.
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 136.0.7103.49 (Offizieller Build) (64-Bit)
- Screenreader
- NVDA 2024
-
https://www.wecobis.de/ Web-Angebot öffnen
-
https://www.wecobis.de/index.php?search=Umwelt&fuzzySearch=true&id=16043
-
https://www.wecobis.de/bauproduktgruppen/metalle-pg.html
-
https://www.wecobis.de/mywecobis/registrierung.html
Prüfkriterien
Nicht bestanden
| Kriterium | Status | Notizen |
|---|---|---|
| Nicht-Text-Inhalt | nicht bestanden | Markieren Sie die Layoutgrafik als rein dekorativ (z. B. alt="" oder role="presentation"/aria-hidden="true"), damit Screenreader die Information korrekt einordnen können. |
| Nicht-Text-Inhalt | nicht bestanden | Entfernen Sie das redundante title-Attribut vom Bundesministerium-Logo, da der alt-Text die Funktion und den Namen bereits vollständig beschreibt und eine Dopplung vermeidet. |
| Nicht-Text-Inhalt | nicht bestanden | Verzichten Sie auf das title-Attribut der Bayerischen Architektenkammer und verlassen Sie sich auf einen präzisen alt-Text, um doppelte oder uneinheitliche Ausgaben zu verhindern. |
| Nicht-Text-Inhalt | nicht bestanden | Löschen Sie das title-Attribut des WECOBIS-Logos, damit nur der alt-Text von assistiven Technologien ausgegeben wird und keine widersprüchliche Informationsvermittlung erfolgt. |
| Untertitel (aufgezeichnet) | nicht bestanden | Stellen Sie synchronisierte Untertitel mit sämtlichen gesprochenen Inhalten und relevanten Geräuschen bereit, die über ein zugängliches Steuerungselement aktiviert werden können. |
| Info und Beziehungen | nicht bestanden | Kennzeichnen Sie jede Navigation als <nav> mit aria-label/aria-labelledby (z. B. Hauptnavigation, Servicenavigation), damit Screenreader die unterschiedlichen Bereiche unterscheiden können. |
| Info und Beziehungen | nicht bestanden | Fassen Sie die Suchergebnisse in eine semantische Liste (z. B. <ul>/<li>), damit Zielgruppe Anzahl und Position der Ergebnisse nachvollziehen kann. |
| Info und Beziehungen | nicht bestanden | Versehen Sie die Breadcrumbs mit role="navigation" aria-label="Breadcrumb" und strukturieren Sie die Einträge in einer geordneten Liste (<ol>), damit die Pfadstruktur für assistive Technologien erkennbar ist. |
| Info und Beziehungen | nicht bestanden | Verwenden Sie echte Überschriftenelemente (z. B. <h4>) statt rein optisch hervorgehobener Texte und halten Sie dabei eine konsistente Hierarchie ein. |
| Info und Beziehungen | nicht bestanden | Tauschen Sie das nicht standardkonforme <navi> durch <nav> aus, damit Assistive Technologien den Navigationsbereich korrekt erkennen. |
| Info und Beziehungen | nicht bestanden | Fügen Sie der Ergebnisliste eine aussagekräftige Überschrift („Suchergebnisse“) und einen Hinweis auf die Anzahl der Treffer hinzu, um Kontext und Orientierung für Screenreader und Tastaturnutzende zu verbessern. |
| Bedeutungsvolle Reihenfolge | nicht bestanden | Ordnen Sie die Checkbox „Tippfehler tolerieren“ im DOM vor dem Eingabefeld oder passen Sie das Layout an, damit visuelle und programmgesteuerte Reihenfolge übereinstimmen. |
| Bedeutungsvolle Reihenfolge | nicht bestanden | Ergänzen Sie über den Filtergruppen eine zentrale Steuerung (button mit aria-expanded/aria-controls), um sämtliche Gruppen gebündelt öffnen/schließen zu können. |
| Bedeutungsvolle Reihenfolge | nicht bestanden | Optimieren Sie die Fokusreihenfolge, sodass geöffnete Untermenüs direkt nach dem zugehörigen Hauptlink erscheinen (z. B. strukturierte HTML-Anordnung, tabindex oder Pfeiltastensteuerung). |
| Ausrichtung | nicht bestanden | Fügen Sie im <head> ein viewport-Meta-Element hinzu und verwenden Sie flexible Layouttechniken (Media Queries, relative Einheiten), damit die Seite auf verschiedenen Geräten responsiv dargestellt wird. |
| Kontrast (Minimum) | nicht bestanden | Erhöhen Sie den Kontrast der Breadcrumb-Schriftfarbe auf mindestens 4,5:1 oder passen Sie den Hintergrund an, damit die Pfadnavigation auch bei Sehbeeinträchtigungen lesbar bleibt. |
| Textgröße ändern | nicht bestanden | Gestalten Sie das Layout so, dass bei 200 % Zoom kein horizontales Scrollen erforderlich ist, etwa durch relative Maße, Flexbox/Grid und das Vermeiden fester Breiten. |
| Automatischer Umbruch (Reflow) | nicht bestanden | Achten Sie auf ein responsives, einspaltiges Layout ohne horizontales Scrollen, damit Inhalte bei Vergrößerung oder kleineren Displays korrekt umbrochen werden. |
| Nicht-Text-Kontrast | nicht bestanden | Erhöhen Sie den Kontrast von Rahmen in Formularfeldern auf mindestens 3:1 und gestalten Sie Fokuszustände deutlich sichtbar, um die Wahrnehmbarkeit bei eingeschränkter Sehfähigkeit zu gewährleisten. |
| Tastatur | nicht bestanden | Sorgen Sie dafür, dass der Button „Hinweis schließen“ als korrektes interaktives Element implementiert wird und über Enter/Leertaste aktivierbar ist. |
| Tastatur | nicht bestanden | Trennen Sie die Steuerung des Untermenüs (Plus/Minus) vom Link und setzen Sie ein eigenes <button>-Element mit aria-expanded/aria-controls ein, das per Tastatur fokussierbar und aktivierbar ist. |
| Blöcke überspringen | nicht bestanden | Fügen Sie einen fokussierbaren Skiplink (z. B. href="#maincontent") am Seitenbeginn ein, damit Tastaturnutzende direkt zum Hauptinhalt gelangen können. |
| Linkzweck (im Kontext) | nicht bestanden | Reduzieren Sie den klickbaren Bereich der Suchergebnisse auf einen eindeutigen Link (z. B. Titel) und platzieren Sie ergänzende Inhalte außerhalb des Links oder nutzen Sie aria-label zur klaren Zweckbeschreibung. |
| Vorschlag bei Fehler | nicht bestanden | Ergänzen Sie die Fehlermeldung bei ungültiger E-Mail-Adresse um konkrete Hinweise (z. B. Format name@domain.de), damit Nutzer*innen wissen, wie sie korrigieren können. |
| Name, Rolle, Wert | nicht bestanden | Verknüpfen Sie das Suchfeld korrekt mit dem label (matching id) und ergänzen Sie den Suchbutton durch sichtbaren Text oder aria-label, damit beide Elemente für assistive Technologien beschriftet sind. |
| Name, Rolle, Wert | nicht bestanden | Fügen Sie dem Suchbereich role="search" (oder section id="suche" role="search") hinzu, damit die Funktion programmatisch als Suche erkennbar ist. |
| Name, Rolle, Wert | nicht bestanden | Nutzen Sie semantisch korrekte <button>-Elemente für Akkordeonüberschriften mit aria-expanded/aria-controls und gültiger HTML-Struktur (kein <p> direkt in <ul>), um Tastatur und Screenreader-Unterstützung sicherzustellen. |
| Name, Rolle, Wert | nicht bestanden | Vermeiden Sie die Einbettung des Links „mehr erfahren“ in einen <span> und verwenden Sie das <a>-Element (oder ggf. button) direkt, damit die semantische Rolle eindeutig bleibt. |
| Name, Rolle, Wert | nicht bestanden | Statten Sie die Paginierung mit sprechenden aria-label-Attributen (Seite 2, nächste/vorherige Seite) sowie aria-current="page" und optional role="navigation" aus, um Funktion und aktiven Zustand zu kommunizieren. |
| Name, Rolle, Wert | nicht bestanden | Ergänzen Sie Navigationspunkte mit Untermenüs um aria-haspopup="true" und dynamisches aria-expanded, und referenzieren Sie verschachtelte <ul> über aria-controls, um die Hierarchie für Screenreader sichtbar zu machen. |
|
Zusatzkriterien: Deutsche Gebärdensprache (Einem Link auf enthaltene Inhalte etc.)
Deutsche Gebärdensprache
|
nicht bestanden | Stellen Sie die geforderten Inhalte und Hinweise zur Deutschen Gebärdensprache bereit (Links zu Inhalten, Navigation und Erläuterungen), damit die Zusatzkriterien erfüllt werden. |
| Info und Beziehungen | nicht bestanden | Empfehlung: Ergänzen Sie an Suchergebnislisten eine Überschrift („Suchergebnisse“) und eine Angabe zur Trefferzahl, um Kontext und Orientierung für Assistive Technologien zu schaffen. |
Nicht anwendbar
| Kriterium | Status | Notizen |
|---|---|---|
| Audio-Steuerelement | nicht anwendbar | Keine zusätzlichen Hinweise vorhanden; weiterhin als Empfehlung zu behandeln. |
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.