2 problemas documentados

Links e Navegação

Texto de link descritivo, links de pular conteúdo, foco visível e diferenciação de links do texto.

Imagens Formulários Contraste Estrutura Links Acessibilidade Tabelas Multimídia:

WCAG A

Texto de link genérico ou não descritivo

O texto de um link deve descrever seu destino fora de contexto. Textos como "clique aqui", "saiba mais", "acesse" são inúteis para usuários que navegam por lista de links.

Impacto por tipo de deficiência

Cegueira

NVDA/JAWS permitem listar todos os links da página — "clique aqui" repetido 10 vezes não diz nada sobre o destino de cada link.

Motora

Dragon NaturallySpeaking ativa links por voz pronunciando seu texto — "clique aqui" é ambíguo se houver múltiplos.

Cognitiva

Texto descritivo reduz a carga cognitiva — usuário sabe o destino sem ter que ler o parágrafo ao redor.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ Links genéricos não descrevem o destino -->
<p>Para consultar seu benefício, <a href="/beneficio">clique aqui</a>.</p>
<p>Para ver o regulamento, <a href="/regulamento">clique aqui</a>.</p>

<!-- ❌ "Saiba mais" repetido sem contexto -->
<article>
  <h3>IPTU 2024</h3>
  <p>Prazo para pagamento...</p>
  <a href="/iptu">Saiba mais</a>
</article>

Correto — acessível para todos os usuários

<!-- ✓ Link descritivo por si só -->
<p>Para consultar, acesse <a href="/beneficio">Consulta de Benefício</a>.</p>

<!-- ✓ Contexto adicionado via sr-only quando necessário -->
<article>
  <h3>IPTU 2024</h3>
  <p>Prazo para pagamento...</p>
  <a href="/iptu">
    Saiba mais
    <span class="sr-only"> sobre IPTU 2024</span>
  </a>
</article>

<!-- ✓ aria-label para contexto completo -->
<a href="/iptu" aria-label="Saiba mais sobre IPTU 2024">Saiba mais</a>

Técnicas ARIA relevantes

aria-labelaria-labelledbyaria-describedby

WCAG A

Ausência de link "Pular para o conteúdo"

WCAG 2.4.1eMAG 1.6

Páginas com navegação repetida precisam de um mecanismo para pular blocos de conteúdo que se repetem. O padrão mais comum é um link visível ao receber foco apontando para o conteúdo principal.

Impacto por tipo de deficiência

Motora

Usuários que navegam apenas por teclado precisam pressionar Tab dezenas de vezes para passar pelo menu antes de chegar ao conteúdo principal.

Cegueira

Sem skip link, cada página exige ouvir todo o menu de navegação antes do conteúdo — em sites com menus grandes, isso é insuportável.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ Nenhum mecanismo de pulo -->
<body>
  <header>
    <nav><!-- 50 links de menu --></nav>
  </header>
  <main><!-- conteúdo --></main>
</body>

Correto — acessível para todos os usuários

<!-- ✓ Skip link: visível ao receber foco -->
<a href="#main-content" class="skip-link">
  Pular para o conteúdo principal
</a>
<header>
  <nav>...</nav>
</header>
<main id="main-content" tabindex="-1">
  <!-- conteúdo -->
</main>

/* CSS do skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: #0048B6;
  color: white;
  font-weight: bold;
  border-radius: 0 0 0.5rem 0.5rem;
}
.skip-link:focus {
  top: 0;
}

📑 Estrutura de Cabeçalhos

Próxima categoria

⌨️ Acessibilidade por Teclado

Ver todas as categorias do Guia