Dicas

Algumas dicas para construção de páginas HTML acessíveis.

Cores do layout

Com relação ao layout, é necessário que haja um bom contraste entre o texto e o pano de fundo do site. Pessoas daltônicas terão dificuldades em visualizar um texto em vermelho escuro sobre um fundo rosa claro, por exemplo.

O ideal é que o texto seja próximo do preto e o fundo próximo do branco, sem muitas variações. O site precisa ser facilmente navegável, mesmo em preto e branco.

Os links não podem ser determinados apenas por cores distintas do restante do texto. Pessoas daltônicas não saberão distinguir links em vermelho dentro de um parágrafo com texto em preto. O ideal é que os links sejam sublinhados ou estejam em negrito.

A estrutura do site deve ser relativamente simples, permitindo que a leitura de texto de cima para baixo seja leve, sem muitas dificuldades, ao conteúdo.

Imagens

O atributo ALT da linguagem html permite que uma imagem seja descrita, mesmo para aqueles que não podem vê-la. Pode ser incluído em qualquer tag <img>:

<img src="LumisPortal.jpg" alt="LumisXP" />

Imagens utilizadas apenas como espaçamento ou apenas para incrementar o layout não devem conter texto no ALT: <img src="pix.gif" alt=" " />

Para passar pelos validadores de acessibilidade, o ALT precisa realmente ter como valor, um espaço vazio. Ou seja, precisa ser alt= " " e não alt= "".

Por conta disso, para que as imagens com ALT vazio não mostrem uma caixa vazia, ao passar o mouse por cima delas utilizando o Internet Explorer, é necessário adicionar um TITLE , também com valor vazio:<img src="Image.gif" alt= "" title= "" />

A descrição de imagens precisa ser detalhada, como emgráficos de pesquisa, por exemplo. Por isso, é recomendável o uso do atributo LONGDESC. No entanto, esse atributo não é suportado por muitos browsers . Para maiores informações, consulte: http://wats.ca/resources/longdesc/31

Tamanho de Fontes

As fontes de um site acessível não podem ser fixas, permitindo que as opções do browser consigam mudá-las facilmente.

Atualmente, diferentemente de outros browsers modernos, o Internet Explorer 6 não altera para tamanhos de fontes definidos em pixels (px). Em relação às outras medidas (pt, em, etc...), todas podem ser alteradas por todos os browsers.

A tag de CSS do Yahoo, provavelmente, define a melhor medida de fonte a ser utilizada:

body{font:84%/1.2em arial,sans-serif;direction:ltr}

Essa tag define que todas as fontes do site terão 84% de tamanho; com tamanho de linha de 1.2em; e na direção da esquerda para direita (padrão).

Caso seja necessário criar outro tamanho de fonte dentro do site, basta criar folhas de estilos (CSS) alternativas, em que as classes que definem as fontes determinam tamanhos menores ou maiores do que o padrão (provavelmente não fará sentido ter classes com tamanho de fonte menores).

Para maiores informações, consultar http://www.tableless.com.br/estudo/switcher/

Formulários

Os formulários precisam ter os títulos de cada campo de entrada de dados associados as suas respectivas tags <INPUT>. Isso é feito através das tags <LABEL>, que são invisíveis para browsers visuais, mas tem um papel importante em formulários acessíveis:

Note que o atributo FOR deve conter o mesmo valor do ID da respectiva tag <INPUT> ao que o texto está associado. As tags <INPUT> de imagem também devem ter textos em ALT , da mesma forma que imagens normais:

<input type="image" name="submit" src="button.gif" alt="Submit" />.

Scripts

Os scripts devem ser seguidos pelas tags <NOSCRIPT>, nem que seja para conter nenhum valor. No entanto, em scripts com document.write que renderizam informações, é recomendável incluir na tag <NOSCRIPT>, ao menos uma descrição do que elas seriam:

Nem sempre os scripts aparecem no código dentro de tags <SCRIPT>, isso vale principalmente para link, como por exemplo os que usam window.open. A seguir, um exemplo de como usar links com window.open, sem torná-los inacessíveis para browsers que não possuem javascript habilitado:

Dessa forma, mesmo browsers sem javascript habilitado conseguirão abrir o link, pois irão ignorar o atributo ONCLICK, mas não o atributo HREF.

Tabela

As tags <table> terão pelo menos uma seqüência <tr><td></td></tr>.