Startseite

nur-demo.de

https://nur-demo.de/0f9b5002
9 Seiten
3 Formulare
22.05.2026 Erstellt
📋 Dieser Bericht ist der technische Vollbericht. Für Entscheider stehen kompakte Überblicke bereit:
Ansicht wÀhlen
📊 Übersicht
COMPLETED
9
Desktop
đŸ–„ïž Desktop
Mobile
đŸ“± Mobile
Gecrawlt 9 Seiten
Formulare 3
🔒 Security
Risiko: NIEDRIGES RISIKO
10/100 RISIKO
CVE Schwachstellen Web + Backend 0 + 10
Davon kritische CVEs Web + Backend 0 + 6
Globale Probleme 2
URL Reputation CLEAN
Abuse Risiko 0/100
DOM XSS Sinks 0
♿ Barrierefreiheit
GUT
88/100 ZUGÄNGLICHKEIT
WCAG Level 2.2 + Best Practice
VerstĂ¶ĂŸe 161
UnvollstÀndig 69
Bestandene Elemente
bezieht sich auf geprĂŒfte Seiten
8726
⚙ Technologien
ERKANNT
20
CMS WordPress 6.9.4
Betriebssystem Linux (Ubuntu)
Plugins (CMS) 9
Weitere Web Technologien
unabhÀngig vom CMS
20
Backend Software 2
đŸ–šïž
Report exportieren
Direkt drucken oder als PDF speichern
📄 Als PDF speichern
🌐 Start-URL: https://nur-demo.de/0f9b5002
📊 Status: completed
📄 Gecrawlte Seiten: 9
📝 Kontaktformulare: 3
⏰ Generiert: 22.05.2026 18:15:29

📾 Screenshots

đŸ–„ïž Desktop Ansicht

Desktop

đŸ“± Mobile Ansicht

Mobile

💡 Zusammenfassung

đŸ§©
Software & Infrastruktur
📋Kurze EinschĂ€tzung der technischen Infrastruktur und ohne technische Details▶

Die untersuchte Infrastruktur basiert auf einem modernen, gÀngigen Web-CMS (WordPress) und lÀuft auf einem etablierten Linux-Server. Die Kombination aus vielen spezialisierten Plugins deutet auf eine funktionsreiche, aber potenziell komplexe und damit auch anfÀlligere Anwendung hin. GrundsÀtzlich ist die Basis solide, aber die KomplexitÀt und die Vielzahl an Drittanbieter-Komponenten erhöhen das Risiko erheblich.

📋Auflistung der wesentlichen Technologie-Ebenen▶

CMS: WordPress (Version 6.9.4)

  • EinschĂ€tzung: WordPress ist ein sehr verbreitetes System. Die Version ist aktuell, was ein guter erster Punkt ist. Allerdings erfordert die hohe Plugin-Dichte eine sehr sorgfĂ€ltige Wartung, da jede Erweiterung ein potenzielles Schwachstellenrisiko birgt.

Webserver & Backend: Linux (Ubuntu), Apache HTTPD, OpenSSH

  • EinschĂ€tzung: Die Basis ist mit Linux und Apache solide und industrieweit Standard. OpenSSH sorgt fĂŒr sicheren Remote-Zugriff, was ein Pluspunkt ist.

Plugins & Erweiterungen: (z.B. bb-plugin, yoast-seo, woocommerce, gravityforms, etc.)

  • EinschĂ€tzung: Es wurden zahlreiche spezialisierte Plugins gefunden (z.B. fĂŒr SEO, Formulare, Shops). Dies deutet auf eine hohe FunktionalitĂ€t hin. Das Hauptrisiko liegt hier, dass diese vielen Komponenten nicht alle aktuell gehalten werden oder dass einige veraltete oder unsichere Funktionen enthalten.
✅Positive Punkte▶
  • Aktuelle Basis: Die Verwendung von Ubuntu als Betriebssystem und einer relativ aktuellen WordPress-Version ist ein guter Ausgangspunkt fĂŒr die Sicherheit.
  • Sicherer Zugriff: Der Einsatz von OpenSSH deutet auf ein Bewusstsein fĂŒr sichere Fernwartungspraktiken hin.
  • Funktionsvielfalt: Die Kombination der Tools ermöglicht eine sehr umfangreiche und anpassbare Webseite.
🚹Kritische Punkte▶
  • Hohe KomplexitĂ€t und Plugin-Dichte: Dies ist der grĂ¶ĂŸte Kritikpunkt. Jedes zusĂ€tzliche Plugin (insbesondere solche, die nicht direkt zu den Hauptfunktionen gehören) erhöht die AngriffsflĂ€che. Jedes dieser Plugins muss einzeln auf Sicherheit und AktualitĂ€t ĂŒberprĂŒft werden.
  • AbhĂ€ngigkeiten: Die vielen Plugins arbeiten zusammen und können Konflikte verursachen oder durch eine fehlerhafte Interaktion eine SicherheitslĂŒcke öffnen.
  • Wartungsaufwand: Die Menge der installierten Komponenten erfordert einen extrem hohen, kontinuierlichen Wartungsaufwand, um sicherzustellen, dass alle Komponenten aktuell und frei von bekannten Schwachstellen sind.
  • Theme-AbhĂ€ngigkeiten: Die Verwendung von spezifischen Themes und Child-Themes kann zu veralteten oder nicht mehr unterstĂŒtzten Code-Teilen fĂŒhren, was ein Risiko darstellt.
⚠Warnungen (Optional)▶
  • Plugin-Duplizierung: Es wurden mehrere EintrĂ€ge fĂŒr Ă€hnliche oder identische Plugins (z.B. `bbpowerpack` mehrfach, `gAppointments` zweimal) gefunden. Dies deutet auf unĂŒbersichtliche Installationen hin und kann zu unnötigen Konflikten oder unnötiger KomplexitĂ€t fĂŒhren.
♿
Barrierefreiheit

Bewertung

Die Webseite weist mit einem Gesamt-Score von 88 von 100 Punkten einen guten allgemeinen Zustand der Barrierefreiheit auf. Allerdings gibt es signifikante Bereiche, die dringend verbessert werden mĂŒssen, um eine vollstĂ€ndige Barrierefreiheit zu gewĂ€hrleisten.

Kritische Punkte:

  • Farbkontrast und Farbenblindheit: Es gibt erhebliche Probleme mit dem Farbkontrast, die die Lesbarkeit fĂŒr Menschen mit SehbeeintrĂ€chtigungen stark beeintrĂ€chtigen können.
  • Struktur und Semantik: Die korrekte und logische Reihenfolge der Überschriften sowie die semantische Struktur mĂŒssen ĂŒberprĂŒft und angepasst werden.
  • Interaktive Elemente: Probleme mit dem Fokusmanagement (z.B. `tabindex`) und der Touch-ZielgrĂ¶ĂŸe deuten auf Schwierigkeiten bei der Bedienbarkeit fĂŒr Tastaturnutzer und Menschen mit motorischen EinschrĂ€nkungen hin.
  • Linktexte: Einige Links sind nicht eindeutig genug formuliert, was die Orientierung fĂŒr Screenreader-Nutzer erschwert.

Zusammenfassend: Obwohl die Basis gut ist, sind die genannten technischen und semantischen Fehler kritisch und mĂŒssen behoben werden, um die Webseite fĂŒr alle Nutzergruppen nutzbar zu machen.

🏅
URL/IP Reputation
✅ Adresse ohne Beanstandung

Die Adresse ist in keiner Missbrauchs- oder Schadcode-Datenbank verzeichnet. Es bestehen somit grundsĂ€tzlich keine Bedenken fĂŒr die Nutzung der Web-Adresse.

🌐
Netzwerkeinstellungen (DNS) + E-Mail
📋Diagnose und Bewertung in KĂŒrze und ohne technische Details▶

Insgesamt weist die Domain einige wichtige Sicherheits- und ZuverlĂ€ssigkeitslĂŒcken auf, insbesondere im Bereich der E-Mail-ZuverlĂ€ssigkeit und des modernen E-Mail-Schutzes. WĂ€hrend einige grundlegende Punkte (wie die VerfĂŒgbarkeit von Nameservern) stimmen, sind die Einstellungen fĂŒr E-Mail-Authentifizierung (SPF, DKIM, DMARC) noch nicht auf höchstem Niveau. Es besteht ein erhöhtes Risiko, dass E-Mails als Spam eingestuft oder sogar verloren gehen, wenn nichtige Sendestellen beteiligt sind.

✅Positive Punkte▶
  • VerfĂŒgbarkeit der Nameserver: Es gibt mindestens zwei Nameserver hinterlegt, was die grundlegende Ausfallsicherheit gewĂ€hrleistet und die Domain bei einem Ausfall eines Servers gut absichert.
  • IPv4-Erreichbarkeit: Die Domain ist ĂŒber die grundlegende Internetverbindung (IPv4) erreichbar.
🚹Kritische Punkte▶
  • E-Mail-VerfĂŒgbarkeit (Single Point of Failure): Es gibt nur einen einzigen primĂ€ren Eintrag fĂŒr E-Mail-Servereinstellungen (MX-Eintrag). FĂ€llt dieser Server aus, gehen alle eingehenden E-Mails verloren. Hier muss dringend eine Redundanz eingerichtet werden.
  • E-Mail-Authentifizierung (SPF/DKIM/DMARC): Die E-Mail-Sicherheit ist unvollstĂ€ndig eingerichtet. Die Mechanismen, die beweisen, dass eine E-Mail wirklich von Ihnen stammt, sind nicht optimal konfiguriert. Dies erhöht das Risiko, dass Spamfilter die E-Mails blockieren oder der Absender als unseriös eingestuft wird.
  • IPv6-UnterstĂŒtzung fehlt: Die Domain ist derzeit nur ĂŒber die Ă€ltere Internetverbindung (IPv4) erreichbar und unterstĂŒtzt die modernere IPv6-Verbindung nicht.
⚠Warnungen / optionale Punkte▶
  • SicherheitsverschĂ€rfung des E-Mail-Schutzes: Die aktuellen Einstellungen erlauben es, dass verdĂ€chtige E-Mails zwar markiert, aber trotzdem zugestellt werden (statt blockiert zu werden). Dies sollte schrittweise auf ein hĂ€rteres Verbot erhöht werden, um den Schutz zu maximieren.
  • Domain-Sicherheit (CAA-Record): Es fehlt eine zusĂ€tzliche Schutzmaßnahme, die verhindert, dass jemand leicht ein Zertifikat fĂŒr Ihre Domain erstellt, auch wenn Sie dies nicht möchten.
  • DNS-Sicherheit (DNSSEC): Die Verifizierung der höchsten Ebene der DNS-Sicherheit (DNSSEC) konnte nicht bestĂ€tigt werden, was ein theoretisches Risiko bei der Übertragung von DNS-Daten darstellt.

---

Hinweis: Die Diagnose basiert nur auf den abgefragten Daten und kann nicht garantieren, dass alle relevanten EintrÀge existieren.

🔬
Netzwerk-Sicherheit

Bewertung

Die grundlegende Sicherheit der Webseite scheint solide, aber es gibt einige kleinere Punkte, die verbessert werden könnten, um sie noch robuster zu machen. Im Großen und Ganzen ist die Website gut geschĂŒtzt, aber ein paar Nachbesserungen im Bereich der VerifizierungsablĂ€ufe und der VerfĂŒgbarkeit könnten die Sicherheit weiter erhöhen.

đŸ•”ïž URL / IP Reputation

✅
Reputation
CLEAN
Risk Score: 0/100  |  IP: 99.88.77.66

đŸ›Ąïž AbuseIPDB Eintrag ansehen ↗

✅ Keine nennenswerten Meldungen  â€“  Abuse Score: 0/100
Abuse Score0/100
Gesamt-Meldungen0
Eindeutige Melder0
LandDE
ISP / OrgNeue Medien Muennich GmbH
NutzungstypData Center/Web Hosting/Transit
Zuletzt gemeldet–
TOR Exit Node✗ Nein

🌍 Hosting & Domain Informationen

Domainnur-demo.de
IP-Adresse99.88.42.43
Reverse DNSxtraptions42.de
HosterALL-INKL (Hoch)
ProviderWaltraut & Emmering GmbH
DNS ProviderALL-INKL
Mail ProviderALL-INKL
NS ProviderALL-INKL
StandortFrankfurt am Main, Deutschland
OrganisationALL-EXCL GmbH & Co. KG
ASNAS5532 ALL-EXCL GmbH & Co. KG

🔎 DNS EintrĂ€ge

6 EintrÀge gefunden

⚠ DNS-Sicherheitsdiagnose Gesamtbewertung: Warnung

