Aprenda a fazer um site acessível desde o começo - Parte 1




Homem está escrevendo em um quadro branco ao lado de uma pessoa que segura um celular na frente dele.

“É muito difícil fazer um site acessível?”, “Sites acessíveis dão muito trabalho”, “Não dá para incluir acessibilidade no meu projeto porque minha equipe não sabe por onde começar”. Costumamos ouvir e ler essas falas de muitas pessoas – tanto da área de desenvolvimento de sites quanto de leigos.

Por essas questões frequentes, resolvemos preparar um conteúdo de passo a passo para mostrar que, com planejamento, vontade e conscientização, é totalmente possível fazer um site acessível desde o começo. Muitas vezes, o que prejudica é a falta de informação sobre o assunto e de algum direcionamento. Estamos aqui para contribuir com esse movimento.

Quer fazer um site acessível? O caminho é colocar em prática os recursos disponíveis pelo World Wide Web Consortium (W3C), consórcio internacional que trabalha no desenvolvimento de padrões para a web, estipula diretrizes e recomendações que devem ser seguidas para garantir a acessibilidade na rede, as chamadas Web Content Accessibility Guidelines, ou WCAG 2.1. Você pode entendê-los com mais detalhes no texto “Como saber se um site está acessível?”.

“A acessibilidade é essencial para desenvolvedores e organizações que desejam criar websites e ferramentas da Web de alta qualidade, e não excluir pessoas do uso de seus produtos e serviços”, diz trecho do site do W3C.

Dividimos o conteúdo do “Aprenda a fazer um site acessível desde o começo” em duas partes. Hoje, você aprenderá a parte 1 com os passos 1 e 2 (Planejamento e Conteúdo). Em maio, vamos publicar a parte 2 com o passo 3 (Design) e, em junho, o passo 4 (Programação).

Passo 1: Planejamento

Um dos pontos mais importantes é colocar a acessibilidade na rotina do desenvolvimento de um site. A equipe toda precisa ter isso no seu checklist, no seu DNA, incluindo a empatia como um exercício constante.

A acessibilidade precisa fazer parte da missão e do planejamento estratégico das instituições, das empresas e de qualquer pessoa tal como estar presente no site – e não ser simplesmente uma série de implementações sem propósito.

Nesse sentido, a preocupação com a acessibilidade começa antes mesmo de escrever uma linha de código. Antes mesmo de pensar no design ou no wireframe, procure identificar pontos que possam ser barreiras para pessoas com deficiência, por exemplo, blocos de texto que se tiverem fontes aumentadas podem quebrar o design e combinações de cores que tenham um bom contraste, para evitar barreiras para pessoas com baixa visão ou daltonismo, por exemplo.

Contrate o domínio e a empresa de hospedagem da sua preferência.

Se o trâmite for direto com a sua equipe, siga o fluxo que é melhor para você, tendo em vista a simplicidade dos processos e a transparência do conteúdo para que todos saibam o que cada especialista está colocando em prática.

Ao tornar esse processo transparente, todos aprendem. Reuniões periódicas com todos podem colaborar com esse processo (tanto para o projeto geral quanto para cada um explicar os desafios e aplicações de cada área).

Identifique quais áreas o seu site vai ter. Exemplo: Home, Serviços, Quem somos, Contato, etc. Você vai aprofundar um pouco mais essa parte quando chegar na produção de conteúdo do seu site.

Faça a previsão dos recursos de acessibilidade, da experiência do usuário com a navegação e a interatividade desde a etapa do wireframe.

Fez o wireframe? Então você pode partir para a escolha da plataforma. No caso do WordPress, há vários templates acessíveis e gratuitos. Ele oferece opções para filtrar quais templates têm recursos de acessibilidade. Isso facilita o trabalho de pessoas que não entendem de HTML.

Uma outra dica importante é avaliar quais são os elementos informativos e ilustrativos do seu site, priorizando o tratamento acessível para aquilo que for informativo e/ou interativo.

Selecionamos alguns materiais para você aplicar na hora de planejar um site acessível, principalmente na fase de planejamento:
Cinco dicas de acessibilidade digital para inclusão de pessoas com autismo
Os benefícios de um site acessível
Quais são as barreiras de acessibilidade mais comuns? A nossa rede responde

Passo 2: Conteúdo

