08/10/2009Acessibilidade nas Imagens
Atigo Originalmente publicado no MX Studio em 2007.
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, num caso desses o nome da imagem tem mais relevância ao Google do que o próprio atributo alt(Google Images tá aí pra provar). Além de tornar o site muito confuso para pessoas que o acessarem com um navegador 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, tirá-lo da tela, 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 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.
08/10/2009Navegação Alternativa
Atigo Originalmente publicado no MX Studio em 2007.
Olá a todos, na ultima coluna eu discutí um pouco de acessibilidade em imagens, e nesse artigo irei explicar um poco de acessibilidade na navegação da página, afinal de contas não adianta o deficiente poder entender as imagens do nosso site e não conseguir navegar direito nele não é mesmo?
Uma grande dificuldade que eu tenho notado quando os deficientes navegam em sites com leitores de tela é que quando chegam ao final da página eles simplesmente se perdem, pois não existe nenhuma indicação de que o conteúdo acabou, e muito menos de em que lugar da página eles estão.
Após algum tempo pensando eu encontrei uma possível solução para o problema, solução que eu gosto de chamar de Navegação Alternativa. Funciona da seguinte forma, no final do conteúdo você coloca uma indicação de que o conteúdo acabou e faz uma navegação para o deficiente.
Pareceu meio confuso? Vou explicar melhor. No final do conteúdo do site você deve colocar um parágrafo indicando que ali acaba o conteúdo, para que o deficiente possa se orientar, e no css você coloca display: none, para que ele não interfira no layout do site.
No html fica assim:
…
<p class=”final”>Fim do Conteúdo</p>
…
E no CSS fica assim:
…
.final {
display: none;
}
…
É uma coisa extremamente simples a ser feita, mas que vai fazer uma grande diferença para um deficiente visual. Agora vem a segunda e mais importante medida da navegação alternativa, a navegação alternativa!
Funciona da seguinte forma: você cria âncoras em locais estratégicos da página(menu de navegação, inicio do conteudo, final do conteúdo) e faz links para estas âncoras após a indicação do final do conteúdo.
Os lugares mais importantes para se colocar as âncoras são o menu de navegação e o início do conteúdo.
O menu de navegação para que ao chegar no final da página o deficiente possa saltar diretamente até o menu, sem ter que ler toda informação do topo(redundante para ele) novamente, e poder acessar rapidamente as outra páginas do site. E no início do conteudo, para que se ele quiser ler o conteúdo novamente, ele possa fazer isso rapidamente.
Outro lugar muito importante é antes do menu de navegação, para o deficiente poder ir direto ao conteúdo sem ter q ler todo menu novamente quando ele visitar uma nova página do site, esse link é popularmente chamado de “Pular Navegação”.
São todas orientações bem simples, que não exigem mais do que 10 minutos de desenvolvimento, mas que com certeza vão melhorar muito a experiência de um deficiente visual no seu site.
Obrigado a todos e até a próxima.
08/10/2009Google, o Grande Cego
Atigo Originalmente publicado no MX Studio em 2007.
O título pode parecer meio estranho, mas essa é uma das grandes verdades da web, o google é o maior cego da internet, e isso é muito bom para nós(desenvolvedores). Você deve estar pensando: ?esse cara é louco?, mas vou explicar um pouco da minha lógica, e depois você pode tirar suas conclusões.
Quando eu comecei a montar minhas páginas html eu fui questionado sobre como eu tratava da acessibilidade nas minhas páginas eu respondi que não me importava muito com isso, que deficientes não usam a internet(como eu era ingênuo nessa época).
Acontece que os deficientes(parciais ou totais) acessam sim a web, e acessam muito, cerca de 20% das pessoas que navegam na web são portadoras de algum tipo de deficiência, e não pensar nelas é excluir milhões de possíveis visitantes aos nossos sites.
Mas agora você deve estar se perguntando: como um cego acessa um site?, pois eu respondo, através de leitores de tela(progamas que lêem o conteudo do site e expressam de forma verbal para o deficiente poder acessar a página) tais como Jaws ou DoxVox. Mas se na hora que desenvolvemos o site não pensarmos nesses programas, eles com certeza irão confundir o deficiente no lugar de ajudá-lo.
Devemos tomar medidas preventivas para que um deficiente tenha uma boa experiência quando navegar em nosso site, medidas como colocar conteúdos alternativos para leitores de tela, separar conteúdo de estilização, usar webstandards, escrever html semântico, conteúdo alternativo para navegadores que não suportam flash, e outros mais(nas próximas colunas eu explico cada técnica mais detalhadamente).
Agora você me pergunta: ?onde o google do título entra nesta história??, pois ele é mais importante, mais inteligente e mais cego do que você pode imaginar.
Veja por este lado, quanto melhor a colocação do seu site numa busca mais visitas você vai ter. Agora você já se perguntou como o google determina quais sites aparecerão melhor numa busca?
Pois o google visita seu site semanalmente, e quanto mais você atualizar ele melhor ele ficará colocado numa busca, isso claro, se o google conseguir ler seu site. Para o google ler seu site ele precisa de conteúdo, muito conteúdo, e a melhor forma de se conseguir muito conteúdo é usar pouco código na marcação, e para isso existem os webstandards, que separam estruturação de estilização. Quanto mais acessível aos leitores de tela seu site for melhor cotado ele será pelo google e mais visitas ele terá, pois o google é o grande oráculo cego da web.
Vivemos num país onde existem muitas desigualdedes e preconceitos, pelo menos na internet vamos tentar fazer algo para mudar esse quadro.
Por hoje é só, e nos próximos artigos vou explicar na prática como tornar seu site acessível e melhor estruturado.
Até a próxima.
Anderson Triacca
Estudante Universitário de Design Gráfico pela Universidade de Caxias do Sul, certificado em desenvolvimento Ajax pelo grupo Processor Alfamídia de Porto Alegre e acima de tudo Desenvolvedor Web.
