Barrierefreiheit
Giuliomax Menu Builder ist darauf ausgelegt, WCAG 2.2 Level AA zu unterstützen. Die Navigation funktioniert vollständig ohne Maus, Dropdowns werden für Screenreader angekündigt, und Bewegungen können systemweit deaktiviert werden.
Zur Konformität. Diese Funktionen sind darauf ausgelegt, WCAG 2.2 Level AA zu unterstützen, aber die endgültige Konformität deiner Live-Website hängt auch von deinen Inhalten, deinem Theme und allen von dir gesetzten benutzerdefinierten Farben ab. Teste deine Website mit den unten aufgeführten Werkzeugen.
WCAG 2.2 AA-Unterstützung
Das Plugin ist rund um die folgenden WCAG 2.2-Erfolgskriterien für Navigationskomponenten gestaltet:
| Kriterium | Level | Umsetzung |
|---|---|---|
| 1.4.3 Kontrast (Minimum) | AA | Die eingebauten Themes sind darauf ausgelegt, ein Kontrastverhältnis von 4,5:1 zu erreichen; benutzerdefinierte Farbüberschreibungen müssen erneut geprüft werden. |
| 2.1.1 Tastatur | A | Alle Funktionen sind ausschließlich per Tastatur bedienbar. |
| 2.1.2 Keine Tastaturfalle | A | Der Fokus kann das Menü jederzeit ohne Zeigegerät verlassen. |
| 2.4.3 Fokus-Reihenfolge | A | Die Fokus-Reihenfolge folgt der visuellen Lesereihenfolge des Menüs. |
| 2.4.7 Fokus sichtbar | AA | Ein sichtbarer Fokusring wird auf jedem interaktiven Element gerendert. |
| 2.4.11 Fokusdarstellung | AA | Fokusindikatoren erfüllen Mindestanforderungen für Größe und Kontrast (neu in WCAG 2.2). |
| 4.1.2 Name, Rolle, Wert | A | Alle interaktiven Elemente haben einen zugänglichen Namen und die korrekte ARIA-Rolle. |
Tastaturnavigation
| Taste | Aktion |
|---|---|
| Tab | Fokus auf das nächste Menüelement oder interaktive Element verschieben. |
| Shift + Tab | Fokus auf das vorherige Element verschieben. |
| Enter / Leertaste | Einen Link aktivieren oder ein Dropdown öffnen / schließen. |
| ↓ / ↑ | Fokus durch Elemente in einem geöffneten Dropdown oder Mega-Menü-Panel bewegen. |
| → / ← | Zwischen Elementen der obersten Ebene wechseln. |
| Escape | Das aktuelle Dropdown oder Mega-Menü-Panel schließen und den Fokus auf das übergeordnete Element zurücksetzen. |
| Pos1 / Ende | Zum ersten / letzten Element in einer Dropdown-Liste springen. |
ARIA-Attribute
Das Plugin fügt dem gerenderten Markup automatisch folgende ARIA-Attribute hinzu:
role="navigation"undaria-labelam<nav>-Element (Label entspricht dem Menünamen in WordPress).aria-haspopup="true"undaria-expandedan Elementen der obersten Ebene, die ein Dropdown oder Mega-Menü haben.aria-controlsverknüpft den Auslöser-Button mit seinem Panel.role="menu"undrole="menuitem"innerhalb von Dropdowns.aria-current="page"am Element, das der aktuellen Seite entspricht.
Du musst nichts davon konfigurieren — es wird automatisch basierend auf der Menüstruktur angewendet.
Fokus-Management
- Wenn ein Dropdown geöffnet wird, bewegt sich der Fokus auf das erste Element darin.
- Wenn ein Dropdown geschlossen wird (per Escape oder durch Wegbewegen des Fokus), kehrt der Fokus zum auslösenden Element zurück.
- Das Mobilmenü-Overlay hält den Fokus bei geöffnetem Panel im Inneren (Fokus kann nicht nach außen tabben). Das Schließen des Overlays gibt den Fokus an den Hamburger-Button zurück.
Reduzierte Bewegung
Alle Übergänge und Animationen berücksichtigen die CSS-Media-Query prefers-reduced-motion: reduce. Wenn der Benutzer in den Barrierefreiheitseinstellungen seines Betriebssystems „Bewegung reduzieren" aktiviert hat:
- Dropdown-Gleit-/Einblendanimationen werden durch sofortiges Einblenden/Ausblenden ersetzt.
- Übergänge beim Öffnen/Schließen des Mobilmenüs erfolgen sofort.
- Die Einblendanimation der Ankündigungsleiste wird deaktiviert.
- Einblendanimationen für Menüelemente werden deaktiviert.
Dein Menü testen
Verwende nach der Konfiguration deines Menüs folgende Werkzeuge zur Überprüfung der Barrierefreiheit:
- Nur Tastatur — trenne die Maus ab und navigiere das gesamte Menü ausschließlich mit Tab, Pfeiltasten, Enter und Escape.
- axe DevTools — eine kostenlose Browser-Erweiterung, die automatische WCAG-Prüfungen auf der Live-Seite durchführt.
- NVDA / VoiceOver — Screenreader zur Überprüfung, ob Dropdown-Zustände und Labels korrekt angekündigt werden.
- Colour Contrast Analyser — überprüfe, ob deine benutzerdefinierten Farbüberschreibungen noch das Mindestverhältnis von 4,5:1 erfüllen.