Toegankelijkheid
Giuliomax Menu Builder is ontworpen om WCAG 2.2 niveau AA te ondersteunen. De navigatie werkt volledig zonder muis, dropdowns worden aangekondigd door schermlezers en beweging kan systeembreed worden uitgeschakeld.
Over conformiteit. Deze functies zijn ontworpen om WCAG 2.2 niveau AA te ondersteunen, maar de uiteindelijke conformiteit van je live website hangt ook af van je inhoud, je thema en eventuele aangepaste kleuren die je instelt. Test je website met de hieronder vermelde hulpmiddelen.
Op deze pagina
WCAG 2.2 AA-ondersteuning
Toetsenbordnavigatie
ARIA-attributen
Focusbeheer
Verminderde beweging
Je menu testen
WCAG 2.2 AA-ondersteuning
De plugin is ontworpen rond de volgende WCAG 2.2-succescriteria die relevant zijn voor navigatiecomponenten:
| Criterium | Niveau | Hoe het is geïmplementeerd |
|---|---|---|
| 1.4.3 Contrast (minimum) | AA | Ingebouwde thema's zijn ontworpen om een contrastverhouding van 4,5:1 te halen; aangepaste kleuroverschrijvingen moeten opnieuw worden gecontroleerd. |
| 2.1.1 Toetsenbord | A | Alle functionaliteit is uitsluitend met het toetsenbord te bedienen. |
| 2.1.2 Geen toetsenbordval | A | De focus kan het menu altijd verlaten zonder een aanwijsapparaat. |
| 2.4.3 Focusvolgorde | A | De focusvolgorde volgt de visuele leesvolgorde van het menu. |
| 2.4.7 Focus zichtbaar | AA | Er is een zichtbare focusring op elk interactief element. |
| 2.4.11 Focusweergave | AA | Focusindicatoren voldoen aan minimale grootte- en contrastvereisten (nieuw in WCAG 2.2). |
| 4.1.2 Naam, rol, waarde | A | Alle interactieve elementen hebben een toegankelijke naam en de juiste ARIA-rol. |
Toetsenbordnavigatie
| Toets | Actie |
|---|---|
| Tab | Focus verplaatsen naar het volgende menu-item of interactief element. |
| Shift + Tab | Focus verplaatsen naar het vorige item. |
| Enter / Spatiebalk | Een link activeren of een dropdown openen/sluiten. |
| ↓ / ↑ | Focus verplaatsen door items in een open dropdown of megamenupaneel. |
| → / ← | Schakelen tussen items op het hoogste niveau. |
| Escape | De huidige dropdown of het megamenupaneel sluiten en focus terugsturen naar het bovenliggende item. |
| Home / End | Springen naar het eerste/laatste item in een dropdownlijst. |
ARIA-attributen
role="navigation"enaria-labelop het<nav>-element.aria-haspopup="true"enaria-expandedop items met een dropdown of megamenu.aria-controlsdie de triggerknop koppelt aan zijn paneel.role="menu"enrole="menuitem"binnen dropdowns.aria-current="page"op het item dat overeenkomt met de huidige pagina.
Focusbeheer
- Wanneer een dropdown opent, verschuift de focus naar het eerste item daarin.
- Wanneer een dropdown sluit, keert de focus terug naar het activerende item.
- De mobiele menu-overlay houdt de focus vast zolang hij open is. Sluiten brengt de focus terug naar de hamburgerknop.
Verminderde beweging
Alle overgangen respecteren de CSS-mediaquery prefers-reduced-motion: reduce. Bij ingeschakelde "Beweging verminderen"-voorkeur:
- Dropdown-animaties worden vervangen door direct tonen/verbergen.
- Overgangen bij openen/sluiten van het mobiele menu zijn direct.
- De ingangsanimatie van de aankondigingsbalk is uitgeschakeld.
- Ingangsanimaties op menu-items zijn uitgeschakeld.
Je menu testen
- Alleen toetsenbord — koppel de muis los en navigeer het hele menu via Tab, pijltoetsen, Enter en Escape.
- axe DevTools — gratis browserextensie voor geautomatiseerde WCAG-controles.
- NVDA / VoiceOver — schermlezers om dropdownstatussen en labels te verifiëren.
- Colour Contrast Analyser — controleer of aangepaste kleuren nog steeds de minimumverhouding van 4,5:1 halen.