Acessibilidade nas Imagens

Olá a todos, neste tutorial darei seqüência ao texto da semana passada, ensinando um pouco dos conceitos discutidos, então mãos à massa.

Pois bem, você desenha um layout lindo, com texturas e efeitos fantásticos, animações boas, vídeos, enfim, tudo que um site “chamativo” precisa ter, mas e quando chega na hora do título? Sim, aqueles títulos que você escreveu com uma fonte encontrada num site Tchekolosvako-Russo-Tailandês que nem você saberia encontrar de novo, e que com certeza o usuário não tem instalada na máquina, mas como ficou bonito no layout você não pode retirar. A solução é usar uma imagem no lugar do texto, mas daí quando o site for acessado com um leitor de tela, como não existe texto, o cego simplesmente não vai ter acesso aos títulos, o que torna a navegação dele extremamente complicada.

Você pode estar pensando, “mas se eu colocar um atributo alt(onde deve se inserir um texto alternativo) na imagem ela fica acessível a leitores de tela”. Ótimo raciocínio, realmente fica acessível, mas daí fica invisível ao Google, pois o Google analisa textos, e não imagens. Além de tornar o site muito confuso para pessoas que o acessarem com um navegador somente texto(muitos usuários de linux usam navegadores somente texto).

Agora sim temos um problema, mas não é muito complicado de resolvê-lo. A melhor solução, na minha opinião, seria deixar o texto no código html e substituí-lo pela imagem através da CSS, pois muitos leitores de tela não interpretam CSS e vão ler o texto, e se interpretarem vão também ler o texto, pois a marcação HTML tem precedência sobre a CSS num mecanismo de leitura de tela.
Imagine o código html assim:

…
<h1>Meu Título numa fonte muito desconhecida</h1>
…

Então na css você faria o seguinte:

…
h1 {
text-indent: -20000px;
display: block;
width: largura da imagem;
height: altura da imagem;
background: url(caminho da imagem) no-repeat;
}
…

Agora vou às explicações.

O text-indent serve pra indentar o texto. No nosso caso vamos usá-lo para esconder o texto, pois usando uma medida negativa ele vai ser indentado para a esquerda, como indicamos -20000px. ele vai ser indentado 20000px para a esquerda, ou seja, vai ficar escondido para qualquer monitor que use uma resolução de vídeo com menos de 20000px de largura. Assim visualmente o texto não aparece e pode ser substituído por uma imagem, e continua visível para os leitores de tela no html, sem contar que o Google vai poder interpretar o texto e vai colocá-lo uns pontinhos à frente em uma busca.

O display é mudado para block(ocupa somente a largura a altura especificadas nos atributos width e height) para você poder indicar uma altura e uma largura para a tag, que devem ser a mesma altura e largura da imagem que será usada como plano de fundo. Caso você não mude o display, em alguns navegadores a imagem simplesmente não irá aparecer.
Width e height dispensam explicações, são simplesmente indicações de largura e altura, que devem ser as mesmas da imagem que será usada.

E por fim colocamos nossa imagem como plano de fundo da tag usando a propriedade background. Assim nós temos nosso título acessível aos leitores de tela, acessível a navegadores somente texto e muito bem visível aos mecanismos de busca.

Outra consideração a ser tomada com imagens é quanto ao texto alternativo (atributo alt). Sempre que você usar uma tag img para inserir imagens no seu site é altamente recomendável indicar um texto alternativo para quem não puder visualizar a foto saber do que se trata essa foto. Na prática ficaria assim:

…
<img src=”flor.jpg” alt=”Flor do tipo rosa cor vermelha” />
…

Assim sua imagem fica acessível tanto para leitores de tela quanto para nevegadores somente texto, que exibirão o texto alternativo no lugar da foto. E no caso da foto não carregar o texto alternativo aparece para a pessoa saber do que se trata a foto, além de que assim seu site tem mais conteúdo e ficar melhor colocado numa busca.

Um cuidado a ser tomado com o atributo alt é quanto ao seu conteúdo, pois convenhamos que um texto alternativo do tipo “foto1” não ajuda muito um deficiente.
Espero que tenham gostado do texto, no próximo explicarei mais alguns macetes referentes à navegação alternativa e âncoras para leitores de tela.
Até a próxima.

Anderson Triacca – anderson@andersontriacca.com – www.andersontriacca.com