Regra de acessibilidade: A página deve ter meios para contornar blocos repetidos

Sobre esta regra de acessibilidade

Os websites geralmente repetem links de navegação, branding e outros elementos de interface em todas as páginas. Enquanto os utilizadores com visão que usam rato podem visualmente examinar estes blocos e clicar onde quiserem, os utilizadores que só usam teclado e os utilizadores de leitores de ecrã devem navegar através de cada elemento interativo sequencialmente. Sem um mecanismo de contorno, um utilizador de teclado pode precisar de pressionar Tab dezenas de vezes apenas para chegar ao conteúdo principal em cada nova página que visita. Para utilizadores com deficiências motoras graves, isto pode demorar vários minutos por página e causar fadiga ou dor física. Mesmo utilizadores com limitações menos severas experienciarão atrasos frustrantes comparado com utilizadores de rato, que conseguem chegar a qualquer link em um ou dois segundos.

Os utilizadores de leitores de ecrã também beneficiam significativamente dos mecanismos de contorno. Elementos de referência como <main>, <nav>, e <header> permitem que os leitores de ecrã apresentem um esboço estrutural da página, permitindo aos utilizadores saltar diretamente para a secção de que precisam. Os cabeçalhos servem um propósito similar — os utilizadores de leitores de ecrã podem navegar por nível de cabeçalho para localizar rapidamente a área de conteúdo principal.

Esta regra mapeia para WCAG 2.4.1 Bypass Blocks (Nível A), que requer que um mecanismo esteja disponível para contornar blocos de conteúdo repetidos em múltiplas páginas. É também requerido pela Section 508 (especificamente §1194.22(o)), as diretrizes do Trusted Tester, e EN 301 549. Como é um requisito de Nível A, representa a linha de base mínima para conformidade de acessibilidade.

Como a regra funciona

A regra axe bypass verifica que uma página inclui pelo menos um dos seguintes:

Uma região de referência (como <main>, <nav>, <header>, ou <footer>)
Um cabeçalho (um elemento <h1> até <h6>)
Um link de salto interno (um link âncora que aponta para uma localização mais abaixo na página)

Se nenhum destes estiver presente, a regra marca a página como uma falha.

Como corrigir

A melhor abordagem é usar elementos de referência HTML5 para estruturar a sua página. No mínimo, inclua um elemento <main> que envolve o conteúdo principal da página. Deve também usar <header>, <nav>, e <footer> para identificar outras secções comuns. Uma página deve ter apenas um elemento de referência <main>.

Adicionalmente, considere adicionar um link de navegação de salto como o primeiro elemento focalizável na página. Isto fornece um atalho imediato para utilizadores de teclado que não usam leitores de ecrã e podem não conseguir navegar por elementos de referência.

Prefira elementos HTML5 nativos sobre os seus equivalentes ARIA. Por exemplo, use <main> em vez de <div role="main">. Os elementos nativos têm melhor suporte e requerem menos código.

Exemplos

Incorreto: sem elementos de referência, cabeçalhos ou links de salto

Esta página não tem elementos de referência estruturais, nem cabeçalhos, nem link de salto. Os utilizadores de teclado devem usar tab através de cada elemento para chegar ao conteúdo.

<div class="header">
  <div class="logo">My Site</div>
  <div class="nav">
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</div>
<div class="content">
  <p>This is the main content of the page.</p>
</div>
<div class="footer">
  <p>Footer information</p>
</div>

Correto: usando elementos de referência HTML5

Substituir wrappers genéricos <div> com elementos HTML5 semânticos dá à página uma estrutura adequada que as tecnologias assistivas podem usar para navegação.

<header>
  <div class="logo">My Site</div>
  <nav>
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>
<main>
  <h1>Welcome</h1>
  <p>This is the main content of the page.</p>
  <section>
    <h2>Latest News</h2>
    <p>Section content here.</p>
  </section>
</main>
<footer>
  <p>Footer information</p>
</footer>

Correto: adicionando um link de navegação de salto

Um link de salto dá aos utilizadores de teclado uma forma imediata de contornar conteúdo repetido. É tipicamente visualmente oculto até receber foco.

<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <header>
    <nav>
      <a href="/home">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main id="main-content">
    <h1>Page Title</h1>
    <p>This is the main content of the page.</p>
  </main>
  <footer>
    <p>Footer information</p>
  </footer>
</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;
}

Quando o link de salto recebe foco do teclado, torna-se visível, e pressionar Enter move o foco diretamente para o elemento <main>. Combinado com elementos de referência adequados, isto dá a todos os utilizadores acesso rápido e fiável ao conteúdo principal da página.

Learn more: