Como tornar um conteúdo acessível

Recentemente assisti a uma palestra sobre acessibilidade. Os pontos abordados em pouco mais de uma hora de apresentação me fizeram repensar o que eu já sabia sobre esse tema, a importância desse assunto para quem participa do processo de ideação e de construção de sites e de produtos, e principalmente, o que eu venho fazendo para ajudar a garantir a produção de conteúdos acessíveis como UX Writer.

Segundo dados do Instituto Brasileiro de Geografia e Estatística (IBGE) de 2010, das cerca de 190 milhões de pessoas brasileiras aproximadamente 45 milhões, nada menos que 24%, possuem algum tipo de deficiência.

É preocupante perceber que boa parte dessas pessoas fica sem acesso a serviços importantes se não nos preocupamos com acessibilidade ao pensarmos e ao confeccionarmos sites e produtos.

Apesar da Lei 13.146, de julho de 2015, obrigar “a acessibilidade a sítios da internet mantidos por empresas com sede ou representação comercial no país”, sabemos que na prática não é assim que funciona. Não há fiscalização eficaz. E as pessoas que possuem deficiências não sabem a quem reclamar seus direitos.

Mas me conforta saber que, mesmo as empresas geralmente despriorizando recursos para tornarem seus projetos acessíveis, se a linguagem de programação estiver bem empregada em um site ou produto, se a semântica estiver correta, o uso por pessoas com deficiências se torna ao menos possível.

Em relação a conteúdo, mais especificamente, algumas premissas podem ser seguidas para contribuirmos com a tarefa de melhorar as experiências de uso das milhares de pessoas com algum tipo de deficiência:

Seguir os 4 princípios do WCAG

O Web Content Accessibility Guidelines (WCAG) traz quatro princípios a serem seguidos para melhorar a acessibilidade dos conteúdos no ambiente online: conteúdo perceptível (aos olhos, ouvidos e tato); operável (por mouse, teclado e voz); compreensível (claro, sem ambiguidade) e robusto (que funcione em qualquer lugar — responsivo).

Em outras palavras, o perceptível aos olhos diz respeito a conteúdos com fonte inteligível, de tamanho legível (acima de 16 px), com bom contraste em relação ao fundo, além da disponibilização de legendas em vídeos com velocidade que permita a leitura.

Já o perceptível aos ouvidos faz referência a músicas, novamente a legendas e até a um conteúdo bem estruturado, sem ambiguidades, que possa ser compreendido com facilidade por intermédio de um leitor de telas. E o tato à orientação por Braile nos teclados.

Sobre a robustez, quer dizer que todos esses conteúdos têm que ser operáveis por mouse, teclado e voz e funcionarem em qualquer plataforma: Android, tablet, computador.

Vale lembrar que a preocupação com essas questões é antiga. Elas têm consonância com as heurísticas de Jakob Nielsen, láaa de 1995, que priorizam consistência e padronização, possibilidade de ajudar os(as) usuários(as) a reconhecerem, diagnosticarem e a se recuperarem de erros, além de oferecer-lhes ajuda e documentação.

Escrever conteúdo compreensível por pessoa com nível fundamental completo

Essa recomendação do WCAG é muito interessante porque não é exclusiva às pessoas com deficiências físicas ou mentais. Aborda uma deficiência intelectual grave, que afeta boa parte da população mundial: a má interpretação de texto.

Segundo o guia, os textos dos sites e dos produtos precisam ser simples e de fácil compreensão para uma pessoa com nível fundamental completo — no caso do Brasil, que tenha estudado até 9ª série.

Se durante um teste de usabilidade ficar constatado que uma pessoa com esse grau de instrução não compreendeu um conteúdo, ele precisará ser reescrito ou necessitará de texto explicativo complementar.

Essa regra se aplica a todos os textos de um site ou de um produto, como mensagens de erro, orientações para o preenchimento de formulários e, especialmente, cabeçalhos. Isso porque a maioria das pessoas começam a ler páginas pelos cabeçalhos, daí a importância desses enunciados serem claros e, também, de possibilitarem aumento de fonte em níveis.

Boas práticas para percebermos a qualidade de um conteúdo que estamos produzindo é lê-lo em voz alta e pedir a um(a) colega para fazer o mesmo. Outra opção é utilizarmos um leitor de tela para vermos se as orações dos nossos textos, e as conexões entre elas, ainda fazem sentido usando esse aparelho.

Depois disso, algumas perguntinhas nos ajudam a perceber se o conteúdo está de fato claro:

  • “Eu consigo compreender o que estou lendo?”
  • “Se eu não trabalhasse aqui, e não conhecesse este site/produto, ainda assim entenderia o que estou explicando?”
  • “Meu(minha) colega, que leu o meu texto, compreendeu o que eu escrevi? Teve dificuldade para compreender algum ponto específico?”
  • “O conteúdo continuou fazendo sentido ao ser lido pelo leitor de tela?”

Aplicar estratégias de SEO

Segundo Marlon Souza, analista de sistemas cego do banco Itaú “O Google é o maior cego da internet”. Logo, textos coerentes, coesos, concisos e descritivos ajudam não só a construir um conteúdo acessível, como a indexa-lo melhor nos buscadores.

