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

Sobre esta regra de acessibilidade

Os websites normalmente repetem links de navegação, marca e outros elementos de interface em todas as páginas. Enquanto utilizadores com visão que usam rato podem visualmente examinar estes blocos e clicar onde quiserem, utilizadores que usam apenas teclado e 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 premir 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 levar vários minutos por página e causar fadiga ou dor física. Mesmo utilizadores com limitações menos graves vão experienciar atrasos frustrantes comparado com utilizadores de rato, que podem chegar a qualquer link em um ou dois segundos.

Os utilizadores de leitores de ecrã também beneficiam significativamente dos mecanismos de contorno. Landmarks como <main>, <nav> e <header> permitem aos leitores de ecrã apresentar 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 — 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 Trusted Tester, e EN 301 549. Por ser um requisito de Nível A, representa a linha de base mínima para conformidade de acessibilidade.

Como funciona a regra

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

Uma região landmark (como <main>, <nav>, <header>, ou <footer>)
Um cabeçalho (um elemento <h1> a <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 falha.

Como corrigir

A melhor abordagem é usar elementos landmark HTML5 para estruturar a sua página. No mínimo, inclua um elemento <main> que envolva 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 landmark <main>.

Adicionalmente, considere adicionar um link de salto de navegação como o primeiro elemento focá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 landmarks.

Prefira elementos HTML5 nativos em vez dos seus equivalentes ARIA. Por exemplo, use <main> em vez de <div role="main">. Os elementos nativos são melhor suportados e requerem menos código.

Exemplos

Incorreto: sem landmarks, cabeçalhos ou links de salto

Esta página não tem landmarks 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 landmark HTML5

Substituir wrappers <div> genéricos 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 salto de navegação

Um link de salto dá aos utilizadores de teclado uma forma imediata de contornar conteúdo repetido. É normalmente 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 premir Enter move o foco diretamente para o elemento <main>. Combinado com elementos landmark adequados, isto dá a todos os utilizadores acesso rápido e fiável ao conteúdo principal da página.

Learn more: