Técnicas para as WCAG 2.0

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

-

H50: Utilizar elementos estruturais para agrupar os links

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como agrupar links em conjuntos lógicos. Quando os links são agrupados em conjuntos lógicos (por exemplo, numa barra de navegação ou num menu principal que aparecem em todas as páginas de um sítio da Web) devem ser marcados como uma unidade. Normalmente, as barras de navegação são a primeira coisa que os utilizadores encontram numa página. As pessoas sem problemas de visão podem, muitas vezes, ignorar as partes de navegação e começar a ler o conteúdo da página. As pessoas que utilizam leitores de ecrã têm primeiro de ouvir o texto de cada link existente na barra de navegação antes de lerem o conteúdo que lhes interessa. Existem várias formas de marcar conteúdo, de modo a que um utilizador com um leitor de ecrã possa ignorar a barra de navegação e não tenha de ler todos os links.

Agrupe os links através de um dos seguintes mecanismos (por ordem descendente de preferência):

Exemplos

Exemplo 1: Utilizar listas para agrupar links

Neste exemplo, os links são agrupados utilizando os elementos ul e li .

Código Exemplo:

<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
    <li><p><a href="kitchen.html">Kitchen</a></p></li>
    <li><p><a href="bedbath.html">Bed & Bath</a></p></li>
    <li><p><a href="dining.html">Fine Dining</a></p></li>
    <li><p><a href="lighting.html">Lighting</a></p></li>
    <li><p><a href="storage.html">Storage</a><li><p>
</ul> 

O CSS pode ser utilizado para moldar os elementos list e, como tal, esta técnica pode ser utilizada com uma série de aspectos visuais.

Em seguida, é apresentado um estilo que remove as marcas de item de lista e o preenchimento à esquerda que criam o avanço, e coloca cada um dos elementos list na horizontal.

Código Exemplo:

ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

Este estilo remove as marcas de item de lista e o preenchimento à esquerda e apresenta os itens num bloco flutuante.

Código Exemplo:

                                 ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
}

Exemplo 2: Utilizar um mapa para agrupar links

Neste exemplo, o elemento map agrupa um conjunto de links e o atributo title identifica-o como uma barra de navegação.

Código Exemplo:

                                 <map title="Navigation Bar">
  <p>
    [<a href="home.html">Home</a>] 
    [<a href="search.html">Search</a>] 
    [<a href="new.html">New and highlighted</a>] 
    [<a href="sitemap.html">Site map</a>]
  </p>
 </map> 

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

Verifique se o conteúdo inclui elementos anchor que devem ser agrupados juntos.

  1. Verifique se os elementos anchor são agrupados utilizando elementos list ou map .

Resultados Esperados