Tags e palavras-chave nos títulos e nos subtítulos, por exemplo, contribuem para o bom ranqueamento de um conteúdo.

Inserir zoom e criar conteúdo adaptável à tela

Outro ponto importante é validar o conteúdo utilizando o zoom, junto a pessoas com baixa visão. É algo simples, de fácil aplicação, mas que ainda não é amplamente realizado.

Segundo o WCAG, o conteúdo deve poder ser aumentado até 400% sem estourar. Também precisa se adaptar às telas de dispositivos móveis, sem necessidade de fazer rolagem (scroll) para continuar uma leitura.

Evitar o “clique aqui”

É necessário explicar melhor o que será clicado, mesmo que isso aumente o link e algumas pessoas possam achar que ele fica feio.

Por exemplo, em vez de escrever “Clique aqui para ver fotos”, o ideal é inverter a ordem da frase, colocando a informação mais importante primeiro — o que já é uma premissa de boa escrita — e transformar toda a frase em um link, assim: “Confira fotos do evento”.

Isso porque quando leitores de tela realizam a leitura da página o “clique aqui” fica descontextualizado, gerando dúvidas no(a) usuário(a) sobre o que é aquele “aqui” e para onde ele(a) irá ao clicar nele.

Priorizar legendas sem símbolos ou abreviações

Percebi como algumas práticas de escrita de legendas, muito comuns em textos jornalísticos, são inacessíveis durante a confecção do Guia de Estilo da Conta Azul (em breve tem artigo sobre o processo de criação do Guia ;)).

Durante a definição dos padrões de legenda, colegas da equipe de Design Ops me alertaram para o fato de que o símbolo “maior que” (>), que eu estava propondo para orientar o sentido de leitura de algumas legendas, seria interpretado literalmente por leitores de tela, o que poderia confundir cegos e pessoas de baixa visão.

Imagine o leitor de tela em ação: “Na foto, da esq, ponto, maior que, para a dir, ponto, João Aurélio e Maria Aparecida, da Inovets”.

O ideal é priorizar palavras inteiras, como “esquerda” e “direita” para mostrar a disposição de pessoas ou de itens em uma imagem, evitando abreviações como “esq.”, “dir.”, ou ainda o “(E)” e o “(D)”, bastante utilizados e sugeridos inclusive por alguns manuais de redação brasileiros.

Utilizar texto alternativo ou alt text

Os textos alternativos (alt texts), diferente das legendas, são exclusivamente descritivos, literais. Eles explicam ao usuário cego ou com baixa visão o que consta em uma imagem que complementa um conteúdo.

Se for uma imagem meramente decorativa, não é necessário adicionar texto alternativo. No alt text, também devemos nos ater às informações fundamentais sobre uma imagem. Então:

SIM: “Família com cinco pessoas e um cachorro assistindo TV na sala”

NÃO: “Família com cinco pessoas, sendo dois homens e três mulheres, mais um cachorro, sentados em um sofá amarelo, com uma lata de lixo ao lado e um quadro ao fundo”

Usar máscaras, placeholders e helper texts em formulários

As máscaras são exemplos, e os placeholders são explicações. Ambos orientam os(as) usuários(as) sobre como preencher um campo de um formulário. Por mais óbvio que o preenchimento de uma lacuna de formulário pareça, pode gerar dúvidas em pessoas menos experientes em navegação na web, por isso, pelo sim e pelo não, vale utilizar um desses dois recursos (ou os dois).

Em casos de instruções mais complexas é possível usar ainda um helper text (texto de apoio), breve explicação que aparece logo abaixo do campo de um formulário e que complementa a máscara e o placeholder. O helper text esclarece, por exemplo, como e onde o usuário(a) pode encontrar uma informação solicitada. Veja o exemplo:

Em um campo para preenchimento de CEP

Máscara: 00000–000

Placeholder: Digite o número do seu CEP

Helper text: O CEP possui oito algarismos. Caso não saiba o seu CEP, você pode consultá-lo no site dos Correios

Mas por que investir em acessibilidade?

Antes de tudo porque, como salientou o UX Design Marcelo Sales em palestra recente sobre acessibilidade, “Todas as pessoas merecem ter experiências impecáveis, independente de suas habilidades ou deficiências”.

Na sequência, porque sites e produtos acessíveis e, portanto, usáveis por mais pessoas, dão retorno financeiro às instituições que os produzem, além de permitirem conformidade com a legislação vigente no país.

Como sites e produtos realmente acessíveis não são corriqueiros (ainda), empresas que se preocupam com acessibilidade também tendem a fidelizar o público que necessita de tecnologias alternativas para usar sites e produtos.

Uma boa imagem junto ao mercado é outro benefício garantido. Entretanto, entre todos os ganhos possíveis para as empresas que investem em acessibilidade, o principal é retorno social.

As pessoas cobram das empresas atuação cada vez mais inclusiva. Logo, a preocupação em construir produtos acessíveis vem se configurando como uma grande jogada de marketing, com promissores retornos financeiros oriundos dessa boa prática.

Se as companhias perceberem essa questão como uma responsabilidade, que vai além do altruísmo e do apelo de um mercado consumidor, em breve teremos cada vez mais pessoas com suas necessidades satisfeitas. Que assim seja!