Accessibilità
Giuliomax Menu Builder è progettato per supportare WCAG 2.2 Livello AA. La navigazione funziona completamente senza mouse, i dropdown vengono annunciati agli screen reader e il movimento può essere disabilitato a livello di sistema.
Informazioni sulla conformità. Queste funzionalità sono progettate per supportare WCAG 2.2 Livello AA, ma la conformità finale del tuo sito in produzione dipende anche dai tuoi contenuti, dal tuo tema e da eventuali colori personalizzati che imposti. Testa il tuo sito con gli strumenti elencati di seguito.
Supporto WCAG 2.2 AA
Il plugin è progettato attorno ai seguenti criteri di successo WCAG 2.2 rilevanti per i componenti di navigazione:
| Criterio | Livello | Come viene soddisfatto |
|---|---|---|
| 1.4.3 Contrasto (minimo) | AA | I temi predefiniti sono progettati per raggiungere un rapporto di contrasto di 4,5:1; gli override di colore personalizzati devono essere verificati nuovamente. |
| 2.1.1 Tastiera | A | Tutte le funzionalità del menu sono accessibili tramite tastiera, senza richiedere un dispositivo di puntamento. |
| 2.4.3 Ordine del focus | A | L'ordine del focus nel menu segue l'ordine visivo delle voci e dei sottomenu. |
| 2.4.7 Focus visibile | AA | Tutti gli elementi interattivi mostrano un indicatore di focus visibile e chiaramente identificabile. |
| 2.5.3 Etichetta nel nome | A | I nomi accessibili degli elementi interattivi includono il testo visibile dell'etichetta. |
| 3.2.3 Navigazione coerente | AA | L'ordine e la posizione delle voci di menu rimangono coerenti tra le pagine. |
| 4.1.2 Nome, ruolo, valore | A | Tutti gli elementi del menu espongono ruolo, nome e stato corretti tramite attributi ARIA. |
Navigazione da tastiera
Tabella completa delle scorciatoie da tastiera supportate nella navigazione del menu:
| Tasto | Azione |
|---|---|
| Tab | Sposta il focus alla voce di menu successiva. |
| Shift+Tab | Sposta il focus alla voce di menu precedente. |
| Enter / Space | Attiva il link o apre/chiude il sottomenu della voce focalizzata. |
| ↓ / ↑ | Naviga tra le voci di un sottomenu o mega menu aperto. |
| → / ← | Apre il sottomenu della voce focalizzata (→) o torna al livello superiore (←). |
| Escape | Chiude il sottomenu o mega menu aperto e restituisce il focus alla voce genitore. |
| Home / End | Sposta il focus alla prima o all'ultima voce del menu corrente. |
Attributi ARIA
Menu Builder genera automaticamente tutti gli attributi ARIA necessari per una navigazione accessibile:
role="navigation"earia-labelsull'elemento<nav>per identificare la regione di navigazione.aria-haspopup="true"sulle voci con sottomenu o mega menu.aria-controlsche punta all'ID del pannello dropdown controllato dalla voce.role="menu"erole="menuitem"sui sottomenu e sulle loro voci.aria-current="page"sulla voce che corrisponde alla pagina correntemente visualizzata.
Gli attributi aria-expanded vengono aggiornati dinamicamente in JavaScript ogni volta che un sottomenu viene aperto o chiuso, in modo che gli screen reader annuncino correttamente lo stato del controllo.
Gestione del focus
- Quando un dropdown viene chiuso tramite Escape, il focus ritorna automaticamente alla voce genitore che lo ha aperto.
- Il modal di ricerca intrappola il focus al suo interno mentre è aperto, in modo che Tab non possa portare il focus fuori dal modal.
- Quando il modal di ricerca viene chiuso, il focus ritorna al pulsante che lo ha aperto.
Riduzione del movimento
Menu Builder rispetta la media query CSS prefers-reduced-motion: reduce. Quando l'utente ha abilitato l'opzione di riduzione del movimento nel sistema operativo:
- Le animazioni di apertura/chiusura dei dropdown sono eliminate.
- L'animazione di ingresso della barra di navigazione è disabilitata.
- Le transizioni di hover sui link sono ridotte al minimo.
- L'animazione della barra di avanzamento scroll è semplificata.
Testare il menu
Per verificare l'accessibilità del menu sul tuo sito, si consiglia di usare i seguenti strumenti e metodi:
- Solo tastiera — naviga l'intero menu usando solo Tab, frecce direzionali, Enter e Escape, senza toccare il mouse.
- axe DevTools — estensione del browser (Chrome/Firefox) che analizza la pagina e segnala i problemi di accessibilità WCAG.
- NVDA / VoiceOver — testa il menu con un lettore di schermo reale: NVDA su Windows, VoiceOver su macOS/iOS.
- Colour Contrast Analyser — strumento desktop per verificare manualmente il rapporto di contrasto tra testo e sfondo su colori personalizzati.