Guia de Acessibilidade UX Writing (1)

Prévia do material em texto

Guia de 
Acessibilidade 
UX Writing
Autoria: Carolyna Paiva
Mentoria: Mariana Medina
https://www.linkedin.com/in/carolyna-paiva/
https://www.linkedin.com/in/marixgm/
O que você vai encontrar aqui?
Este é um documento para você aprender mais sobre 
acessibilidade com foco na escrita para web e 
consultar sempre que tiver alguma dúvida. Aqui você 
vai encontrar dicas e reflexões sobre o tema que vão 
te ajudar a criar um conteúdo mais representativo, 
inclusivo, simples, compreensível e escaneável.
Para quem é este guia?
Este guia procura ajudar, principalmente, profissionais 
que trabalham com a criação de textos para sites e 
aplicativos (conhecidos como UX Writers ou Content
Designers) e que se preocupam em criar um conteúdo 
mais acessível para todas as pessoas. Mas convidamos 
quem quiser a se inspirar nas reflexões apresentadas! 
Olá!
Sumário
1. O que é acessibilidade?
2. Acessibilidade na web
3. O Brasil pensa em acessibilidade? 
4. Por que criar um site acessível? 
5. Seu conteúdo conversa com quem vive no Brasil? 
6. Afinal, acessível para quem? 
• Pessoas com limitações permanentes ou temporárias
• Pessoas com alguma limitação situacional 
• Pessoas com alguma limitação de leitura 
• Pessoas com baixa representatividade 
• Pessoas com baixa familiaridade digital 
7. Como tornar o site acessível? 
8. Acessibilidade em UX Writing
• Linguagem clara e compreensível 
• Linguagem simples e direta 
• Linguagem inclusiva 
• Linguagem representativa 
• Linguagem perceptível e escaneável
O que é 
acessibilidade?
Muitas vezes, associamos acessibilidade 
apenas a pessoas com deficiência. No entanto, 
esse é um processo muito mais amplo. 
A acessibilidade é, na verdade, a possibilidade 
de qualquer pessoa, com ou sem deficiência, 
acessar um lugar, serviço, produto ou 
informação de maneira simples e autônoma. 
Sem nenhum tipo de barreira.
E acessibilidade
na web?
Acessibilidade na web significa permitir que 
qualquer pessoa possa usar a internet sem grande 
dificuldade.
É preciso que o conteúdo, design e até 
desenvolvimento do site sejam feitos para que 
qualquer indivíduo possa perceber, entender, 
navegar e interagir. 
Estamos falando da criação de um produto que 
permita a todos em igualdade de oportunidades, 
segurança e autonomia a possibilidade de acessar 
qualquer site ou aplicativo online. 
Mas por que criar um 
site acessível?
Acessibilidade web é uma requisição legal. 
De acordo com a Lei brasileira de inclusão (LBI), é 
obrigatória a acessibilidade nos sites de empresas 
com sede ou representação comercial no Brasil ou 
por órgãos de governo.
Um site acessível terá menos rejeição e melhores 
resultados, porque não exclui ninguém.
Ser acessível também é contribuir para uma 
sociedade mais inclusiva.
Além disso, considerando que o Google é um 
“usuário cego”, se um site não estiver nem um pouco 
acessível, quais as chances do Google considerá-lo 
um bom site e rankeá-lo melhor?
O Brasil pensa em 
acessibilidade?
Menos de 1% dos sites brasileiros são 
considerados acessíveis, segundo a pesquisa 
feita pela BigDataCorp, realizada em parceria com 
o Movimento Web para Todos, em 2021. 
Os sites não são construídos com foco em 
acessibilidade, porque, em geral, as empresas não 
pensam sobre esse tema ou acham que é muito 
mais difícil, caro e demorado. Mas veremos que 
isso não é verdade e que o retorno pode ser muito 
maior quando se pensa em acessibilidade.
Seu conteúdo conversa 
com quem vive no Brasil?
Em geral, associamos acessibilidade apenas a pessoas 
com deficiência. Mas o termo vai muito além. Neste 
guia, vamos pensar em conteúdos voltados a atender 
vários segmentos distintos:
• Pessoas com deficiências permanentes ou 
temporárias
• Pessoas com alguma limitação situacional
• Pessoas com alguma limitação de leitura
• Pessoas com baixa representatividade
• Pessoas com baixa familiaridade digital
Para você entender melhor, vamos explorar um 
pouco cada um desses públicos.
51,8%
são mulheres.
+45 milhões
têm alguma deficiência.
+11 milhões
são analfabetos funcionais.
3 milhões
são não-binários.
+32 milhões
têm mais de 60 anos.
+1 milhão
são estrangeiros.
Afinal, acessível 
para quem?
Pessoas com limitações permanentes ou temporárias
Audição limitada
Perda total ou parcial da 
audição.
Cerca de 80% dos surdos 
do mundo são 
analfabetos nas línguas 
escritas e precisam de 
tradutores em Libras. 
Quando alfabetizados, 
demandam legendas ou 
transcrições de áudio.
Fala limitada
Pessoas mudas ou em 
tratamento para voltar a 
falar. 
Em geral, usam a 
linguagem de Libras para 
se comunicar. Exigem 
formas de contato 
alternativas, como chat 
ou e-mail, em vez de 
telefone.
Visão limitada
Cegueira, baixa 
visão, daltonismo, 
outras patologias 
oculares. 
Usam softwares de 
leitores de tela, 
teclado, recursos de 
alto contraste e 
lentes de aumento.
Funções motoras 
limitadas
Paralisia cerebral, 
distrofia muscular, 
esclerose múltipla, 
Parkinson, artrite, 
tetraplegia.
Têm dificuldade com 
uso touchpad, touch
screen, teclado e 
mouse tradicionais.
Pessoas com alguma limitação situacional
Limitações técnicas
Pessoas com conexão 
de internet ou pacote de 
dados limitados e/ou 
computadores antigos. 
Têm dificuldade em 
carregar imagens e 
vídeos. Guiam-se por 
informações textuais.
Limitações de idioma
Pessoas estrangeiras que 
vivem no Brasil podem não 
falar o português 
fluentemente.
Demandam o uso correto 
da grafia e clareza, tanto 
para entenderem quanto 
para traduzirem o texto em 
um programa de tradução. 
Limitação motora situacional 
Pessoas com mão ou braço ocupados, 
como mães com bebê, entregadores, 
passeadores de cachorro; e pessoas 
com fraturas temporárias, como braço 
ou mão quebrados. 
Apresentam dificuldade com 
comandos que usem as duas mãos e 
realizam comandos com mais lentidão.
Pessoas com alguma limitação de leitura
Analfabetismo funcional
Pessoas que não conseguem ler 
palavras, frases e/ou números 
ou que têm dificuldade para 
entender discursos figurativos.
Costumam ter dificuldade de 
compreender e relacionar 
dados diversos, em seguir 
ordens longas e de preencher 
grandes blocos de textos.
Crianças e adolescentes
Cerca de 90% da população 
de 9 a 17 anos é usuária de 
internet no Brasil, o que 
equivale a 24,3 milhões de 
crianças e adolescentes.
Quanto à navegação, 
apresentam redução da 
capacidade de atenção e 
dificuldade com textos muito 
longos e rebuscados.
Limitações cognitivas ou 
neuronais
Dislexia, autismo, déficit de 
atenção, afasia e Síndrome 
de Down.
Costumam ter dificuldade 
em seguir ordens longas e de 
preencher e ler grandes 
blocos de textos. 
Apresentam capacidade de 
atenção reduzida. 
Pessoas com baixa representatividade
Mulheres
Normalmente os textos 
aparecem flexionados 
apenas no masculino, 
mesmo quando não se 
trata de generalizações –
uso das flexões no plural. 
Gênero não binário
Identidades de gênero que não 
são masculinas ou femininas, 
estando fora do binário de gênero 
e da cisnormatividade, costumam 
não ser contempladas em 
cadastros e formulários.
Transgênero
Pessoas que não se identificam 
com o gênero biológico muitas 
vezes são obrigadas a usar o 
nome de registro em cadastros e 
formulários, por não haver a 
opção de inserir o nome social.
Pessoas com baixa familiaridade digital
Idosos
Pessoas acima de 60 anos estão cada vez mais 
conectadas. Cerca de 97% dos idosos acessam a 
internet, sobretudo para ler notícias e usar redes 
sociais (Facebook e WhatsApp)*.
No entanto, enfrentam limitações para entender 
memes e gírias. Muitas ainda têm falta de 
familiaridade com uso de teclados e novas 
tecnologias web, apresentam dificuldade para 
distinguir informações verídicas de fake news. 
Quanto à navegação, têm problemas com 
leituras em letras pequenas. 
Analfabetos digitais
São pessoas que não têm 
familiaridade com as 
tecnologias digitais.
Têm dificuldade com entender 
o fluxo de navegação de sites e 
aplicativos, além de limitaçõescom com planilhas e editor de 
texto. Também apresentam 
falta de familiaridade ao 
digitar em teclados e ler 
conteúdos em telas.
*Fonte: https://www.cnnbrasil.com.br/tecnologia/levantamento-indica-que-97-dos-idosos-brasileiros-acessam-a-internet/
Como tornar o site 
acessível?
De forma resumida, a acessibilidade digital pode 
ser trabalhada das seguintes formas:
UX: determina a distribuição dos elementos em 
tela, testa e entende comportamentos.
UI: pensa na composição visual, como atenção ao 
tamanho de fontes, contraste de cores e 
adaptação aos vários tamanhos de tela. 
UX Writing: pensa a criação e apresentação de 
conteúdos compreensíveis para todas as pessoas.
Desenvolvedores: garante que o código esteja 
adequado às boas práticas de acessibilidade, por 
exemplo por meio de atributos alt e aria e 
navegação por teclado.
Acessibilidade 
em UX Writing
Como o foco deste documento é acessibilidade 
para escrita, vamos trazer reflexões e exemplos 
com base em 5 princípios de linguagem:
Clara e compreensível 
Representativa
Perceptível e escaneável
Simples e diretaInclusiva
Conteúdo fácil de entender, 
independentemente da familiaridade da 
pessoa, de seus conhecimentos, aptidões 
linguísticas ou nível de concentração.
Linguagem clara e compreensível 
Cuidado com uso 
de emojis
Os emojis servem para transmitir 
emoções, mas não devem substituir 
palavras, porque sua interpretação é 
subjetiva. 
Eles podem ser usados para 
complementar o texto, mas sempre 
com o conteúdo textual primeiro, 
assim fica claro o que se quer dizer.
E se for usar emojis, priorize os mais 
comuns, aqueles que as pessoas 
estão mais acostumadas, aumentado 
mais a chance de compreensão. 
Será que todas as pessoas entendem o sentido desses 
emojis? Eles podem gerar alguma dúvida? Essa 
repetição favorece ou prejudica?
Já neste exemplo, 
primeiramente, o 
texto passou a 
mensagem positiva 
que foi 
complementada pelo 
emoji sorrindo.
❌
✅
Identifique claramente 
o destino de cada link
As pessoas precisam saber exatamente 
para onde vão ao clicar em um link. 
Links também são formas que o leitor usa 
para procurar rapidamente uma 
informação no site. Por isso, devem conter 
com clareza a informação da ação. 
Links com apenas “clique aqui” deixam 
vago para onde a pessoa será direcionada. 
O link deveria expressar com clareza para onde a pessoa irá.
Ex: Clique aqui para acessar as Condições Gerais de Campanha
Neste caso, a pessoa sabe que será direcionada 
para o site ao clicar no link.
❌
✅
Muitas vezes, o uso do termo “clique aqui” é 
desnecessário, pois a pessoa consegue identificar a 
marcação como link. No entanto, alguns leitores de tela 
não identificam o texto corrido como link e a informação 
pode passar despercebida para pessoas cegas.
❌
Nomeie botões ou 
caixas de seleção de 
forma não genérica
Assim como com links, as pessoas precisam 
saber exatamente para onde vão ao clicar em 
um botão. 
As ações devem expressar resultados sem 
ambiguidade. Por isso, não é recomendado 
botões apenas com “acesse” "conheça", ”saiba 
mais" e "tenho interesse”. Todos deixam vago 
para onde a pessoa será direcionada.
Dicas: padronize o tempo verbal para manter a 
consistência do conteúdo e evite usar mais de 4 
palavras, sendo recomendado até 3.
O botão não deixa claro o destino da página. 
Um bom exemplo seria: “conheça o curso”.
Em ambos os casos, o botão expressa claramente a ação e ajuda a 
pessoa a encontrar a informação que procura.
❌
✅
✅
Cuidado com uso 
de @, X ou E
O uso e @, X ou E para substituir “o” e “a” 
nas palavras com gênero masculino e 
feminino se tornaram importantes num 
debate de representatividade. 
No entanto, é uma mudança inclusiva para 
todos? Pessoas não familiarizadas com 
web, que não dominam o idioma ou com 
limitações cognitivas e neuronais 
entendem o que está escrito?
Além disso, por ser impronunciável, o X e o 
@ não são inclusivos para aqueles que 
usam leitores de tela, que ouvem 
“meninquis” e “menin arroba s”.
Se seu objetivo for alcançar uma parcela mais ampla, pode ser que 
esteja dificultando a compreensão. Nossa recomendação é usar a 
flexão no masculino e feminino. 
Infelizmente, nesse caso, pessoas não-binárias não se identificarão. 
Por isso, se uma pesquisa mostrar que esse tipo de 
representatividade é importante, vale a pena explorar o uso do “e”.
❌
❌
❌
Senhas e 
formulários com 
informações claras
Deixe o mais compreensível possível 
cada etapa de preenchimento de 
formulários ou criação de senhas. 
Deixe claro quais 
requisitos são 
obrigatórios. 
Mostre a evolução e o que 
ainda está pendente para 
a pessoa entender o que 
precisa ajustar.
Em caso de não preenchimento, as 
mensagens de erro devem ser 
apresentadas junto ao campo.
Explique ao máximo como preencher os 
campos e o que eles são. Adicionar comandos 
dentro das caixas de preenchimento pode 
ajudar a entender o comando.
Para ajudar a inserção de texto rapidamente, 
evite uso obrigatório de pontuação onde não é 
necessário.
✅
✅
✅
✅
Explique siglas e 
abreviações
Escreva o significado de siglas e 
abreviações nas primeiras vezes que 
elas aparecerem.
Garanta que elas tenham o mesmo 
significado todas as vezes que se 
repetirem no seu texto. 
Dica: é válido explicar a sigla em 
todas as páginas de um mesmo site. 
Pode ser que a pessoa venha de uma 
busca direta do Google para uma 
página interna e não a compreenda 
se estiver apenas na home. 
❌
Neste caso, a sigla aparece no título sem o 
referente. Abaixo, consta o significado. 
Explique as 
mensagens de erro
Quando uma mensagem de erro for 
exibida, ela deve identificar 
claramente qual é o elemento que 
gerou o erro de forma visual e audível.
Diga o que aconteceu sem jargões e 
termos técnicos. Por fim, guie a pessoa 
para que ela saiba como consertar ou 
prosseguir. 
Se o erro for 404, não adianta apenas apresentar em destaque o termo técnico. É preciso garantir 
que a página ofereça uma experiência positiva, explicando sem dificuldade o que significa o erro e 
fazendo com que ele permaneça no seu site. No corpo de texto, vale a pena citar o código do erro, 
se houver, para casos em que as pessoas queiram entrar em contato com o suporte. Dessa forma, 
fica mais fácil explicar qual o problema.
A página explica o que houve e sugere ações para que ele possa consertar sua busca. 
Ainda, fornece um contato para o caso de a pessoa não encontrar o que procura.
❌
✅
✅
A informação necessária deve ser passada de 
forma fácil e sem desvios. Apenas um conceito por 
vez e somente informações essenciais, gerando o 
mínimo de esforço cognitivo.
Linguagem simples e direta
Use uma linguagem 
conversacional
Quanto mais gente for capaz de 
entender o seu texto, melhor. Por isso, 
priorize uma linguagem informal e 
popular, escrita de forma que uma 
criança na sexta série poderia 
compreender. Mas atenção, isso não 
quer dizer usar gírias ou abreviações.
Dica: pense em como um humano 
falaria e evite uma linguagem 
robotizada. 
Aqui tem uma calculadora de 
leiturabilidade que pode ajudar você a 
avaliar seu texto.
O Nubank e a 
Magazine Luiza 
mostram um jeito 
de conversar leve, 
humanizado e 
com clareza. 
O VTRADE usa termos em inglês e 
muito específicos, o que pode 
acabar afastando pessoas não tão 
familiarizadas com o assunto. 
Mesmo sendo uma empresa do 
setor financeiro, ela poderia deixar 
o conteúdo mais acessível para 
pessoas que querem começar a 
investir, mas têm dúvidas ou medos.
❌
✅ ✅
https://docs.google.com/spreadsheets/d/1_jvitjNxyqew8DFvIDB3O3tmG_2KzLJ3ff6qqPmtl2c/edit
Priorize voz ativa 
e ordem direta 
Textos escritos na ordem direta 
(sujeito, verbo, predicado e 
complementos) são mais facilmente 
entendidos, porque se assemelham 
mais à língua falada. 
Sempre que possível, evite a voz 
passiva e use verbos de ação direta.
Dica: escreva no tempo presente, para 
trazer a sensação de que a pessoa está 
vivenciando a ação em tempo real. 
Ambos ostextos são claros e entendíveis, e destacam-se por usar 
uma linguagem conversacional e com verbos de ação direta.
✅
✅
Use palavras 
curtas, simples e 
familiares
Evitar memes, gírias, regionalismo 
e falas de filme. A não ser que o 
seu público seja muito específico, 
o ideal é criar conteúdos que 
todas as pessoas entendam. 
Priorize palavras conhecidas, sem 
jargões, termos técnicos ou 
estrangeirismos.
Será que todos têm familiaridade com o termo 
OFF e com a expressão “Taca-le pau”? Por 
acreditar que não, é recomendado evitar 
palavras estrangeiras e memes.
Neste caso, poderia substituir o OFF por “de 
desconto”, o que não prejudicaria o sentido e 
ainda transmitiria uma sensação de benefício.
Alguns termos do Enjoei podem 
gerar dúvidas, como “enjubank” e 
“yeyezados”. Você consegue 
identificar para onde essa abas 
direcionam? Mesmo se tratando de 
uma empresa para público jovem, 
essas nomenclaturas divertidas 
podem mais confundir que ajudar.
❌❌
Evite parágrafos 
grandes e blocos de 
texto muito próximos
Todo texto da página deve ter alguma 
utilidade e passar a mensagem de forma 
mais rápida e clara possível.
Seja direto ao resolver o problema e 
comunique apenas o essencial para que as 
pessoas possam se concentrar no que 
precisam fazer.
Prefira frases curtas. A disposição desses 
conteúdos também é essencial para a 
legibilidade. 
Esses são dois exemplos do mesmo produto. A leitura fica mais difícil no 
primeiro exemplo, enquanto a informação no segundo está mais sucinta e 
clara. É importante que seja possível ter acesso a mais informações, caso 
seja necessário, mas isso não precisa estar explícito para todas as pessoas, 
deixando o conteúdo muito técnico e dificultando a navegação. 
Nesse exemplo, a quantidade de texto e os blocos muitos próximos 
prejudicam a leitura. Recomendamos o máximo de 4 linhas num mesmo 
parágrafo e colunas não muito próximas ou que não ocupem a página inteira.
❌
❌
✅
Evite excesso de 
pontuação
Defina um padrão para a pontuação do 
seu site. Ex: há pontuação nos títulos e 
subtítulos ou apenas no corpo de texto? 
É adequado o uso de exclamações? 
E mais importante: não use a mesma 
pontuação 2 vezes. Além de ser pior 
para leitores de tela, podem transmitir a 
ideia errada para as pessoas. 
Compare o uso de pontuações de um exemplo e outro. No 
primeiro caso, o uso exagerado de exclamações pode passar a 
ideias incertas e ambíguas, como ansiedade, desespero, grito. 
Enquanto no segundo, a mensagem é transmitida com clareza.
❌ ✅
Evite números 
por extenso
Você já deve ter ouvido que todo 
número abaixo de dez deve ser 
escrito por extenso. Mas essa regra 
não se aplica quando pensamos em 
experiência web. 
Isso porque números em algarismo 
são lidos mais facilmente. 
Outra dica importante é usar as 
palavras mil, milhão, bilhão para 
evitar a repetição de zeros.
Esses são dois exemplos do mesmo site. Teste você como a leitura é mais fácil no segundo. 
❌ ✅
Comece pelo 
objetivo principal
Quando uma frase descreve um 
objetivo e a ação para alcançá-
lo, inicie por eles. Afinal, é isso 
que as pessoas precisam 
identificar logo de cara. 
Em ambos, os objetivos 
principais estão iniciando as 
orações, seguidos pela 
forma de como realizá-los. 
✅
✅
Leis e termos em 
linguagem acessível
A Lei Geral de Proteção de Dados 
(LGPD) trouxe a importância da 
privacidade dos dados, mas isso não 
significa que temos que falar difícil. 
Evite ao máximo termos jurídicos e 
seja transparente – o nível de 
compreensão deve ser para uma 
criança na sexta série.
Se usar formulários, deixe claro o que 
a pessoa vai receber e reflita que 
dados são realmente essenciais. 
Dica: incentive o cuidado e a leitura 
com frases como “tire um tempo para 
ler isso” ou “é importante você saber”.
Mais do que estar ciente 
ou permitir, as pessoas 
devem entender para 
que seus dados são 
coletados (entender 
mesmo) e ter a opção de 
não concordar ou 
concordar parcialmente. 
A Globo.com mostra com 
transparência e de forma fácil 
como coleta dados em seu site. 
Quando optar por 
pedir dados, em 
formulários, utilize 
sempre a caixa de 
aceite e deixe claro 
o que a pessoa 
receberá.
✅
✅
❌
✅
Conteúdo voltado para incluir 
pessoas com alguma limitação 
permanente ou temporária.
Linguagem inclusiva
Use os emojis
mais comuns
Os emojis são lidos pelos leitores de tela, por 
isso, priorize aqueles mais comuns, cujos 
nomes padrões expressam melhor a emoção.
Não repita emojis, porque os leitores leem o 
nome repetidamente.
Cuidado também ao selecionar cor de pele, 
porque o leitor lerá “pele clara” ou “pele 
escura. Por isso, priorize os emojis padrão, de 
cores amarelas.
Não use pontuações para criar emoctions
( :) >< *-* ) , porque o leitor vai ler exatamente 
a pontuação.
O uso de emojis, neste caso, seria lido assim:
Balão de fala círculo vermelho círculo laranja garfo e faca 
com prato ponto final já sabe o que é?
Isso faria sentido para uma pessoa cega?
Esta frase é lida: cadastre seu e-mail e receba um cupom de 
desconto especial dois pontos parênteses de fechamento.
Saiba como são lidos alguns emojis:
😀 rosto gargalhando 
😂 rosto chorando de rir
😊 rosto sorridente com olhos sorridentes e bochechas rosadas
😍 rosto com olhos em forma de coração
🤩 rosto gargalhando com olhos de estrela
😋 rosto sorridente lambendo os lábios
Para saber mais, adicione a extensão do leitor de tela Screen Reader 
no seu navegador do chrome
❌
❌
https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn
Crie maiores áreas de 
clique em botões e links
Botões maiores ajudaram pessoas que não têm 
precisão nos cliques a acessar conteúdos específicos. 
Insira links em uma frase e não apenas em uma 
palavra. Isso faz com que pessoas com deficiência 
motora tenham muito mais facilidade de clicar.
Lembre-se de criar botões e links que não pareçam 
apenas textos.
Evite expressões como "clique abaixo”, “continue 
após ouvir” ou “clique na cor”. Pessoas com alguma 
limitação auditiva ou visual podem ser prejudicadas.
Pessoas com dificuldades motoras terão maior probabilidade de 
conseguires clicar nesses conteúdos porque a área de clique é grande.
Neste caso, o 
único botão com 
área de clique 
fácil para pessoas 
com deficiência é 
o “assine já”. Além 
disso, os links 
“confira” nem 
parecem ser 
clicáveis. 
✅
❌
✅
✅
❌
❌
Quando usar texto 
alternativo em 
imagens e ícones
Qualquer conteúdo "não textual" 
relevante para compreensão da 
informação, deve trazer uma descrição 
alternativa em texto (alt text).
Descreva a imagem com precisão, mas 
de forma sucinta. A recomendação é não 
ultrapassar 125 caracteres.
Dica: não é necessário começar o texto 
alternativo com “foto de” ou “imagem 
de”. Ferramentas de leitura de tela irão 
identificá-la como uma imagem. 
Esta imagem do site da Vivo tem o seguinte alt text: 
"Imagem ilustrativa para Vivo pré no Brasil”.
Neste caso, a imagem não contém informações 
relevantes, por isso, o alt text pode ser 
dispensado, a não ser que seja acrescentada uma 
mensagem útil a ver com o produto. 
Neste caso os ícones são meramente ilustrativos. Não haverá ganho nenhum em descrevê-los, é 
apenas aumentar a quantidade de itens a ser lidos/ouvidos pela pessoa usuária de leitor de telas. 
Você descreve ícones ou imagens quando eles possuem uma chamada pra ação e neste caso a 
descrição é justamente a ação. Em casos específicos talvez seja importante descrever, pois serão 
relevantes ao entendimento do conteúdo.
Quando for criar o alt text, considere o contexto em que a imagem está aplicada.
As perguntas que precisamos nos fazer são: 
• Por que esta imagem existe neste contexto e é relevante? 
• Por qual motivo ela aparece? 
• O que eu desejo transmitir com esta imagem?
Diferentemente da imagem das Americanas, 
em que o texto na imagem deve estar em alt
para ser lido pelo leitor de tela por trazer 
uma informação extra relevante que não 
está em outrostextos. 
Forneça legendas, Libras 
e/ou transcrições para 
recursos multimídias
Cerca de 80% dos surdos do mundo não 
entendem as línguas escritas e se comunicam em 
Libras. Sendo assim, qualquer conteúdo deve 
possuir tradução para língua de sinais, seja áudio, 
vídeo ou texto.
Para vídeos e áudios, também forneça legendas, 
transcrições de sons ambientes e descrições de 
conteúdos visuais e de efeitos sonoros (ex: som de 
terror), se eles forem relevantes para o conteúdo.
A Magazine Luiza oferece 
suporte em Libras e com legenda.
O site do Jornal Nacional tem as 
matérias transcritas abaixo do vídeo 
principal. A CBN transcreve os 
destaques das matérias que também 
podem ser ouvidas na íntegra.
A Azul tem o site adaptado para 
Libras. Esse é o Hugo, um programa 
desenvolvido pela handtalk.me/br
✅
✅
✅
✅
Evite textos 
em imagens
Os textos em imagens não são 
lidos por leitores de tela (por 
isso, novamente a importância 
do alt text). 
Portanto, são aceitáveis apenas 
nos casos em que essas imagens 
sejam decorativas e não 
essenciais para compreensão 
do conteúdo.
<img alt="Até 60% off em eBooks - Especial Poesia" src="https://images-na.ssl-images-
amazon.com/images/G/32/kindle/email/Agosto_2021/Esp_Poesia/3000x1200._CB663357664_.jpg" 
height="600px" width="1500px" data-a-hires="https://images-na.ssl-images-
amazon.com/images/G/32/kindle/email/Agosto_2021/Esp_Poesia/3000x1200._CB663357664_.jpg">
<img ng-src="https://s.mlcdn.com.br/banner/campanhas/1807deskcartao30x.png" 
src="https://s.mlcdn.com.br/banner/campanhas/1807deskcartao30x.png">
<img src="https://tpc.googlesyndication.com/simgad/14566337535176009071" 
border="0" width="1152" height="280" alt="" class="img_ad">
Nestas 3 imagens do 
Méliuz, Magazine Luiza e 
Amazon respectivamente, 
apenas a da Amazon
apresenta alt text, o que 
significa que as primeiras 
duas imagens apenas serão 
lidas por leitores de tela 
como “link”. As pessoas 
perderão todas as 
informações de destaque.
Para descobrir qual o alt
text das imagens, basta 
clicar na imagem do site, 
com o botão direito, e 
selecionar inspecionar. 
✅
❌
❌
https://s.mlcdn.com.br/banner/campanhas/1807deskcartao30x.png
https://s.mlcdn.com.br/banner/campanhas/1807deskcartao30x.png
Forneça alternativas 
de contato em canais 
de atendimento
Além de humanizados, os canais de 
atendimento devem fornecer diversos 
meios de contato.
Telefone não é inclusivo a pessoas 
mudas, WhatsApp não abrange pessoas 
que não têm um celular e e-mail pode 
não atender a pessoas idosas.
Por isso, devemos oferecer várias 
formas de contato, como formulários, 
chat, telefone, WhatsApp, e-mail e o que 
mais você tiver.
A Magazine Luiza é um grande 
exemplo ao oferecer várias 
formas de contato que atendem 
diversos públicos e limitações. 
A drograria Pacheco é exemplo 
ruim, porque pessoas com 
limitações na fala não conseguirão 
entrar em contato.
✅ ❌
Evite comandos que 
funcionem apenas 
com ações do mouse
Quem usa leitores de tela navega através de 
teclado ou outras ações que saltam entre os 
elementos. Ainda, pessoas com algumas 
deficiências físicas também podem fazer 
muito uso de navegação via teclado.
Por isso, ações que sejam executadas 
exclusivamente por meio do mouse devem 
ser evitadas, como mouseover, seleção de 
conteúdos e arrastar e soltar.
Este é um site que as informações apenas aparecem quando clicam-se nos 
círculos. Este é um exemplo ruim para pessoas que usam teclado como 
forma de navegação.
O Miro apresenta uma funcionalidade de destravar telas apenas arrastando 
ou segurando o mouse por alguns segundos, o que também não é acessível 
para todas as pessoas. Garanta que outros recursos no código tornem essa 
ação acessível para mais pessoa, com o uso do teclado. 
❌
❌
Não use termos 
capacitistas ou racistas 
Expressões que gerem qualquer tipo de 
exclusão, ofensa ou sejam racistas não devem 
ser usadas, como “deficiência mental”, “que 
mancada”, “sem braço para isso”, “denegrir”, “a 
coisa tá preta” e “cor de pele / raça”. 
Alguns termos de botões e links, que aparecem 
com frequência, também devem ser evitados, 
porque não abrangem todas as pessoas, como 
“veja” (nem todos podem ver) ou “digite” (nem 
todos digitam), que podem ser trocados, 
respetivamente, por “conheça” e “preencha”. 
A biologia usa o termo “raça” como uma categoria de 
classificação dos seres. Para falar em raças biológicas é 
preciso haver uma diferença genética significativa entre 
grupos dentro de uma mesma espécie. Nos humanos não há 
variação genética que justifique o uso do conceito biológico 
de raça. Portanto, o termo é racista. 
Os termos “digite” e “veja” são excludentes, pois nem todas 
as pessoas podem digitar ou ver.
❌❌
❌
Para destacar, não use 
apenas negrito ou cor
Leitores de tela não leem alterações na 
formatação, como negritos ou destaques. Por 
isso, para enfatizar um texto, escreva 
expressões de ênfase, como “importante”, “vale 
lembrar que”, “fique de olho”.
Ainda, mudar cor a pode fazer com que pessoas 
com daltonismo não vejam a diferença.
Para saber como um daltônico enxergaria o seu 
site, insira a sua URL no site da Colorblind.
Visão de uma pessoa com tritanopia.
Visão de uma pessoa com acromatopsia. Visão de uma pessoa com Protanopia.
Visão de uma pessoa sem patologia ocular.
Aqui comparamos um mesmo site visto por pessoas com patologias 
oculares diferentes. Perceba que, ao usar a cor para destaque, nem 
todos têm a mesma experiência. 
Neste caso, a empresa ainda fala da “vida mais fácil e roxinha”, mas já 
identificamos que nem todos veem a cor roxa.
❌
https://www.toptal.com/designers/colorfilter
Conteúdo que pretende fazer com que todos 
se sintam representadas e representados, 
que gere o mesmo valor para todas as 
pessoas, sem priorizar ou privilegiar uns em 
detrimento de outros.
Linguagem representativa
Evite generalizações
no masculino
Ao escrever, normalmente, flexionam-se adjetivos 
e substantivos para o gênero masculino, mesmo 
em sites em que a pessoa já identificou seu gênero 
em cadastros, como nos exemplos abaixo. 
Confira algumas dicas para você ser mais inclusiva e inclusivo:
• Use feminino e masculino no lugar de apenas o masculino.
Ex: Estado civil: solteiro/solteira
• Não use o termo “homem” para se referir a homens e mulheres, 
como se fosse uma palavra universal.
Ex: Substitua por “ser humano” ou “humanidade”.
• Troque o sujeito por "pessoa” ou pelo nome da instituição.
Ex: Os usuários devem enviar x As pessoas devem enviar
Os senadores votaram a pauta x O Senado votou a pauta
• Evite o uso de pronomes masculino (‘eles’, ‘aqueles’) para se 
referir a pessoas não identificadas ou desconhecidas. Use os 
termos “quem” ou “alguém”.
Ex: Vou enviar para eles resolverem x Vou enviar para resolverem
Bom para aqueles que precisam x Bom para quem precisa
Se o cidadão pede informações x Se alguém pede informações
• Use mais o termo "você”.
Ex: O cliente determina a entrega x Você determina a entrega
• Tire o artigo quando o termo for comum aos 2 gêneros.
Ex: Os médicos atendem hoje x Médicos atendem hoje
Pensando que mais da metade da população que 
vive no Brasil é mulher, excluímos um grande 
público. Usando uma linguagem mais ampla, é 
possível gerar mais identificação e respeito.
❌
❌
❌
Crie uma linguagem 
neutra e inclusiva
Transgêneros e não-binários representam 
quase 2% da população brasileira. Por isso, 
torna-se cada vez mais importante 
incorporar escritas neutras. 
Além de evitar generalizações no masculino, 
a linguagem neutra visa incluir pessoas que 
não se identificam com gêneros binários 
(feminino e masculino).
Um dos casos mais frequentes, que precisam 
mudar rapidamente, são a obrigatoriedade 
do nome de registro e a ausência da opção 
não-binária em cadastros e formulários. 
Essas tratativas são 
realmente necessárias para 
o cadastro? Como ficam as 
pessoas não-binárias?
Este é um bom exemplo que 
apresenta opções não-
binárias e ainda oferece a 
possibilidadede não informar.
Prefira o uso do termo “gênero”, 
por se tratar de uma distinção 
sociológica, a “sexo”que é uma 
categoria biológica. Neste caso, 
também faltaram opções para 
pessoas não-binárias.
Apesar de permitir o uso do 
nome social, este cadastro não é 
inclusivo ao exigir nome e 
sobrenome de registro. 
Também usa o termo “sexo” 
(não preferível), embora ofereça 
opção não-binárias. 
✅
❌
❌
❌
✅
✅
❌
Relacionada à facilidade de encontrar informações. 
Refere-se à forma como a plataforma é percebida, 
oferecendo a melhor experiência ao acessar um 
site e minimizando erros.
Linguagem perceptível e escaneável
Crie um site fácil 
de encontrar 
informações
Cada vez mais, as pessoas têm feito várias 
tarefas simultâneas, para gastar o menor 
tempo possível em alguma atividade.
Por isso, em um site, elas precisam filtrar 
e escanear as informações facilmente. Se 
não, vão para outra página.
Garanta que pessoas que acessam pela 
primeira vez ou de forma recorrente 
entendem o seu site de forma rápida e 
encontrem o que procuram. 
Confira algumas dicas:
• Divida o conteúdo em blocos quando for muito extenso.
• Quando houver uma lista ou muitas características de um mesmo tema, use 
ícones, marcadores ou numerações.
• Escreva parágrafos curtos. Pule uma linha em caso de grandes blocos de texto.
• Prefira textos alinhados à esquerda. O texto justificado é mais difícil de ler 
devido aos espaços disformes entre as palavras.
• Mantenha textos mais importantes em fontes maiores ou encontre outras 
formas de destacá-los, como negrito e itálico.
Perceba como reagrupar as informações em blocos menores e caracterizá-los com 
ícones, além de deixar o conteúdo mais claro, pode ajudar as pessoas a entenderem e 
encontrarem mais facilmente as informações no seu site. 
ANTES DEPOIS❌ ✅
Use breadcrumbs
Breadcrumbs é uma sequência de 
textos que indicam a página em 
que a pessoa está e mostra o 
caminho que foi percorrido até 
chegar nela.
Geralmente, os breadcrumbs
aparecem na parte superior do site, 
à esquerda. 
Eles são essenciais para que as 
pessoas entendam o fluxo do site e 
se localizar melhor na navegação. 
Dois exemplos de breadcrumbs:
✅
✅
A ajuda precisa 
ser facilmente 
localizável 
As pessoas precisam identificar 
rapidamente onde consegue 
obter ajuda, como canais de 
atendimento e área de dúvidas 
frequentes. 
Neste aplicativo, a AJUDA aparece dentro da 
categoria PROGRAMA VIVA SAÚDE, o que dificulta 
que a pessoa rapidamente identifique ao escanear a 
tela, já que teoricamente não há relação entre suporte 
e o programa. Ainda, é preciso percorrer mais 2 telas 
para obter uma forma de contato.
O Méliuz apresenta no menu superior do site, em destaque, um campo de ajuda que direciona 
para os principais temas de dúvidas. No entanto, ao navegar, é difícil encontrar uma área para 
entrar em contato com um humano.
A AJUDA é o primeiro tópico dentro 
de perfil no Nubank. Ao clicar, a 
pessoa pode se orientar por tópicos 
ou rapidamente obter ajuda de um 
humano ao acessar o botão 
“Converse com a gente”.
✅
❌
✅
Use tooltips
Tooltip é uma informação que aparece 
quando passa-se o mouse em cima de 
um elemento da tela, como ícones, logos 
e imagens.
Às vezes ele aparece em um ícone de 
informação, representado por um 
círculo com a letra “ï” dentro (como no 
exemplo ao lado).
Os tooltops são importantes para ajudar 
as pessoas a entenderem uma 
informação que talvez não esteja 
suficientemente clara apenas com o 
conteúdo apresentado visualmente.
O Booking é um excelente exemplo. Quando a pessoa passa o mouse sobre 
o ícone, aparece a explicação do que é aquele conteúdo.
✅
✅
Ao passar o mouse sobre o símbolo de informação, abre-se uma caixa com uma 
explicação sobre o termo em negrito (Indústria 4.0).
Introduza 
informações com 
o onboarding
O onboarding é uma espécie de 
navegação guiada, com objetivo de 
aumentar as chances de uma pessoas 
navegar com sucesso na sua página. 
Geralmente, essas telas aparecem na 
primeira vez que uma pessoa acessa 
seu site, mas também pode ser 
configurado para quando novos 
recursos são criados.
O Slack é uma 
excelente referência 
para entender e se 
inspirar ao criar um 
onboarding.
Ele cria passos a 
passos que deixam 
bem mais claro como 
funciona o programa. 
✅
Pense na hierarquia 
de conteúdo
Os tamanhos dos textos e a ordem em que 
aparecem devem ser estruturados para que a 
pessoa consiga rapidamente entender a 
página e encontrar as informações principais. 
Manter um padrão entre os tamanhos de 
títulos, subtítulos e corpo do texto também é 
essencial para criar um padrão visual. 
É importante que os títulos principais 
descrevam a finalidade de cada página.
Evite conteúdos muito longos. Páginas curtas 
são mais fáceis de serem escaneadas e 
subtítulos também podem ajudar nesse 
processo, trazendo informações de apoio.
O Google é um excelente exemplo para 
entender a importância de escanear
rapidamente informações. Ele usa 
tamanhos e cores para ajudar as pessoas a 
encontrarem facilmente o que procuram.
Com essa página, percebe-se como manter um 
padrão entre tamanhos, cores, estrutura e 
quantidade de texto, por blocos, é importante 
para ter uma leitura mais linear e encontrar 
com facilidade as informações essenciais. 
✅
❌
Identifique 
tabelas, gráficos 
e infográficos
Nomeie os cabeçalhos de linhas e 
colunas de tabelas de dados, gráficos 
ou infográficos. Use legendas para 
complementar as informações.
Não parta do pressuposto de que 
todas as pessoas entenderão apenas 
pelo conteúdo.
Neste caso, a pessoa não tem uma explicação sobre o que é cada coluna. 
Algumas colunas são mais fáceis de compreender, como o preço, no entanto, a 
que apresenta os dados de carbono não. 
✅
❌
A Amazon apresenta com clareza o referente de cada coluna e linha. 
Teste a acessibilidade do seu site
Faça você mesmo
Utilize leitores de tela, ative o modo 
acessibilidade do seu celular, leia seu site de 
longe (para ver o tamanho das letras) ou tente 
usar seu site apenas com a navegação em teclado. 
Perceba se o seu site atende todas as pessoas. 
Converse com outras pessoas
Você pode fazer pesquisa com pessoas que têm 
as limitações listadas neste guia (pessoas com 
deficiências, idosos, estrangeiros, etc) para ver se 
o seu conteúdo está claro. Escute a experiência 
delas e pergunte o que poderia ser melhor.
Carolyna Paiva
paivacarolyna@gmail.com
linkedin.com/in/carolyna-paiva
Tem dúvida 
ou sugestão?
Obrigada por chegar até aqui!
Referências
Acessibilidade e criação de conteúdo UX
Acessibilidade: lista de verificação para melhorar a acessibilidade do seu site
Cartilha de Acessibilidade na Web
Comece a estudar acessibilidade digital desde já
Como um site acessível gera oportunidades de negócio
Guia completo para tornar o seu website acessível
Guia sobre a LBI digital
Guia WCAG
Inclusão digital via acessibilidade web
Introdução ao UX Writing: Acessibilidade, diversidade e localização
Materiais gratuitos de acessibilidade da Hand Talk
Material Design - Writing
O UX Writing de Mãos Dadas com a Acessibilidade Digital
Readability
SEO e Acessibilidade web
UX Writing com empatia de gênero: 12 técnicas para evitar o sexismo em conteúdo digital (e na vida)
UX Writing: uma reflexão sobre linguagem inclusiva e diversidade
UX Writing: sobre textinhos, pessoas e acessibilidade
https://medium.com/ladies-that-ux-br/acessibilidade-e-produ%C3%A7%C3%A3o-de-conte%C3%BAdo-ux-913c4c55847c
https://support.wix.com/pt/article/acessibilidade-lista-de-verifica%C3%A7%C3%A3o-para-melhorar-a-acessibilidade-do-seu-site
https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html
https://brasil.uxdesign.cc/comece-a-estudar-acessibilidade-digital-desde-j%C3%A1-d0c43dccd2ee
https://docs.google.com/presentation/d/1dlYK8-nuZt3nG8Kb6vGfsDN5mk7ZMCEJ2IJuKjy7jrY/present?slide=id.g5c8a3b5a9f_0_0
https://acessibilidade.handtalk.me/kit-guia-completo-website-acessivel
https://www.maragabrilli.com.br/wp-content/uploads/2016/03/Guia-sobre-a-LBI-digital.pdfhttps://guia-wcag.com/
http://revista.ibict.br/liinc/article/view/3189/2851
https://www.domestika.org/pt/courses/798-introducao-ao-ux-writing/units/5995-escreva-para-a-experiencia-do-usuario/lessons/18952-acessibilidade-diversidade-e-localizacao
https://handtalk.me/br/materiais
https://material.io/design/communication/writing.html
https://medium.com/uxmpretas/o-ux-writing-de-m%C3%A3os-dadas-com-a-acessibilidade-digital-50ec1944a9cf
https://readable.com/readability/
https://globalad.com.br/blog/seo-e-acessibilidade-web
https://medium.com/@emilia.alegre/ux-writing-con-empat%C3%ADa-de-g%C3%A9nero-9c8409195aba
https://brasil.uxdesign.cc/ux-writing-uma-reflex%C3%A3o-sobre-linguagem-inclusiva-e-diversidade-c66a9eb47b54
https://www.youtube.com/watch?v=jrEBBWSZn1E&ab_channel=HowBootcamps