Acessibilidade
O Giuliomax Menu Builder foi projetado para oferecer suporte ao WCAG 2.2 nível AA, seguindo também as práticas do WAI-ARIA Authoring Practices Guide.
Sobre a conformidade. Esses recursos foram desenvolvidos para oferecer suporte ao WCAG 2.2 nível AA, mas a conformidade final do seu site publicado também depende do seu conteúdo, do seu tema e de quaisquer cores personalizadas que você definir. Teste seu site com as ferramentas listadas abaixo.
Navegação por teclado
- Tab / Shift+Tab: percorre os itens do menu em ordem.
- Enter / Space: abre submenus e aciona links.
- Esc: fecha o submenu aberto e retorna o foco ao item pai.
- → / ←: navega entre itens do mesmo nível no menu horizontal.
- ↓ / ↑: navega entre itens dentro de um dropdown aberto.
Atributos ARIA
role="navigation"earia-labelno elemento<nav>.aria-haspopup="true"earia-expandednos itens com submenus.aria-current="page"no item que corresponde à página atual.aria-hidden="true"em elementos decorativos (ícones, separadores).- Textos alternativos via
aria-labelnos botões de hambúrguer e fechar.
Contraste de cores
Os temas padrão do plugin foram projetados para atender à razão mínima de contraste de 4,5:1 para texto normal e 3:1 para texto grande, conforme o critério WCAG 1.4.3; cores personalizadas que você sobrescrever precisam ser verificadas novamente. Ao criar temas personalizados, use a ferramenta de verificação de contraste integrada no painel para confirmar a conformidade.
Preferência por movimento reduzido
O plugin respeita automaticamente a configuração prefers-reduced-motion: reduce do sistema operacional do usuário:
- Animações de dropdown são substituídas por exibição direta.
- Transições de abertura/fechamento do menu mobile são instantâneas.
- A animação de entrada da barra de avisos é desativada.
- Animações de entrada dos itens de menu são desativadas.
Leitores de tela
O plugin foi testado com NVDA + Firefox, VoiceOver + Safari e JAWS + Chrome. Os estados dos submenus (expandido/recolhido) são anunciados corretamente. O foco é gerenciado de forma explícita ao abrir e fechar dropdowns e o overlay de busca.
Testando seu menu
- Somente teclado — desconecte o mouse e navegue o menu inteiro via Tab, setas, Enter e Escape.
- axe DevTools — extensão gratuita para auditorias WCAG automatizadas.
- NVDA / VoiceOver — leitores de tela para verificar estados e labels.
- Colour Contrast Analyser — confirme se as cores personalizadas mantêm a razão mínima de 4,5:1.