Unterstützung
barrieren-gutachten.de wird ehrenamtlich betrieben und finanziert sich über Steady-Mitgliedschaften von Menschen wie dir, die Barrierefreiheit und Inklusion voranbringen möchten.
ab
5
Euro
im Monat
für Recherche, Prüfungen und den Betrieb der Plattform.
Zugänglichkeits-Analyse
Blindheit
Kaum nutzbar
Massive Probleme bei Struktur, Landmarken, Tastaturbedienung, Fokusführung und ARIA-Beschriftungen machen die Seite für Screenreader-Nutzende nur mit großem Aufwand teilweise nutzbar.
Sehbehinderung
Kaum nutzbar
Fehlende oder schlechte Fokusmarkierungen, Kontrastprobleme, Überlagerungen bei 400 % Zoom und defekte Textabstände beeinträchtigen die Nutzung mit Vergrößerung und Sehrest stark.
Hörbehinderung
Weitgehend zugänglich
Es werden zwar keine speziellen DGS-Inhalte angeboten, aber die meisten Barrieren betreffen primär Seh- und Tastaturnutzung, sodass gehörlose Nutzende mit normalem Sehvermögen die Seite weitgehend verwenden können.
Motorische Behinderung
Kaum nutzbar
Schwerwiegende Defizite bei Tastaturbedienung, Fokussteuerung, Skiplinks und nicht per Tastatur erreichbaren Steuerelementen schränken motorisch eingeschränkte Tastaturnutzende stark ein.
Lernbehinderung
Mit Hindernissen nutzbar
Unklare Struktur, inkonsistente Überschriften, komplexe Linkflächen und fehlende Leichte-Sprache-Angebote erschweren Orientierung und Verständnis deutlich.
Neurodivergenz
Mit Hindernissen nutzbar
Mangelnde klare Struktur, redundante und überlange Linkbereiche sowie Probleme bei Fokusführung und Reflow können Konzentration, Orientierung und Reizreduktion erheblich beeinträchtigen.
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.
Die Prüfung zeigt umfangreiche Defizite bei der semantischen Struktur, Fokussteuerung, Einschleusung von ARIA-Informationen und Nutzbarkeit bei starken Vergrößerungen. Empfohlen wird die konsequente Verwendung korrekter Überschriften, Landmarken und nav-Container, eine nachvollziehbare Fokusführung inklusive Skiplinks, programmatisch beschriftete Bedienelemente, ARIA-Zustandsinformationen sowie die Beseitigung der Zoom-, Kontrast- und Inhaltsüberlagerungsprobleme. Zusätzliche Inhalte wie Links zu Deutschen Gebärdensprache- und Leichtsprachressourcen sind ebenfalls nachzureichen.
| Kriterium | Status | Notizen |
|---|---|---|
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Suchergebnisse werden nicht durch eine strukturierende Überschrift eingeleitet. Empfehlung: Ergänzen Sie oberhalb der Ergebnisliste eine klare Überschrift (z. B. <h2>Suchergebnisse</h2>), damit assistive Technologien den Abschnitt erkennen können. |
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Die Trefferliste ist nicht als geordnete/ungeordnete Liste ausgezeichnet. Empfehlung: Fassen Sie jedes Ergebnis in ein <li>-Element innerhalb von <ul>/<ol> und ergänzen Sie eine Information zur Gesamtanzahl für eine nachvollziehbare Struktur. |
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Die Inhaltsseite beginnt mit einer <h3>, bevor die <h1> kommt; die Überschriftenhierarchie ist damit gebrochen. Empfehlung: Platzieren Sie die Hauptüberschrift als sichtbares <h1> am Beginn und ordnen Sie die weiteren Ebenen konsistent. |
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Im Footer folgen H3-Überschriften ohne übergeordnete H2 und mischen sich damit in die vorherigen Bereiche. Empfehlung: Ergänzen Sie eine passende H2 oder heben Sie die H3 auf, sodass eine logische, konsistente Gliederung entsteht. |
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Startseite enthält leere H3-Überschriften direkt nach H2-Strukturelementen. Empfehlung: Entfernen Sie die leeren H3 oder versehen Sie sie mit relevantem Text, damit sie einen sichtbaren Inhalt erhalten. |
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Die Seite beginnt mit einer leeren H3 statt mit einer H1, wodurch die semantische Hierarchie fehlt. Empfehlung: Ergänzen Sie eine aussagekräftige H1 am Seitenanfang und entfernen oder ersetzen Sie die leere H3. |
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Auf allen Stichproben fehlt die semantische Markierung der Bereiche (z. B. <main>). Empfehlung: Verwenden Sie <header>, <main> und <footer>, damit assistive Technologien die Struktur erkennen. |
|
9.1.3.1 Info und Beziehungen |
nicht bestanden | Top- und Footer-Navigationen fehlen ein <nav> sowie ein aria-label; zudem ist die Rolle nicht differenziert. Empfehlung: Wrappen Sie alle Navigationsbereiche in <nav> und ergänzen Sie eindeutige aria-labels (z. B. "Hauptnavigation"). |
|
9.1.3.2 Bedeutungsvolle Reihenfolge |
nicht bestanden | Im Slider müssen Tastatur- und Screenreader-Nutzende alle Inhalte nacheinander durchlaufen, bevor sie nachfolgende Elemente erreichen können. Empfehlung: Bieten Sie eine Umgehungsmöglichkeit oder passt die Reihenfolge an, sodass der Fokus elementweise sinnvoll folgt. |
|
9.1.3.2 Bedeutungsvolle Reihenfolge |
nicht bestanden | Der Footer wird vom Screenreader in einer Reihenfolge ausgegeben, die nicht der visuellen Darstellung entspricht. Empfehlung: Ordnen Sie die Inhalte im Markup entsprechend der sichtbaren Anordnung. |
|
9.1.3.2 Bedeutungsvolle Reihenfolge |
nicht bestanden | Der Cookie-Dialog steht am Seitenende; Screenreader-/Tastaturnutzende müssen den gesamten Inhalt durchlaufen, bevor sie ihn erreichen. Empfehlung: Positionieren Sie den Dialog früh im DOM und setzen Sie den Fokus direkt auf das Dialogfenster. |
|
9.1.3.2 Bedeutungsvolle Reihenfolge |
nicht bestanden | Der ausgeblendete Cookie-Dialog bleibt für assistive Technologien aktiv und erzeugt unnötige Navigation. Empfehlung: Blenden Sie ihn auch für Screenreader aus (z. B. aria-hidden oder display:none), wenn er nicht sichtbar ist. |
|
9.1.4.10 Automatischer Umbruch (Reflow) |
nicht bestanden | Bei 400 % Zoom überlagern Sticky-Header und Scroll-Button den Hauptinhalt, sodass Informationen nicht mehr sichtbar sind. Empfehlung: Deaktivieren oder verschieben Sie fixierte Elemente bei hoher Zoomstufe bzw. passen Sie deren Größe dynamisch an. |
|
9.1.4.10 Automatischer Umbruch (Reflow) |
nicht bestanden | Das Logo im Header wird bei 400 % Zoom von Social-Media-Links überdeckt, wodurch optische Identität verloren geht. Empfehlung: Stellen Sie sicher, dass Layout und Abstände bei starken Vergrößerungen nicht zu Überlagerungen führen. |
|
9.1.4.11 Nicht-Text-Kontrast |
nicht bestanden | Social-Media-Links am rechten Seitenrand weisen nur ein Kontrastverhältnis von 2:1 statt der geforderten 3:1 auf. Empfehlung: Erhöhen Sie den Kontrast der Symbole zum Hintergrund, damit sie mit interaktiven Elementen gleichziehen. |
|
9.1.4.12 Textabstand |
nicht bestanden | Mit erhöhtem Textabstand (Zeilenhöhe 1.5 etc.) verschiebt sich die Navigation, überlappt andere Bereiche und verdeckt Inhalte wie das Logo. Empfehlung: Nutzen Sie flexible Layouts (Flexbox/Grid) und relative Maße, damit sich Abstände dynamisch anpassen. |
|
9.1.4.13 Eingeblendeter Inhalt bei Darüberschweben (Hover) oder Fokus |
nicht bestanden | Ein per Hover eingeblendetes Untermenü kann nicht per Tastatur (ESC, Fokusverlust) geschlossen werden. Empfehlung: Implementieren Sie eine Tastatur-Schließfunktion (z. B. ESC, Fokusverlagerung oder erneute Aktivierung). |
|
9.2.1.1 Tastatur |
nicht bestanden | Untermenüs lassen sich weder mit der Tabulatortaste öffnen noch sind sie für Screenreader verfügbar. Empfehlung: Stellen Sie sicher, dass Untermenüs über Tab erreicht und mithilfe von ARIA-Attributen (aria-haspopup, aria-expanded, aria-controls) bekannt gemacht werden. |
|
9.2.1.1 Tastatur |
nicht bestanden | Das Informationsfeld zur Schriftgrößenanpassung lässt sich nur mit der Maus öffnen und wird von Screenreadern nicht wahrgenommen. Empfehlung: Sorgen Sie dafür, dass es auch bei Tastaturfokus eingeblendet wird und mit Assistive Technologies kommuniziert wird. |
|
9.2.1.1 Tastatur |
nicht bestanden | Beim Öffnen des Seitenmenüs bleibt der Tastaturfokus auf dem vorherigen Element im Hintergrund, sodass eine Navigation im Menü unmöglich ist. Empfehlung: Setzen Sie den Fokus programmgesteuert auf das erste interaktive Element im Menü. |
|
9.2.4.1 Blöcke überspringen |
nicht bestanden | Skiplinks fehlen am Seitenanfang, weshalb Tastaturnutzende wiederkehrende Inhalte komplett durchtabben müssen. Empfehlung: Ergänzen Sie einen fokussierbaren Skiplink (z. B. href="#maincontent"), der beim Fokus sichtbar wird. |
|
9.2.4.3 Fokus-Reihenfolge |
nicht bestanden | Beim Einstieg mit der Tastatur wird zuerst die mobile Navigation (z. B. Suchfunktion) fokussiert, bevor der eigentliche Inhaltsbereich erreicht wird. Empfehlung: Arrangieren Sie die Tab-Reihenfolge entsprechend der visuellen Struktur oder entfernen Sie nicht sichtbare Elemente aus der Tab-Folge (tabindex="-1" oder hidden). |
|
9.2.4.3 Fokus-Reihenfolge |
nicht bestanden | Suchergebnisse enthalten pro Eintrag mehrere fokussierbare Elemente (Überschrift, URL), die alle auf dasselbe Ziel verweisen. Empfehlung: Beschränken Sie sich auf ein fokussierbares Linkelement (z. B. Überschrift oder „Weiterlesen“) und deaktivieren Sie weitere Tab-Ziele. |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | Top- und Main-Navigation enthalten jeweils sichtbaren Text und ein title-Attribut mit ähnlichem Inhalt, was bei Screenreadern zu doppelter Ausgabe führt. Empfehlung: Entfernen Sie das redundant informative title-Attribut. |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | Links zur Schriftgrößen- und Kontrastanpassung verfügen über keine sichtbare/programmgesteuerte Beschriftung. Empfehlung: Ergänzen Sie aria-labels oder Alternativtexte (z. B. „Schriftgröße vergrößern“ und „Kontrastmodus aktivieren“). |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | Der Sprachwechsel-Link ist nur mit „EN“ beschriftet und damit weder visuell noch assistiv verständlich. Empfehlung: Verwenden Sie eine aussagekräftige Beschriftung (z. B. „English“) oder ergänzen Sie ein aria-label. |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | Der Link „Karriere“ führt extern, dies ist aber nicht programmgesteuert kenntlich. Empfehlung: Ergänzen Sie einen Textzusatz (z. B. „Karriere (externe Seite)“) oder ein aria-label, das die externe Weiterleitung kommuniziert. |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | News-Listeneinträge sind vollständig in einem <a>-Tag verschachtelt, wodurch Meta-Inhalte als Linktext vorgelesen werden. Empfehlung: Beschränken Sie die Linkfläche auf eine kurze, aussagekräftige Komponente wie Überschrift oder „Mehr erfahren“. |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | Sozial-Medialinks am rechten Rand geben nur den technischen Dateinamen aus. Empfehlung: Fügen Sie sprechende Linktexte oder aria-labels hinzu (z. B. „PDF: Projektbericht 2024“), damit der Zweck klar wird. |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | Download-Links im Fließtext weisen keine Hinweise auf das Dateiformat auf. Empfehlung: Ergänzen Sie sichtbare Hinweise (z. B. „[PDF]“) oder ein aria-label mit Dateiformat und -größe. |
|
9.2.4.4 Linkzweck (im Kontext) |
nicht bestanden | Artikel im Verteiler-Container sind vollständig in einem <a>-Element verschachtelt, wodurch Bild, Überschrift und Beschreibung gemeinsam vorgelesen werden. Empfehlung: Begrenzen Sie die klickbare Fläche auf eine kurze beschriftete Komponente (z. B. „Mehr erfahren“). |
|
9.2.4.7 Fokus sichtbar |
nicht bestanden | Abseits der Hauptnavigation fehlt eine deutlich sichtbare Fokusmarkierung für Links, Buttons und Formularfelder. Empfehlung: Sorgen Sie für einen konsistenten, kontrastreichen Fokusindikator auf der gesamten Seite. |
|
9.2.4.7 Fokus sichtbar |
nicht bestanden | Auf der Suchseite fehlen Fokusindikatoren u. a. beim Druck-Button, der Paginierung und im Footer. Empfehlung: Jeder interaktive Bereich benötigt einen klar sichtbaren Fokuszustand. |
|
9.2.4.7 Fokus sichtbar |
nicht bestanden | Auf der Inhaltsseite verliert sich die Fokussichtbarkeit beim Menüschalter, beim Druckbutton und im Newsbereich. Empfehlung: Implementieren Sie eine durchgängige, sichtbare Fokusmarkierung für alle interaktiven Elemente. |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Haupteinträge der Navigation steuern Untermenüs, ohne diesen Zustand programmatisch als Schalter (role="button"/aria-expanded) zu kennzeichnen. Empfehlung: Ergänzen Sie ARIA-Attribute (aria-haspopup, aria-controls, aria-expanded) oder kennzeichnen Sie die Elemente als role="button". |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Der aktuell aktive Navigationspunkt hat kein aria-current="page", sodass assistive Technologien nicht erkennen können, wo sich Nutzende befinden. Empfehlung: Kennzeichnen Sie den aktiven Link mit aria-current="page". |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Der Schließen-Schalter des Seitenmenüs hat keine programmatische Beschriftung, sodass Screenreader keine Funktion erkennen. Empfehlung: Ergänzen Sie aria-label="Menü schließen" oder eine vergleichbare Textalternative. |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Slider-Schalter für Vor-/Zurück-Folien verfügen über keine programmatisch ermittelbaren Namen. Empfehlung: Ergänzen Sie aria-labels wie "Nächste Folie" und "Vorherige Folie". |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Der Scroll-to-top-Schalter am Seitenende hat keine programmatische Beschriftung. Empfehlung: Versehen Sie ihn mit aria-label="Zum Seitenanfang" oder einer Textalternative. |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Filterüberschriften innerhalb der Suche sind als Schalter (role="button") ausgezeichnet, obwohl sie nur visuelle Überschriften sind. Empfehlung: Entfernen Sie die falschen Rollen und markieren Sie sie ggf. als role="heading" oder <h3>. |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Die Paginierung unter den Suchergebnissen wird zwar als Navigation ausgezeichnet, es fehlen aber aria-labels und eindeutige Beschriftungen für Seiten und "Nächste Seite". Empfehlung: Ergänzen Sie aria-labels (z. B. "Seitennavigation", "Seite 1", "Nächste Seite"). |
|
9.4.1.2 Name, Rolle, Wert |
nicht bestanden | Das Sucheingabefeld im Header besitzt weder ein visible label noch aria-label/-labelledby. Empfehlung: Fügen Sie einen eindeutigen programmgesteuerten Namen hinzu (z. B. aria-label="Suche" oder <label for="...">Suche</label>). |
|
Zusatzkriterien: Deutsche Gebärdensprache / Leichte Sprache Zusätzliche Kommunikation |
nicht bestanden | Hinweise/Literatur in Deutscher Gebärdensprache und Leichter Sprache sowie zugehörige Navigationselemente fehlen vollständig. Empfehlung: Ergänzen Sie die vorgesehenen Links und Informationen zu den wesentlichen Inhalten, Navigation und Barrierefreiheitserklärung jeweils in DGS und Leichter Sprache. |