http://danielfarias.net

Para quem está começando no grande mundo da acessibilidade, este artigo será muito útil para você aplicá-lo em seus projetos futuros. Você manterá a acessibilidade com um layout atraente.

Começaremos pelo código HTML. Colocarei abaixo somente o código necessário para este artigo, suprimindo todo o restante.

Suponhamos que você está fazendo o seu site. O seu <h1> deve conter o título do seu site e se possível um subtítulo.

<h1>Substituindo este texto por imagem</h1>

Uma boa prática é colocar um link no <h1> apontando para a página índex.html do seu site. Assim o usuário estando em qualquer lugar do seu site poderá voltar para a página inicial clicando no título do site, o <h1>.

<h1><a href="index.html" title="Substituindo este texto por imagem">Substituindo este texto por imagem</a></h1>

Coloque sempre o atributo title nos links. Isso facilita a identificação do conteúdo do site pelos buscadores e pelos leitores de tela.

Bom, nosso <h1> está pronto. Vamos formatá-lo no CSS.

Crie uma imagem (sugiro no Photoshop) para colocar no lugar do <h1>. Poderá fazê-la a sua escolha, mas recomendo que não ultrapasse 800 píxels de largura e 180 píxels de altura, pois alguns usuários ainda usam a resolução 800 x 600px. Com a imagem criada, vamos colocá-la no site.

1. h1 a{
2.          width:800px;
3.          height:180px;
4.          display:block;
5.          background:url(topo.jpg) no-repeat;
6.          text-indent:-9999px;
7.          overflow:hidden;
8. }

Explicando o código:

Linha 1 – Inicio a regra CSS. Indico que a declaração (formatação) a seguir é para ser aplicada a tag <a> que está dentro da tag <h1>, por isso coloquei os seletores h1 a na mesma regra CSS.

Linha 2 – Inicio a declaração da regra CSS. Aplico a largura (width) de 800px à tag <a> que está dentro da tag <h1>.

Linha 3 – Aplico a altura (height) de 180px à tag <a> que está dentro da tag <h1>.

Linha 4 – Usando a propriedade display com o valor block eu transformo a tag <a> em um bloco, e toda a área 800 x 180px será uma área clicável.

Linha 5 – Coloco a imagem topo.jpg como background da tag <a> e por segurança coloco o valor no-repeat para que a imagem não se repita por acidente.

Linha 6 – Se você fez tudo certo até agora, você tem visualmente em seu <h1> a imagem do topo que você criou, mas o texto Substituindo este texto por imagem ainda está lá. Para retirá-lo de cima da imagem coloquei a propriedade text-indent, que é responsável pelo recuo do texto e dei um valor de -999px para que o texto desapareça do navegador.

Linha 7 – A propriedade owerflow seguida do valor hidden também é uma medida de segurança, pois ela faz desaparecer todo o conteúdo que está fora da largura e altura que especificamos, no nosso caso, 800 x 180px.

Linha 8 – Fecha a regra CSS.

Bom, agora você já sabe trocar o texto da tag <h1> por uma imagem usando CSS. Lembrando, para linkar o arquivo CSS no HTML você deve colocar essa linha de código <link rel="stylesheet" href="seuarquivo.css" media="screen" /> logo acima da tag de fechamento </head>.

Nos “veremos” na próxima.  Tchau!