Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Criar links de texto disponíveis

Ir para o início do conteúdo sem usar a barra de consulta e Partilha Como usar a barra de consulta e compartilhamento Ouvir o conteúdo principal desta página
Imprimir Imprimir o conteúdo principal desta página Enviar E-mail o conteúdo principal desta página Compartilhar Share on TwitThis Share on Facebook Compartilhar esta página sobre Wikio Compartilhar esta página no Google Compartilhar no LinkedIn Share on Digg Compartilhar esta página em del.icio.us Compartilhar esta página Netvibes

Atenção: a versão original deste documento é Links e hipertexto: Link Text e aparência . Esta tradução francesa foi feita por Ideos abrigo de um acordo entre WebAIM e Ideos .

Nota: Consulte a página documentos sobre acessibilidade web para uma lista de todos os documentos traduzidos. Outros recursos de acessibilidade web também estão listados no portal digital acessível .

Links de texto

Evite gravatas que são frases sem informação

Como indicado na página 1, as ligações são mais úteis quando fazem sentido fora do contexto. Os autores devem evitar frases usadas como não-informativo ligações, tais como:

  • clique aqui
  • aqui
  • mais
  • Leia mais
  • link [destino link]
  • informações

Na verdade, o termo "clique aqui" é inútil, mesmo que precede uma expressão mais significativa. Por exemplo, um link "Clique aqui para o tempo de hoje" pode ser reduzido a "tempo de hoje." Em alguns casos pode fazer sentido para preceder um link com "mais" ou "mais informações" (por exemplo, "mais sobre o aquecimento global"), mas se estas palavras adicionais podem ser evitados, é melhor não colocá-los (por exemplo, "aquecimento global" como o contexto pode transmitir o mesmo significado que "sobre o aquecimento global").

Links URL

Os endereços da Web ou URLs presentes s dois tipos de desafio:

  1. legibilidade
  2. comprimento
Legibilidade do URL s

O primeiro desafio é que a URL s não são sempre legível ou facilmente ouvir através de um leitor de tela. Sentido que contêm combinações de números, letras, hífens, sublinhados e outros caracteres que têm significado para scripts e bases de dados, mas têm muitos URL s pouca ou nenhuma à média pessoas. Em muitos casos, faz sentido usar o texto legível em vez do URL. Ligação legível Construindo Sites Web Acessível é mais fácil usar o link é composto de 108 caracteres - cheio de números, barras - um texto que não é muito legível. ( http://www.amazon.com/exec/obidos/ASIN/
1590591488/qid 1116957951/sr = = 2 -
1/ref = pd_bbs_b_2_1/103-5755258-8204633 ).

Isso significa que essa URL s nunca deve ser usado como links? Não. Se a URL é relativamente curto, provavelmente não há problema de usar a URL como o texto do link. O ponto chave é considerar os usuários de leitores de tela, que deve ouvir o URL que é mais longo e menos inteligível.

Comprimento de URL s

O segundo problema é que alguns URL s são bastante longas e alguns navegadores se recusam a ir para a linha s URL longa e deixar os links URL para a direita estender para além da área visível do browser. Estes URL longa s geralmente são gerados por sites da Web com bancos de dados ou aplicações web que a transferência de um número de variáveis ​​através do endereço do site. No link acima para o livro na Amazon.com é um exemplo perfeito. Na verdade, o texto do link longa foi modificado pela adição de duas quebras de linha ( <br> ) no meio da URL, para que ele possa passar para a próxima linha. Mozilla navegadores baseados como o Firefox ou o Netscape não permitem URL longa s para ir para a linha, a menos que o autor não introduz uma nova linha em algum lugar.

A largura da tela abaixo seria mais de 2000 pixels (equivalente a dois monitores). Imagine um link para visualizar tanto sobre uma página web. Os usuários devem navegar horizontalmente tempo para ler todo o link.

Um exemplo de uma URL muito longa, com mais de 300 caracteres (a partir de uma pesquisa de imagens no google.com)

