Textos categorizados 'acessibilidade'

[Artigo]: Uma simples checklist de acessibilidade

Uma simples checklist com recomendações de acessiblidade foi feita por Aaron Cannon, um desenvolvedor web e consultor de acessibilidade cego. Considerango este fato, creio que ele sabe do que está falando, e algumas coisas começarei a adotar em meu desenvolvimento. :D

Traduzi a lista e dei uma inscrementada em algumas questões que ele levanta, veja abaixo:

Marcações

  • Separe bem a estrutura da apresentação e use marcações apropriadas. Por exemplo, listas de  marcações são listas (<ul>,<ol>,<dl>) ao invés  de uma <br> depois de cada item de uma texto  que você quer deixar como marcação.
  • Cabeçalhos HTML (<h1>) são muito úteis para pessoas com alguma forma de deficiência visual, marque propriamente as seções de sua página ao invés de utilizar uma <p> estilizada.
  • Dê as páginas títulos relevantes ao corpo dela,  utilizando a tag <title>.
  • Indique a primeira linguagem do documento utilizando o atributo “lang” na tag <html> e indique qualquer passagem de linguagem fora a principal dentro das tags.  Ex: Documento está em pt_BR e tem algo em Espanhol, ficaria assim: “<span lang=”es”>Hola</span> é Oi em espanhol“.
  • Provenha um link “pular para conteúdo” em  páginas muito longas, com muito conteúdo não relevante ao documento que estiver antes do principal.
  • Sempre indique cabeçalhos de tabela utilizando tag <th> e associe todas as células com seu cabeçalho.
  • Tenha certeza que a troca de campos de um  formulário está sendo feita de acordo com o que foi especificado, atributo “tabindex” é muito útil para estes casos, mas se seu formulário está em ordem, é irrelevante o atributo.

Aparência e Conteúdo

  • Tenha certeza que sua página continue usável  quando é desabilitado a exibição de imagens,  isto inclue imagens de fundo em relação ao  texto. (Exemplo imagem de fundo negra com texto branco, ao desabilitar o fundo fica branco e o texto branco, pedendo usabilidade).
  • Tenha certeza que a página estará utíl quando usuário aumentar o tamanho da fonte do site,  nem todos os usuários enxergam como você. :)
  • Tenha certeza que os elementos de sua página  possam ser manipulados por teclado (pelo menos os elementos com relevância ao documento).
  • Sempre que possível, utilize textos cabeçalhos descritivos e textos nos links para serem totalmente compreendidos para quem está fora do contexto. (Ex: “Sem links no estilo “click aqui”).
  • Não utilize conteúdo que pisque demasiadamente ou brilhe muito, procure fazer o efeito com um intervalo de 3 segundos pelo menos.
  • Pense em usuários com capacidade de visão limitada, procure utilizar fundos que façam contraste suficiente com o documento, que não agridam visualmente mesmo os usuários com capacidade normal de visão.
  • Não esconde a estilização :focus dos elements (como links), caso ele esteja utilizando um teclado, ele precisa saber no o que está passando é um link.
  • Não requira que os usuários percebam a fonte, cor ou qualquer outra alteração no estilo para entender o que está ocorrendo. Por exemplo: “Os itens em vermelho precisam ser corrigidos“, a menos que a palavra ou itens são indicados em alguma outra forma.

Conteudo Dinâmico

  • Não abuse de muitos eventos JavaScript que  alterem radicalmente a página ou carreguem uma nova página quando acionados.

Mídia

  • Tenha certeza que todas as imagens possuam o atributo “alt”, deixando em branco para imagens que julgue ser decorativas apenas. Sempre adicione atributo alt em imagens que  acompanham links. Em geral, ser breve nas descrições “alt” da imagem. mas provenha detalhes quando se veícula um significado. Utilize tambem atributo “longdesc” caso haja necessidade de uma explicação mais detalhada e o conteúdo não tem nada a respeito.
  • Provenha tradução de transcripts, captions e sinais de linguagen para cada audio e vídeo com fala.
  • Não esqueça de adicionar controles de vídeo e audio em seu conteúdo multimídia.
  • Quando o texto pode ser muito bem renderizado pelo navegador, evite utiliza-lo em imagens (técnicas de “Image Replacing” são uma boa pedida, mas considerar traduções de texto/imagem).
  • Procure não utilizar CAPTCHAS a menos que seja muito necessário, porém se precise utilizar, provenha um áudio do mesmo.

Formulários

  • Sempre procure utilziar <label> em textos ao  lado de campos (Ex: Nome). Caso o formulário não contenha um texto específico na página,  insara-o e esconda via CSS.
  • Utilize <fieldset> com legendas (<legend>) para associar campos de multípla seleção ou “radio boxes”.
  • Identifique todos os erros de entrada no texto  (com adicão de qualquer imagem ou ícones) e coloque o a notificação do erro o mais próximo possível do campo que ocorreu o erro ou no topo da página com uma âncora para o o campo com erro.
  • Provenha sempre links de ajuda com instruções inline para explicar melhor o campo quando necessário.
  • Não permita que o usuário completem ações importantes sem uma confirmação ou uma opção de desfazer a mesma.
  • Evite utilizar elementos HTML que não são aplicáveis para formulários, um exemplo clássico é um link para submeter o formulário.

Testando

  • Teste suas páginas com validação HTML (como http://validator.w3c.org), se ela não passar por validação tem um importante motivo. Eu utilizo o add-on do Firefox, o HTML Validator.
  • Teste todas as páginas para visibilidade de cores, utilizando simuladores ou add-ons no seu navegador. (Author recomenda http://colororacle.cartography.ch ou http://www.vischeck.com).
  • Teste suas páginas para questões de acessibilidade (http://wave.webaim.org), mas somente depois que você terminou tudo o que deve ser feito recomendado neste documento.

Hoje em dia vale muito a pena pensar em usuários com algum tipo de deficiência, afinal ele é um cliente como qualquer outro para sua aplicação e alem do mais, fazendo isto você demonstrará seu diferencial no mercado.

Resourceful Vs Hackable Search URLs

Um ótimo artigo do Morethanseven falando sobre esta diferença, muito útil para quem está começando a aprender sobre acessibilidade em URIs. O último projeto que trabalhei tem URIs muito acessíveis e relevantes ao contexto do site. :)

Link p/ o Artigo

Em tempo: Aprenda a fazer um formulário acessível.