Regra de acessibilidade: O alvo do skip-link deve existir e ser focalizável

Sobre esta regra de acessibilidade

Os leitores de ecrã e a navegação apenas por teclado processam o conteúdo da página sequencialmente, seguindo a ordem do DOM. Isto significa que tudo antes do conteúdo principal — logótipos do site, barras de navegação, formulários de pesquisa, links utilitários — deve ser percorrido antes de um utilizador alcançar aquilo que realmente procura. Em sites complexos, este conteúdo repetitivo pode ser extremamente extenso.

Um skip link a funcionar adequadamente fornece a estes utilizadores um atalho. Quando o alvo do skip link está em falta ou não é focalizável, ativar o link não faz nada. O utilizador permanece no topo da página sem qualquer indicação do que correu mal, o que é confuso e frustrante.

Este problema afeta principalmente:

Utilizadores cegos e surdocegos que dependem de leitores de ecrã para navegar sequencialmente.
Utilizadores apenas de teclado (incluindo aqueles com limitações de mobilidade) que navegam por cada elemento interativo.
Utilizadores visuais de teclado que beneficiam do skip link visível aparecer ao focar.

Esta regra é uma melhor prática Deque e alinha-se com a técnica WCAG G1 (“Adicionar um link no topo de cada página que vai diretamente para a área de conteúdo principal”), que suporta WCAG 2.4.1 Bypass Blocks (Nível A). O Critério de Sucesso 2.4.1 requer que exista um mecanismo para contornar blocos de conteúdo repetidos em múltiplas páginas.

Como corrigir

Adicione um skip link como o primeiro elemento focalizável dentro da tag <body>, antes de qualquer navegação ou conteúdo repetido.
Defina o href para um identificador de fragmento (por exemplo, #main-content) que corresponda ao id do elemento alvo.
Certifique-se de que o elemento alvo existe no DOM com o id correspondente.
Torne o alvo focalizável se não for nativamente focalizável. Elementos não interativos como <div> ou <main> precisam de tabindex="-1" para que o browser possa mover o foco para eles quando o skip link é ativado.
Não oculte o skip link com display: none ou visibility: hidden, pois estas propriedades tornam o link inacessível a todos os utilizadores, incluindo utilizadores de leitores de ecrã.

Gerir a visibilidade do skip link

Pode tornar o skip link visualmente oculto até receber foco de teclado. Esta abordagem mantém o layout limpo para utilizadores de rato enquanto permanece totalmente acessível para utilizadores de teclado:

Use CSS para posicionar o link fora do ecrã por defeito.
No :focus, traga-o de volta ao ecrã para que utilizadores visuais de teclado possam vê-lo.

Alternativamente, pode tornar o skip link permanentemente visível — esta é a abordagem mais simples e inclusiva.

Importante: Nunca use display: none ou visibility: hidden no skip link. Estas propriedades removem o elemento da árvore de acessibilidade e da ordem de tabulação, tornando-o inútil para todos.

Exemplos

Incorreto: o alvo do skip link não existe

O skip link aponta para #main-content, mas não existe nenhum elemento com esse id na página.

<body>
  <a href="#main-content">Skip to main content</a>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  <main>
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
  </main>
</body>

Incorreto: o alvo existe mas não é focalizável em alguns browsers

Alguns browsers mais antigos ou baseados em WebKit podem não mover o foco para um elemento não interativo mesmo com um id correspondente, a menos que tabindex="-1" seja adicionado.

<body>
  <a href="#main-content">Skip to main content</a>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <div id="main-content">
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
  </div>
</body>

Correto: skip link com um alvo focalizável

O elemento alvo tem tanto um id correspondente como tabindex="-1" para garantir que recebe foco de forma confiável em todos os browsers.

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  <main id="main-content" tabindex="-1">
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
  </main>
</body>

Correto: skip link que é visualmente oculto até ser focado

Este padrão CSS oculta o skip link fora do ecrã por defeito e revela-o quando o utilizador navega até ele.

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <main id="main-content" tabindex="-1">
    <h1>Welcome</h1>
    <p>Page content goes here.</p>
  </main>
</body>

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 8px 16px;
  background: #ffc;
  border: 2px solid #990000;
  z-index: 1000;
}

O que a regra verifica

Esta regra axe-core (skip-link) verifica que cada skip link na página — tipicamente o primeiro link no documento — tem um alvo que tanto existe no DOM como é focalizável. Se o href aponta para um identificador de fragmento como #main-content, a regra confirma que um elemento com id="main-content" está presente e pode receber foco.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Adding a link at the top of each page that goes directly to the main content area

→

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Detecte problemas de acessibilidade automaticamente

O Rocket Validator examina milhares de páginas com Axe Core e o W3C Validator, encontrando problemas de acessibilidade em todo o seu site.

Iniciar teste gratuito Ver preços