Primeiro, organize todas as informações que você escolheu para o site que você está construindo. Apure e utilize tudo o que deve ser mencionado, usando o grau de importância e objetividade.

Lembre-se das áreas do site que você já escolheu no planejamento. Exemplo: se o seu site terá as áreas no menu (Home, Serviços, Quem somos, Contato), separe e organize o conteúdo de acordo com essas áreas.

Uma das recomendações do WCAG é escrever o conteúdo para que seja compreensível por pessoa com nível fundamental completo. Os textos precisam ter uma estrutura simples, de fácil compreensão, com frases e parágrafos curtos, ordem direta, voz ativa, sem figuras de linguagem ou termos pouco usuais.

Lembre-se de aplicar essa recomendação em todos os textos do site, como conteúdos dos formulários, mensagens de erro, orientações para o preenchimento de formulários e cabeçalhos.

Evite palavras específicas, nichos de público – quanto mais o seu texto estiver simples, mais pessoas vão compreender a informação que você quer transmitir.

Faça a descrição das imagens do seu site. Os textos alternativos (alt texts) são descritivos. Eles explicam ao usuário cego ou com baixa visão o que consta em uma imagem que complementa um conteúdo.

Para fazer o formato correto, siga a seguinte dica para inserir as informações: formato + sujeito + paisagem + contexto + ação.

Verifique as imagens que vão compor sua página. Identifique aquelas que são meramente ilustrativas, como bordas e bullets, e as que fazem parte do contexto da página (imagens que complementam o conteúdo em texto).

Identificar previamente essas imagens facilita o processo de descrição, já que as imagens que fazem parte do contexto necessitam de descrição. Já imagens decorativas não. Não faz sentido descrever “ícone da lista”, ou “imagem da borda arredondada”. Tudo isso será codificado na camada de apresentação (design) que falaremos adiante.

Se o conteúdo necessita ser apresentado em uma tabela, tente torná-la o mais simples possível. Tabelas complexas são ruins para leitura, para acessibilidade e para dispositivos móveis. Já reparou como é ruim ler uma tabela na tela de um smartphone?

Os conteúdos em vídeo devem ter audiodescrição, legenda e Libras. No caso da audiodescrição, é importante contextualizar o conteúdo em vídeo sem atrapalhar a compreensão do áudio original.

É muito importante também que o vídeo também tenha janela de Libras (com avatar digital ou tradutor-intérprete).

Se precisar produzir conteúdos em áudio (podcasts, por exemplo) insira a transcrição em texto desse material.

Lembre-se que os hiperlinks dentro dos textos devem indicar o destino do link. Evite as expressões: “Saiba mais”, “Clique aqui”. Prefira: “Acesse o site (nome do site)”, “Saiba mais no portal (nome do portal)”. O motivo? Para facilitar a navegação, inclusive de pessoas com deficiência visual porque muitas delas navegam somente pelos links.

Faça o teste de usabilidade. Se for comprovado que uma pessoa com esse grau de instrução não compreendeu o conteúdo, não se preocupe. O próximo passo é reescrever esse conteúdo (dependendo do caso, você precisará simplesmente inserir um texto complementar).

Está em dúvida se o texto está acessível? Leia-o em voz alta. Se possível, peça para que outra pessoa faça o mesmo. Essa ação vai facilitar a percepção de fluidez do conteúdo.

Outra dica é que você baixe um leitor de tela e faça a leitura desse texto por lá para checar se o texto está fluindo bem. Sugerimos alguns leitores de tela para você baixar: NVDA (Windows), Voice Over (IOs), TalkBack (Android) e Orca (Linux).

Há muitas dicas para que você possa se aprofundar nesse assunto! Confira, abaixo, alguns materiais que selecionamos para você:
Acessibilidade audiovisual: entenda a importância dela nos seus conteúdos
Conheça dicas e exemplos práticos para fazer links acessíveis
Criadora do projeto #PraCegoVer incentiva a descrição de imagens na web
Conheça a ferramenta que gera inclusão digital por meio do áudio
Confira 13 dicas imperdíveis sobre acessibilidade digital de conteúdo
Conheça boas práticas de acessibilidade digital para publicadores de conteúdo

Com informações: equipe e site do Movimento Web para Todos; W3C Brasil; Reinaldo Ferraz, especialista em desenvolvimento web do W3C Brasil; Como tornar um conteúdo acessível; e os sites que inserimos ao longo da matéria.

Outras novidades