Documentos HTML e XHTML que incluam links.
Esta técnica está relacionada com:
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.
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>
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>
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>
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>
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Para cada a no conteúdo que inclua um elemento img :
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:
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.
Todos os passos acima são verdadeiros.