O documento deve ter um marco principal

Marcos são regiões estruturais de uma página — como cabeçalho, navegação, conteúdo principal e rodapé — que as tecnologias assistivas usam para construir um esboço da página. Quando um utilizador de leitor de ecrã abre uma página, pode abrir uma lista de marcos e saltar diretamente para a secção de que precisa. Sem um marco main, não há forma de esses utilizadores saltarem cabeçalhos repetidos e navegação para chegar ao conteúdo que procuram. Isto torna a página significativamente mais difícil de usar.

Esta regra é uma melhor prática da Deque alinhada com a técnica WAI-ARIA ARIA11: Using ARIA landmarks to identify regions of a page. Utilizadores que são cegos, surdocegos, ou que têm deficiências de mobilidade e dependem de leitores de ecrã ou métodos de navegação alternativos são os mais diretamente afetados. Sem marcos, estes utilizadores têm de navegar com tab ou setas através de todos os elementos da página para encontrar o conteúdo de que precisam.

Como funcionam os marcos

HTML5 introduziu elementos semânticos que criam automaticamente regiões de marcos:

Navegadores modernos e leitores de ecrã compreendem estes elementos HTML5 nativamente. Para máxima compatibilidade, também pode adicionar o papel ARIA explícito junto ao elemento HTML5 (por exemplo, <main role="main">). Esta redundância é inofensiva e pode ajudar com tecnologias assistivas mais antigas.

Como corrigir o problema

1. Envolva o seu conteúdo principal num elemento <main>. Toda a página deve ter exatamente um marco <main>.
2. Coloque todo o outro conteúdo visível dentro de marcos apropriados. Use <header>, <nav>, <footer>, e <aside> conforme necessário para que nenhum conteúdo fique órfão fora de uma região de marco.
3. Verifique elementos iframe. Se um iframe contém conteúdo com marcos, deve ter não mais de um marco <main>.
4. Não aninha elementos <main>. Deve haver apenas um <main> por página (ou por iframe).

Note que os marcos beneficiam principalmente utilizadores de leitores de ecrã. Utilizadores com visão e utilizadores de ampliadores de ecrã não percecionam marcos, por isso ainda precisam de ligações de salto de navegação visíveis para contornar conteúdo repetido.

Exemplos

Incorreto: sem marco main

Esta página não tem elemento <main>, por isso utilizadores de leitores de ecrã não têm forma de saltar diretamente para o conteúdo principal.

<header>
  <p>Company Logo</p>
</header>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<div class="content">
  <p>This is the primary content of the page.</p>
</div>
<footer>
  <p>&copy; 2024 Company Name</p>
</footer>

Correto: página com um marco main

Substituir o <div> genérico por um elemento <main> dá aos utilizadores de leitores de ecrã um ponto de navegação direto para o conteúdo principal.

<header>
  <p>Company Logo</p>
</header>
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main>
  <p>This is the primary content of the page.</p>
</main>
<footer>
  <p>&copy; 2024 Company Name</p>
</footer>

Correto: usando tanto elementos HTML5 como papéis ARIA para máxima compatibilidade

<header role="banner">
  <p>Company Logo</p>
</header>
<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
<main role="main">
  <p>This is the primary content of the page.</p>
</main>
<footer role="contentinfo">
  <p>&copy; 2024 Company Name</p>
</footer>

Incorreto: múltiplos marcos main

Ter mais de um elemento <main> confunde as tecnologias assistivas sobre qual secção é o verdadeiro conteúdo principal.

<main>
  <p>Article content here.</p>
</main>
<main>
  <p>Sidebar content here.</p>
</main>

Correto: único main com um aside para conteúdo secundário

<main>
  <p>Article content here.</p>
</main>
<aside>
  <p>Sidebar content here.</p>
</aside>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using ARIA landmarks to identify regions of a page

→