O papel “region” é desnecessário para o elemento “section”.

A especificação HTML e as diretrizes WAI-ARIA estabelecem que certos elementos HTML carregam papéis de marco implícitos. O elemento <section> mapeia implicitamente para role="region", o que significa que as tecnologias assistivas como leitores de ecrã já o reconhecem como um marco de região sem qualquer marcação ARIA adicional. Este princípio é captado pela primeira regra de uso ARIA: “Se você pode usar um elemento ou atributo HTML nativo com a semântica e comportamento que você precisa já incorporados, em vez de reaproveitará um elemento e adicionar um papel, estado ou propriedade ARIA para torná-lo acessível, então faça-o.”

Adicionar role="region" a um <section> não altera o comportamento do elemento ou como as tecnologias assistivas o interpretam — simplesmente duplica o que o navegador já comunica. O W3C Validator avisa sobre esta redundância para encorajar uma marcação mais limpa e sustentável e para ajudar os programadores a compreender a semântica HTML nativa.

Este mesmo princípio aplica-se a outros elementos HTML com papéis implícitos: <nav> tem um role="navigation" implícito, <main> tem role="main", <aside> tem role="complementary", <header> tem role="banner" (quando não aninhado num elemento de secção), e <footer> tem role="contentinfo" (quando não aninhado num elemento de secção). Adicionar estes papéis explícitos aos seus elementos correspondentes irá desencadear avisos similares do validador.

Vale a pena notar que um elemento <section> apenas é exposto como um marco region pelas tecnologias assistivas quando tem um nome acessível. Se a sua <section> não tiver um nome acessível (via aria-label, aria-labelledby, ou mecanismos similares), os leitores de ecrã podem não tratá-la como um marco navegável — mas isto ainda não significa que você deve adicionar role="region", uma vez que o mapeamento de papel implícito permanece o mesmo independentemente.

Como corrigir

1. Remova o atributo role="region" de qualquer elemento <section>.
2. Se você quiser que a secção seja um marco significativo para utilizadores de leitores de ecrã, dê-lhe um nome acessível usando aria-labelledby (apontando para um cabeçalho) ou aria-label.
3. Nunca adicione papéis ARIA explícitos que duplicam o papel implícito de um elemento HTML nativo.

Exemplos

Incorreto: papel redundante na section

<section role="region">
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

Correto: section sem papel redundante

<section>
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

Correto: section com um nome acessível para navegação de marcos

Usar aria-labelledby para associar a secção com o seu cabeçalho assegura que as tecnologias assistivas a exponham como uma região de marco nomeada:

<section aria-labelledby="contact-heading">
  <h2 id="contact-heading">Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

Correto: section com aria-label quando não existe cabeçalho visível

<section aria-label="Contact information">
  <p>Email us at info@example.com</p>
</section>

Incorreto: papéis redundantes noutros elementos de marco

O mesmo princípio aplica-se a outros elementos de marco nativos. Evite estes padrões:

<nav role="navigation">
  <a href="/">Home</a>
</nav>

<main role="main">
  <p>Page content</p>
</main>

<aside role="complementary">
  <p>Related links</p>
</aside>

Correto: elementos de marco sem papéis redundantes

<nav>
  <a href="/">Home</a>
</nav>

<main>
  <p>Page content</p>
</main>

<aside>
  <p>Related links</p>
</aside>

Saiba mais:

MDN Reference

MDN: ARIA region role

→

MDN Reference

Using ARIA: roles

→

WHATWG Spec

HTML Living Standard: The section element

→