Aaron Cannon é um web developer, cego que se especializou na acessibilidade para a web. Ele no seu site colocou um artigo de pontos a ter em conta para garantir uma correcta acessibilidade do site para qualquer utilizador.

Achei o artigo muito último por isso decidi traduzir e colocar aqui no blog, espero que seja útil. Aqui vai:

1. MARKUP

• Utilizar correctamente os tags HTML. Exemplo: para criar uma lista deve ser utilizados os tags ul, li, ol ou dl em vez de tables, p ou div como muitas vezes acontece.

• Utilize os tags (h1, h2, h3…) para definir os cabeçalhos e títulos das páginas. São muito úteis para utilizadores com deficiência visual que utilizam programas de leitura de sites.

• Dar a cada página um nome claro e concreto sobre o seu conteúdo.

• Identifica através do tag lang o idioma principal do site e sempre que ao longo do site surja expressões estrangeira indice o respectivo idioma (ex. Hola).

• Utilize devidamente o tag table e indique sempre o cabeçalho do tabela através do tag header.

• Utilize o atributo tabindex, caso os separadores do menu não estejam correctamente ordenados (se estiver não é necessário)

2. ELEMENTOS VISUAIS E CONTEÚDOS

• Confirme se o site continua navegável mesmo sem imagens.

• Confirme se o site continua navegável, quando aplicado um zoom ao textos.

• Confirme se o utilizador consegue navegar por todas as páginas utilizando apenas o teclado.

• Sempre que possível, utilize hiperligações com um descritivo claro, evitar por exemplo coisas como “Clique Aqui”.

• Importante manter um bom contraste entre o texto e os elementos gráficos que compõem o site. Os utilizadores com nível baixo de visão agradecem.

• Não utilize elementos animados que “flashen” ou piscam mais de 3 vezes por segundo.

• Não desactive por css o atributo focus. Quando um utilizador utiliza o teclado para navegação deve conseguir ver o indicador de focus, para facilitar a navegação entre os elementos

• Não utilize expressões como: “Os itens marcados a vermelhos precisam de ser corrigidos”, caso faça, utilize outras formas de identificar.

3. CONTEÚDO DINÂMICO

• Não utilize javascript ao ponto de alterar radicalmente o conteúdo da página ou carregue uma nova página.

4. IMAGENS E ELEMENTOS MULTIMÉDIA

• Confirmar que todas as imagens tem o atributo alt, caso seja apenas uma imagem decorativo deixe o alt em branco (ex. alt=””).

• Quando a imagem é um link utilize sempre o atributo alt para descrever o conteúdo do link.

• É importante ser breve no texto aplicado ao alt (ex. “Açores”) e não ser demasiado descritivo ou redundante (ex. “Arquipélago dos Açores no Oceâno Atlântico”).

• Aplicar sempre uma versão textual do áudio e vídeo no seu site..

• Confirmar se todos os vídeos, no caso de não ter autoplay, tenham pelo menos um botão “Play” acessível.

• Evite utilizar imagens em substituição de texto escrito, se o fizer, lembre-se de aplicar uma versão textual do texto na imagem.

• Evitar CAPTCHAs a todo o custo, se não tiver alternativa, coloque uma opção de áudio no CAPTCAH.

5. FORMULÁRIOS

• Aplicar sempre o tag label em todos os campos do formulário, mesmo que não queria mostrar o label no formulário. Esconda utilizando css.

• Utilize o fieldsets com legends para identificar radio buttons e check boxes. Por exemplo um formulário a perguntar o sexo do utilizador com a opção “masculino” e “feminino”, o texto “Género:” deve ser marcado com legend, sendo que o género e as duas opções de sexo devem ser marcadas com fieldset.

• Identificar erros de submissão através de texto em conjugação com elementos gráficos. Coloque o erro junto ao campo ou no top do formulário com link ancora para o respectivo campo.

• Introduzir links de ajuda ou instruções juntos dos campos sempre que necessário.

• Não permitir o utilizador efectuar acções importantes sem confirmação ou botão para voltar atrás.

• Evite utilizar código HTML não recomendado ou utilizado de forma incorrecta (ex.: tags de forms para navegação, links de texto para submeter formulários, etc.).

6. TESTAR

• Testar todas as páginas no validator W3C (http://validator.w3.org)

• Testar o site ao nível cores e respectivos contrastes. (ex.: http://colororacle.cartography.ch ou http://www.vischeck.com)

• Testar o site ao nível da acessibilidade (ex.: http://wave.webaim.org), mas só depois do site ter passado nos dois pontos interiores.

• Teste a sua página junto de algumas pessoas utilizado checklist’s de acessibilidade.

ps.: Versão 1.0 de 2008. Documento original de Aaron Cannon (cannonaw@ldschurch.org).