Técnicas para as WCAG 2.0

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

-

H2: Combinar a imagem adjacente e os links de texto para o mesmo recurso

Aplicabilidade

Documentos HTML e XHTML que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar a duplicação desnecessária que ocorre quando um documento inclui texto adjacente e versões com ícone de um link.

Muitos tipos de links têm um texto e um link com ícone juntos um do outro. É frequente o texto e o link com ícone serem apresentados em links separados, em parte para criar uma ligeira separação visual entre si. Visualmente, aparentam ser o mesmo link, mas são encarados por muitas pessoas como sendo dois links idênticos e isso pode ser confuso. Para evitar esta situação, alguns autores omitem o texto alternativo da imagem, falhando assim o cumprimento do Critério de Sucesso 1.1.1, uma vez que a alternativa em texto não irá servir a mesma funcionalidade do link gráfico. O método preferencial para abordar esta situação é juntar o texto e a imagem num link, e fornecer texto alternativo nulo na imagem para eliminar a duplicação do texto.

Por vezes, o texto e o link de ícone são apresentados em células de tabelas adjacentes e separadas para facilitar o esquema da página. Embora as WCAG 2 não proíbam a utilização de tabelas de esquema, são recomendados os esquemas baseados em CSS para manter o significado semântico definido dos elementos table HTML e para estar em conformidade com a regra de codificação de separar a apresentação do conteúdo. Se for utilizado CSS, esta técnica pode ser aplicada para combinar os links.

Exemplos

Exemplo 1

O ícone e o texto estão incluídos no mesmo elemento a .

Código Exemplo:

                                                   <a href="products.html">
   <img src="icon.gif" alt="" />
   Products page
 </a> 

Exemplo 2

Um link inclui um ícone e texto, e a ajuda do sítio da Web faz referência ao ícone. O elemento img tem uma alternativa em texto que corresponde ao nome utilizado para o ícone na ajuda do sítio da Web, que descreve como clicar no ícone da página inicial.

Código Exemplo:

<a href="foo.htm">
  <img src="house.gif" alt="home page icon"/>
  Go to the home page
</a> 

Exemplo de Falha 3

Este exemplo demonstra uma falha na aplicação desta técnica. Um ícone e um link de texto estão lado a lado. A alternativa em texto para a imagem é igual ao link de texto adjacente, originando um efeito "stutter" (de gaguez), uma vez que o link é lido duas vezes.

Código Exemplo:

<a href="products.html">
   <img src="icon.gif" alt="Products page" />
 </a>
 <a href="products.html">
   Products page
 </a> 

Exemplo de Falha 4

Este exemplo demonstra uma falha na aplicação desta técnica. Um ícone e um link de texto estão lado a lado. Numa tentativa de remover o efeito "stutter", a alternativa em texto para a imagem fica nula. Contudo, agora um dos links tem um destino desconhecido, resultando no seu próprio problema de texto do link.

Código Exemplo:

<a href="products.html">
   <img src="icon.gif" alt="" />
 </a>
 <a href="products.html">
   Products page
 </a> 

Exemplo de Falha 5

Este exemplo demonstra uma implementação incorrecta desta técnica. O ícone e o texto estão incluídos no mesmo elemento a. Contudo, a alternativa em texto para o ícone é um duplicado do texto do link, originando um efeito "stutter", uma vez que a descrição é lida duas vezes.

Código Exemplo:

<a href="products.html">
  <img src="products.gif" alt="Products page"/>
  Products page
</a> 

Recursos

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

Testes

Procedimento

Para cada a no conteúdo que inclua um elemento img :

  1. Verifique se não existe nenhum elemento a adjacente que tenha o mesmo atributo href e a mesma descrição.

Para cada a no conteúdo incluído numa tabela:

  1. Verifique se não existe nenhum elemento a numa célula de tabela adjacente que tenha o mesmo atributo href e a mesma descrição.

Resultados Esperados