Como tornar um conteúdo acessível

Ludmila Rocha
Aug 10, 2018 · 7 min read
Image for post
Image for post

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 produtos, e principalmente, o que eu venho fazendo para ajudar a garantir uma 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 saber que boa parte dessas pessoas fica sem acesso a serviços básicos porque não nos preocupamos com acessibilidade ao confeccionarmos 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 um pouco saber que, mesmo as empresas geralmente despriorizando recursos para tornarem seus produtos e projetos acessíveis, se a linguagem de programação estiver bem aplicada, 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 melhorar as experiências de 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 em ambiente online: conteúdo perceptível (aos olhos, ouvidos e tato); operável (por mouse, teclado e voz); compreensível (sem ambiguidades) e robusto (que funcione em qualquer lugar — responsivo).

O “perceptível aos olhos” diz respeito a conteúdos com fonte legível (acima de 16 px), com bom contraste em relação a cor do fundo. Além da disponibilização de legendas em vídeos, com velocidade que permita a leitura.

Já o “perceptível aos ouvidos” refere-se 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.

Por fim, o “perceptível ao tato” é referente a possibilidade de 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 usuários 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

Esta recomendação do WCAG merece um capítulo à parte porque não é exclusiva das pessoas com deficiências físicas ou mentais.

Ela aborda uma deficiência intelectual grave, que afeta boa parte da população mundial: as más leitura e interpretação de texto.

Segundo o guia, os textos 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 deve ser reescrito ou necessitará de texto explicativo complementar.

Essa regra se aplica a todos os tipos de texto de um produto, como mensagens instrucionais, de erro e de sucesso; orientações para o preenchimento de formulários e, especialmente, cabeçalhos.

Isso porque a maioria das pessoas normalmente começam a ler as páginas pelos cabeçalhos, daí a importância desses enunciados serem claros e, também, de possibilitarem aumento da fonte em níveis.

Boas práticas para percebermos a qualidade de um conteúdo são lê-lo em voz alta e pedir a um colega fazer uma conferência.

Outra opção é utilizarmos um leitor de telas para verificarmos se o texto, e as conexões entre suas partes, ainda fazem sentido usando esse aparelho.

Depois disso, algumas perguntinhas também nos ajudam a perceber se o conteúdo está claro:

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 indexá-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.

A questão aqui não é repetição de palavras e, sim, quantidade de palavras que tenham a ver com o conteúdo.

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

Outro ponto importante é verificar 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 a leitura.

Evitar o “clique aqui” descontextualizado

É 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, explicando antes que verá ao clicar. Depois, o recomendável é transformar toda essa informação, não somente o “Clique aqui”, em um link. Assim: “Confira fotos do evento aqui”. Ou: “Confira fotos do evento clicando aqui”. Ou ainda: “Para conferir fotos do evento, clique aqui”.

Isso porque quando leitores de tela realizam a leitura da página o “Clique aqui” descontextualizado pode gerar dúvidas no usuário sobre o que é aquele “aqui” e para onde ele será direcionado ao clicar nele.

Priorizar legendas sem símbolos ou abreviações

Depois da palestra sobre a qual comentei no início deste texto, e durante a confecção do Guia de Redação da Conta Azul, percebi que algumas práticas de escrita de legendas, muito comuns em textos jornalísticos, são totalmente inacessíveis.

O símbolo “maior que” (>), por exemplo, muito utilizado para orientar o sentido de leitura de uma legenda, pode ser interpretado literalmente por leitores de tela, o que poderia confundir cegos e pessoas de baixa visão.

Além disso, a abreviação de palavras como “esquerda” e “direita”, também usadas para orientar quanto ao sentido adequado de leitura, não costuma funcionar bem.

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

O ideal é priorizar palavras inteiras 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)”, bem comuns.

Utilizar texto alternativo ou alt text

Os textos alternativos (alt texts), diferente das legendas, devem ser exclusivamente descritivos, literais. Eles têm a função de explicar 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. Para completar, no alt text, 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 planta do lado esquerdo, e um quadro ao fundo”

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

As máscaras são formatos pré-estabelecidos para o preenchimento de um campo. E os placeholders/helpers são, respectivamente, exemplos e explicações.

Por mais óbvio que o preenchimento de um campo de formulário pareça, pode gerar dúvidas em usuários menos experientes em navegação na web. Por isso, pelo sim e pelo não, vale utilizar esses recursos.

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, consulte no site dos Correios

Mas por que investir em acessibilidade?

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

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

Como 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 alternativas.

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ções cada vez mais inclusivas. Logo, a preocupação em construir produtos acessíveis também vem configurando como uma grande jogada de Marketing.

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!

Conta Azul Design

Conectando donos de negócio e contadores por meio do…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store