Skip to main content
Validação HTML

O papel “navigation” é desnecessário para o elemento “nav”.

Sobre este problema HTML

A especificação HTML define certos elementos como tendo papéis ARIA implícitos — papéis que são automaticamente comunicados às tecnologias assistivas sem qualquer atributo adicional. O elemento nav é um destes: o seu papel implícito é navigation. Quando você adiciona explicitamente role="navigation" a um elemento nav, está a dizer ao navegador algo que ele já sabe, o que polui a sua marcação sem adicionar qualquer valor.

Esta redundância é importante por várias razões:

  • Manutenibilidade do código: Atributos desnecessários tornam o seu HTML mais difícil de ler e manter. Desenvolvedores futuros podem questionar-se se o papel explícito está lá por uma razão específica, criando confusão.
  • Conformidade com normas: O validador W3C avisa sobre isto porque a especificação ARIA segue um princípio frequentemente resumido como a primeira regra do ARIA: não use ARIA se um elemento HTML nativo já fornece a semântica que você precisa. Estendendo este princípio, não re-declare semântica que já está presente.
  • Nenhum benefício de acessibilidade: Tecnologias assistivas como leitores de ecrã já reconhecem nav como um marco de navegação. Adicionar o papel explícito não melhora a experiência para utilizadores destas tecnologias — é simplesmente ruído.

O atributo role="navigation" é útil quando aplicado a um elemento não-semântico como um div ou span que funciona como navegação mas não pode ser alterado para um elemento nav (por exemplo, devido a restrições legadas). Mas quando você já está a usar nav, o atributo é desnecessário.

Para corrigir isto, remova o atributo role="navigation" do seu elemento nav. O significado semântico é totalmente preservado.

Exemplos

Incorreto: papel redundante no nav

Isto despoleta o aviso do validador W3C porque o papel navigation já é implícito:

<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Correto: nav sem o papel explícito

Simplesmente remova o atributo role redundante:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Correto: usar role="navigation" num elemento não-semântico

Se não pode usar um elemento nav, aplicar o papel a um div é uma abordagem válida. Isto não despoleta o aviso:

<div role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Correto: rotular múltiplos elementos nav

Quando uma página tem mais do que um nav, use aria-label ou aria-labelledby para os diferenciar para utilizadores de tecnologia assistiva — mas ainda assim não adicione o role redundante:

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<nav aria-label="Footer">
  <ul>
    <li><a href="/privacy">Privacy Policy</a></li>
    <li><a href="/terms">Terms of Service</a></li>
  </ul>
</nav>

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.