Dicas de Acessibilidade

Introdução

Já mostramos as principais recomendações sobre acessibilidade no artigo "Acessibilidade para todos". Agora, vamos ver algumas dicas rápidas e práticas para avaliar a acessibilidade de um sistema ou site Web.

---

Tamanho da fonte

Embora exista uma tendência natural de designers diminuirem cada vez mais o tamanho das fontes de sites, é muito importante que o tamanho padrão (aquele que é mostrado quando o usuário acessa o site pela primeira vez) seja acessível. Eu diria que um tamanho acessível é de pelo menos 11pt.

Um recurso utilizado atualmente são os botões de acessibilidade de textos, que permitem aumentar ou diminuir o tamanho das fontes do site dinamicamente, através de JavaScript.

A dica sobre o tamanho da fonte não diz respeito apenas ao tamanho padrão, mas que comportamento tem o layout da página quando o tamanho da fonte é aumentada ou reduzida através de recursos do próprio navegador. É possível continuar lendo o texto? Algum texto ficou para fora da área reservada a ele? Algum texto sumiu por ficar escondido em alguma região de rolagem omitida (propriedade "overflow" do CSS valendo hidden) ? Faça o teste. Lembre-se que existem pessoas que precisam aumentar significativamente o tamanho do texto do computador para utilizá-lo.

---

Tamanho de caixas

Um dos grandes problemas enfrentados pelos designers diz respeito ao tamanho de caixas (div's ou outros elementos de bloco do HTML). Normalmente eles preferem definir um tamanho de largura fixa (definida na unidade "px", "in", "cm" ou "mm") para que possam ser incluídas imagens de fundo atrativas, por exemplo, cantos arredondados com um degradê bacana. Alguns tipos de efeitos exigem que o tamanho da caixa seja fixo e o designer acaba definindo esta largura por não ter outra alternativa. Porém, isso pode ser um problema para algumas pessoas com necessidades diferenciadas de acessibilidade.

Quando possível, utilize largura variável em "%" ou "em" (1em sigifica o tamanho padrão do elemento). A porcentagem varia de acordo com o tamanho da janela, enquanto o "em" varia em função do tamanho da fonte corrente. Ou seja, ao usar "em", você redimensiona o tamanho de uma caixa na mesma proporção que o texto é redimensionado.

---

Imagens em Excesso

Incluir imagens em excesso em um site também pode prejudicar a acessibilidade. Procure utilizar a tag IMG apenas onde pretende incluir, de fato, uma imagem com significado para o conteúdo do documento. Por exemplo, que apresentar uma foto, um gráfico ou algo do tipo. Para efeitos visuais, utilize imagens em CSS, através da propriedade background-image. Com isso, um usuário cego que utiliza um navegador especial para ler o site não irá se "perder" entre as imagens de layout. Para as imagens criadas com IMG, utilize sempre o atributo alt para descrever o que é a imagem e, opcionalmente, utilize o atributo longdesc para encaminhar para uma página que descreve com detalhes o conteúdo da imagem.

---

Utilize Web Standards

Utilizar Web Standards significa seguir as recomendações da W3C, utilizar as tags HTML de acordo com seu significado semântico e separar layout de conteúdo (e, se possível, de scripts também).

Se você tem um plugin como o Web Developer para Firefox, existe a possibilidade de desabilitar os estilos. Veja como fica o conteúdo e se ele realmente faz sentido quando o layout é retirado.

Uma dica é acessar seu site através de um navegador modo texto e avaliar a acessibilidade. alguns exemplos: Lynx, Links, ELinks e w3m.

Outro fator importante é manter um padrão sobre os elementos do site, especialmente os links. Evite links com cores diferentes. Se tirar o efeito sublinhado, apresente o link de uma forma que o torne facilmente reconhecido. Além disso, utilize o atributo rel para apontar o tipo de link relacionado. Por exemplo, a página principal pode ter o rel="home" e isso vale tanto para a tag LINK quanto a tag A.

---

Descreva cada seção do site

Procure avaliar seu documento como um documento, que ele é. Ele está provavlemente está dividido em seções. Algumas são facilmente percebidas pelo usuário (um cabeçalho, um rodapé, um menu, etc.), mas outras nem tanto.

Por exemplo, se você tem uma barra de navegação, coloque um título nesta barra. Se a barra de navegação é bastante intuitiva e você acha que não precisa dizer que aquilo é uma barra de navegação, então, através do CSS, diga para que este título pode ficar invisível. Você pode estar se perguntando "pra que criar um elemento e deixá-lo invisível na página?", mas, na verdade, você está ajudando um usuário cego a se orientar mais facilmente pelo seu site. Lembre-se que não importa o quão intuitiva seja a barra de navegação ou o menu, lembre-se de que uma pessoa que não vê não tem esta mesma intuição.

Use e abuse do CSS direcionado aos diferentes tipos de mídia. Por exemplo, crie um CSS para a tela de computador (screen), um para dispositivos móveis (handheld), um para impressora (print), etc. Normalmente, você vai preferir omitir alguns elementos ao solicitar a impressão de uma página do seu site. Faça a pergunta: é necessário tantas imagens de fundo e cores quando alguém solicitar a impressão do documento? Prefira o preto e branco clássico, e o mínimo de imagens possível. Afinal, a acessibilidade não diz respeito apenas ao que é apresentado na tela do computador. Se o documento é impresso, ele precisa continuar sendo acessível e entendível.

---

Use contraste nos textos

Procure utilizar cores de textos contrastentes com as cores de fundo do texto. Lembre-se, ainda, que existem pessoas daltônicas, que não conseguem distinguir algumas cores. Utilizar um contraste razoável facilita a acessibilidade para estas pessoas. Se você realmente pretende utilizar um texto com pouco contraste, avalie o quanto ele é importante para o entendimento do documento. Alguns elementos do documento, de fato, podem passar despercebidos (até propositalmente) sem afetar o entendimento do documento.

---

Conclusão

Você conhece outra dica de acessibilidade web? Poste um comentário para divulgá-la!