Acessibilidade por Aaron Cannon
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).
Sem Comentários