div responder a cliques, ele não fornece automaticamente o mesmo comportamento de teclado e semântica de navegação que um elemento âncora.
Para navegar para outra página, use uma âncora. Para uma ação que altera a interface, use um botão.
2. Crie um layout responsivo com CSS
Um menu de navegação deve se adaptar à largura de tela disponível sem ocultar links importantes ou criar rolagem horizontal.
O CSS a seguir cria um layout de navegação flexível na área de trabalho:
*,
*::before,
*::after {
box-sizing: border-box;
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1rem 5%;
}
.site-logo {
color: #173b72;
font-size: 1.4rem;
font-weight: 700;
text-decoration: none;
}
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.nav-list a {
display: inline-block;
padding: 0.5rem 0;
color: #222;
text-decoration: none;
}
.nav-list a:hover {
color: #175cd3;
text-decoration: underline;
}
O Flexbox alinha o logotipo e a navegação horizontalmente, permitindo que a lista de links seja quebrada quando necessário.
O gap propriedade controla o espaçamento entre links sem exigir margens individuais. A remoção dos marcadores de lista também produz um layout de navegação mais limpo, preservando a semântica da lista subjacente.
Observe que o estilo de foco inclui um sublinhado e também uma mudança de cor. Isso fornece uma dica visual adicional em vez de depender exclusivamente da cor.
No entanto, os efeitos de foco por si só são insuficientes porque as telas sensíveis ao toque não têm comportamento convencional de foco e os usuários do teclado não navegam com o mouse.
3. Torne a navegação do teclado visível
Muitos visitantes usam a tecla Tab para navegar entre os elementos interativos. Um menu de navegação deve facilitar a identificação do link atualmente em foco.
Adicione um estilo de foco visível:
.nav-list a:focus-visible,
.site-logo:focus-visible {
outline: 3px solid #175cd3;
outline-offset: 4px;
border-radius: 2px;
}
O :focus-visible A pseudoclasse permite que os navegadores exibam um indicador de foco quando for apropriado, principalmente durante a navegação pelo teclado.
Evite remover o contorno padrão do navegador, a menos que você o substitua por uma alternativa claramente visível.
A acessibilidade do teclado também depende da estrutura HTML. Os elementos âncora padrão já suportam foco e ativação do teclado, portanto, a navegação básica acima não precisa de manipuladores de teclado JavaScript personalizados.
Esse é um princípio de design importante: use o comportamento nativo do navegador sempre que possível, em vez de recriá-lo desnecessariamente.
Em telas menores, um menu de navegação horizontal pode ocupar muito espaço. Um botão de alternância pode fornecer uma alternativa compacta, preservando o acesso aos links.
Primeiro, atualize o HTML:
<header class="site-header">
<a class="site-logo" href="/">
DevStudio
a>
<button
class="menu-toggle"
type="button"
aria-expanded="false"
aria-controls="primary-menu"
>
Menu
button>
<nav aria-label="Main navigation">
<ul class="nav-list" id="primary-menu">
<li><a href="/">Homea>li>
<li><a href="/articles">Articlesa>li>
<li><a href="/tutorials">Tutorialsa>li>
<li><a href="/about">Abouta>li>
ul>
nav>
header>
Em seguida, adicione os estilos móveis:
.menu-toggle {
display: none;
padding: 0.65rem 1rem;
border: 1px solid #777;
border-radius: 0.375rem;
background: white;
color: #222;
font: inherit;
cursor: pointer;
}
@media (max-width: 640px) {
.site-header {
flex-wrap: wrap;
}
.menu-toggle {
display: block;
}
.site-header nav {
flex-basis: 100%;
}
.nav-list {
display: none;
flex-direction: column;
gap: 0.25rem;
padding-top: 1rem;
}
.nav-list.is-open {
display: flex;
}
}
O botão de menu fica oculto em telas maiores e exibido em telas menores. No celular, os links de navegação ficam inicialmente ocultos até que o JavaScript adicione o is-open aula.
O aria-expanded atributo comunica se o menu está atualmente expandido, enquanto aria-controls identifica o elemento controlado pelo botão.
Esses atributos devem refletir o estado real da interface. Adicioná-los sem atualizar seus valores quando o menu abre e fecha pode confundir os usuários de tecnologia assistiva.
5. Implemente o comportamento de alternância
O JavaScript deve atualizar o estado visual e as informações de acessibilidade quando o usuário ativar o botão.
const menuToggle =
document.querySelector(".menu-toggle");
const primaryMenu =
document.querySelector("#primary-menu");
menuToggle.addEventListener("click", () => {
const isExpanded =
menuToggle.getAttribute("aria-expanded") === "true";
menuToggle.setAttribute(
"aria-expanded",
String(!isExpanded)
);
primaryMenu.classList.toggle("is-open");
});
Quando o botão é clicado, o código lê o estado atual, reverte-o, atualiza aria-expandede alterna a classe CSS.
Como o botão é um botão HTML nativo, ele já oferece suporte à ativação do teclado. Não há necessidade de adicionar manipuladores de teclas Enter ou Espaço separados.
Para uma implementação de produção, você também deve considerar o que acontece quando a janela de visualização muda de móvel para desktop. Por exemplo, se o menu estiver aberto no celular e o visitante redimensionar o navegador, o layout do desktop não deverá permanecer em um estado inconsistente.
Uma implementação mais completa pode sincronizar o estado do menu com o ponto de interrupção responsivo, fechar o menu quando um link de navegação for selecionado e garantir que links ocultos não possam ser alcançados por meio da navegação pelo teclado.
6. Teste a acessibilidade além da aparência visual
Um menu de navegação pode parecer correto e ainda assim ser difícil de usar. Os testes devem abranger verificações automatizadas e interações reais.
Comece com testes de teclado. Use Tab e Shift+Tab para navegar pelo logotipo, botão de menu e links de navegação. Verifique se os indicadores de foco estão visíveis e se a ordem segue a estrutura visual e lógica.
A seguir, verifique o comportamento do menu móvel:
-
O botão de menu aparece no ponto de interrupção pretendido.
-
A ativação do botão abre e fecha a navegação.
-
O
aria-expandedo valor corresponde ao estado visível. -
Links ocultos não estão disponíveis para interação com o teclado enquanto o menu está fechado.
-
Selecionar um link leva o visitante ao destino correto.
Você também pode usar ferramentas de inspeção de acessibilidade para identificar nomes acessíveis ausentes, atributos ARIA inválidos e outros problemas comuns.
Ferramentas automatizadas são úteis, mas não conseguem estabelecer que cada interação seja compreensível. O teste manual com teclado e, sempre que possível, com leitor de tela continua importante.
Para sites maiores, componentes de navegação reutilizáveis e testes automatizados de navegador podem ajudar a evitar regressões de acessibilidade quando os estilos ou a lógica de interação mudam.
Conclusão
Navegação acessível começa com HTML semântico e se baseia nessa base por meio de CSS responsivo, indicadores de foco visíveis e JavaScript cuidadosamente implementado.
Links e botões nativos fornecem automaticamente grande parte do comportamento esperado do teclado. Os estilos responsivos tornam o menu utilizável em vários tamanhos de tela, enquanto o estado ARIA preciso ajuda a comunicar se um menu recolhível está aberto ou fechado.
A abordagem mais confiável é manter a implementação o mais simples possível, usar os recursos do navegador em vez de recriá-los e testar a experiência real em vez de confiar apenas na aparência da interface.
Quando a acessibilidade é considerada desde o início, a navegação torna-se mais fácil de manter e mais utilizável para uma gama mais ampla de visitantes.
