Por que os links de navegação por pulo são importantes
Pular links de navegação oferece vários benefícios:
- Usabilidade aprimorada: Reduz o esforço necessário para navegar pelos menus para usuários que dependem de tecnologias assistivas.
- Acessibilidade aprimorada: Garante a conformidade com as diretrizes de acessibilidade, como WCAG e ADA.
- Melhor experiência do usuário: Torna seu site mais fácil de navegar para todos os usuários.
Guia passo a passo para adicionar links de navegação de pular
Etapa 1: adicione HTML para links de pular
Adicione o HTML para um link de navegação no topo do arquivo de cabeçalho do seu site:
Pular para o conteúdo principal
Garantir a href O atributo aponta para o ID do seu contêiner de conteúdo principal.
Etapa 2: adicione um ID ao conteúdo principal
No seu tema WordPress, localize o contêiner de conteúdo principal e adicione um ID:
</div>
Etapa 3: estilize o Skip Link
Estilize o skip link para garantir que ele fique visível quando focado. Adicione o seguinte CSS ao seu tema:
.skip-link { posição: absoluta; topo: -40px; esquerda: 0; fundo: #000; cor: #fff; preenchimento: 10px; decoração de texto: nenhuma; índice z: 100; } .skip-link: foco { topo: 0; }
Etapa 4: Teste o link de pular
Use um teclado para navegar no seu site e verifique se o link de pular aparece e funciona corretamente. Pressione Tab para focar no link de pular e Enter para ativá-lo.
Melhores práticas para pular links de navegação
- Coloque os links de salto primeiro: Certifique-se de que o link de navegação seja o primeiro elemento focalizável na página.
- Use rótulos claros: O texto do link deve indicar claramente sua finalidade, por exemplo, “Ir para o conteúdo principal”.
- Teste em vários dispositivos: Verifique a funcionalidade em desktops, tablets e dispositivos móveis.
Estudos de caso: Skip Links em ação
Estudo de caso 1: Site educacional
Uma plataforma educacional implementou links de navegação, resultando em melhor navegação para alunos que usam leitores de tela e uma melhoria de 15% nas pontuações de acessibilidade.
Estudo de caso 2: Loja de comércio eletrônico
Um varejista on-line adicionou links de navegação ao seu menu de navegação, reduzindo as taxas de rejeição e melhorando a usabilidade para usuários de teclado.
Perguntas frequentes: Adicionando links de navegação ignorados
O que são links de navegação de pular linhas?
Os links de navegação ignorados permitem que os usuários ignorem menus de navegação repetitivos e vão diretamente para o conteúdo principal da página.
Os links de navegação são necessários para a conformidade com a acessibilidade?
Embora não sejam explicitamente obrigatórios, os links de navegação ajudam a atender às diretrizes do WCAG, melhorando a navegação para usuários de tecnologia assistiva.
Posso adicionar links de navegação sem editar o código?
Sim, alguns plugins de acessibilidade como Plugin de acessibilidade WP One Tap pode adicionar links de navegação automaticamente.
Os links de navegação funcionam em dispositivos móveis?
Sim, quando implementado corretamente, os links de navegação funcionam em todos os dispositivos, incluindo celulares.
Como posso testar links de navegação ignorados?
Use um teclado para navegar pelo seu site e certifique-se de que o link de navegação esteja focalizável e funcional.
