Este é um tema tão falado ultimamente, que é difícil achar alguém que não conhece (de nome) a tal da acessibilidade. Outro dia vi na TV um anúncio (não lembro de que entidade) ensinando ao público o que é acessibilidade. Mas ainda é fácil perceber que a preocupação em fornecer acesso à pessoas com algum tipo de deficiência (que não são poucas) ainda não é algo levado muito a sério. Às vezes executar uma ação simples torna-se impossível graças a um pequeno detalhe que poderia ter sido projetado levando em conta as nescessidades dessas pessoas - muitas vezes sem custo adicional.
Até pouco tempo atrás, eu mesmo nunca tinha pensado a respeito, mas agora parei para fazer isso e percebi o quanto é importante - além de ser respeitoso e educado com aqueles que tem alguma dificuldade e que tem (ao menos teoricamente) o direito de acesso a tudo que é público. Mas como traduzir esses conceitos de acessibilidade para um website?
Bem, no site do SERPRO há alguma informação, uma matéria bem legal no imasters e muita coisa disponível na rede. Se fizer uma busca em inglês então, é uma festa e a razão é simples: estamos falando de um dos pilares do movimento denominado ‘web 2.0′. Mas, apesar de todos já sabermos disso, há muito poucos sites totalmente acessíveis na web.
O que é importante para um website ser acessível?
Um site acessível é aquele que pode ser utilizado nas mais diversas situações e apresenta certas características especiais. Apresento abaixo uma lista dos itens considerados importantes
- imagens, gráficos, audio e vídeo devem ter descrições alternativas
- o texto deve ter contraste com o fundo e poder ser ampliado
- deve poder ser visto e entendido sem as imagens
- links e elementos de formulário devem estar dispostos com lógica
- deve poder ser visto e entendido sem o CSS
- o conteúdo de tabelas deve fazer sentido lido linha a linha
- deve poder ser usado sem javascript
Bem, algumas das regras acima são fáceis e não são usadas apenas por simples desconhecimento, acredito. Outras nem tanto… vamos uma a uma.
Imagens, gráficos, audio e vídeo devem ter descrições alternativas
Fácil. Basta não esquecer de preencher o atributo ‘alt’ nas imagens e ter legendas para os vídeos e audios (como um link ao lado, que leva a um texto descritivo). As imagens e a nescessidade do alt são muito faladas e todos já sabemos, só não sabíamos que o motivo é a acessibilidade. Pois é, o alt não serve apenas para os casos em que as imagens não carregam, mas também para os que não podem vê-las.
Com o advento do atributo ‘title’, restou uma certa confusão quanto à tag img. ALT ou TITLE - qual usar? pra que serve cada um? Bem, o ‘title’ nas imagens tem a mesma finalidade que em qualquer outra tag: exibir um texto descritivo. Já o ‘alt’ está associado à acessibilidade. Se ambos existirem, ao parar o mouse sobre a imagem o ‘title’ aparece, mas se a imagem não puder ser exibida, o ‘alt’ é que será mostrado.
O texto deve ter contraste com o fundo e poder ser ampliado
O contraste é uma exigência para satisfazer aos portadores de daltonismo, que tem dificuldade para reconhecer as cores, especialmente as combinações de cores opostas verde-vermelho e azul-amarelo.
Quanto a poder ser ampliado, estamos falando do tipo de medida escolhido para as fontes na página. Como sabemos, o usuário pode ampliar ou reduzir o tamanho do texto exibido na página, para os casos de miopia ou outra deficiência visual parcial - a menos que na folha de estilos do site o tamanho das fontes esteja definido em medidas absolutas, como pixels, pontos ou milímetros, por exemplo. A medida em pixels, na verdade é classificada como relativa, mas a sua relatividade se refere à definição de vídeo, não ao tamanho de fonte herdado - por isso, para a nossa finalidade, não funciona.
A solução é se basear na folha de estilos do navegador, usando as medidas relativas porcentagem, em e ex. Esses três medidas trabalham em cima do tamanho herdado de fonte - e poderão ser modificados se o usuário precisar.
O site deve poder ser visto e entendido sem as imagens
Muitos usuários com deficiência visual usam browsers que lêem apenas o texto ou outros dispositivos que ignoram as imagens, por isso nunca escreva nas imagens - escreva em texto - e se precisar fazer isso, capriche na descrição.
No caso de estar usando um sistema anti spam tipo captcha ("digite aqui a palavra que você vê na imagem ao lado…"), onde não se pode usar o atributo alt ou title, não esqueça de disponibilizar a mesma palavra em forma de áudio, para deficientes visuais.
Os links e elementos de formulário devem estar dispostos com lógica
Há pessoas que por algum motivo não podem usar o mouse e vão navegar pelo seu site através do teclado. Aqui nos deparamos com a necessidade da semântica correta. Espera-se que os itens clicáveis da sua interface sejam apenas links ou elementos de formulário, que são acessíveis com o uso de Tab, Shift + Tab e Enter.
Se por algum motivo a disposição dos links em seu HTML - na ordem em que foram escritos, não na ordem em que aparecem na página - não seguirem uma seqüência lógica, use o atributo ‘tabindex’ para definir a ordem de acesso.
O site deve poder ser visto e entendido sem o CSS
Pelo mesmo motivo citado no item acima, em certos casos o CSS é dispensável, então, simplesmente não é renderizado. Sabemos que a seqüência em que os elementos são escritos no documento HTML pode não ter nada a ver com a forma que são exibidos, com layers e floats e tudo mais que o CSS oferece. Apesar disso, é preciso que o texto tenha sentido na seqüência mesma em que aparece no HTML, pois esses dispositivos lêem apenas o texto em sua ordem original.
O conteúdo das tabelas deve fazer sentido lido linha a linha
No tipo de leitura citado acima (do documento HTML e não da tela), as tabelas serão lidas como estão escritas, uma TD depois da outra formando uma linha e uma TR depois da outra. Ou seja, os dados serão lidos da esquerda para a direita, TD por TD e de cima para baixo, TR por TR. Portanto se o conteúdo dessa tabela só faz sentido quando interpretado em colunas, ele aparecerá ‘truncado’, misturado e impossível de ser compreendido.
O site deve poder ser usado sem javascript
O Javascript, mais que o CSS, é passível de ser desabilitado. Muita gente faz isso por simples questões de segurança. Outros pelos mesmos motivos dos itens acima. Aqui chegamos a um tema ainda pouco comentado mas de vital importância: Javascript não-obstrutivo. O que é isso?
É simples de entender: sua forma de usar o Javascript não deve impedir a página de funcionar caso o mesmo esteja desligado. Por exemplo, sabemos que para estarmos semanticamente corretos, devemos construir nossos menus com elementos <A>, mas um link assim não serve pra nada sem o Javascript:
Já este pode ser usado também sem ele:
No segundo exemplo, executamos a função e desabilitamos o href com a expressão ‘return false;’. Caso não haja JS, o link e irá funcionar normalmente. Outra situação é quando, através do menu de contexto, usamos a opção ‘Copiar link’ ou ‘Copiar atalho’. No exemplo acima, enviaríamos para a área de transferência a string ‘javascript://’, que de nada serviria. O mesmo se aplica para o comando de abrir o link em uma nova janela.
Quando seu javascript for responsável por mostrar alguma informação relevante, use a tag noscript para explicar o conteúdo que não pôde ser exibido. Aqui nos deparamos com um problema: noscript costuma causar problemas de validação como XHTML 1.0 e precisamos decidir o que é mais importante, validar ou dar acesso.
Se há áreas que só aparecem via javascript, com mudanças dinâmicas no CSS, crie essas áreas visíveis e as esconda no onload da página. Assim, se não houver Javascript, elas estarão visíveis (e acessíveis).
O tão utilizado ‘menu de salto’ (um select com função definida no evento onchange) é também um obstáculo para quem navega pelo teclado, pois ao mudar o campo, o onchange é acionado e o usuário que não conhece o uso da combinação Alt + seta para abrir o menu, nunca passará do primeiro item - e a grande maioria não conhece.
Enfim, a falta do Javascript não pode inviabilizar a navegação. Leia essa matéria já indicada acima, é uma verdadeira aula sobre non-obtrusive javascript, dividida em 5 episódios: http://www.imasters.com.br/artigo/4298/javascript/tudo_sobre_javascript_nao-obstrutivo_-_parte_01/
Outras…
Fora isso tudo, não esqueça de declarar o idioma em que o conteúdo está escrito, com o atributo lang na tag
Todas as regras de usabilidade também são aplicáveis e importantes aqui, como:
- O menu principal deve estar acessível de qualquer lugar do site
- Um retorno para a página principal sempre visível
- Abrir conteúdos externos ao site em novas janelas
- Oferecer um mapa do site com links diretos
- Usar textos descritivos nos links, com title
- etc, etc e etc…
Validação
Existem serviços online para validar a acessibilidade de um website, inclusive um em português, o DaSilva. Veja também o WebXACTe outros aqui. Mas já vou avisando: validar totalmente um site é quase impossível quando se usa muito JS/DOM/CSS, mas dá dicas interessantes quanto às nossas faltas.
Acessibilidade é uma questão de respeito pelo próximo
… além de ser uma exigência do novo modelo de internet - aliás, do novo modelo de mundo.
Web 2.0 sem acessibilidade não rola. Da mesma forma que um supermercado não pode deixar de ter rampas de acesso, o conteúdo de um website não pode estar acessível apenas para um grupo, mesmo que este represente a maioria.
Além disso, tem gente apostando que a acessibilidade é uma grande oportunidade de negócio, veja por quê .
Mapa do site