Categorias
Design

Lista de checagem para acessibilidade de sites na internet

A lista de checagem (checklist) de acessibilidade é  muito importante para qualquer pessoa que esteja envolvida no desenvolvimento de sites e sistemas baseados na web, e principalmente que deseja ter seu trabalho acessível para o maior número possível de pessoas (incluindo portadores de qualquer tipo de deficiência visual, motora ou outras), seja por questões de negócios ou por pura responsabilidade social.

O objetivo da criação deste documento era desenvolver uma simples lista de itens (recomendações) que quando seguidos corretamente garantam a acessibilidade do projeto, sem maiores complicações. O resultado foi um documento relativamente curto mas muito eficiente em seu propósito.

Marcação (HTML)

  • Sempre separe estrutura de apresentação, e use marcação adequada para a estrutura. Exemplo: Use <ul> para uma lista não ordenada ao invés de inserir uma quebra de linha após cada item utilizando a tag <br>.
  • Cabeçalhos do HTML como <h1><h2><h3> e assim por diante são muito úteis para usuários sem visão. Marque adequadamente as seções da página e o corpo do documento com cabeçalhos semânticos ao invés de fazer por CSS com que outro elemento se pareça com um título.
  • Sempre dê títulos descritivos e com significado preciso para cada página do site utilizando a tag <title>.
  • Indique o idioma principal do documento usando o atributo lang na tag <html>, também o utilize em outras tags do documento caso apresentarem conteúdo em idioma diferente do principal. Exemplo: <span lang="es">Hola</span> significa “Olá”.
  • Forneça um link “Pular para o conteúdo” no topo do documento para que seja possível pular toda a navegação e ir direto para o conteúdo.
  • Sempre indique cabeçalhos em tabelas usando a tag <th>, e associe todas as células a seus respectivos cabeçalhos.
  • Assegure-se de oferecer uma ordem lógica para a navegação com tecla tab utilizando o atributo tabindex. Porém se o código HTML já estiver na ordem adequada não é preciso utilizar este atributo.

Aparência Visual do Conteúdo

  • Certifique-se que a página continua utilizável com as imagens desabilitadas. (Isso inclui verificar se o contraste continua suficiente para leitura quando as imagens de fundo não são carregadas).
  • Certifique-se que a página se mantém usável quando o usuário aumenta o texto até duas vezes o tamanho original.
  • Certifique-se que cada elemento na página possa ser alcançado e controlado pelo teclado.
  • Sempre que possível escreva cabeçalhos descritivos e textos de links que podem ser compreendidos fora do contexto (isso mesmo, nada de links “clique aqui”).
  • Assegure-se que seu conteúdo tem bom contraste com o fundo, considerando também usuários daltônicos ou com pouca visão.
  • Não use elementos que pisquem mais de três vezes por segundo (ou simplesmente não use elementos que pisquem).
  • Não esconda o indicador de foco (geralmente uma borda pontilhada em volta do elemento em foco). Quando um usuário usar a tecla tab para navegar deve ficar aparente qual elemento está em foco.
  • Não exija que os usuários percebam fontes, cores ou outros estilos visuais para entender o significado. Nada de “A palavra destacada no parágrafo anterior é a mais importante”, ou “Itens marcados em vermelho são erros e precisam ser corrigidos”, a menos que a palavra ou itens sejam indicados de algum outro modo, preferencialmente com marcação adequada.

Conteúdo Dinâmico

  • Não use eventos em JavaScript que alterem radicalmente a página ou carreguem uma página inteiramente nova quando acionados, não importa se “AJAX está na moda”.

Imagens e Multimídia

  • Assegure-se que todas as imagens possuam o atributo alt para descrevê-la, deixando o texto em branco caso a imagem seja apenas decorativa e não tiver significado no contexto, o código fica assim: alt="".
  • Adicione o atributo alt mesmo que as imagens sejam também links.
  • Seja breve com o conteúdo do atributo alt (Exemplo: “Catedral de Notre Dame”), mas forneça detalhes quando eles derem significado dentro do contexto (Exemplo: “Filho em pé com sua mãe nos braços”).
  • Forneça transcrições, legendas e/ou tradução em linguagem de sinais para todo conteúdo de áudio e vídeo com falas.
  • Forneça uma versão descrita de um vídeo quando a descrição é necessária para usuários sem visão entenderem o conteúdo (o áudio descrito pode ser distribuído com o conteúdo do vídeo ou como um arquivo de áudio apenas).
  • Certifique-se que todos os vídeos, caso não iniciem automaticamente, tenham um controle de início acessível.
  • Quando texto real pode ser renderizado pelo navegador tão bem como apresentado em uma imagem, evite usar imagens para o texto.
  • Evite Captchas (aqueles campos que pedem para que você escreva o que aparece na imagem) a todo custo. No entanto se você realmente não tem saída forneça um Captcha alternativo em áudio. Uma boa solução é o reCAPTCHA.

Formulários

  • Sempre rotule todos os campos de formulários com a tag <label>. Se um campo do formulário não tiver texto específico de rotulo, adicione um e o esconda por CSS, ou use o atributo title.
  • Use a tag de agrupamento de campos <fieldset> com tags de legenda <legend> para associar com campos de seleção e caixas de checagem (checkbox). Exemplo: Considerando um campo que pergunta o sexo do usuário e oferece as opções “Masculino” e “Feminino”, o label “Sexo:” ficaria dentro de uma tag <legend>, que por sua vez junto com os outros dois elementos ficaria dentro da tag <fieldset>.
  • Identifique todos os erros de validação de formulário (indo além de apenas imagens ou ícones), e coloque a notificação de erro próxima ao campo correspondente ou em destaque no topo da página com um link para o campo em questão.
  • Quando necessário forneça links de ajuda ou instruções sobre como preencher os campos do formulário.
  • Não permita que os usuários completem ações importantes sem uma confirmação, ou pior ainda, sem a possibilidade de desfazerem.
  • Evite utilizar elementos do HTML de formas não semânticas, como elementos de formulários para navegação, links para envio de formulários e o uso incorreto mais famoso de todos: tabelas para formatação do layout.

Testando

  • Valide sua marcação com o validador do W3C. Se sua página não passar no teste pode ser sinal de erros de semântica no HTML ou mesmo erros de escrita.
  • Teste todas as páginas com simuladores de daltonismo como o Color Oracle e o Vischeck.
  • Teste todas as páginas com um avaliador de acessibilidade, mas apenas após fazer tudo o que pode para assegurar a acessibilidade da página (mais especificamente, seguir todas as recomendações anteriores).
  • E mesmo assim, se possível, tenha suas páginas analisadas por um perito em acessibilidade, sempre há algo que pode ser melhorado.

Fonte: MeioBit

Gostou da postagem? Foi útil para você? Então, considere fazer uma doação PIX para nossa edição.

E, precisando de ajuda, clique aqui e saiba como podemos te ajudar.

 

Sair da versão mobile