Sobre este problema HTML
A especificação HTML define papéis semânticos incorporados para muitos elementos, e o elemento <header> é um deles. Quando um <header> é um filho direto de <body> (ou pelo menos não aninhado dentro de um elemento de secção), os navegadores e as tecnologias assistivas já o interpretam como um marco banner — a região da página que tipicamente contém o logótipo do site, navegação e outro conteúdo introdutório. Adicionar explicitamente role="banner" duplica aquilo que o navegador já sabe, o que adiciona ruído desnecessário à sua marcação.
Este princípio faz parte da orientação da especificação WAI-ARIA sobre o uso de papéis ARIA: a primeira regra do ARIA é “Se você puder usar um elemento ou atributo HTML nativo com a semântica e comportamento que requer já incorporados, em vez de reaproveitarum elemento e adicionar um papel, estado ou propriedade ARIA para o tornar acessível, então faça-o.” Papéis redundantes normalmente não quebram nada, mas confundem o código, podem confundir os programadores que mantêm o projeto e sinalizam uma incompreensão da semântica HTML.
Vale a pena notar uma nuance importante: o elemento <header> só mapeia para o papel banner quando não é descendente de <article>, <aside>, <main>, <nav>, ou <section>. Quando aninhado dentro de um destes elementos de secção, <header> não tem papel de marco correspondente — serve simplesmente como o cabeçalho para essa secção particular. Nesse contexto, adicionar role="banner" não seria redundante; na verdade mudaria a semântica, o que quase certamente não é o que você quer.
Para corrigir o aviso, remova o atributo role="banner" do seu elemento <header>. A semântica nativa é suficiente.
Exemplos
Incorreto: role="banner" redundante em <header>
Isto desencadeia o aviso do validador porque <header> já implica o papel banner ao nível superior:
<header role="banner">
<img src="logo.svg" alt="My Company">
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
Correto: deixar <header> usar o seu papel implícito
Simplesmente remova o atributo role="banner":
<header>
<img src="logo.svg" alt="My Company">
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
Correto: usar role="banner" num elemento não-<header>
Se por alguma razão você não puder usar um elemento <header> (por exemplo, trabalhando dentro de um CMS legado), aplicar role="banner" a uma <div> é a forma apropriada de transmitir a mesma semântica de marco:
<div role="banner">
<img src="logo.svg" alt="My Company">
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</div>
Um <header> dentro de um elemento de secção não tem papel banner
Quando <header> está aninhado dentro de um <article> ou outro elemento de secção, não tem o papel banner. Isto é esperado e correto — o <header> aqui simplesmente introduz o conteúdo do artigo:
<article>
<header>
<h2>Article Title</h2>
<p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
</header>
<p>Article content goes here.</p>
</article>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.