Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

G123: Adicionar um link no início de um bloco de conteúdo repetido para aceder directamente ao fim do bloco

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para ignorar um bloco de conteúdo, passando para o fim do bloco. O primeiro link do bloco, ou o link imediatamente antes do bloco, move o foco para o conteúdo imediatamente a seguir ao bloco. Ao activar o link, o foco do teclado avança para o bloco. Quando existirem vários blocos para ignorar, o utilizador passa de bloco em bloco através destes links.

Exemplos

Exemplo 1: Ignorar Links de Navegação

As páginas no sítio da Web de uma organização incluem uma barra de navegação ou menu principal que incluem links para as secções mais importantes do sítio da Web, o mapa do sítio da Web, informações sobre a organização e com contactar as organização. O primeiro link nesta área intitula-se "Ignorar Links de Navegação". Um utilizador activa o link para ignorar estes links.

Exemplo 2: O índice de um livro

Um livro contém um índice que está dividido num conjunto de páginas. No conteúdo, no início de cada página do índice, existem links para cada letra do alfabeto, que conduzem ao índice em que as entradas começam com essa letra. O primeiro link do conjunto intitula-se "Ignorar Links até ao Índice". Um utilizador activa este link para ignorar os links.

Exemplo 3: Vários conjuntos de links

Todas as páginas de um sítio da Web incluem uma secção que contém links para o mapa do sítio da Web, informações sobre a organização e como contactar a organização. Todas as páginas em cada secção do sítio da Web também contêm um conjunto de links para as respectivas subsecções. O primeiro link no primeiro bloco intitula-se "Ignorar Links de Navegação", que permite ignorar o primeiro conjunto de links. O primeiro link no segundo bloco intitula-se "Ignorar Links de Secções", que permite ignorar os links de subsecções.

Exemplo 4: Página HTML com vários blocos de links de navegação

Este exemplo demonstra a utilização de elementos Heading no início de cada secção (H69) e os links que permitem avançar para o fim de cada secção. Isto permite às pessoas ignorar blocos de conteúdo repetido utilizando navegação por teclado ou por título, consoante as capacidades dos agentes de utilizador. Tenha em atenção que algumas secções do conteúdo estão moldadas num elemento div para solucionar uma limitação do Internet Explorer (consulte Notas dos Agentes de Utilizador para Criar links HTML para ignorar blocos de conteúdo (futuro link)).

Código Exemplo:

<p><a href="#content">Content title</a></p>
    <h2>Main Navigation</h2>
    <ul>
      <li><a href="#subnav">Sub Navigation</a></li>
      <li><a href="/a/">Link A</a></li>
      <li><a href="/b/">Link B</a></li>
      <li><a href="/c/">Link C</a></li>
 ...
      <li><a href="/j/">Link J</a></li>
    </ul>
    <div class="iekbfix">
      <h2 id="subnav">Sub Navigation</h2>
      <ul>
        <li><a href="#ultranav">Ultra Sub Navigation</a></li>
        <li><a href="/suba/">Sub A</a></li>
        <li><a href="/subb/">Sub B</a></li>
        <li><a href="/subc/">Sub C</a></li>
 ...
        <li><a href="/subj/">Sub J</a></li>
      </ul>
    </div>
    <div class="iekbfix">
      <h2 id="ultranav">Ultra Sub Navigation</h2>
      <ul>
        <li><a href="#content">Content title</a></li>
        <li><a href="/ultraa/">Ultra A</a></li>
        <li><a href="/ultrab/">Ultra B</a></li>
        <li><a href="/ultrac/">Ultra C</a></li>
 ...
        <li><a href="/ultraj/">Ultra J</a></li>
      </ul>
    </div>
    <div>
      <h2 id="content">Content title</h2>
      <p>Now that I have your attention...</p>
    </div>

E o CSS.

Código Exemplo:

div.iekbfix {
  width: 100%;
} 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique se um link é o último controlo que pode receber foco antes do bloco de conteúdo repetido ou do primeiro link do bloco.

  2. Verifique se a descrição do link informa que permite ignorar o bloco.

  3. Verifique se o link está sempre visível ou só está visível quando recebe foco do teclado.

  4. Verifique se activar o link move o foco para o conteúdo imediatamente a seguir ao bloco.

  5. Verifique se, depois de activar o link, o foco do teclado se moveu para o conteúdo imediatamente a seguir ao bloco.

Resultados Esperados