⚠ MX Nur ein MX-Eintrag
Kein Fallback vorhanden. Bei Ausfall des Mailservers gehen eingehende E-Mails verloren. Empfehlung: mindestens zwei MX-EintrĂ€ge mit unterschiedlicher PrioritĂ€t.ℹ️ Hilfe
✅ NS Zwei Nameserver vorhanden
Minimale Redundanz erfĂŒllt.ℹ️ Hilfe
✅ A A-Record vorhanden (IPv4)
Einzelne IPv4-Adresse: 99.88.77.66ℹ️ Hilfe
â„č AAAA Kein AAAA-Record (kein IPv6)
Domain ist nur per IPv4 erreichbar. FĂŒr Zukunftssicherheit empfiehlt sich ein AAAA-Record.ℹ️ Hilfe
⚠ SPF SPF: ~all (softfail) – schwacher Schutz
Nicht autorisierte Absender werden nicht abgewiesen, nur markiert. FĂŒr maximalen Schutz '-all' (hardfail) verwenden.ℹ️ Hilfe
⚠ DKIM DKIM nicht prĂŒfbar / nicht gefunden
Kein DKIM-Record in den gelieferten DNS-Daten (nicht vorhanden oder nicht ermittelbar aufgrund geheimer SchlĂŒssel, bitte prĂŒfen!). Ohne DKIM kann DMARC kein Alignment per DKIM erreichen – nur SPF-Alignment möglich. DKIM fĂŒr alle sendenden Dienste einrichten.ℹ️ Hilfe
⚠ DMARC DMARC: p=none – DMARC vorhanden, aber nur im Monitor-Modus
E-Mails werden bei DMARC-Fehler nicht abgewiesen oder markiert. Kein aktiver Schutz. Nach Auswertung der rua/ruf-Reports schrittweise auf p=quarantine → p=reject erhöhen.ℹ️ Hilfe
â„č CAA Kein CAA-Record
Ohne CAA kann jede Certificate Authority ein TLS-Zertifikat fĂŒr diese Domain ausstellen. Empfehlung: CAA-Record auf verwendete CA(s) beschrĂ€nken.ℹ️ Hilfe
â„č DNSSEC DNSSEC nicht erkennbar
DNSSEC-Status kann aus diesen Daten nicht sicher abgeleitet werden. DNSSEC schĂŒtzt vor DNS-Spoofing/Cache-Poisoning.ℹ️ Hilfe
â„č SPF SPF-Policy: softfail (~all) – nicht gelistete Server markiert, nicht abgewiesen
Mit '~all' werden E-Mails von nicht autorisierten Servern als verdĂ€chtig markiert, aber trotzdem zugestellt. Diese Einstellung ist ein sinnvoller Zwischenschritt beim Einrichten von SPF, sollte langfristig aber auf '-all' verschĂ€rft werden.ℹ️ Hilfe

📧 E-Mail Sicherheit

WEAK – SPF vorhanden, DMARC nur im Monitor-Modus – kein aktiver Schutz📄 Mehr erfahren →
⚠ ~all (Softfail) – Hardfail (-all) empfohlen🔗 Mehr erfahren
⚠ p=none – DMARC vorhanden nur fĂŒr Monitoring, kein aktiver Schutz🔗 Mehr erfahren

đŸ–„ïž Erkannte Software

Software / ServiceCVEsIndikator
OpenSSH 8.9p15SSH-2.0-OpenSSH_8.9p1 Ubuntu-3ubuntu0.14
Apache HTTPD 5HTTP/1.1 503 Service Unavailable Date: Mon, 23 Mar 2026 07:57:49 GMT Server: A...

🔌 Erkannte CMS-Plugins (11, seitenĂŒbergreifend)

PluginVersionCVE StatusCVEsHöchste CVSS
bb-plugin2.10.2✓ Sicher--
bbpowerpack3.5.1✓ Sicher--
bbpowerpack2.42.1✓ Sicher--
bbpowerpack3.0.1✓ Sicher--
borlabs-cookie3.4✓ Sicher--
draw-attention0.6.4✓ Sicher--
email-encoder-bundle?? Version ?--
friendly-captcha0.9.19✓ Sicher--
gAppointments?? Version ?--
gravityforms2.10.1✓ Sicher--
wp-rocket?? Version ?--

⚙ Erkannte Web-Technologien (21, seitenĂŒbergreifend)

Hinweise

  • Technologien sind: Plugins, Scripte, Tools, Schriften
  • Die Technologien, die eine Webseite verwendet, können durch verschiedene technische Analysen erkannt werden.
  • Diese Art der Erkennung ist immer mit Unsicherheiten behaftet.
  • Pro erkannter Technologie wird angegeben: technischer Name, Konfidenz der Erkennung, Erkennungsmethode und URL (wenn vorhanden).
animate.css v3.5.1 ● hoch
🔍 network_requests
🔗 https://nur-demo.de/b7b35716
bb-plugin v2.10.2 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/eb56a319
bb-theme v1.7.19.2 ● hoch
🔍 network_requests, network_analysis
🔗 https://nur-demo.de/1408a42f
bb-theme-child ? ● hoch
🔍 network_requests
🔗 https://nur-demo.de/7b1a1085
bbpowerpack v3.5.1 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/b7b35716
bbpowerpack v2.42.1 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/9baef33a
bbpowerpack v3.0.1 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/b7b35716
borlabs-cookie v3.4 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/8c4671ef
draw-attention v0.6.4 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/90e073e3
email-encoder-bundle v2.5.0 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/9e3763e0
fontawesome v5.15.4 ● hoch
🔍 network_requests
🔗 https://nur-demo.de/cc3f44f7
friendly-captcha v0.9.19 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/2cc2a87a
gappointments ? ● mittel
🔍 network_analysis
🔗 https://nur-demo.de/d49f09ad
gAppointments v1777889780 ● mittel
🔍 content_analysis
gravityforms v2.10.1 ● hoch
🔍 plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/7248da63
jquery v3.7.1 ● hoch
🔍 network_requests
🔗 https://nur-demo.de/9ef121de
OpenStreetMap ? ● mittel
🔍 network_requests, content_analysis
woocommerce ? ● mittel
🔍 content_analysis
WordPress v6.9.4 ● hoch
🔍 cms_detection
wp-rocket ? ● hoch
🔍 network_requests, plugin_detection, content_analysis
🔗 https://nur-demo.de/267197e2
yoast-seo ? ● mittel
🔍 content_analysis

🔬 Netzwerk-Sicherheit

✅ 🔐 TLS Cipher Suites
INFO
Probe 128=alert, Probe 129=alert – kein eindeutiges Ergebnis.
Was bedeutet das?
⚠ 🔁 A-Record Redundanz
WARNUNG
Nur ein A-Record gefunden: 85.13.134.85. Keine Redundanz!
Was bedeutet das?
✅ 📅 Zertifikat / Domain-Ablauf
INFO
Zertifikat gĂŒltig bis 2026-06-27 (noch 52 Tage).
✅ 🔍 HTTP TRACE/TRACK Methode
INFO
TRACE deaktiviert (HTTP 405).
Was bedeutet das?
✅ đŸ·ïž CAA DNS-Eintrag
INFO
CAA-EintrÀge gefunden: ['0 issue "letsencrypt.org"']
Was bedeutet das?
⚠ 🔒 DANE / TLSA-Record
WARNUNG
Keine DANE-HTTPS-Konfiguration (kein TLSA-Eintrag).
Was bedeutet das?
⚠ 📋 CRL / OCSP-URI
WARNUNG
Fehlende URIs: OCSP.
Was bedeutet das?
✅ đŸ•”ïž HTTP-Antwort Analyse (Status 200)
INFO
Die HTTP-Antwort enthĂ€lt sensible Metainformationen – z. B. interne Dateipfade, Servernamen, Versionsnummern oder eingesetzte Technologien. Solche Informationen erleichtern Angreifern die AufklĂ€rung der Systemumgebung und können gezielte Angriffe begĂŒnstigen.
Empfehlung: HTTP-Response-Header und Fehlermeldungen so konfigurieren, dass keine internen Systemdetails nach außen gegeben werden.
Keine auffÀlligen Informationen in der HTTP-Antwort gefunden.

🔌 Software-Scan Ergebnisse

🔧 OpenSSH 8.9p1
⚠ 5 CVEs
Indikator: SSH-2.0-OpenSSH_8.9p1 Ubuntu-3ubuntu0.14
Betriebssystem: Linux (Ubuntu)
CVE Schwachstellen:
CVE-2023-28531 · CVSS: 9.8 · 📅 Veröffentlicht: 17.03.2023
KRITISCH
Bedeutung:

Ein Angreifer, der bereits Zugriff auf einen Zwischenserver in einer Serververbindungskette hat, kann den digitalen SchlĂŒssel einer Chipkarte (Smartcard) missbrauchen, um sich unberechtigterweise bei weiteren internen Systemen anzumelden — obwohl der SchlĂŒssel eigentlich nur fĂŒr bestimmte Ziele gedacht war.

FĂŒr das Unternehmen bedeutet das: Ein einmal kompromittierter Server kann als Sprungbrett genutzt werden, um sich unkontrolliert im internen Netzwerk weiterzubewegen und auf sensible Systeme zuzugreifen, die eigentlich abgesichert sein sollten.

Handlungsempfehlung: OpenSSH auf Version 9.3 oder höher aktualisieren.

CVE-Originaltext: ssh-add in OpenSSH before 9.3 adds smartcard keys to ssh-agent without the intended per-hop destination constraints. The earliest affected version is 8.9.
🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2023-38408 · CVSS: 9.8 · 📅 Veröffentlicht: 20.07.2023
KRITISCH
Bedeutung:

Ein Angreifer, der einen Server kontrolliert, auf den sich ein Mitarbeiter per SSH verbindet, kann ĂŒber diese Verbindung automatisch schĂ€dlichen Code auf dem Computer des Mitarbeiters ausfĂŒhren – ohne dass dieser etwas davon bemerkt.

Das Risiko fĂŒr das Unternehmen ist erheblich: Sobald der Angreifer Code auf dem Rechner des Mitarbeiters ausfĂŒhren kann, hat er potenziell Zugriff auf alle dort gespeicherten Daten, gespeicherten Passwörter und internen Systeme – und kann sich von dort weiter ins Unternehmensnetzwerk vorarbeiten.

CVE-Originaltext: The PKCS#11 feature in ssh-agent in OpenSSH before 9.3p2 has an insufficiently trustworthy search path, leading to remote code execution if an agent is forwarded to an attacker-controlled system. (Cod

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2024-6387 · CVSS: 8.1 · 📅 Veröffentlicht: 01.07.2024
HOCH
Bedeutung:

Ein Angreifer kann von außen – ohne Passwort oder Zugangsdaten – gezielt den SSH-Fernzugriffsdienst des Servers zum Absturz bringen oder im schlimmsten Fall vollstĂ€ndige Kontrolle ĂŒber den Server ĂŒbernehmen, indem er einfach wiederholt einen Anmeldeversuch abbricht.

Gelingt die Übernahme, hat der Angreifer uneingeschrĂ€nkten Zugriff auf alle Daten, Systeme und internen Netzwerke, die von diesem Server erreichbar sind – ohne dass ein Mitarbeiter etwas bemerkt oder sich der Angreifer jemals legitimieren musste.

Das Risiko fĂŒr das Unternehmen ist kritisch: Jeder Server mit einem veralteten OpenSSH, der aus dem Internet erreichbar ist, ist ein potenzielles Einfallstor fĂŒr Datenverlust, Ransomware oder Industriespionage.

CVE-Originaltext: A security regression (CVE-2006-5051) was discovered in OpenSSH's server (sshd). There is a race condition which can lead sshd to handle some signals in an unsafe manner. An unauthenticated, remote at

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2025-26465 · CVSS: 6.8 · 📅 Veröffentlicht: 18.02.2025
MEDIUM
Bedeutung:

Ein Angreifer könnte sich zwischen Ihren Mitarbeiter und einen legitimen Server schalten und dabei vortĂ€uschen, dieser Server zu sein – Ă€hnlich wie jemand, der gefĂ€lschte Briefe in einem Postkasten hinterlegt, um die Kommunikation abzufangen. Gelingt dies, kann der Angreifer ĂŒbertragene Daten wie Passwörter oder vertrauliche Informationen mitlesen oder sogar verĂ€ndern, ohne dass der Mitarbeiter etwas bemerkt. Das Risiko fĂŒr das Unternehmen ist jedoch begrenzt, da der Angriff technisch sehr aufwĂ€ndig ist und der Angreifer vorher gezielt den betroffenen Computer zum Absturz bringen muss – zufĂ€llige Massenangriffe sind daher unwahrscheinlich.

CVE-Originaltext: A vulnerability was found in OpenSSH when the VerifyHostKeyDNS option is enabled. A machine-in-the-middle attack can be performed by a malicious machine impersonating a legit server. This issue occurs

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2023-51385 · CVSS: 6.5 · 📅 Veröffentlicht: 18.12.2023
MEDIUM
Bedeutung:

Ein Angreifer könnte eine manipulierte Datei oder ein prĂ€pariertes Git-Repository bereitstellen, das beim bloßen Öffnen oder Klonen automatisch beliebige Befehle auf dem Rechner des Opfers ausfĂŒhrt – ganz ohne dass der Nutzer etwas VerdĂ€chtiges tut. Dadurch kann der Angreifer das betroffene System vollstĂ€ndig ĂŒbernehmen, Daten stehlen oder als Einstiegspunkt ins Unternehmensnetz nutzen. Besonders gefĂ€hrdet sind Entwickler und IT-Teams, die regelmĂ€ĂŸig mit externen Code-Quellen arbeiten.

