Pontos de referência acessíveis

Nov 27 2022
WCAG 2.4.

WCAG 2.4.1 Ignorar bloqueios de critério de sucesso afirma que tecnologias assistivas, como leitores de tela, devem permitir que os usuários naveguem por pontos de referência para ignorar blocos de conteúdo repetidos em várias páginas da web.

É essencial definir a estrutura HTML semanticamente de forma correta e precisa. Os pontos de referência desempenham um papel abstrato e vital para ajudar os usuários a navegar pelo conteúdo da página usando tecnologias assistivas. Ele identifica programaticamente as seções da página e permite que os usuários percebam o conteúdo de uma maneira mais significativa.

A chave é identificar a estrutura lógica da página e usar as funções de referência apropriadas ou elementos definidos em HTML5 para construir a página semanticamente válida.

Quase todas as páginas têm uma estrutura padrão : cabeçalho , principal , navegação , região , rodapé e lateral .

<header> identifica um Banner na página, que geralmente está localizado na parte superior. Ele contém predominantemente a pesquisa, o logotipo da marca e a navegação principal. Idealmente, cada página deve ter apenas um marco de Banner.

Using the HTML5 element

<header>
  <div>
    company logo..brand name
  </div>
  <nav>
    main navigation of the website
  </nav>
</header>

Using the Aria Technique

<div role=“header”>
    company logo.. brand name or navigation 
</div>

Using the HTML5 element

<main>
  <h1> main heading for the page </h1>
  <div> main content goes here </div>
</main>

Using the Aria Technique

<div role=“main”>
  <h1> main heading of the page </h1>

   ........main content goes here.......

</div>

Using the HTML5 element 

<nav id="primary-nav" aria-label="primary navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
    <li><a href="page-link-4">page link 4</a></li>
  </ul>
</nav>

More than one <nav> tag in the same page

<nav aria-labelledby="pagination-nav">
  <h2 id="pagination-nav">heading content</h2>
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</nav>

Using the Aria Technique

<div role="navigation">
  <ul>
    <li><a href="page-link-1">page link 1</a></li>
    <li><a href="page-link-2">page link 2</a></li>
    <li><a href="page-link-3">page link 3</a></li>
  </ul>
</div>

HTML structure

<header>
  <a href="#main" id="skip-links" class="offscreen">
    skip to main
  </a>
</header>
<main id="main"></main>
CSS

.offscreen{
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;

  &:focus {
    position: static;
    margin: auto;
    width: auto;
    height: auto;
    }
}


Using the HTML5 element

<section aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
  .....region content goes here.....
</section>

Using the Aria Technique 

<div role="region" aria-labelledby="heading_id">
  <h2 id="heading_id"> heading goes here</h2>
   .........region content goes here.........
</div>


Using the HTML5 element

<footer>
  <p>......footer content goes here....</p>
  <ul>
    <li><a href="page_link_1.html">page link 1</a></li>
    <li><a href="page_link_2.html">page link 2</a></li>
  </ul>
</footer>

Using the Aria Technique 

<div role="contentinfo">
  <p>......footer content goes here......</p>
</div>


Using the HTML5 element 

<aside aria-labelledby="heading_id">
  <h2 id="heading_id">.......heading content goes here....</h2>
  ........region content goes here.......
</aside>


Using the Aria Technique 

<div role="complementary" aria-labelledby="heading_id">
  <h2 id="heading_id">heading content goes here</h2>
  ......region content goes here......
</div>

JAWS
Pressione Insert + Control + R => Lista de pontos de referência
Q => Ir para o ponto de referência principal
R => Ir para o próximo ponto de referência
shift+ R => Ir para o ponto de referência anterior

NVDA
Pressione Insert + F7 => Lista de pontos de referência
D => Ir para o principal Landmark
shift + D => Ir para o Landmark anterior

Voiceover
Pressione Control + Option + U => Lista de Landmarks
W => Ir para o próximo Landmark
Shift + W => Ir para o Landmark anterior