Sobre este problema HTML
Em HTML, cada elemento tem um conjunto de papéis ARIA que pode transportar. O elemento ul tem implicitamente o papel list, e a especificação ARIA apenas permite que certos papéis o substituam — especificamente directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, e tree. O papel navigation não está entre eles.
O papel navigation é um papel de referência, o que significa que identifica uma secção principal da página dedicada a links de navegação. O HTML5 introduziu o elemento nav especificamente para este propósito, e este transporta o papel navigation implicitamente — não é necessário atributo role. Quando coloca role="navigation" num ul, está a criar um conflito com a semântica do elemento. Um ul representa uma lista de itens, não uma referência de navegação. Tecnologias assistivas como leitores de ecrã dependem de atribuições corretas de papéis para ajudar os utilizadores a compreender a estrutura da página e navegar eficientemente. Um papel incorreto pode confundir os utilizadores ao deturpar o que o elemento realmente é.
Além das questões de acessibilidade, este é um problema de conformidade com as normas. O validador W3C aplica as regras definidas na especificação ARIA in HTML, que mapeia cada elemento HTML aos seus papéis permitidos. Violar estas regras significa que a sua marcação é inválida e pode comportar-se de forma imprevisível em diferentes navegadores e tecnologias assistivas.
A correção é simples: use um elemento nav como invólucro para a sua lista de navegação. Isto dá-lhe a semântica de referência navigation automaticamente, enquanto o ul mantém o seu papel list adequado. Ambos os elementos funcionam em conjunto — o nav diz às tecnologias assistivas “esta é uma secção de navegação”, e o ul diz-lhes “aqui está uma lista de links”.
Exemplos
❌ Incorreto: papel navigation num ul
Isto desencadeia o erro de validação porque navigation não é um papel permitido para ul.
<ul role="navigation">
<li><a href="/">Início</a></li>
<li><a href="/about">Sobre</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
✅ Correto: envolver o ul num elemento nav
O elemento nav fornece a referência navigation implicitamente. Não é necessário atributo role.
<nav>
<ul>
<li><a href="/">Início</a></li>
<li><a href="/about">Sobre</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
</nav>✅ Correto: identificar múltiplas referências de navegação
Quando uma página tem mais de um elemento nav, use aria-label para distingui-los para os utilizadores de leitores de ecrã.
<nav aria-label="Principal">
<ul>
<li><a href="/">Início</a></li>
<li><a href="/about">Sobre</a></li>
<li><a href="/contact">Contacto</a></li>
</ul>
</nav>
<nav aria-label="Rodapé">
<ul>
<li><a href="/privacy">Política de Privacidade</a></li>
<li><a href="/terms">Termos de Serviço</a></li>
</ul>
</nav>
✅ Correto: usar um papel permitido em ul
Se precisar que o ul se comporte como algo diferente de uma lista simples — por exemplo, um menu numa aplicação web — use um dos seus papéis permitidos.
<ul role="menubar">
<li role="menuitem"><a href="/">Início</a></li>
<li role="menuitem"><a href="/about">Sobre</a></li>
<li role="menuitem"><a href="/contact">Contacto</a></li>
</ul>
Note que os papéis menu e menubar destinam-se a menus estilo aplicação com interação por teclado, não para navegação simples de sites. Para navegação padrão de websites, a abordagem do invólucro nav é quase sempre a escolha certa.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.