CVE-Originaltext: In ssh in OpenSSH before 9.6, OS command injection might occur if a user name or host name has shell metacharacters, and this name is referenced by an expansion token in certain situations. For exampl

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
🔧 Apache HTTPD
⚠ 5 CVEs
Indikator: HTTP/1.1 503 Service Unavailable Date: Mon, 23 Mar 2026 07:57:49 GMT Server: Apache Retry-After: 3600 Vary: User-Agent Connection: close Content-Type: text/html <!DOCTYPE html><html><head> <title>503 Service Temporarily Unavailable</title> <style>body {margin: 0;height: 100vh;background: linear-gradient(...
CVE Schwachstellen:
CVE-2024-38476 · CVSS: 9.8 · 📅 Veröffentlicht: 01.07.2024
KRITISCH
⚠ Relevanz der Schwachstelle: Softwareversion nicht ermittelbar – bitte manuell prĂŒfen
Bedeutung:

Ein Angreifer kann den Webserver dazu bringen, interne Systeme im Firmennetzwerk anzusprechen, die eigentlich von außen nicht erreichbar sein sollten – zum Beispiel Datenbanken oder interne VerwaltungsoberflĂ€chen. ZusĂ€tzlich kann er vertrauliche Daten auslesen oder eigene Befehle auf dem Server ausfĂŒhren, wenn ein dahinterliegendes System manipulierte Antworten liefert.

FĂŒr das Unternehmen bedeutet das: Ein erfolgreicher Angriff kann zum Abfluss sensibler Daten fĂŒhren, interne Systeme kompromittieren und im schlimmsten Fall die vollstĂ€ndige Kontrolle ĂŒber den betroffenen Server ermöglichen – Handlungsbedarf: sofortiges Update auf Apache 2.4.60.

CVE-Originaltext: Vulnerability in core of Apache HTTP Server 2.4.59 and earlier are vulnerably to information disclosure, SSRF or local script execution via backend applications whose response headers are malicious or

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2024-38474 · CVSS: 9.8 · 📅 Veröffentlicht: 01.07.2024
KRITISCH
⚠ Relevanz der Schwachstelle: Softwareversion nicht ermittelbar – bitte manuell prĂŒfen
Bedeutung:

Ein Angreifer kann auf dem Webserver versteckte Skripte ausfĂŒhren, die eigentlich nur intern genutzt werden und ĂŒber das Internet gar nicht erreichbar sein sollten – oder er kann deren Quellcode lesen und so interne Logik, Passwörter oder DatenbankzugĂ€nge ausspĂ€hen. Das Risiko fĂŒr das Unternehmen ist ein unbefugter Zugriff auf sensible Serverfunktionen und möglicherweise die Offenlegung vertraulicher Konfigurationsdaten. Die Lösung ist ein Update des Webservers auf Version 2.4.60, das dieses Problem behebt.

CVE-Originaltext: Substitution encoding issue in mod_rewrite in Apache HTTP Server 2.4.59 and earlier allows attacker to execute scripts in directories permitted by the configuration but not directly reachable by any U

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2025-23048 · CVSS: 9.1 · 📅 Veröffentlicht: 10.07.2025
KRITISCH
⚠ Relevanz der Schwachstelle: Softwareversion nicht ermittelbar – bitte manuell prĂŒfen
Bedeutung:

Ein Angreifer, der legitimen Zugang zu einem internen Bereich Ihres Webservers hat (z. B. Bereich A), kann durch einen technischen Trick auch auf einen anderen, eigentlich gesperrten Bereich desselben Servers zugreifen (z. B. Bereich B) – ohne dafĂŒr die nötigen Zugangsnachweise zu besitzen. Das Risiko fĂŒr das Unternehmen: Interne Trennungen zwischen verschiedenen Mandanten, Abteilungen oder Sicherheitszonen werden umgangen, sodass ein Nutzer mit eingeschrĂ€nkten Rechten an vertrauliche Daten gelangen kann, fĂŒr die er keine Berechtigung hat.

CVE-Originaltext: In some mod_ssl configurations on Apache HTTP Server 2.4.35 through to 2.4.63, an access control bypass by trusted clients is possible using TLS 1.3 session resumption. Configurations are affected wh

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2024-38475 · CVSS: 9.1 · 📅 Veröffentlicht: 01.07.2024
KRITISCH
⚠ Relevanz der Schwachstelle: Softwareversion nicht ermittelbar – bitte manuell prĂŒfen
Bedeutung:

Ein Angreifer kann ĂŒber manipulierte Web-Adressen auf Dateien des Webservers zugreifen, die eigentlich nicht öffentlich erreichbar sein sollten – zum Beispiel Konfigurationsdateien, Quellcode oder interne Skripte. Im schlimmsten Fall kann der Angreifer dadurch auch eigenen Schadcode auf dem Server ausfĂŒhren und die komplette Kontrolle ĂŒbernehmen. FĂŒr das Unternehmen besteht das Risiko eines Datenabflusses sensibler Informationen sowie einer vollstĂ€ndigen Kompromittierung des betroffenen Webservers.

CVE-Originaltext: Improper escaping of output in mod_rewrite in Apache HTTP Server 2.4.59 and earlier allows an attacker to map URLs to filesystem locations that are permitted to be served by the server but are not int

🔬 Anleitung: Diagnose & Abhilfe Anzeigen
CVE-2025-58098 · CVSS: 8.3 · 📅 Veröffentlicht: 05.12.2025
HOCH
⚠ Relevanz der Schwachstelle: Softwareversion nicht ermittelbar – bitte manuell prĂŒfen
Bedeutung:

Ein Angreifer kann ĂŒber eine manipulierte Web-Anfrage eigene Befehle auf dem Server ausfĂŒhren lassen – ohne Anmeldung und ohne dass es auf den ersten Blick auffĂ€llt. Dadurch kann er Dateien auslesen, löschen oder verĂ€ndern, andere Systeme angreifen oder den Server als Einfallstor ins interne Netzwerk nutzen. FĂŒr das Unternehmen bedeutet das: Datenverlust, Betriebsunterbrechung und möglicher Zugriff auf vertrauliche Inhalte sind reale Szenarien, solange der Webserver nicht aktualisiert wird.

CVE-Originaltext: Apache HTTP Server 2.4.65 and earlier with Server Side Includes (SSI) enabled and mod_cgid (but not mod_cgi) passes the shell-escaped query string to #exec cmd="..." directives. This issue affects Ap

🔬 Anleitung: Diagnose & Abhilfe Anzeigen

🔌 Barrierefreiheit: Startseite

♿

Zusatzbericht verfĂŒgbar

Globale BarrierefreiheitsprĂŒfung – Startseite

🔍 Beispielbericht einer beliebigen Website

đŸ‘ïž

Farbenblindheits-PrĂŒfung

Simulation verschiedener SehschwÀchen (Deuteranopie, Protanopie u.a.)

🎹

KontrastprĂŒfung

WCAG-konforme Analyse aller Farb- und Textkombinationen

đŸ—ș

Problem-Heatmaps

Visuelle Kennzeichnung kritischer Bereiche direkt auf der Seite

💡

LösungsvorschlÀge

Konkrete Empfehlungen zur Behebung gefundener Probleme

🏠 Startseite — https://nur-demo.de/0f9b5002
EnthĂ€lt seitenĂŒbergreifende Ergebnisse (CMS, Plugins, Technologien, WAF)
START
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 7
Technologien 17
Scan-Tiefe normal
📝 CMS erkannt (gilt fĂŒr alle Seiten): WordPress 6.9.4

🔌 Plugins: 7 erkannt

PluginVersionCVE StatusCVEsHöchste CVSS
bb-plugin 2.10.2 ✓ Sicher - -
bbpowerpack 3.5.1 ✓ Sicher - -
borlabs-cookie 3.4 ✓ Sicher - -
email-encoder-bundle ? ? Version ? - -
gAppointments ? ? Version ? - -
gravityforms 2.10.1 ✓ Sicher - -
wp-rocket ? ? Version ? - -
⚙ Erkannte Technologien (16)
animate.css v3.5.1 ● hoch
🔍 network_requests
🔗 https://nur-demo.de/e4a5265f
bb-plugin v2.10.2 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
bb-theme v1.7.19.2 ● hoch
🔍 network_requests, network_analysis
🔗 https://nur-demo.de/e4a5265f
bb-theme-child ? ● hoch
🔍 network_requests
🔗 https://nur-demo.de/e4a5265f
bbpowerpack v3.5.1 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
borlabs-cookie v3.4 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
email-encoder-bundle v2.5.0 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
fontawesome v5.15.4 ● hoch
🔍 network_requests
🔗 https://nur-demo.de/e4a5265f
gAppointments v1777889780 ● mittel
🔍 content_analysis
gappointments ? ● mittel
🔍 network_analysis
🔗 https://nur-demo.de/e4a5265f
gravityforms v2.10.1 ● hoch
🔍 plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
jquery v3.7.1 ● hoch
🔍 network_requests
🔗 https://nur-demo.de/13210c4b
woocommerce ? ● mittel
🔍 content_analysis
WordPress v6.9.4 ● hoch
🔍 cms_detection
wp-rocket ? ● hoch
🔍 network_requests, plugin_detection, content_analysis
🔗 https://nur-demo.de/e4a5265f
yoast-seo ? ● mittel
🔍 content_analysis
animate.css 3.5.1bb-plugin 2.10.2bb-theme 1.7.19.2bb-theme-childbbpowerpack 3.5.1borlabs-cookie 3.4email-encoder-bundle 2.5.0fontawesome 5.15.4gAppointments 1777889780gappointmentsgravityforms 2.10.1jquery 3.7.1woocommerceWordPress 6.9.4wp-rocketyoast-seo

⚠ Sonstige seitenweite Schwachstellen (3) â„čCross-Site Scripting (XSS) ermöglicht Angreifern, schĂ€dlichen JavaScript-Code in Webseiten einzuschleusen, der dann im Browser anderer Nutzer ausgefĂŒhrt wird. Dadurch können Sitzungsdaten gestohlen, Seiteninhalte manipuliert oder Nutzer auf gefĂ€hrliche Seiten umgeleitet werden. 🔗

Hilfestellung

  • Sonstige Schwachstellen sind allgemein festgestellte Probleme, die oft nicht in der o.g. CVE-Datenbank aufgelistet sind.
  • Die Schwachstellen sind oft nicht technologieabhĂ€ngig, sondern können beispielsweise jeden (falsch konfigurierten) Web Server oder unzureichend abgesicherte Programm-Logik betreffen
Unsicheres Cookie – borlabs-cookie
INFO
đŸȘ borlabs-cookie (Borlabs Cookie Banner - Verwaltung der Einwilligungsentscheidung)
  • INFO: HttpOnly flag fehlt - JavaScript kann Cookie auslesen (gleiche Domain)

📝 Formular-Analyse

Hilfestellung

  • Formulare bieten eine AngriffsflĂ€che, weil sie potentiell sensible Daten entgegennehmen. ZusĂ€tzlich eröffnet die Datenverarbeitung aus technischen GrĂŒnden eine AngriffsflĂ€che.
  • Insbesondere Javascript-Codes (nachfolgend als JS Handler bezeichnet) ist anfĂ€llig fĂŒr Attacken.
  • Es folgt eine Liste der gefundenen Formulare, jeweils mit Details pro Formular.
  • FĂŒr Formulare, die unsicher sein könnten, wird ein entsprechender Warn-Hinweis ausgegeben.
Formulare gefunden 1
JS Handler 0

Formular 1

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s)

Formulare mit Suchfeldern (type="search") können potenzielle Risiken bergen:
  • Reflected XSS: Nicht korrekt escaped Sucheingaben können als Skript im HTML reflektiert werden.
  • SQL-Injection: Werden Sucheingaben ungefiltert in Datenbankabfragen verwendet, drohen Datenlecks oder Manipulation.
  • Path-/Header-Injection: Eingaben können in URLs, HTTP-Headern oder Dateipfaden missbraucht werden.
  • Denial of Service: Komplexe oder sehr lange Suchanfragen können Backend-Ressourcen ĂŒberlasten (z. B. Regex-ReDoS).
  • Informationsoffenbarung: Fehlermeldungen bei ungĂŒltigen Suchanfragen können interne Strukturen preisgeben.
Eingaben sollten serverseitig validiert, escaped und — bei Datenbankzugriffen — ausschließlich ĂŒber parametrisierte Abfragen verarbeitet werden.

♿ Barrierefreiheit (Accessibility)

🏠 Startseite: https://nur-demo.de/0f9b5002 🔗
START
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
📄 Ab hier folgen Ergebnisse fĂŒr weitere Einzelseiten
Die folgenden Befunde sind spezifisch fĂŒr die jeweilige Seite/URL
🔗 https://nur-demo.de/b3234a35 URL 2
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 8
Technologien 19
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002

🔌 Plugins: 1 erkannt (7 weitere ausgeblendet)

PluginVersionCVE StatusCVEsHöchste CVSS
draw-attention 0.6.4 ✓ Sicher - -
⚙ Erkannte Technologien (18)
draw-attention v0.6.4 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
OpenStreetMap ? ● mittel
🔍 network_requests, content_analysis
🔁 16 Technologien ausgeblendet (bereits auf vorherigen Seiten erkannt) –
draw-attention 0.6.4OpenStreetMap

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 1
JS Handler 0

Formular 1

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/b3234a35 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
🔗 https://nur-demo.de/46ed0326 URL 3
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 8
Technologien 18
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002

🔌 Plugins: 1 erkannt (7 weitere ausgeblendet)

PluginVersionCVE StatusCVEsHöchste CVSS
friendly-captcha 0.9.19 ✓ Sicher - -
⚙ Erkannte Technologien (17)
friendly-captcha v0.9.19 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
🔁 16 Technologien ausgeblendet (bereits auf vorherigen Seiten erkannt) –
friendly-captcha 0.9.19

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 2
JS Handler 1

Formular 1

Methode POST
Action /kontakt/telefontermin/#gf_2
JS Handler ✓ Ja
Felder 38
HTML-Snippet
<form action="/kontakt/telefontermin/#gf_2" class="contactForm" data-formid="2" enctype="multipart/form-data" id="gform_2" method="post" novalidate="" target="gform_ajax_frame_2">
<div class="gform-bo...
Felder-Details
tagtypenameidplaceholdertitle
inputcheckboxinput_2.1choice_2_2_1
inputcheckboxinput_2.2choice_2_2_2
inputcheckboxinput_2.3choice_2_2_3
inputcheckboxinput_2.4choice_2_2_4
inputcheckboxinput_2.5choice_2_2_5
inputcheckboxinput_2.6choice_2_2_6
inputcheckboxinput_2.7choice_2_2_7
selectinput_8input_2_8
selectinput_9input_2_9
inputtextinput_7.3input_2_7_3Vorname *
inputtextinput_7.6input_2_7_6Nachname *
inputtextinput_12input_2_12Kommune / Kommunales Unternehmen *
inputtextinput_11input_2_11Funktion
inputtelinput_14input_2_14Telefon *
inputemailinput_17input_2_17E-Mail *
inputtextinput_32input_2_32Webseite
selectinput_28input_2_28
inputhiddeninput_27[date]input_2_27
inputhiddeninput_27[time]input_2_27_time
inputhiddeninput_27[cost]
inputtextinput_38input_2_38
inputtextinput_39input_2_39
textareainput_24input_2_24Ihre Nachricht
inputcheckboxinput_25.1choice_2_25_1
inputhiddenfrc-captcha-solution
inputsubmitgform_submit_button_2
inputhiddengform_ajax
inputhiddengform_submission_method
inputhiddengform_themegform_theme_2
inputhiddengform_style_settingsgform_style_settings_2
inputhiddenis_submit_2
inputhiddengform_submit
inputhiddengform_currency
inputhiddengform_unique_id
inputhiddenstate_2
inputhiddengform_target_page_number_2gform_target_page_number_2
inputhiddengform_source_page_number_2gform_source_page_number_2
inputhiddengform_field_values
Formular-Probleme:
⚠ Kein CSRF-Token gefunden - Cross-Site Request Forgery möglich – â„č Weitere Informationen
⚠ Keine clientseitige Input-Validierung (pattern/maxlength) – â„č Weitere Informationen

Formular 2

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/46ed0326 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
🔗 https://nur-demo.de/ce08bd81 URL 4
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 8
Technologien 18
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002
🔌 Plugins: Siehe https://nur-demo.de/46ed0326
⚙ Erkannte Technologien: Siehe https://nur-demo.de/46ed0326

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 2
JS Handler 1

Formular 1

Methode POST
Action /kontakt/angebot/#gf_3
JS Handler ✓ Ja
Felder 47
HTML-Snippet
<form action="/kontakt/angebot/#gf_3" class="contactForm" data-formid="3" enctype="multipart/form-data" id="gform_3" method="post" novalidate="" target="gform_ajax_frame_3">
<div class="gform-body gfo...
Felder-Details
tagtypenameidplaceholdertitle
inputcheckboxinput_2.1choice_3_2_1
inputcheckboxinput_2.2choice_3_2_2
inputcheckboxinput_2.3choice_3_2_3
inputcheckboxinput_2.4choice_3_2_4
inputcheckboxinput_2.5choice_3_2_5
inputcheckboxinput_2.6choice_3_2_6
inputcheckboxinput_2.7choice_3_2_7
inputtextinput_29input_3_29MM.YYYY
selectinput_8input_3_8
selectinput_9input_3_9
inputtextinput_7.3input_3_7_3Vorname *
inputtextinput_7.6input_3_7_6Nachname *
inputtextinput_12input_3_12Kommune / Kommunales Unternehmen *
inputtextinput_32.1input_3_32_1Straße *
inputtextinput_32.2input_3_32_2Hausnummer *
inputtextinput_32.3input_3_32_3Ort *
inputhiddeninput_32.4input_3_32_4
inputtextinput_32.5input_3_32_5PLZ *
inputhiddeninput_32.6input_3_32_6
inputtextinput_11input_3_11Funktion
inputtelinput_14input_3_14Telefon *
inputemailinput_17input_3_17E-Mail *
inputtextinput_35input_3_35Webseite
inputcheckboxinput_23.1choice_3_23_1
inputcheckboxinput_30.1choice_3_30_1
inputcheckboxinput_30.2choice_3_30_2
inputcheckboxinput_30.3choice_3_30_3
inputcheckboxinput_30.4choice_3_30_4
inputcheckboxinput_30.5choice_3_30_5
inputcheckboxinput_30.6choice_3_30_6
inputtextinput_31input_3_31
textareainput_24input_3_24Ihre Nachricht
inputcheckboxinput_25.1choice_3_25_1
inputhiddenfrc-captcha-solution
inputsubmitgform_submit_button_3
inputhiddengform_ajax
inputhiddengform_submission_method
inputhiddengform_themegform_theme_3
inputhiddengform_style_settingsgform_style_settings_3
inputhiddenis_submit_3
inputhiddengform_submit
inputhiddengform_currency
inputhiddengform_unique_id
inputhiddenstate_3
inputhiddengform_target_page_number_3gform_target_page_number_3
inputhiddengform_source_page_number_3gform_source_page_number_3
inputhiddengform_field_values
Formular-Probleme:
⚠ Kein CSRF-Token gefunden - Cross-Site Request Forgery möglich – â„č Weitere Informationen
⚠ Keine clientseitige Input-Validierung (pattern/maxlength) – â„č Weitere Informationen

Formular 2

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/ce08bd81 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
🔗 https://nur-demo.de/c6352b47 URL 5
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 7
Technologien 17
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002
🔌 Plugins: Siehe https://nur-demo.de/0f9b5002
⚙ Erkannte Technologien: Siehe https://nur-demo.de/0f9b5002

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 1
JS Handler 0

Formular 1

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/c6352b47 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
🔗 https://nur-demo.de/c613629b URL 6
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 7
Technologien 17
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002

🔌 Plugins: 1 erkannt (6 weitere ausgeblendet)

PluginVersionCVE StatusCVEsHöchste CVSS
bbpowerpack
Achtung: Plugin mit anderer Version als auf voriger Seite!
2.42.1 ✓ Sicher - -
⚙ Erkannte Technologien (16)
bbpowerpack v2.42.1 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
🔁 15 Technologien ausgeblendet (bereits auf vorherigen Seiten erkannt) –
bbpowerpack 2.42.1

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 1
JS Handler 0

Formular 1

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/c613629b 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
🔗 https://nur-demo.de/5fc74d1b URL 7
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 7
Technologien 17
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002
🔌 Plugins: Siehe https://nur-demo.de/0f9b5002
⚙ Erkannte Technologien: Siehe https://nur-demo.de/0f9b5002

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 1
JS Handler 0

Formular 1

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/5fc74d1b 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
🔗 https://nur-demo.de/228f8a6c URL 8
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 7
Technologien 17
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002

🔌 Plugins: 1 erkannt (6 weitere ausgeblendet)

PluginVersionCVE StatusCVEsHöchste CVSS
bbpowerpack
Achtung: Plugin mit anderer Version als auf voriger Seite!
3.0.1 ✓ Sicher - -
⚙ Erkannte Technologien (16)
bbpowerpack v3.0.1 ● hoch
🔍 network_requests, plugin_detection, network_analysis, content_analysis
🔗 https://nur-demo.de/e4a5265f
🔁 15 Technologien ausgeblendet (bereits auf vorherigen Seiten erkannt) –
bbpowerpack 3.0.1

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 1
JS Handler 0

Formular 1

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/228f8a6c 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
🔗 https://nur-demo.de/fc834e02 URL 9
Risiko LOW
Risk Score 0
CVEs gefunden 0
Plugins 8
Technologien 18
Scan-Tiefe normal
📝 CMS: Siehe https://nur-demo.de/0f9b5002
🔌 Plugins: Siehe https://nur-demo.de/46ed0326
⚙ Erkannte Technologien: Siehe https://nur-demo.de/46ed0326

â„č 3 Schwachstellen analog zu einer vorherigen Seite – ausgeblendet

📝 Formular-Analyse

Hilfestellung ▶ Details

Formulare gefunden 2
JS Handler 1

Formular 1

Methode POST
Action /kontakt/anfrage/#gf_1
JS Handler ✓ Ja
Felder 41
HTML-Snippet
<form action="/kontakt/anfrage/#gf_1" class="contactForm" data-formid="1" enctype="multipart/form-data" id="gform_1" method="post" novalidate="" target="gform_ajax_frame_1">
<div class="gform-body gfo...
Felder-Details
tagtypenameidplaceholdertitle
inputcheckboxinput_2.1choice_1_2_1
inputcheckboxinput_2.2choice_1_2_2
inputcheckboxinput_2.3choice_1_2_3
inputcheckboxinput_2.4choice_1_2_4
inputcheckboxinput_2.5choice_1_2_5
inputcheckboxinput_2.6choice_1_2_6
inputcheckboxinput_2.7choice_1_2_7
selectinput_8input_1_8
selectinput_9input_1_9
inputtextinput_7.3input_1_7_3Vorname *
inputtextinput_7.6input_1_7_6Nachname *
inputtextinput_12input_1_12Kommune / Kommunales Unternehmen *
inputtextinput_11input_1_11Funktion
inputtelinput_14input_1_14Telefon
inputtextinput_16input_1_16Zu diesem Zeitpunkt bin ich telefonisch erreichbar
inputemailinput_17input_1_17E-Mail *
inputtextinput_30input_1_30Webseite
inputcheckboxinput_23.1choice_1_23_1
inputcheckboxinput_26.1choice_1_26_1
inputcheckboxinput_26.2choice_1_26_2
inputcheckboxinput_26.3choice_1_26_3
inputcheckboxinput_26.4choice_1_26_4
inputcheckboxinput_26.5choice_1_26_5
inputcheckboxinput_26.6choice_1_26_6
inputtextinput_27input_1_27
textareainput_24input_1_24Ihre Nachricht
inputcheckboxinput_25.1choice_1_25_1
inputhiddenfrc-captcha-solution
inputsubmitgform_submit_button_1
inputhiddengform_ajax
inputhiddengform_submission_method
inputhiddengform_themegform_theme_1
inputhiddengform_style_settingsgform_style_settings_1
inputhiddenis_submit_1
inputhiddengform_submit
inputhiddengform_currency
inputhiddengform_unique_id
inputhiddenstate_1
inputhiddengform_target_page_number_1gform_target_page_number_1
inputhiddengform_source_page_number_1gform_source_page_number_1
inputhiddengform_field_values
Formular-Probleme:
⚠ Kein CSRF-Token gefunden - Cross-Site Request Forgery möglich – â„č Weitere Informationen
⚠ Keine clientseitige Input-Validierung (pattern/maxlength) – â„č Weitere Informationen

Formular 2

Methode GET
Action https://nur-demo.de
JS Handler ✗ Nein
Felder 1
HTML-Snippet
<form action="https://nur-demo.de" aria-label="Search form" class="pp-search-form" method="get" role="search">
<div class="pp-search-form__container">
<label class="pp-screen-reader-text" for="...
Felder-Details
tagtypenameidplaceholdertitle
inputsearchspp-search-form__input-03u61aeb4lfpSucheSearch
â„č Hinweis: Suchfeld(er) im Formular (s) ▶ Details

♿ Barrierefreiheit (Accessibility)

🏠 Seite: https://nur-demo.de/fc834e02 🔗
WCAG 2.2+ (AA) & Best Practices    🔮 30 Probleme    ⚠ 3 unvollstĂ€ndig    ✅ 50 Regeln bestanden    41 nicht anwendbar    â–Œ Details ausblenden

🔮 VerstĂ¶ĂŸe (5)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
Wichtig WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span>
⚠ Element hat unzureichenden Farbkontrast von 1.42 (Vordergrundfarbe: #ccdae5, Hintergrundfarbe: #ffffff, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: bold). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<span class="fl-button-text">ZurĂŒck</span>
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 8.3ptpt (11px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat unzureichenden Farbkontrast von 1.46 (Vordergrundfarbe: #ffffff, Hintergrundfarbe: #dddc00, SchriftgrĂ¶ĂŸe: 11.3ptpt (15px), Schriftgewicht: normal). Erwartetes KontrastverhĂ€ltnis: 4.5:1
Überschriftenebenen sollten nur um eine Stufe ansteigen
MODERATE
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Überschriftenhierarchie ist ungĂŒltig
Links mĂŒssen einen erkennbaren Text haben
Wichtig WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a href="/kontakt/" target="_self"> <i class="fas fa-user-check" aria-hidden="true"></i> </a>
⚠ Element hat keinen fĂŒr Screenreader sichtbaren Text / Das aria-label-Attribut existiert nicht oder ist leer
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
Wichtig
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Element hat einen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
Wichtig WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (82.1px × 12px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 20.4px statt mindestens 24px.
<a href="https://nur-demo.de/energiemanagement-iso-50001/" target="_blank" rel="noopener">Energiemanagement – DIN EN ISO 50001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (245.2px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.
<a href="https://nur-demo.de/qualitaetsmanagement-iso-9001/" target="_blank" rel="noopener">QualitĂ€tsmanagement – DIN EN ISO 9001</a>
⚠ Ziel hat unzureichende GrĂ¶ĂŸe (244.3px × 17px, mindestens 24px × 24px erforderlich) / Ziel hat unzureichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 18px statt mindestens 24px.

⚠ UnvollstĂ€ndig / Manuell prĂŒfen (1)

Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
PRÜFEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="fl-heading-text">Allgemeine Anfrage</span>
⚠ Die Hintergrundfarbe des Elements konnte aufgrund eines Pseudo-Elements nicht ermittelt werden
<span class="number">3</span>
⚠ Der Elementinhalt ist zu kurz, um festzustellen, ob es sich um tatsĂ€chlichen Textinhalt handelt
<textarea name="input_24" id="input_1_24" class="textarea medium" tabindex="128" placeholder="Ihre Nachricht" aria-invalid="false" rows="10" cols="50"
⚠ Die Hintergrundfarbe des Elements konnte nicht ermittelt werden, da es teilweise von einem anderen Element verdeckt wird
Elemente dĂŒrfen nur unterstĂŒtzte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstĂŒtzt 🔗 Hilfeseite
Problem

Wenn ein ARIA-Attribut fĂŒr die gewĂ€hlte Rolle nicht erlaubt ist, ignorieren Screenreader es möglicherweise oder geben falsche Informationen aus.

ErklÀrung

Jede ARIA-Rolle definiert, welche ARIA-Attribute sie unterstĂŒtzt. Nur erlaubte Attribute liefern sinnvolle Informationen an Hilfstechnologien.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="button" nicht vorgesehen -->
<div role="button" aria-checked="true">OK</div>

<!-- Gut: passende Rolle fĂŒr das Attribut -->
<div role="checkbox" aria-checked="true">Zustimmen</div>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Die ARIA-Rolle sollte fĂŒr das Element geeignet sein
BESTANDEN
Stellt sicher, dass das role-Attribut einen geeigneten Wert fĂŒr das Element hat 🔗 Hilfeseite
ErklÀrung

ARIA-Rollen definieren die semantische Bedeutung eines Elements fĂŒr Screenreader. Wird eine ungĂŒltige oder fĂŒr das Element unzulĂ€ssige Rolle angegeben, können assistive Technologien das Element falsch interpretieren oder ignorieren.

Abhilfe

Nur gĂŒltige ARIA-Rollen gemĂ€ĂŸ der WAI-ARIA-Spezifikation verwenden. PrĂŒfen, ob die Rolle fĂŒr den jeweiligen Elementtyp erlaubt ist (z. B. ist role="button" auf einem

möglich, aber role="heading" auf einem erfordert zusÀtzlich aria-level).

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ ARIA-Rolle ist fĂŒr das angegebene Element zulĂ€ssig
ARIA-Befehle mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jede ARIA-SchaltflĂ€che, jeder Link und jeder MenĂŒeintrag einen zugĂ€nglichen Namen hat 🔗 Hilfeseite
Problem

Interaktive Elemente ohne Namen sind fĂŒr Screenreader-Nutzer nutzlos, weil nicht klar ist, was sie bewirken.

ErklÀrung

Buttons, Links und MenĂŒeintrĂ€ge, die ĂŒber ARIA-Rollen definiert sind, benötigen zwingend einen erkennbaren Namen – durch Textinhalt, aria-label oder aria-labelledby.

Abhilfe

<!-- Schlecht -->
<span role="button"></span>

<!-- Gut: Textinhalt -->
<span role="button">Speichern</span>

<!-- Gut: aria-label -->
<span role="button" aria-label="Dialog schließen">✕</span>

<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
ARIA-Attribute mĂŒssen gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute gemĂ€ĂŸ der Spezifikation der Elementrolle verwendet werden 🔗 Hilfeseite
Problem

Falsch eingesetzte ARIA-Attribute können bei Hilfstechnologien zu verwirrenden oder falschen Ansagen fĂŒhren.

ErklÀrung

Die WAI-ARIA-Spezifikation legt fĂŒr jede Rolle fest, wie Attribute zu verwenden sind (z. B. welche Werte gĂŒltig sind). Abweichungen davon machen das Verhalten unvorhersehbar.

Abhilfe

<!-- Schlecht: aria-expanded hat keinen booleschen Wert -->
<button aria-expanded="yes">MenĂŒ</button>

<!-- Gut -->
<button aria-expanded="true">MenĂŒ</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Veraltete ARIA-Rollen dĂŒrfen nicht verwendet werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente keine veralteten Rollen verwenden 🔗 Hilfeseite
Problem

Veraltete ARIA-Rollen werden von modernen Browsern und Screenreadern möglicherweise nicht mehr korrekt interpretiert.

ErklÀrung

Manche ARIA-Rollen wie directory wurden aus dem Standard entfernt. Ihre Verwendung kann zu inkonsistentem Verhalten fĂŒhren.

Abhilfe

Veraltete Rollen durch aktuelle Entsprechungen ersetzen. Die aktuellen Rollen sind in der WAI-ARIA-Spezifikation dokumentiert.

<!-- Veraltet -->
<ul role="directory">...</ul>

<!-- Aktuell -->
<ul role="list">...</ul>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
aria-hidden="true" darf nicht am document body gesetzt sein
BESTANDEN WCAG 1.3.1, WCAG 4.1.2
Stellt sicher, dass aria-hidden="true" nicht am document body gesetzt ist 🔗 Hilfeseite
Problem

Wird aria-hidden="true" am <body> gesetzt, ist die gesamte Seite fĂŒr Screenreader unsichtbar – Nutzer können dann gar nichts mehr lesen.

ErklÀrung

aria-hidden versteckt Elemente vor Hilfstechnologien. Am body angewandt bedeutet das: die komplette Seite wird ausgeblendet.

Abhilfe

aria-hidden="true" vom <body> entfernen. Falls nur ein bestimmter Bereich versteckt werden soll, das Attribut gezielt auf dieses Element setzen.

<!-- Falsch -->
<body aria-hidden="true">

<!-- Richtig: nur einzelne Bereiche verstecken -->
<div aria-hidden="true">Dekoratives Element</div>

<body class="wp-singular page-template-default page page-id-4316 page-child parent-pageid-2792 wp-theme-bb-theme wp-child-theme-bb-theme-child fl-buil
⚠ Kein aria-hidden-Attribut am document body vorhanden
Aria-hidden-Elemente dĂŒrfen nicht fokussierbar sein und keine fokussierbaren Elemente enthalten
BESTANDEN WCAG 4.1.2
Stellt sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten 🔗 Hilfeseite
Problem

Ein Element das mit aria-hidden versteckt ist, aber per Tastatur fokussiert werden kann, erzeugt einen unsichtbaren Fokus – Tastaturnutzer verlieren die Orientierung.

ErklÀrung

Wenn ein Element fĂŒr Hilfstechnologien ausgeblendet ist, sollte es auch nicht per Tastatur erreichbar sein. Sonst entsteht ein sog. "Fokus-Trap" ins Nichts.

Abhilfe

<!-- Schlecht: Button ist per Tastatur erreichbar, aber fĂŒr AT unsichtbar -->
<div aria-hidden="true">
  <button>Klick mich</button>
</div>

<!-- Gut: focusierbare Elemente zusÀtzlich mit tabindex=-1 belegen -->
<div aria-hidden="true">
  <button tabindex="-1">Klick mich</button>
</div>

<i class="fas fa-user-check" aria-hidden="true"></i>
<svg class="frc-icon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
Elemente dĂŒrfen nur erlaubte ARIA-Attribute verwenden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass ARIA-Attribute fĂŒr die Rolle eines Elements nicht verboten sind 🔗 Hilfeseite
Problem

Verbotene ARIA-Attribute erzeugen fehlerhafte ZustÀnde in der Barrierefreiheitsstruktur und können Screenreader verwirren.

ErklÀrung

FĂŒr jede ARIA-Rolle gibt es eine Liste explizit verbotener Attribute. Diese dĂŒrfen nicht zusammen mit der jeweiligen Rolle verwendet werden.

Abhilfe

<!-- Schlecht: aria-checked ist fĂŒr role="link" verboten -->
<a href="#" role="link" aria-checked="true">Link</a>

<!-- Gut: Attribut entfernen oder andere Rolle wÀhlen -->
<a href="#">Link</a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
Erforderliche ARIA-Attribute mĂŒssen vorhanden sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute besitzen 🔗 Hilfeseite
Problem

Fehlen Pflichtattribute, kann ein Screenreader den Zustand des Elements nicht korrekt ausgeben (z. B. ob eine Checkbox angehakt ist).

ErklÀrung

Manche ARIA-Rollen benötigen zwingend bestimmte Attribute, damit sie korrekt funktionieren. Ein role="checkbox" braucht z. B. immer aria-checked.

Abhilfe

<!-- Schlecht: aria-checked fehlt -->
<div role="checkbox">Zustimmen</div>

<!-- Gut -->
<div role="checkbox" aria-checked="false">Zustimmen</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div role="figure" class="fl-photo fl-photo-align-left">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Alle erforderlichen ARIA-Attribute sind vorhanden
Verwendete ARIA-Rollen mĂŒssen gĂŒltige Werte sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle Elemente mit einem role-Attribut einen gĂŒltigen Wert verwenden 🔗 Hilfeseite
Problem

Unbekannte Rollenwerte werden von Hilfstechnologien ignoriert – das Element hat dann keinerlei semantische Bedeutung.

ErklÀrung

Nur Rollen aus der WAI-ARIA-Spezifikation oder HTML-Spezifikation sind gĂŒltig. Tippfehler oder erfundene Rollen werden stillschweigend ignoriert.

Abhilfe

<!-- Schlecht: Tippfehler -->
<div role="nnavigation">...</div>

<!-- Gut -->
<div role="navigation">...</div>

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
<div role="figure" class="fl-photo fl-photo-align-left">
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
ARIA-Attribute mĂŒssen gĂŒltige Werte haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass alle ARIA-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Werte werden von Screenreadern ignoriert oder können zu falschen Ausgaben fĂŒhren.

ErklÀrung

ARIA-Attribute erwarten vordefinierte Werte (z. B. true/false fĂŒr boolesche Attribute). Freie Texte oder Tippfehler sind nicht zulĂ€ssig.

Abhilfe

<!-- Schlecht -->
<button aria-pressed="ja">An</button>

<!-- Gut -->
<button aria-pressed="true">An</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
<nav class="pp-menu-nav" aria-label="Menu">
ARIA-Attribute mĂŒssen gĂŒltige Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Attribute, die mit aria- beginnen, gĂŒltige ARIA-Attribute sind 🔗 Hilfeseite
Problem

Erfundene oder falsch geschriebene aria-*-Attribute werden ignoriert und leisten damit keinen Beitrag zur Barrierefreiheit.

ErklÀrung

Nur offizielle Attributnamen aus der WAI-ARIA-Spezifikation sind gĂŒltig. Tippfehler wie aria-lable statt aria-label haben keinerlei Wirkung.

Abhilfe

<!-- Schlecht: Tippfehler -->
<button aria-lable="Schließen">✕</button>

<!-- Gut -->
<button aria-label="Schließen">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Der ARIA-Attributname ist gĂŒltig
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Der ARIA-Attributname ist gĂŒltig
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Der ARIA-Attributname ist gĂŒltig
Der Inline-Textabstand muss mit benutzerdefinierten Stylesheets anpassbar sein
BESTANDEN WCAG 1.4.1.2
Stellt sicher, dass der ĂŒber Style-Attribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann 🔗 Hilfeseite
Problem

Wenn TextabstĂ€nde per Inline-Style fest codiert sind, können Nutzer mit eingeschrĂ€nkter LesefĂ€higkeit sie nicht ĂŒber eigene Stylesheets ĂŒberschreiben.

ErklÀrung

Nutzer mit Legasthenie oder Sehbehinderungen passen oft Zeilenhöhe, Buchstabenabstand oder Absatzabstand an. Das muss per CSS möglich bleiben – !important in Inline-Styles blockiert das.

Abhilfe

TextabstÀnde in einer externen CSS-Datei definieren, nicht als Inline-Styles.

<!-- Schlecht -->
<p style="line-height: 1 !important;">Text</p>

<!-- Gut: in CSS-Datei ohne !important -->
p { line-height: 1.5; }

<div class="gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper gform-theme--no-framework contactForm_wrapper" data-form-theme="legacy" data-
SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Buttons ohne erkennbaren Text werden von Screenreadern nur als 'SchaltflĂ€che' angekĂŒndigt – ohne Hinweis auf ihre Funktion.

ErklÀrung

Jeder Button braucht einen programmatisch erkennbaren Namen, damit Nutzer von Hilfstechnologien wissen, was der Button tut.

Abhilfe

<!-- Schlecht: nur Icon, kein Text -->
<button><img src="delete.svg"></button>

<!-- Gut: alt-Text oder aria-label -->
<button><img src="delete.svg" alt="Löschen"></button>
<!-- oder -->
<button aria-label="Löschen"><svg ...></svg></button>

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Das aria-label-Attribut ist vorhanden und nicht leer
<button type="button" class="frc-button">Hier klicken</button>
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
<button class="pp-search-form__submit" type="submit"> <i class="fa fa-search" aria-hidden="true"></i> <span class="pp-screen-reader
⚠ Element hat inneren Text, der fĂŒr Screenreader sichtbar ist
Seiten mĂŒssen eine Möglichkeit bieten, wiederholte Blöcke zu ĂŒberspringen
BESTANDEN WCAG 2.4.1
Stellt sicher, dass jede Seite mindestens einen Mechanismus bietet, mit dem Benutzer die Navigation ĂŒberspringen und direkt zum Inhalt gelangen können 🔗 Hilfeseite
Problem

Tastaturnutzer und Screenreader-Nutzer mĂŒssen ohne Skip-Link bei jedem Seitenaufruf die gesamte Navigation durchlaufen, bevor sie zum eigentlichen Inhalt gelangen.

ErklÀrung

Ein sog. 'Skip-Link' am Seitenanfang erlaubt es, direkt zum Hauptinhalt zu springen und so repetitive Navigation zu ĂŒberspringen.

Abhilfe

<!-- Am Anfang des <body> einfĂŒgen -->
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

<!-- Ziel im Dokument -->
<main id="main-content">...</main>

<!-- CSS: Link nur bei Fokus sichtbar -->
.skip-link { position:absolute; top:-40px; }
.skip-link:focus { top:0; }

<html lang="de" class="pp-full-screen-menu-module">
⚠ GĂŒltiger Skip-Link gefunden / Seite hat eine Überschrift
Elemente mĂŒssen die Mindestanforderungen an das FarbkontrastverhĂ€ltnis erfĂŒllen
BESTANDEN WCAG 1.4.3
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe die WCAG-2-AA-Mindestanforderungen erfĂŒllt 🔗 Hilfeseite
Problem

Zu geringer Kontrast macht Text fĂŒr Menschen mit SehschwĂ€che, Farbenblindheit oder bei ungĂŒnstigen LichtverhĂ€ltnissen schwer oder gar nicht lesbar.

ErklÀrung

Der Unterschied zwischen Text- und Hintergrundfarbe muss ein MindestverhĂ€ltnis von 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab 18pt) erreichen, damit der Inhalt fĂŒr alle Nutzer gut lesbar ist.

Abhilfe

Farben so anpassen, dass das KontrastverhÀltnis stimmt. Hilfreich: Contrast-Checker wie WebAIM Contrast Checker.

<!-- Schlecht: hellgrauer Text auf weißem Hintergrund -->
<p style="color: #aaa; background: #fff;">Text</p>

<!-- Gut: dunkler Text auf weißem Hintergrund (Ratio ~7:1) -->
<p style="color: #333; background: #fff;">Text</p>

<span class="menu-item-text">Datenschutz</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="menu-item-text">Informationssicherheit</span>
⚠ Element hat ausreichenden Farbkontrast von 8.25
<span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span>
⚠ Element hat ausreichenden Farbkontrast von 9.57
Dokumente mĂŒssen ein &lt;title&gt;-Element zur NavigationsunterstĂŒtzung haben
BESTANDEN WCAG 2.4.2
Stellt sicher, dass jedes HTML-Dokument ein nicht leeres &lt;title&gt;-Element enthĂ€lt 🔗 Hilfeseite
Problem

Ohne Seitentitel können Screenreader-Nutzer nicht erkennen, auf welcher Seite sie sich befinden – besonders beim Wechsel zwischen Tabs.

ErklÀrung

Der <title> im <head> wird von Screenreadern beim Laden der Seite vorgelesen und im Browser-Tab angezeigt. Er ist ein wichtiger Orientierungspunkt.

Abhilfe

<!-- Schlecht -->
<title></title>

<!-- Gut -->
<title>Kontaktformular – Meine Website</title>

<html lang="de" class="pp-full-screen-menu-module">
⚠ Dokument hat ein nicht leeres &lt;title&gt;-Element
In ARIA und Labels verwendete IDs mĂŒssen eindeutig sein
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jeder in ARIA und Labels verwendete id-Attributwert eindeutig ist 🔗 Hilfeseite
Problem

Doppelte IDs fĂŒhren dazu, dass VerknĂŒpfungen zwischen Labels und Formularfeldern oder ARIA-Referenzen nicht eindeutig aufgelöst werden können.

ErklÀrung

Wenn mehrere Elemente dieselbe ID haben, referenziert aria-labelledby oder for nur das erste – alle anderen Elemente erhalten keine korrekte Beschriftung.

Abhilfe

<!-- Schlecht: doppelte ID -->
<label for="name">Name</label>
<input id="name" type="text">
<label for="name">Vorname</label>
<input id="name" type="text">

<!-- Gut: eindeutige IDs -->
<label for="nachname">Name</label>
<input id="nachname" type="text">
<label for="vorname">Vorname</label>
<input id="vorname" type="text">

<ul id="sub-menu-7714" class="sub-menu">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Dokument hat keine Elemente, die ĂŒber ARIA oder Labels mit demselben id-Attribut referenziert werden
Überschriften sollten nicht leer sein
BESTANDEN
Stellt sicher, dass Überschriften erkennbaren Text enthalten 🔗 Hilfeseite
ErklÀrung

Screenreader lesen Überschriften vor, um Nutzern die Seitennavigation zu ermöglichen. Leere oder rein bildbasierte Überschriften ohne Alternativtext sind fĂŒr diese Nutzer nicht wahrnehmbar.

Abhilfe

Sicherstellen, dass jede Überschrift sichtbaren Text oder einen fĂŒr Screenreader zugĂ€nglichen Text enthĂ€lt (z. B. via aria-label oder aria-labelledby). Rein dekorative Elemente nicht als Überschrift auszeichnen.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">1</span> Wie können wir Ihnen weiterhelfen?</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
Formularfelder dĂŒrfen nicht mehrere Label-Elemente haben
BESTANDEN WCAG 3.3.2
Stellt sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat 🔗 Hilfeseite
Problem

Mehrere Labels fĂŒr ein Feld erzeugen mehrdeutige Beschriftungen – Screenreader lesen dann möglicherweise beide vor oder verhalten sich unvorhersehbar.

ErklÀrung

Jedes Formularfeld sollte genau ein Label haben. Mehrere Labels können durch die Verwendung von aria-describedby fĂŒr Zusatzinformationen vermieden werden.

Abhilfe

<!-- Schlecht: zwei Labels -->
<label for="email">E-Mail</label>
<label for="email">(Pflichtfeld)</label>
<input id="email" type="email">

<!-- Gut: ein Label, Zusatzinfo per aria-describedby -->
<label for="email">E-Mail <span id="email-hint">(Pflichtfeld)</span></label>
<input id="email" type="email" aria-describedby="email-hint">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Überschriftenebenen sollten nur um eine Stufe ansteigen
BESTANDEN
Stellt sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist 🔗 Hilfeseite
ErklÀrung

Überschriften (h1–h6) mĂŒssen in einer logischen, verschachtelten Reihenfolge auftreten. Screenreader nutzen diese Struktur zur Navigation. Werden Ebenen ĂŒbersprungen, verlieren Nutzer assistiver Technologien die Orientierung auf der Seite.

Abhilfe

Überschriftenebenen nur sequenziell verwenden – keine Ebenen ĂŒberspringen. z. B.: h1 → h2 → h3. Überschriften nicht aus rein gestalterischen GrĂŒnden wĂ€hlen, sondern nach inhaltlicher Hierarchie.

<h1 class="fl-heading"> <span class="fl-heading-text">Allgemeine Anfrage</span> </h1>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">2</span> Ihre Kontaktdaten</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
<h6 class="fl-heading"> <span class="fl-heading-text"><span class="number">3</span> BestÀtigung</span> </h6>
⚠ Überschriftenhierarchie ist gĂŒltig
Das &lt;html&gt;-Element muss ein lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass jedes HTML-Dokument ein lang-Attribut hat 🔗 Hilfeseite
Problem

Ohne Sprachangabe kann ein Screenreader die Aussprache nicht korrekt einstellen – der Text wird möglicherweise in der falschen Sprache vorgelesen.

ErklÀrung

Das lang-Attribut am <html>-Element teilt dem Browser und Hilfstechnologien mit, in welcher Sprache die Seite verfasst ist.

Abhilfe

<!-- Schlecht -->
<html>

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
⚠ Das &lt;html&gt;-Element hat ein lang-Attribut
Das &lt;html&gt;-Element muss einen gĂŒltigen Wert fĂŒr das lang-Attribut haben
BESTANDEN WCAG 3.1.1
Stellt sicher, dass das lang-Attribut des &lt;html&gt;-Elements einen gĂŒltigen Wert hat 🔗 Hilfeseite
Problem

Ein ungĂŒltiger Sprachcode wird von Hilfstechnologien nicht erkannt – die Sprache bleibt unklar oder wird falsch interpretiert.

ErklÀrung

Sprachcodes mĂŒssen dem BCP-47-Standard entsprechen (z. B. de, en, de-AT). Freie Texte oder AbkĂŒrzungen außerhalb dieses Standards sind ungĂŒltig.

Abhilfe

<!-- Schlecht -->
<html lang="deutsch">

<!-- Gut -->
<html lang="de">

<html lang="de" class="pp-full-screen-menu-module">
Bilder mĂŒssen einen Alternativtext haben
BESTANDEN WCAG 1.1.1
Stellt sicher, dass &lt;img&gt;-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben 🔗 Hilfeseite
Problem

Bilder ohne Alternativtext sind fĂŒr blinde oder sehbehinderte Nutzer unsichtbar – ihr Inhalt geht verloren.

ErklÀrung

Jedes Bild braucht entweder einen beschreibenden alt-Text oder, wenn es rein dekorativ ist, ein leeres alt="" bzw. role="presentation".

Abhilfe

<!-- Schlecht: fehlendes alt -->
<img src="team.jpg">

<!-- Gut: beschreibender Alt-Text -->
<img src="team.jpg" alt="Das dreiköpfige Support-Team">

<!-- Gut: dekoratives Bild -->
<img src="divider.png" alt="">

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
⚠ Element hat ein alt-Attribut / Element hat ein title-Attribut
Der Alternativtext von Bildern sollte nicht als sichtbarer Text wiederholt werden
BESTANDEN
Stellt sicher, dass der Alternativtext eines Bildes nicht als sichtbarer Text wiederholt wird 🔗 Hilfeseite
ErklÀrung

Wenn ein Bild einen Alt-Text hat und unmittelbar daneben derselbe Text als sichtbarer Fließtext erscheint, lesen Screenreader diesen Inhalt doppelt vor. Das ist verwirrend und beeintrĂ€chtigt die Nutzererfahrung.

Abhilfe

Wenn der Bildinhalt durch benachbarten Text bereits vollstĂ€ndig beschrieben wird, das Bild als dekorativ kennzeichnen (alt="") und ggf. role="presentation" hinzufĂŒgen, damit Screenreader es ignorieren.

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
<img decoding="async" width="150" height="150" class="fl-photo-img wp-image-7622 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
<img decoding="async" width="300" height="214" class="fl-photo-img wp-image-3344 entered error" src="https://nur-demo.de.de//wp-content/uploads/20
Eingabe-SchaltflĂ€chen mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Eingabe-SchaltflĂ€chen einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Ein <input type="button"> oder <input type="submit"> ohne Beschriftung gibt Screenreader-Nutzern keinen Hinweis auf die Funktion.

ErklÀrung

Der Text eines Input-Buttons stammt aus dem value-Attribut. Fehlt dieses oder ist es leer, ist der Button nicht beschriftet.

Abhilfe

<!-- Schlecht -->
<input type="submit">

<!-- Gut -->
<input type="submit" value="Formular absenden">

<input type="submit" id="gform_submit_button_1" class="gform_button button" onclick="gform.submission.handleButtonClick(this);" data-submission-type="
⚠ Element hat ein nicht leeres value-Attribut
Formularelemente sollten ein sichtbares Label haben
BESTANDEN
Stellt sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich ĂŒber versteckte Labels oder die Attribute title bzw. aria-describedby beschriftet wird 🔗 Hilfeseite
ErklÀrung

Sichtbare Labels sind fĂŒr alle Nutzer wichtig – insbesondere fĂŒr Personen mit kognitiven EinschrĂ€nkungen, Sprachsteuerungs-Nutzer und Menschen, die auf VergrĂ¶ĂŸerungssoftware angewiesen sind. Versteckte Labels oder Beschreibungen ĂŒber title und aria-describedby sind fĂŒr diese Nutzergruppen nicht zuverlĂ€ssig wahrnehmbar, da sie entweder nicht sichtbar sind oder nur als ergĂ€nzende Information gedacht sind.

Abhilfe

Jedem Formularelement ein explizites, sichtbares

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
Formularelemente mĂŒssen Labels haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass jedes Formularelement ein Label hat 🔗 Hilfeseite
Problem

Formularfelder ohne Label sind fĂŒr Screenreader-Nutzer nicht beschriftet – sie wissen nicht, was in das Feld einzutragen ist.

ErklÀrung

Jedes interaktive Formularelement (Input, Select, Textarea) benötigt eine programmatisch verknĂŒpfte Beschriftung.

Abhilfe

<!-- Schlecht: kein Label -->
<input type="text" placeholder="Name">

<!-- Gut: explizites Label -->
<label for="name">Name</label>
<input id="name" type="text">

<!-- Alternativ: aria-label -->
<input type="text" aria-label="Name">

<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="ISO 14001: Umweltmanagement" id="choice_1_2_2" tabindex="101">
⚠ Formularelement hat ein explizites &lt;label&gt;
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="ISO 27001: Informationssicherheit" id="choice_1_2_3" tabindex="102">
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Banner-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Banner-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Banner-Landmark (typischerweise

oder role="banner") ist fĂŒr den seitenweiten Kopfbereich vorgesehen und muss ein direktes Kind des -Elements sein. Innerhalb anderer Landmarks verliert es seine semantische Bedeutung.

Abhilfe

Das

-Element mit role="banner" direkt als Kind von platzieren, nicht innerhalb von
,
,
o. À.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Das Banner-Landmark befindet sich auf der obersten Ebene.
Das Contentinfo-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Contentinfo-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das Contentinfo-Landmark (typischerweise

oder role="contentinfo") kennzeichnet den seitenweiten Fußbereich. Es muss ein direktes Kind von sein, damit assistive Technologien es korrekt erkennen und zur Navigation anbieten.

Abhilfe

Das

-Element direkt als Kind von platzieren, nicht innerhalb anderer Landmark-Elemente.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Das Contentinfo-Landmark befindet sich auf der obersten Ebene.
Das Main-Landmark sollte nicht in einem anderen Landmark enthalten sein
BESTANDEN
Stellt sicher, dass das Main-Landmark auf oberster Ebene liegt 🔗 Hilfeseite
ErklÀrung

Das

-Landmark markiert den Hauptinhalt der Seite. Es muss auf der obersten Ebene des Dokuments liegen, damit Screenreader-Nutzer direkt zum Hauptinhalt springen können.

Abhilfe

als direktes Kind von platzieren. Nur ein
-Element pro Seite verwenden.

<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Das Main-Landmark befindet sich auf der obersten Ebene.
Das Dokument sollte nicht mehr als ein Banner-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Banner-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Ein Dokument darf nur ein einziges seitenweites Banner-Landmark besitzen. Mehrere Banner verwirren Screenreader-Nutzer, da das Navigationsziel unklar wird.

Abhilfe

Nur ein

bzw. role="banner" auf Seitenebene (als Kind von ) verwenden.
-Elemente innerhalb von
oder
sind erlaubt, gelten aber nicht als Banner-Landmark.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Banner-Landmark
Das Dokument sollte nicht mehr als ein Contentinfo-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Contentinfo-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Pro Seite ist nur ein seitenweites Contentinfo-Landmark zulĂ€ssig. Mehrere Fußbereich-Landmarks auf oberster Ebene beeintrĂ€chtigen die Navigation mit Screenreadern.

Abhilfe

Nur ein

als direktes Kind von verwenden. Footer innerhalb von
oder
sind zulÀssig, zÀhlen aber nicht als Contentinfo-Landmark.

<footer data-rocket-location-hash="28830ac34dee1369f0e1078724dd4c23" class="fl-builder-content fl-builder-content-7437 fl-builder-global-templates-loc
⚠ Dokument enthĂ€lt nicht mehr als ein Contentinfo-Landmark
Das Dokument sollte nicht mehr als ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument höchstens ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Es darf pro Seite nur einen Hauptinhaltsbereich geben. Mehrere

-Elemente verwirren assistive Technologien und erschweren die Orientierung.

Abhilfe

Nur ein einziges

-Element pro HTML-Dokument verwenden. Inhalte, die nicht der Hauptinhalt sind, in
,
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Dokument enthĂ€lt nicht mehr als ein Main-Landmark
Das Dokument sollte ein Main-Landmark haben
BESTANDEN
Stellt sicher, dass das Dokument ein Main-Landmark besitzt 🔗 Hilfeseite
ErklÀrung

Das Main-Landmark ermöglicht es Screenreader-Nutzern, den Hauptinhalt der Seite direkt anzuspringen und Wiederholungen (z. B. Navigation) zu ĂŒberspringen. Fehlt es, ist die Seitennavigation fĂŒr diese Nutzer erheblich erschwert.

Abhilfe

Den Hauptinhalt der Seite in ein

-Element einschließen. Pro Seite genau ein
als direktes Kind von verwenden.

<html lang="de" class="pp-full-screen-menu-module">
Landmarks sollten eindeutig sein
BESTANDEN
Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle und zugĂ€nglichem Namen (Label/Title) besitzen 🔗 Hilfeseite
ErklÀrung

Wenn mehrere Landmarks dieselbe Rolle tragen (z. B. zwei

Abhilfe

Gleichartige Landmarks mit aria-label oder aria-labelledby eindeutig benennen, z. B.

<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<nav class="pp-menu-nav" aria-label="Menu">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
<div data-rocket-location-hash="86eaaca98cba6ffa30514168663c4f42" id="fl-main-content" class="fl-page-content" role="main">
⚠ Landmarks mĂŒssen eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle/Label/Titel (zugĂ€nglicher Name) haben
Links mĂŒssen ohne Farbe als solche erkennbar sein
BESTANDEN WCAG 1.4.1
Stellt sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe basiert 🔗 Hilfeseite
Problem

FĂŒr farbenblinde Nutzer oder bei ungĂŒnstigen Anzeigeeigenschaften sind Links, die nur durch Farbe hervorgehoben sind, nicht von normalem Text zu unterscheiden.

ErklÀrung

Links sollten zusÀtzlich zur Farbe durch Unterstreichung, Fettung oder andere visuelle Merkmale hervorgehoben sein.

Abhilfe

/* Schlecht: nur Farbe --> */
a { color: blue; text-decoration: none; }

/* Gut: Unterstreichung als weiteres Merkmal */
a { color: blue; text-decoration: underline; }

<a href="https://nur-demo.de.de/datenschutzerklaerung/#kontaktformular">DatenschutzerklÀrung</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
<a href="https://nur-demo.de/" target="_blank" rel="noopener">Nano GmbH</a>
⚠ Links sind vom umgebenden Text auf eine andere Weise als durch Farbe unterscheidbar
Links mĂŒssen einen erkennbaren Text haben
BESTANDEN WCAG 2.4.4, WCAG 4.1.2
Stellt sicher, dass Links einen erkennbaren Text haben 🔗 Hilfeseite
Problem

Links ohne sichtbaren oder programmatisch erkennbaren Text sagen Screenreader-Nutzern nicht, wohin der Link fĂŒhrt. Sie hören dann z. B. nur 'Link', ohne jede weitere Information.

ErklÀrung

Jeder Link muss einen verstĂ€ndlichen Text enthalten – entweder als sichtbaren Linktext, als aria-label oder als aria-labelledby-Verweis.

Abhilfe

<!-- Schlecht: Icon-Link ohne Text -->
<a href="/home"><img src="home.svg"></a>

<!-- Gut: Alt-Text am Bild -->
<a href="/home"><img src="home.svg" alt="Startseite"></a>

<!-- Alternativ: aria-label am Link -->
<a href="/home" aria-label="Startseite"><svg ...></svg></a>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist / Das aria-label-Attribut ist vorhanden und nicht leer
<a href="/" target="_self">
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
<a href="https://nur-demo.de.de/datenschutz-beratung-staedte-gemeinden/"><span class="menu-item-text">Datenschutz</span></a>
⚠ Element hat Text, der fĂŒr Screenreader sichtbar ist
&lt;ul&gt;- und &lt;ol&gt;-Elemente dĂŒrfen nur direkt &lt;li&gt;-, &lt;script&gt;- oder &lt;template&gt;-Elemente enthalten
BESTANDEN WCAG 1.3.1
Stellt sicher, dass Listen korrekt strukturiert sind 🔗 Hilfeseite
Problem

Falsch strukturierte Listen werden von Screenreadern nicht als Listen erkannt – Nutzer verlieren Orientierungsinformationen wie Listenanzahl und -position.

ErklÀrung

<ul> und <ol> dĂŒrfen nur <li>-, <script>- oder <template>-Elemente als direkte Kinder haben.

Abhilfe

<!-- Schlecht: div statt li -->
<ul>
  <div>Punkt 1</div>
</ul>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<ul id="menu-submenu" class="menu pp-advanced-menu-horizontal pp-toggle-none">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<ul class="gfield_checkbox" id="input_1_2">
&lt;li&gt;-Elemente mĂŒssen in einem &lt;ul&gt;- oder &lt;ol&gt;-Element enthalten sein
BESTANDEN WCAG 1.3.1
Stellt sicher, dass &lt;li&gt;-Elemente semantisch korrekt verwendet werden 🔗 Hilfeseite
Problem

<li>-Elemente außerhalb einer Liste erzeugen eine ungĂŒltige HTML-Struktur, die von Screenreadern nicht korrekt verarbeitet wird.

ErklÀrung

<li> ist nur als Kind von <ul>, <ol> oder <menu> gĂŒltig.

Abhilfe

<!-- Schlecht -->
<div>
  <li>Punkt 1</li>
</div>

<!-- Gut -->
<ul>
  <li>Punkt 1</li>
</ul>

<li id="menu-item-7532" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/datenschutz-beratung-stae
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="menu-item-7535" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://nur-demo.de.de/informationssicherheit-st
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
<li id="field_1_6" class="gfield gfield--type-html gfield--input-type-html gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_bel
⚠ Listeneintrag hat ein ĂŒbergeordnetes &lt;ul&gt;-, &lt;ol&gt;- oder role="list"-Element
Nutzer sollten Text auf bis zu 500 % vergrĂ¶ĂŸern können
BESTANDEN
Stellt sicher, dass das Viewport-Meta-Tag eine ausreichende Skalierung erlaubt 🔗 Hilfeseite
ErklÀrung

Nutzer mit Sehbehinderungen sind hĂ€ufig auf die Zoom-Funktion des Browsers angewiesen. Wird die Skalierung eingeschrĂ€nkt, ist der Inhalt fĂŒr sie nicht zugĂ€nglich. WCAG fordert, dass Text auf 200 % vergrĂ¶ĂŸert werden kann.

Abhilfe

user-scalable=no und maximum-scale=1 aus dem Viewport-Meta-Tag entfernen. Empfohlen: .

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ <meta>-Tag verhindert kein wesentliches Zoomen auf MobilgerĂ€ten
Zoomen und Skalieren darf nicht deaktiviert sein
BESTANDEN WCAG 1.4.4
Stellt sicher, dass &lt;meta name="viewport"&gt; die Textskalierung und das Zoomen nicht deaktiviert 🔗 Hilfeseite
Problem

Deaktiviertes Zoomen verhindert, dass sehbehinderte Nutzer Text vergrĂ¶ĂŸern können, was die Seite fĂŒr sie unnutzbar macht.

ErklÀrung

Die Attribute user-scalable=no oder maximum-scale=1 im Viewport-Meta-Tag blockieren das Zoomen auf MobilgerÀten.

Abhilfe

<!-- Schlecht -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Gut -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
⚠ Das &lt;meta&gt;-Tag deaktiviert das Zoomen auf MobilgerĂ€ten nicht
Interaktive Steuerelemente dĂŒrfen nicht verschachtelt werden
BESTANDEN WCAG 4.1.2
Stellt sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie von Screenreadern nicht immer erkannt werden oder Fokusprobleme fĂŒr Hilfstechnologien verursachen können 🔗 Hilfeseite
Problem

Verschachtelte interaktive Elemente (z. B. ein Button in einem Link) erzeugen ungĂŒltige HTML-Strukturen und unvorhersehbares Verhalten bei der Tastaturnavigation.

ErklÀrung

Interaktive Elemente wie <button>, <a> oder <input> dĂŒrfen nicht ineinander verschachtelt sein.

Abhilfe

<!-- Schlecht: Button in Link -->
<a href="/seite">
  <button>Los geht's</button>
</a>

<!-- Gut: nur eines der beiden verwenden -->
<a href="/seite">Los geht's</a>

<img decoding="async" class="fl-photo-img wp-image-8520 size-full fl-node-p61knobyfw08-img-0" src="https://nur-demo.de.de/wp-content/uploads/2023/
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keine fokussierbaren untergeordneten Elemente
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="ISO 9001: QualitÀtsmanagement" id="choice_1_2_1" tabindex="100">
⚠ Element hat keine fokussierbaren untergeordneten Elemente
Die Seite sollte eine Überschrift der ersten Ebene enthalten
BESTANDEN
Stellt sicher, dass die Seite oder mindestens einer ihrer Frames eine Überschrift der ersten Ebene enthĂ€lt 🔗 Hilfeseite
ErklÀrung

Eine h1-Überschrift kennzeichnet das wichtigste Thema der Seite und dient Screenreader-Nutzern als primĂ€rer Orientierungspunkt. Fehlt sie, ist die semantische Struktur der Seite unvollstĂ€ndig.

Abhilfe

Genau eine h1-Überschrift pro Seite einfĂŒgen, die den Hauptinhalt oder Seitentitel beschreibt. Weitere Überschriften hierarchisch darunter anordnen (h2, h3 usw.).

<html lang="de" class="pp-full-screen-menu-module">
Alle Seiteninhalte sollten innerhalb von Landmarks liegen
BESTANDEN
Stellt sicher, dass alle Seiteninhalte innerhalb von Landmark-Elementen liegen 🔗 Hilfeseite
ErklÀrung

Landmarks strukturieren die Seite und ermöglichen Screenreader-Nutzern, schnell zu verschiedenen Seitenbereichen zu springen. Inhalte außerhalb von Landmarks sind fĂŒr diese Nutzer schwer auffindbar.

Abhilfe

Alle sichtbaren Inhalte in geeignete Landmark-Elemente einschließen:

,
<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<div data-rocket-location-hash="d434d8484ca3c7ebe008e10ddf366009" class="fl-page">
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
<header data-rocket-location-hash="9e28d9b1f427308b3aa5ecd8ff7fe591" class="fl-builder-content fl-builder-content-7427 fl-builder-global-templates-loc
⚠ Alle Seiteninhalte befinden sich innerhalb von Landmarks
Select-Elemente mĂŒssen einen zugĂ€nglichen Namen haben
BESTANDEN WCAG 4.1.2
Stellt sicher, dass Select-Elemente einen zugĂ€nglichen Namen haben 🔗 Hilfeseite
Problem

Ein Auswahlfeld ohne Beschriftung lĂ€sst Screenreader-Nutzer nicht wissen, wofĂŒr die Auswahloptionen stehen.

ErklÀrung

Jedes <select>-Element braucht ein verknĂŒpftes <label> oder ein aria-label.

Abhilfe

<!-- Schlecht -->
<select>
  <option>Deutsch</option>
</select>

<!-- Gut -->
<label for="sprache">Sprache</label>
<select id="sprache">
  <option>Deutsch</option>
</select>

<select name="input_8" id="input_1_8" class="medium gfield_select" tabindex="107" aria-required="true" aria-invalid="false"><option value="">Anrede *<
⚠ Formularelement hat ein explizites &lt;label&gt;
<select name="input_9" id="input_1_9" class="medium gfield_select" tabindex="108" aria-invalid="false"><option value="">Titel</option><option value="D
⚠ Formularelement hat ein explizites &lt;label&gt;
Das Ziel des Skip-Links sollte vorhanden und fokussierbar sein
BESTANDEN
Stellt sicher, dass alle Sprunglinks ein fokussierbares Ziel haben 🔗 Hilfeseite
ErklÀrung

Sprunglinks ermöglichen Tastatur- und Screenreader-Nutzern, wiederholte Navigationsbereiche zu ĂŒberspringen und direkt zum Hauptinhalt zu gelangen. Ist das Ziel-Element (z. B.

oder eine Section) nicht fokussierbar, springt der Tastaturfokus nicht dorthin, und der Sprunglink erfĂŒllt seinen Zweck nicht.

Abhilfe

Das Ziel-Element des Sprunglinks fokussierbar machen, indem tabindex="-1" gesetzt wird (damit ist es programmatisch fokussierbar, ohne die Tab-Reihenfolge zu verÀndern). Beispiel:

. Der Sprunglink verweist dann mit href="#hauptinhalt" auf dieses Element.

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Sprungziel des Skip-Links ist vorhanden
Elemente sollten keinen tabindex grĂ¶ĂŸer als 0 haben
BESTANDEN
Stellt sicher, dass tabindex-Attributwerte nicht grĂ¶ĂŸer als 0 sind 🔗 Hilfeseite
ErklÀrung

Positive tabindex-Werte verĂ€ndern die natĂŒrliche Tab-Reihenfolge der Seite und erzeugen eine benutzerdefinierte Fokusreihenfolge, die oft unvorhersehbar und verwirrend ist – besonders fĂŒr Tastaturnutzer und Screenreader-Nutzer.

Abhilfe

Nur tabindex="0" (fokussierbar in natĂŒrlicher Reihenfolge) oder tabindex="-1" (programmatisch fokussierbar, aber nicht per Tab erreichbar) verwenden. Positive tabindex-Werte vollstĂ€ndig vermeiden.

<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div id="gf_1" class="gform_anchor" tabindex="-1"></div>
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
<div class="brlbs-cmpnt-widget brlbs-bottom-0 brlbs-left-0" aria-label="Dialog Datenschutz-PrÀferenz öffnen" role="button" tabindex="0">
⚠ Element hat keinen tabindex grĂ¶ĂŸer als 0
Alle BerĂŒhrungsziele mĂŒssen mindestens 24px groß sein oder ausreichend Abstand haben
BESTANDEN WCAG 2.5.8
Stellt sicher, dass BerĂŒhrungsziele ausreichend groß und mit genĂŒgend Abstand versehen sind 🔗 Hilfeseite
Problem

Zu kleine oder zu eng beieinander liegende SchaltflĂ€chen lassen sich auf Touchscreens schwer prĂ€zise antippen – besonders fĂŒr Menschen mit motorischen EinschrĂ€nkungen oder groben Fingern.

ErklÀrung

Klick- und Tippziele (Buttons, Links, Icons) sollten mindestens 24×24 px groß sein und genug Abstand zueinander haben, damit versehentliche Fehltipps vermieden werden.

Abhilfe

<!-- Schlecht: winziges Icon ohne Padding -->
<button style="width:16px; height:16px;">✕</button>

<!-- Gut: ausreichende GrĂ¶ĂŸe und Abstand -->
<button style="min-width:44px; min-height:44px; margin:4px;">✕</button>

<a aria-label="Zum Inhalt springen" class="fl-screen-reader-text" href="#fl-main-content">Zum Inhalt springen</a>
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<a href="/" target="_self">
⚠ Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
<button class="pp-advanced-menu-mobile-toggle hamburger" tabindex="0" aria-label="Menu" aria-expanded="false"> <div class="pp-hamburger"><div clas
⚠ Steuerelement hat ausreichende GrĂ¶ĂŸe (46px × 34px, mindestens 24px × 24px erforderlich) / Ziel hat ausreichenden Abstand zu seinen nĂ€chsten Nachbarn. Der sichere Klickbereich hat einen Durchmesser von 24px, was mindestens 24px entspricht.
Das lang-Attribut muss einen gĂŒltigen Wert haben
BESTANDEN WCAG 3.1.2
Stellt sicher, dass lang-Attribute gĂŒltige Werte haben 🔗 Hilfeseite
Problem

UngĂŒltige Sprachcodes werden von Screenreadern nicht erkannt, wodurch die Aussprache falsch oder inkonsistent sein kann.

ErklÀrung

Das lang-Attribut muss einen gĂŒltigen BCP-47-Sprachcode enthalten, auch wenn es an einzelnen Elementen (nicht nur am <html>-Tag) verwendet wird.

Abhilfe

<!-- Schlecht -->
<p lang="englisch">Hello world</p>

<!-- Gut -->
<p lang="en">Hello world</p>

<a lang="en" href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a>

🌐 Abgerufene Seiten (9)

Die folgenden Seiten wurden fĂŒr den Security-Check berĂŒcksichtigt.
Die analysierte Webseite kann weitere Seiten enthalten.
Aus technischen GrĂŒnden können nicht beliebig viele Seiten einer Webseite in kurzer Zeit analysiert werden, ohne zu riskieren, dass die Webseite weitere Anfragen blockiert.

Vorrangig werden die Startseite, die DomĂ€ne an sich sowie Seiten mit Formularen geprĂŒft, da diese die grĂ¶ĂŸte AngriffsflĂ€che bieten.
URL Titel (Demo: anonymisiert!) Typ SSL Interne Links
https://nur-demo.de/0f9b5002 Wolke Stern Apfel Fluss Lampe Straße DSGVO Fluss 🏠 Startseite🔍 Suche 🔓 68
https://nur-demo.de/b3234a35 Fenster Schuh Mond Fluss Blume Fluss Tisch Mond Regen Tisch 📄 Standard🔍 Suche 🔓 68
https://nur-demo.de/46ed0326 Tisch Fluss Regen Welle Apfel Baum Straße 📝 Kontaktformular🔍 Suche 🔓 77
https://nur-demo.de/ce08bd81 Fenster BrĂŒcke Fluss Regen Fenster Fenster Wolke Baum DSGVO Schuh Tisch 📝 Kontaktformular🔍 Suche 🔓 78
https://nur-demo.de/c6352b47 Tisch Fenster Blume Lampe Welle Licht Garten Stern 📄 Standard🔍 Suche 🔓 66
https://nur-demo.de/c613629b Welle Mond Schuh Straße Fenster DSGVO 📄 Standard🔍 Suche 🔓 68
https://nur-demo.de/5fc74d1b
  • â„č Google Maps erkannt: Die interaktive Google-Karte erfordert je nach Konfiguration eine Einwilligung der Nutzer. Als datenschutzfreundliche Alternative steht die kostenfreie Karte von Dr. DSGVO (basierend auf OpenStreetMap, vollstĂ€ndig lokal) zur VerfĂŒgung. Zur datenschutzfreundlichen Karte â†—
  • ⚠ Google Tag Manager erkannt: Der GTM birgt Sicherheitsrisiken (kann von Angreifern missbraucht werden) und ist technisch nicht notwendig – andere Tools lassen sich auch ohne GTM einbinden. Als datenschutzfreundliche Alternative empfehlen wir den Untagmanager von Dr. DSGVO. Mehr zum Untagmanager â†—
  • ⚠ Google Analytics erkannt: Google Analytics ĂŒbertrĂ€gt personenbezogene Daten (u. a. IP-Adressen) in die USA. Der Einsatz ist nur mit ausdrĂŒcklicher Einwilligung zulĂ€ssig und erfordert einen Auftragsverarbeitungsvertrag mit Google sowie aktuelle Standardvertragsklauseln.
  • ⚠ Google Fonts erwĂ€hnt: Das Laden von Schriftarten direkt von Google-Servern ĂŒbertrĂ€gt die IP-Adresse der Besucher an Google und ist ohne Einwilligung unzulĂ€ssig (LG MĂŒnchen, Az. 3 O 17493/20). Empfehlung: Schriften lokal einbinden.
  • â„č YouTube-Einbettung erkannt: Standard-YouTube-Embeds setzen Cookies und ĂŒbertragen Daten an Google, sobald die Seite geladen wird – nicht erst beim Klick. Empfehlung: „youtube-nocookie.com" verwenden oder Videos erst nach Einwilligung laden (2-Klick-Lösung).
  • â„č reCAPTCHA erkannt: Google reCAPTCHA ĂŒbertrĂ€gt Nutzerdaten (u. a. IP, Browser-Fingerprint) an Google. Der Einsatz erfordert eine Rechtsgrundlage; bei reiner Spam-Abwehr ist berechtigtes Interesse (Art. 6 Abs. 1 lit. f DSGVO) hĂ€ufig nicht ausreichend.
Tisch Welle BrĂŒcke đŸ›Ąïž Datenschutz🔍 Suche 🔓 59
https://nur-demo.de/228f8a6c Apfel Regen DSGVO Fluss Licht Birne 📄 Standard🔍 Suche 🔓 69
https://nur-demo.de/fc834e02 Schuh Mond Stern BrĂŒcke Schuh Fenster Licht Schuh 📝 Kontaktformular🔍 Suche 🔓 78

📋 Erkannte Seitentypen

â„č Art der Erkennung

Ob eine einzelne Seite (Page) ein Kontaktformular oder das Impressum enthĂ€lt oder einen Login-Bereich bereitstellt, wird anhand verschiedener Merkmale geprĂŒft.
Ausgewertet werden URL-Pfade (=technischer Name der Seite), Inhalte der Seite (Texte) sowie vorhandene Formulare und Eingabefelder.

📊 Erkennungs-Wahrscheinlichkeit
Dieser Wert gibt an, wie sicher fĂŒr die Seite der genannte Seitentyp zugeordnet wurde. Das Maß der Erkennungssicherheit ist subjektiv und ist aus technischer Sicht zu verstehen.

📝 Kontaktformulare (3)

URL%I/T/F
https://nur-demo.de/46ed0326 â†ș Suchformular 100% 17/1/1
https://nur-demo.de/ce08bd81 â†ș Suchformular 100% 28/1/1
https://nur-demo.de/fc834e02 â†ș Suchformular 100% 24/1/1

🔏 Datenschutz (2)

đŸȘ Cookies (seitenĂŒbergreifend)

Hinweise

  • Plugin-Name: Falls bekannt, wird er blau hinterlegt neben dem Cookie-Namen angezeigt
  • HttpOnly: Cookie nicht per JavaScript auslesbar – schĂŒtzt vor XSS-Angriffen
  • Secure: Cookie wird nur ĂŒber HTTPS ĂŒbertragen
  • SameSite: Steuert, ob Cookie bei Cross-Site-Requests gesendet wird (Strict = sicherste Einstellung)
  • Lebensdauer: Gerundete Angabe. "Sitzung" = Cookie wird beim Schließen des Browsers gelöscht. Rot gedruckt = kritisch, gelb = zu prĂŒfen
NameDomainLebensdauerHttpOnlySecureSameSiteWert (gekĂŒrzt)
borlabs-cookie.nur-demo.de/efdca5b81 Monat–✔Lax%7B%22consents%22%3A%7B%22essential%22%3

đŸ’Ÿ
localStorage ist leer
Keine EintrÀge vorhanden (gut).
đŸ—‚ïž
sessionStorage ist leer
Keine EintrÀge vorhanden (gut).
đŸ›Ąïž WeiterfĂŒhrende PrĂŒfung
📋
DSGVO- & Datenschutz-Bericht fĂŒr Websites
Rechtssicherheit: DSGVO-KonformitĂ€t, Cookie-Richtlinien & Impressumspflicht geprĂŒft
Datenschutzbericht mit konkreten Befunden und priorisierten Handlungsanweisungen
SicherheitslĂŒcken, veraltete Software & Konfigurationsfehler aufgedeckt
HIGH Risiko
7 CVEs
3 DSGVO
74 SEO