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
langna 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
altpara 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
altmesmo 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 atributotitle. - 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.