Técnicas para as WCAG 2.0

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

-

SCR30: Utilizar scripts para alterar o texto do link

Aplicabilidade

Scripting do lado do cliente utilizado com HTML e XHTML.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é permitir que os utilizadores disponham de informações adicionais no texto dos links, de modo a que os links possam ser compreendidos fora de contexto.

Alguns utilizadores preferem links que sejam independentes, em que não haja necessidade de explorar o contexto do link. Outros utilizadores consideram que incluir as informações de contexto em cada link é repetitivo e que reduz a sua capacidade de utilizar um sítio da Web. Entre os utilizadores das tecnologias de apoio, a resposta ao grupo de trabalho sobre o que é preferível ficou dividida. Esta técnica permite aos utilizadores escolher a abordagem que melhor satisfaça as suas necessidades.

É fornecido um link no início da página que irá expandir o texto dos links existentes na página, de modo a não ser necessário contexto adicional para compreender a finalidade dos mesmos. A compreensão da finalidade do link expandido directamente a partir do texto do mesmo tem de ser sempre possível.

Esta técnica só expande os links para a visualização actual da página. Também é possível, e em alguns casos aconselhável, guardar esta preferência num cookie ou perfil de utilizador do lado do servidor, de modo a que os utilizadores só tenham de efectuar a selecção uma vez por sítio da Web.

Exemplos

Exemplo 1

Este exemplo utiliza Javascript para adicionar informações contextuais directamente ao texto de um link. A classe do link é utilizada para determinar qual o texto a adicionar. Quando o link "Expandir Links" é activado, cada link existente na página é testado para ver se é necessário texto adicional.

Código Exemplo:

...
<script>
 var linkContext = {
   "hist":" version of The History of the Web",
   "cook":" version of Cooking for Nerds"
 };

 function doExpand() {
   var links = document.links;
   var link;

   for (link in links) {
     var cn = links[link].className;
     if (linkContext[cn]) {
       links[link].appendChild(document.createTextNode(linkContext[cn]));
     }
   }
 }
</script>

<h1>Books for download</h1>
<p><a href="#" onclick="doExpand();">Expand Links</a></p>

<ul>
<li>The History of the Web: 
<a href="history.docx" class="hist">Word</a>, 
<a href="history.pdf" class="hist">PDF</a>, 
<a href="history.html" class="hist">HTML</a>
</li>

<li>Cooking for Nerds: 
<a href="history.docx" class="cook">Word</a>, 
<a href="history.pdf" class="cook">PDF</a>, 
<a href="history.html" class="cook">HTML</a>
</li>
</ul>

 ...

Testes

Procedimento

  1. Verifique se existe um link no início da página para expandir os links.

  2. Se o link identificado no passo 1 for um link, verifique se pode ser identificado apenas a partir do texto do link.

  3. Localize quaisquer links existentes na página que não possam ser identificados apenas a partir do texto do link.

  4. Active o controlo identificado no passo 1.

  5. Verifique se a finalidade dos links identificados no passo 3 pode agora ser identificada apenas a partir do texto do link.

Resultados Esperados