Website-Optimierungen
Deine Website besser bedienbar machen
Skip Links, Tastaturkürzel, Focus Outlines, Viewport-Einstellungen, Breadcrumbs und Link-Optimierungen – sechs Werkzeuge, die direkt im Frontend wirken.
EZZE WCAG Pro ergänzt dein Theme dort, wo Tastatur- und Screenreader-Nutzer oft hängen bleiben. Du schaltest jedes Werkzeug einzeln ein, prüfst es in der Vorschau und änderst dafür keine Zeile im Theme.
- Alle sechs Werkzeuge in allen Plänen, auch im Free-Plan
- Unterstützen WCAG-Kriterien wie 2.4.1, 2.4.7 und 1.4.4
- Zielprüfung, Live-Vorschau und Viewport-Test
Die Werkzeuge
Sechs Optimierungen für Tastatur, Zoom und Orientierung
Jedes Werkzeug hat eine eigene Einstellungsseite mit Hilfe und lässt sich unabhängig von den anderen aktivieren. Die Kennzeichnung zeigt, welche WCAG-Kriterien es unterstützt.
-
In allen Plänen
Skip Links
WCAG 2.4.1 WCAG 2.1.1
Unsichtbare Sprunglinks erscheinen beim ersten Druck auf die Tabulatortaste und führen direkt zu Hauptinhalt, Navigation oder Suche.
- Ziele per CSS-Selektor, gegen die Startseite geprüft
- Eigenes Design, Hervorhebung und Scroll-Abstand
-
In allen Plänen
Tastaturkürzel
WCAG 2.1.1 WCAG 2.4.1
Fünf Kürzel springen zu Navigation, Hauptinhalt, Seitenanfang, Seitenende und Suche – unter Windows mit Alt + Umschalt, am Mac mit Control + Option.
- In der Tastaturhilfe der Toolbar aufgelistet
- „Alle Ziele prüfen“ und Konfliktschutz
-
In allen Plänen
Focus Outlines
WCAG 2.4.7 WCAG 1.4.11
Gut sichtbare Fokusrahmen zeigen Tastaturnutzern jederzeit, wo sie sich befinden – als Outline, Border oder Box-Shadow.
- Profile für Standard, Alternative und Formularfelder
- Live-Vorschau und standardmäßig :focus-visible
-
In allen Plänen
Viewport-Einstellungen
WCAG 1.4.4 WCAG 1.4.10
Sorgt dafür, dass Besucher am Smartphone zoomen können, auch wenn das Theme Zoomen sperrt. Die Änderung erfolgt serverseitig.
- maximum-scale 5.0 oder ganz ohne Grenze
- Viewport-Test mit fünf Prüfpunkten
-
In allen Plänen
Breadcrumbs
WCAG 2.4.8 WCAG 2.4.5
Ein barrierefreier Navigationspfad zeigt, wo sich Besucher in deiner Seitenstruktur befinden, und führt mit einem Klick zurück.
- Per Shortcode oder PHP-Funktion eingebunden
- Schema.org-Markup und aria-current
-
In allen Plänen
Link-Optimierungen
WCAG 2.4.4 WCAG 3.2.5
Externe Links, die einen neuen Tab öffnen, kündigen das an oder öffnen im selben Tab. Auf Wunsch erhalten alle Links eine klare Unterstreichung.
- Hinweis für Screenreader, optional mit Icon
- Globale Link-Stile für Unterstreichung und Hover
Einrichten
Einschalten, prüfen, fertig
Die Einstellungsseiten nehmen dir das Rätselraten ab: Sie prüfen Ziele auf deiner echten Startseite und zeigen Änderungen, bevor Besucher sie sehen.
Ehrlich eingeordnet
Was die Optimierungen leisten – und was nicht
Die Werkzeuge schließen typische Lücken vieler Themes. Eine Website, deren Inhalte und Vorlagen Barrieren enthalten, machen sie nicht automatisch barrierefrei.
Das leisten sie
- Schnelle Wege zum Inhalt per Skip Link und Tastaturkürzel
- Sichtbarer Fokus, erlaubtes Zoomen und klare Orientierung
- Verständliche Links, die keine Tabs unangekündigt öffnen
Das ersetzen sie nicht
- Semantisches HTML und Beschriftungen in Theme und Inhalten
- Ausreichende Farbkontraste und Alternativtexte
- Den Barrierefreiheitstest, der verbleibende Barrieren findet
Tipp
Geh deine Startseite nach dem Einrichten einmal nur mit der Tastatur durch und lass danach den Barrierefreiheitstest laufen. Für Präferenzen deiner Besucher gibt es zusätzlich die Barrierefreiheits-Toolbar.
Gut zu wissen
Fragen zu den Website-Optimierungen?
Pläne, WCAG, JavaScript, Breadcrumbs, Tastaturkürzel und Link-Stile.
1. Sind die Website-Optimierungen im Free-Plan enthalten?
Ja. Skip Links, Tastaturkürzel, Focus Outlines, Viewport-Einstellungen, Breadcrumbs und Link-Optimierungen sind in allen Plänen enthalten, auch im Free-Plan. Sie verbrauchen keine KI-Kontingente und keine Testkontingente.
2. Wird meine Website damit WCAG-konform?
Nein, nicht automatisch. Die Optimierungen unterstützen einzelne Kriterien wie 2.4.1 Blöcke umgehen, 2.4.7 Fokus sichtbar oder 1.4.4 Textgröße ändern. Fehlende Beschriftungen, Alternativtexte, Kontraste oder Probleme im Theme findet der Barrierefreiheitstest.
3. Funktionieren die Optimierungen ohne JavaScript?
Größtenteils ja. Skip Links, Focus Outlines, Breadcrumbs und die globalen Link-Stile arbeiten mit HTML und CSS, die Viewport-Einstellungen werden serverseitig gesetzt. Tastaturkürzel und die Kennzeichnung externer Links benötigen JavaScript.
4. Wie binde ich die Breadcrumbs ein?
Über den Shortcode [wcag_breadcrumbs] in einem Beitrag, einer Seite oder einem Widget oder über die PHP-Funktion wcag_breadcrumbs() in deinem Theme. Die Ausgabe ist ein nav-Element mit geordneter Liste, aria-current für die aktuelle Seite und Schema.org-BreadcrumbList.
5. Können die Tastaturkürzel mit dem Browser kollidieren?
Die Kürzel kombinieren Alt + Umschalt, am Mac Control + Option, mit einem Buchstaben. Aktive Kürzel müssen unterschiedliche Buchstaben verwenden. Wenn du einen Buchstaben änderst, wähle keinen, den dein Browser schon belegt. „Alle Ziele prüfen“ zeigt dir außerdem, ob jedes Ziel auf deiner Startseite existiert.
6. Was passiert, wenn Besucher in der Toolbar „Alle Links unterstreichen“ wählen?
Diese Besucheroption kann dieselben Links betreffen wie deine globalen Link-Stile. Die Einstellungsseite warnt dich davor. Prüfe beide Funktionen zusammen oder lass eine davon aus.
Starte jetzt
Bereit für eine gut bedienbare Website?
Installiere EZZE WCAG Pro kostenlos, schalte die Website-Optimierungen ein und probiere sie gleich mit der Tastatur aus.
Website-Optimierungen für WordPress – Tastatur, Fokus und Zoom
Viele WordPress-Themes sehen gut aus, lassen Tastatur- und Screenreader-Nutzer aber im Stich: Es fehlt ein Skip Link, der Fokus ist unsichtbar oder das Zoomen am Smartphone ist gesperrt. Die Website-Optimierungen von EZZE WCAG Pro schließen diese Lücken direkt im Frontend – mit Skip Links, Tastaturkürzeln, Focus Outlines, Viewport-Einstellungen, Breadcrumbs und Link-Optimierungen.
Jedes Werkzeug unterstützt konkrete WCAG-Kriterien, etwa 2.4.1 Blöcke umgehen, 2.4.7 Fokus sichtbar, 1.4.4 Textgröße ändern oder 2.4.4 Linkzweck. Zielprüfung, Live-Vorschau und Viewport-Test helfen dir, die Einstellungen an dein Theme anzupassen, ohne Code zu schreiben.
Im Free-Plan enthalten, mit den anderen Funktionen verzahnt
Alle sechs Optimierungen gehören zum Plugin und sind in jedem Plan enthalten. Die Tastaturkürzel erscheinen in der Tastaturhilfe der Barrierefreiheits-Toolbar, und der Barrierefreiheitstest zeigt, welche Barrieren danach noch in Theme und Inhalten stecken. Einen Überblick über alle Werkzeuge findest du auf der Seite Funktionen.