Sobre este problema HTML
A especificação HTML mapeia certos elementos para papéis ARIA implícitos. O elemento <footer>, quando usado como filho direto de <body> (isto é, não aninhado dentro de um elemento <article>, <aside>, <main>, <nav>, ou <section>), carrega automaticamente o papel de marco contentinfo. Isto significa que leitores de ecrã e outras tecnologias assistivas já o anunciam como um marco de informação de conteúdo sem qualquer marcação extra.
Adicionar role="contentinfo" a um elemento <footer> é redundante porque:
- Duplica semânticas incorporadas. Os navegadores já expõem o papel correto à árvore de acessibilidade. Repeti-lo não adiciona qualquer benefício e desorganiza a sua marcação.
- Pode causar confusão para programadores. Ver um papel explícito pode sugerir que o elemento não tem um por defeito, levando a mal-entendidos sobre como funcionam as semânticas HTML.
- Viola a primeira regra do uso de ARIA. O guia “Using ARIA” do W3C declara: “Se pode usar um elemento ou atributo HTML nativo com as semânticas e comportamento que precisa já incorporados, em vez de reconfigurar um elemento e adicionar um papel, estado ou propriedade ARIA para o tornar acessível, então faça-o.”
Vale a pena notar que quando um <footer> está aninhado dentro de um elemento de seccionamento como <article> ou <section>, não carrega o papel contentinfo — mapeia para um papel genérico em vez disso. Nesse contexto, adicionar role="contentinfo" mudaria realmente as semânticas do elemento em vez de ser redundante, embora fazer isso geralmente não seja apropriado uma vez que cada página deve ter apenas um marco contentinfo.
Se está a trabalhar com um <div> que serve como rodapé (talvez em código legado), a melhor abordagem é substituí-lo por um elemento <footer> semântico em vez de aplicar role="contentinfo" ao <div>.
Exemplos
❌ Papel redundante em <footer>
Isto despoleta o aviso do validador porque o papel já é implícito:
<footer role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>
✅ Corrigido: <footer> sem papel redundante
Simplesmente remova o atributo role="contentinfo":
<footer>
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>
✅ Usar um <div> como rodapé (padrão legado)
Se não pode usar um elemento <footer> por alguma razão, aplicar role="contentinfo" a um <div> é válido e significativo uma vez que o <div> não tem papel implícito:
<div role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</div>
No entanto, substituir o <div> por um <footer> é sempre a abordagem preferida.
✅ Rodapé aninhado dentro de uma secção
Quando <footer> aparece dentro de um elemento de seccionamento, não carrega o papel contentinfo. Nenhum papel explícito é necessário aqui também — simplesmente representa conteúdo de rodapé para essa secção:
<article>
<h2>Blog Post Title</h2>
<p>Article content here.</p>
<footer>
<p>Published on January 1, 2024</p>
</footer>
</article>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.