A "usabilidade" de informar ao usuário que um link é externo ao seu site
Por:
Terça-feira 31 Outubro 2006 às 13:44Categoria: Experiência de usuário, HTML / CSS / JavaScript
Não, esta não é mais uma discussão se um link externo ao seu site deve ou não abrir em outra janela. Eu já discuti este assunto aqui. Eu já escrevi sobre as razões pelas quais o atributo target foi retirado das especificações de documentos strict da W3C e também já escrevi que se você realmente quer forçar os links externos no seu site a abrirem em outra janela, você deve utilizar JavaScript e não o atributo target. No final, minha opinião é que você não deve forçar um link ser aberto em outra janela se ele for externo ao seu site. Eu acredito que esta tem que ser uma decisão do usuário e não do site.
Estas coisas tratam de comportamento, mas existe uma outra discussão sobre a usabilidade envolvendo links externos. Navegando no meu site rapidamente você consegue perceber que há vários links distribuídos em vários artigos. Você sabe quais deles linkam para outros textos dentro do meu site e quais não? Eu espero que saiba. Porque já faz um bom tempo que eu utilizo uma pequena imagem 
no formato de seta nos links que são externos ao meu site.
Blogs são repositórios de textos e links. A maioria dos blogs (como o meu) insere vários links para vários lugares diferentes incluindo trechos e páginas do próprio site. Indicar para o usuário quais links apontam para o seu próprio site e quais são externos é uma forma interessante de organizar a informação e de deixar claro para o usuário quando um link está relacionado diretamente com o site (interno) em que o usuário está atualmente e qual não faz parte daquele “sítio” (externo). Simples assim. Há uma solução em CSS bem simples que faz isso.
CSS e o atributo rel faz isso por você
O atributo rel como eu já escrevi anteriormente, indica qual a relação entre o seu site e o site/página que você está linkando. Ele pode possuir o valor que você quiser. No meu site, os links que são externos, eu insiro o atributo rel com o valor de “external” da seguinte maneira:
<a href="http://www.site_externo_ao_meu.com.br" rel="external">
Isto é um link
</a>
E no meu CSS eu coloco uma regra mais ou menos assim:
* [rel~=external] {
background:url("external.gif") right 2px no-repeat;
padding-right:13px;
}
Esta regra funciona da seguinte maneira. Eu utilizo um seletor universal (*) seguido de um seletor de atributo cujo valor dele seja igual ou possua (~=) a palavra “external”. Dessa maneira eu consigo por CSS alterar a aparência de todos os hyperlinks que possuem o atributo rel com valor igual a “external”. Lá eu declaro uma imagem de background com a minha setinha que indica para um usuário que aquele link é externo ao meu próprio site. Funciona em todos os browsers modernos que interpretam CSS 2, incluindo o Internet Explorer 7. Alguém discorda?
Artigos relacionados:
- A Wikipedia e o rel-nofollow
- Declaração de codificação de caracteres em CSS
- Microformats: os atributos rel e rev
- CSS Signatures
- Folksonomia e a maneira com que nós colocamos ordem nas coisas
- Acessibilidade, Validações e Mecanismos de Busca
- As Dicas de CSS que você não deve deixar de saber
Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!
O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. 
# 1° Douglas d'Aquino Terça-feira 31 Outubro 2006 às 13:48GMT
no 6 funciona também? tinha feito coisa parecida por aqui e encontrei problemas… agora vou tentar de novo do seu jeito e vamos ver no que dá… espero que funcione
valeu a dica