Pior, imagine ouvir este link com um leitor de tela! Quase ninguém teria a paciência de ouvir todo esse conteúdo indecifrável. O link acima pode ser encurtado para "fotos da Califórnia gaivotas", porque o link leva para uma página com fotos da Califórnia gaivotas.

A aparência dos links

As ligações devem aparecer como links e, inversamente, nada mais deve. Usuários estão frustrados quando tentam clicar no texto ou imagens que se parecem com links, mas não são. Eles também serão frustrados se deve mover o mouse sobre a página para tentar descobrir as ligações que não se parecem com links.

Sublinhando

Browsers sublinhar hiperlinks por padrão. É possível remover o sublinhado usando CSS, mas é uma má idéia na maioria das vezes. Os usuários estão acostumados a ver links sublinhados. Eles podem ou não ser capaz de saber o que o texto é um link, se o acordo não for cumprido um sublinhado.

Exemplo

Que palavras ou frases na imagem abaixo estão os links e quais não são?

Texto preto aparece "soluções", então existem 11 palavras em azul não é enfatizado.

Acontece que todos os presentes são links de texto. Os usuários podem clicar sobre o texto em preto ou azul. Este tipo de design gráfico pede aos usuários para adivinhar ou encontrar por eliminação ou por acaso. É melhor enfatizar os links no conteúdo principal de uma página web.

Como a maioria das reivindicações, há exceções. Embora os usuários estão acostumados a ver links sublinhados no conteúdo principal, eles também estão acostumados às funções principais de navegação abas (muitas vezes criadas como imagens em vez de texto) não sublinhado. Na verdade, é extremamente difícil encontrar um local principal que destaca os links de navegação principal.

Exemplos

Diversos sites destacar os links no conteúdo principal, mas não no menu de navegação, como mostrado nas imagens seguintes.

De navegação principal do site é um texto sem sublinhar IBM.com

IBM usa o texto. Curiosamente, quando os usuários voar sobre o texto com o mouse, o sublinhado parece tranqüilizar os usuários que são realmente links. A maioria dos usuários já perceberam que eles são links porque se assemelham aos da navegação principal do site. No entanto, o aparecimento súbito de ênfase podem ser úteis para algumas pessoas.

7 imagens no lado esquerdo da página são utilizados para a navegação no site para 10,000 aldeias.

10,000 aldeias para o site utiliza imagens em vez de texto. O texto não está sublinhado.

A área 3-dimensional horizontal serve como pano de fundo para a navegação principal do Macromedia.com website.

De navegação principal do site é construído em Macromedia Flash. O texto não está sublinhado.

Rollovers e foco

Muitos sites têm implementado efeitos de sobreposição e concentração. Estes efeitos são usados ​​para fins estéticos (os efeitos são "cool" e artístico). Eles também são usados ​​para o acesso na medida em que ajudam os usuários a saber que o mouse ou o teclado em um link específico eo link está ativo.

Na maioria dos casos, os efeitos são para destacar o link acima ou abaixo do texto.

Em outros casos, as cores da mudança de link texto.

Esta técnica não é limitada à navegação principal do site. Também pode ser utilizado nos links no conteúdo principal.

Para tornar isso independente do dispositivo, é necessário para garantir que ele pode ser ativado pelo mouse e teclado. Em CSS, isso significa usar ambas as classes :hover e :focus . Classe :active também pode ser usado.

Exemplo

O seguinte CSS vai mudar o fundo de um texto do link luz no link amarelo e marrom quando o usuário passar o mouse, teclado de tabulação para ele ou clica no link com o mouse ou com o tecla Enter.

a: hover,
a: foco,
a: active
{
background-color: # ffffcc;
color: # 990000;
}

WebAIM é uma iniciativa de:
Centro para Pessoas com Deficiência (CPD) Utah State University

Copyright 1999-2009 WebAIM

Início da Página