Sobre este problema HTML
O valor section não existe na especificação WAI-ARIA. ARIA define um conjunto específico de valores de papel, e section não está entre eles. Isto é provavelmente uma confusão entre o nome do elemento HTML <section> e o papel ARIA region, que é o papel para o qual o elemento <section> mapeia implicitamente. Como section não é um papel reconhecido, o validador rejeita-o como um valor inválido.
Isto é importante por várias razões. Primeiro, tecnologias assistivas como leitores de ecrã dependem dos papéis ARIA para comunicar o propósito dos elementos aos utilizadores. Um valor de papel não reconhecido pode ser completamente ignorado ou causar comportamentos inesperados, degradando a experiência para utilizadores que dependem dessas ferramentas. Segundo, o elemento <section> já carrega semânticas nativas equivalentes a role="region" (quando tem um nome acessível), portanto adicionar um papel redundante ou incorreto não proporciona nenhum benefício e introduz problemas potenciais.
De acordo com a especificação ARIA in HTML, você deve geralmente evitar definir um role em elementos que já têm semânticas nativas apropriadas. O papel implícito do elemento <section> é region, portanto adicionar explicitamente role="region" é redundante na maioria dos casos. A correção mais simples e melhor é remover completamente o atributo role e deixar que as semânticas HTML nativas façam o seu trabalho.
Se você precisar substituir o papel de um elemento para um padrão de design específico (por exemplo, transformar uma <section> num marco de navegação), use um papel ARIA válido da especificação WAI-ARIA.
Exemplos
Incorreto: usar o papel inválido section
<section role="section">
<h2>Sobre Nós</h2>
<p>Saiba mais sobre a nossa equipa.</p>
</section>
Isto desencadeia o erro de validação porque section não é um valor de papel ARIA válido.
Correto: remover o atributo role
<section>
<h2>Sobre Nós</h2>
<p>Saiba mais sobre a nossa equipa.</p>
</section>
O elemento <section> já fornece as semânticas corretas. Nenhum atributo role é necessário.
Correto: usar um papel ARIA válido se necessário
Se você tem uma razão específica para atribuir um papel, use um válido. Por exemplo, se uma <section> está a ser usada como um marco de navegação:
<section role="navigation" aria-label="Navegação principal">
<ul>
<li><a href="/">Início</a></li>
<li><a href="/about">Sobre</a></li>
</ul>
</section>
Na prática, você usaria tipicamente um elemento <nav>, que tem o papel navigation nativamente. Este exemplo simplesmente ilustra que se você aplicar um role, deve ser um valor de papel ARIA válido.
Correto: papel explícito region com um nome acessível
Se você quiser marcar explicitamente uma secção como um marco de região nomeada, pode usar role="region" juntamente com um nome acessível. No entanto, isto é redundante quando usa <section> com aria-label ou aria-labelledby, uma vez que o navegador já a mapeia para region:
<!-- Preferido: as semânticas nativas tratam do papel -->
<section aria-labelledby="features-heading">
<h2 id="features-heading">Funcionalidades</h2>
<p>Explore as funcionalidades do nosso produto.</p>
</section>
<!-- Também válido mas redundante -->
<section role="region" aria-labelledby="features-heading">
<h2 id="features-heading">Funcionalidades</h2>
<p>Explore as funcionalidades do nosso produto.</p>
</section>Ambos são HTML válido, mas a primeira abordagem é mais limpa e segue o princípio de depender das semânticas nativas sempre que possível.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.