Diese Seite enthält bewusst Verstöße gegen WCAG-Kriterien als Spielwiese für das DigElite Barrierefreiheits-Plugin. Nicht teilen, nicht verlinken. Aktiviere die Module schrittweise und beobachte, was repariert wird.
Barrierefreiheits-Test-Sandbox
Diese Überschrift überspringt h2 und h3
Ein h2 nach einem h4 — falsche Reihenfolge
Zweite H1 auf derselben Seite (verboten)
Bilder ohne Alt-Texte
Drei Bilder ohne alt-Attribut. Screenreader können sie nicht ansagen.
Das letzte Bild hat einen generischen Alt-Text — KI-Alt-Text-Modul sollte einen besseren Vorschlag liefern.
Generische Link-Texte
Mehr zu unseren Leistungen hier.
BFSG-Pflichten kennen? Klicken Sie hier.
Kontrast-Verstöße
Hellgrau auf Weiß (~ 1.6:1) — weit unter WCAG-Schwellwert 4.5:1.
Helles Coral auf Weiß (~ 2.4:1) — markentypisch hübsch, aber nicht barrierefrei.
Weiß auf hellem Coral (~ 2.4:1) — gleiches Problem aus anderer Richtung.
Hellgrau auf etwas hellerem Grau (~ 1.2:1) — der Klassiker bei „minimalistischen" Themes.
Kaputte Tastatur-Bedienung
Die folgenden „Buttons" sind nicht-semantische divs ohne tabindex und ohne ARIA-Role. Maus klappt, Tab nicht.
Und hier ein Anker ohne href — auch nicht fokussierbar:
Pseudo-Link (kein href)Kaputtes Formular
Kein einziger Label-for-Bezug, kein Fieldset um die Radio-Gruppe, Pflichtfelder nur per Stern angedeutet, kein aria-describedby für Fehler-Anzeige.
Kaputte Tab-Reihenfolge & fehlender Fokus
Vier Links mit positiven tabindex-Werten — Tab-Reihenfolge wird gegen die visuelle Reihenfolge verdreht.
Visuell 1 — tabindex=4Visuell 2 — tabindex=1
Visuell 3 — tabindex=3
Visuell 4 — tabindex=2
Außerdem: `outline:none` entfernt den Fokus-Ring komplett. Tastatur-Nutzer:innen sehen nicht, wo sie sind.
Mini-Buttons
Buttons mit nur 20×20 px — Mindestmaß WCAG 2.5.5 ist 44×44.
Auf Touch-Geräten praktisch unbedienbar.
Dauer-Animation ohne Reduced-Motion-Schutz
Der orange Block dreht sich endlos — auch wenn der Besucher „weniger Bewegung" im OS eingestellt hat.
Sprach-Mix ohne lang
We provide accessibility solutions. Our team is committed to digital inclusion across Europe. Contact us for a free consultation about your WordPress site.
Auch französisch ohne Markierung: Nous offrons des solutions d'accessibilité numérique pour les sites WordPress.
Kaputtes Akkordeon
div-basiertes Akkordeon ohne role, aria-expanded, aria-controls.
Fehlende Landmarks
In dieser Sektion gibt es keine semantischen Bereiche (kein nav, kein aside, keine role="region"). Screenreader können nicht zwischen Bereichen springen.
Datentabelle ohne Header-Zellen
| Name | Stadt | PLZ |
| Beispiel A | Osnabrück | 49074 |
| Beispiel B | Münster | 48143 |
Video ohne erkennbare Captions
Embed eines beliebigen Videos ohne `track`-Element für Untertitel — Plugin-Modul sollte das markieren.
(Quelle existiert vermutlich nicht — geht hier nur um das Markup-Pattern.)
Komplexer Mauertext
Die Implementierung barrierefreier Webanwendungen unter Berücksichtigung der WCAG-2.1-Konformitätsstufen erfordert ein interdisziplinäres Verständnis von HTML-Semantik, ARIA-Spezifikationen, CSS-Visualisierungstechniken und assistiver Technologien wie Screen-Readern, Braille-Displays und Speech-to-Text-Eingabesystemen, deren Zusammenspiel insbesondere bei dynamischen Single-Page-Applikationen mit Frameworks wie React, Vue oder Angular durch Live-Region-Management und korrekte Fokus-Verwaltung sichergestellt werden muss, was ohne entsprechende Spezialisierung und mehrjährige Erfahrung in der praktischen Umsetzung kaum nachhaltig gelingen kann.
Marquee-artiger Lauftext
Auto-Scroll-Bewegung ohne Pause-Button, ohne Reduced-Motion-Schutz.