E o ` ` — conta como landmark?

Apenas quando tem um nome acessível (aria-label ou aria-labelledby). Um sem nome é apenas uma região genérica. Se a secção não precisa de aparecer no menu de landmarks, usa .

Regiões landmark ARIA - Docs do MetricSpot

Q: Preciso de `role="banner"` e `role="contentinfo"` em ` ` e ` `?

Não. Quando e são filhos diretos de , os navegadores expõem-nos automaticamente como banner e contentinfo. Adicionar o papel é redundante e pode confundir alguns leitores de ecrã mais antigos.

O que esta verificação faz

Analisa o HTML renderizado em busca de regiões landmark: os elementos de secção <main>, <nav>, <header>, <footer>, <aside>, <form>, <section> (com um nome acessível), e os equivalentes ARIA (role="main", role="navigation", etc.). A verificação falha se não houver <main> (ou role="main") na página.

Porque é importante

Os leitores de ecrã expõem um menu de landmarks — o JAWS usa R, o NVDA usa D, o VoiceOver usa o rotor. Um utilizador chega à tua página e carrega numa só tecla para saltar para o conteúdo principal, ignorando o cabeçalho e a navegação global.

Sem landmarks, esse atalho não existe. O utilizador tem de percorrer com as setas todas as ligações do cabeçalho, todos os banners promocionais, todos os dropdowns de login, todos os seletores de idioma antes de chegar ao artigo que veio ler. Num site de marketing típico isso são 30 a 60 elementos de áudio antes da primeira frase útil.

As landmarks são também a forma de cumprir o critério de sucesso 1.3.1 da WCAG 2.1 (Informações e Relações) para a estrutura da página, e a forma como as auditorias da Lei Europeia da Acessibilidade esperam que as regiões navegáveis sejam expostas programaticamente.

Como corrigir

O mínimo: envolve o conteúdo principal em <main>. Adiciona <nav> à volta da navegação principal, <header> para o cabeçalho do site, <footer> para o rodapé.

HTML:

<body>
  <header>
    <nav aria-label="Primary">...</nav>
  </header>
  <main>
    <h1>Título da página</h1>
    <article>...</article>
    <aside aria-label="Artigos relacionados">...</aside>
  </main>
  <footer>...</footer>
</body>

Regras em que muita gente tropeça:

Apenas um <main> por página. Vários elementos <main> partem o mapa de landmarks.
Várias regiões <nav> precisam de nomes acessíveis para que o leitor de ecrã as distinga. Usa aria-label="Primary", aria-label="Breadcrumb", aria-label="Footer" — não as deixes sem nome.
<header> e <footer> só contam como landmarks banner/contentinfo quando são filhos diretos de <body>. Dentro de um <article> são apenas conteúdo de secção, não landmarks.
Não adiciones role="main" redundante ao <main>. O elemento nativo já expõe o papel.

Next.js (App Router):

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="pt">
      <body>
        <header><SiteNav /></header>
        <main>{children}</main>
        <footer><SiteFooter /></footer>
      </body>
    </html>
  );
}

Astro:

---
// src/layouts/Base.astro
---
<html lang="pt">
  <body>
    <header><Nav /></header>
    <main><slot /></main>
    <footer><Footer /></footer>
  </body>
</html>

WordPress: os temas modernos baseados em blocos envolvem automaticamente o conteúdo da publicação em <main>; os temas clássicos precisam de <?php wp_body_open(); ?> seguido do teu wrapper <main> em header.php e </main> antes de get_footer().

Se não conseguires alterar a marcação (CMS bloqueado, widget incorporado), adiciona role="main" à div wrapper existente — mesmo efeito para tecnologia de apoio, menos ideal para parsers.

Combina isto com Declarar idioma da página e Etiquetas de formulário — os três juntos cobrem a maior parte dos ganhos fáceis em acessibilidade.

Perguntas frequentes

Preciso de `role="banner"` e `role="contentinfo"` em `<header>` e `<footer>`?

Não. Quando <header> e <footer> são filhos diretos de <body>, os navegadores expõem-nos automaticamente como banner e contentinfo. Adicionar o papel é redundante e pode confundir alguns leitores de ecrã mais antigos.

E o `<section>` — conta como landmark?

Apenas quando tem um nome acessível (aria-label ou aria-labelledby). Um <section> sem nome é apenas uma região genérica. Se a secção não precisa de aparecer no menu de landmarks, usa <div>.

Adicionar landmarks afeta o SEO?

Indiretamente. O Google não classifica com base em landmarks, mas usa o outline HTML5 (especialmente <main> e <article>) para identificar o conteúdo principal versus o resto. Uma estrutura de landmarks mais limpa correlaciona-se com extração mais limpa em AI Overviews e snippets em destaque.