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.

Dokumentierte Barrieren

  • Tastaturbedienung von Menü und Hinweis nicht möglich

    Einige Schaltflächen und Menüsteuerungen sind nicht korrekt als bedienbare Elemente umgesetzt. Dadurch können sie für Tastatur- und Hilfstechnologien nicht zuverlässig ausgelöst werden.

    Auswirkung: Ich kann wichtige Funktionen nicht oder nur umständlich per Tastatur bedienen. Besonders Navigation und das Schließen von Hinweisen werden für mich schnell zum Hindernis.

  • Suchfeld und Suche sind schwer verständlich

    Das Suchfeld ist nicht sauber mit einer Beschriftung verbunden und die Suche ist nicht klar als solche erkennbar. Auch Suchergebnisse sind semantisch nicht gut aufgebaut und dadurch schwer nachvollziehbar.

    Auswirkung: Ich verstehe als Screenreader-Nutzer nicht immer, was ich ausfüllen oder anklicken soll. Nach dem Suchen finde ich Ergebnisse schlechter ein und kann ihre Anzahl oder Reihenfolge nicht sicher erfassen.

  • Fokusreihenfolge und Überspringen von Inhalten funktionieren nicht gut

    Die Tastaturreihenfolge passt teilweise nicht zur sichtbaren Anordnung, und ein funktionierender Skiplink fehlt. Dadurch werden Inhalte und Filterbereiche für Tastaturnutzende unnötig schwer erreichbar.

    Auswirkung: Ich muss viele Elemente nacheinander ansteuern, obwohl ich direkt zum Hauptinhalt oder zu einer Filtergruppe springen möchte. Das kostet Zeit und erhöht die Gefahr, mich zu verfahren.

  • Untertitel und DGS-Angebot fehlen

    Für vorhandene Medieninhalte sind keine synchronisierten Untertitel vorgesehen, und Hinweise in Deutscher Gebärdensprache fehlen ebenfalls. Damit bleiben diese Inhalte für gehörlose Nutzende nicht ausreichend zugänglich.

    Auswirkung: Ich kann gesprochene Inhalte oder wichtige Zusatzinformationen nicht vollständig erfassen. Wenn ein Service auf Video oder Audio setzt, bin ich dadurch deutlich benachteiligt.

  • Navigationsstruktur ist für Assistive Technologien uneindeutig

    Mehrere Navigationsbereiche sind nicht eindeutig ausgezeichnet und Untermenüs sind nicht sauber als aufklappbare Navigation erkennbar. Breadcrumbs und einige hierarchische Strukturen sind ebenfalls nicht korrekt semantisch markiert.

    Auswirkung: Ich kann mich in der Seite schlechter orientieren und weiß nicht immer, wo ich mich gerade befinde. Für mich wird das Springen zwischen Bereichen und Unterseiten unnötig kompliziert.

  • Bedienung bei Zoom und auf kleinen Bildschirmen erschwert

    Die Seite ist nicht ausreichend responsiv und braucht bei Vergrößerung oder kleineren Displays horizontales Scrollen. Inhalte umbrechen nicht zuverlässig in eine gut nutzbare Ansicht.

    Auswirkung: Wenn ich Texte stark vergrößere, verliere ich schnell den Überblick und muss seitlich scrollen. Das Lesen und Ausfüllen von Formularen wird dadurch anstrengend und fehleranfällig.

  • Kontraste und sichtbare Fokuszustände sind teils zu schwach

    Einige Texte und Bedienelemente haben zu wenig Kontrast, und Rahmen oder Fokusmarkierungen sind nicht deutlich genug sichtbar. Das betrifft unter anderem Breadcrumbs und Formularfelder.

    Auswirkung: Ich kann wichtige Informationen schlechter erkennen und sehe oft nicht klar, welches Element gerade aktiv ist. Besonders bei Sehbeeinträchtigung wird das Anklicken und Ausfüllen unsicherer.

  • Struktur und Überschriften bieten zu wenig Orientierung

    Einige Inhalte sind nur optisch als Überschriften gestaltet oder in ungeeignete HTML-Strukturen eingebettet. Dadurch wird die inhaltliche Gliederung für Screenreader und andere Assistive Technologien nicht zuverlässig vermittelt.

    Auswirkung: Ich kann Themen, Abschnitte und Zusammenhänge schlechter erfassen. Das macht es mir schwerer, gezielt zu einem passenden Bereich zu springen oder Inhalte schnell zu überblicken.

  • Formularfehler sind zu ungenau erklärt

    Bei ungültigen Eingaben, etwa einer E-Mail-Adresse, fehlt eine konkrete Hilfestellung zur Korrektur. Die Fehlermeldung sagt also nicht klar genug, wie die Eingabe richtig sein muss.

    Auswirkung: Ich weiß dann nicht sicher, was ich ändern soll, und muss raten oder mehrfach ausprobieren. Das kostet Zeit und kann dazu führen, dass ich das Formular abbreche.

  • Bildinhalte werden teils doppelt oder unklar vorgelesen

    Mehrere Logos und Grafiken sind nicht optimal gekennzeichnet, weil alt- und title-Informationen teilweise doppelt oder widersprüchlich ausgegeben werden. Dekorative oder unterstützende Bildinhalte sind dadurch nicht immer sauber eingeordnet.

    Auswirkung: Ich höre als Screenreader-Nutzer unnötige Wiederholungen oder verwirrende Bezeichnungen. Das stört den Lesefluss und macht die Seite weniger übersichtlich.

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.