Guia de

Acessibilidade
UX Writing

Autoria: Carolyna Paiva

Mentoria: Mariana Medina
 Olá!
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!
 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
 E acessibilidade
O que é na web?
acessibilidade? Acessibilidade na web significa permitir que
qualquer pessoa possa usar a internet sem grande
Muitas vezes, associamos acessibilidade dificuldade.
apenas a pessoas com deficiência. No entanto,
esse é um processo muito mais amplo. É preciso que o conteúdo, design e até
desenvolvimento do site sejam feitos para que
A acessibilidade é, na verdade, a possibilidade qualquer indivíduo possa perceber, entender,
de qualquer pessoa, com ou sem deficiência, navegar e interagir.
acessar um lugar, serviço, produto ou
informação de maneira simples e autônoma. Estamos falando da criação de um produto que
Sem nenhum tipo de barreira. 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
O Brasil pensa em site acessível?
acessibilidade? 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
Menos de 1% dos sites brasileiros são por órgãos de governo.
considerados acessíveis, segundo a pesquisa
feita pela BigDataCorp, realizada em parceria com Um site acessível terá menos rejeição e melhores
o Movimento Web para Todos, em 2021. resultados, porque não exclui ninguém.

Os sites não são construídos com foco em Ser acessível também é contribuir para uma
acessibilidade, porque, em geral, as empresas não sociedade mais inclusiva.
pensam sobre esse tema ou acham que é muito
mais difícil, caro e demorado. Mas veremos que Além disso, considerando que o Google é um
isso não é verdade e que o retorno pode ser muito “usuário cego”, se um site não estiver nem um pouco
maior quando se pensa em acessibilidade. acessível, quais as chances do Google considerá-lo
um bom site e rankeá-lo melhor?
 Seu conteúdo conversa Afinal, acessível
com quem vive no Brasil?
para quem?
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
51,8% +32 milhões vários segmentos distintos:
são mulheres. têm mais de 60 anos.
• Pessoas com deficiências permanentes ou
temporárias

• Pessoas com alguma limitação situacional

+11 milhões 3 milhões
são analfabetos funcionais. são não-binários. • Pessoas com alguma limitação de leitura

• Pessoas com baixa representatividade

• Pessoas com baixa familiaridade digital

+45 milhões +1 milhão Para você entender melhor, vamos explorar um

têm alguma deficiência. são estrangeiros. pouco cada um desses públicos.
Pessoas com limitações permanentes ou temporárias

Funções motoras Visão limitada Fala limitada Audição limitada

limitadas Cegueira, baixa Pessoas mudas ou em Perda total ou parcial da
Paralisia cerebral, visão, daltonismo, tratamento para voltar a audição.
distrofia muscular, outras patologias falar.
esclerose múltipla, oculares. Cerca de 80% dos surdos
Parkinson, artrite, Em geral, usam a do mundo são
tetraplegia. Usam softwares de linguagem de Libras para analfabetos nas línguas
leitores de tela, se comunicar. Exigem escritas e precisam de
Têm dificuldade com teclado, recursos de formas de contato tradutores em Libras.
uso touchpad, touch alto contraste e alternativas, como chat Quando alfabetizados,
screen, teclado e lentes de aumento. ou e-mail, em vez de demandam legendas ou
mouse tradicionais. telefone. transcrições de áudio.
Pessoas com alguma limitação situacional

Limitações técnicas Limitações de idioma Limitação motora situacional

Pessoas com conexão Pessoas estrangeiras que Pessoas com mão ou braço ocupados,
de internet ou pacote de vivem no Brasil podem não como mães com bebê, entregadores,
dados limitados e/ou falar o português passeadores de cachorro; e pessoas
computadores antigos. fluentemente. com fraturas temporárias, como braço
ou mão quebrados.
Têm dificuldade em Demandam o uso correto
carregar imagens e da grafia e clareza, tanto Apresentam dificuldade com
vídeos. Guiam-se por para entenderem quanto comandos que usem as duas mãos e
informações textuais. para traduzirem o texto em realizam comandos com mais lentidão.
um programa de tradução.
Pessoas com alguma limitação de leitura

Analfabetismo funcional Crianças e adolescentes Limitações cognitivas ou

Pessoas que não conseguem ler Cerca de 90% da população neuronais
palavras, frases e/ou números de 9 a 17 anos é usuária de Dislexia, autismo, déficit de
ou que têm dificuldade para internet no Brasil, o que atenção, afasia e Síndrome
entender discursos figurativos. equivale a 24,3 milhões de de Down.
crianças e adolescentes.
Costumam ter dificuldade de Costumam ter dificuldade
compreender e relacionar Quanto à navegação, em seguir ordens longas e de
dados diversos, em seguir apresentam redução da preencher e ler grandes
ordens longas e de preencher capacidade de atenção e blocos de textos.
grandes blocos de textos. dificuldade com textos muito Apresentam capacidade de
longos e rebuscados. atenção reduzida.
Pessoas com baixa representatividade

Mulheres Gênero não binário Transgênero

Normalmente os textos Identidades de gênero que não Pessoas que não se identificam
aparecem flexionados são masculinas ou femininas, com o gênero biológico muitas
apenas no masculino, estando fora do binário de gênero vezes são obrigadas a usar o
mesmo quando não se e da cisnormatividade, costumam nome de registro em cadastros e
trata de generalizações – não ser contempladas em formulários, por não haver a
uso das flexões no plural. cadastros e formulários. opção de inserir o nome social.
 Pessoas com baixa familiaridade digital

Idosos Analfabetos digitais

Pessoas acima de 60 anos estão cada vez mais São pessoas que não têm
conectadas. Cerca de 97% dos idosos acessam a familiaridade com as
internet, sobretudo para ler notícias e usar redes tecnologias digitais.
sociais (Facebook e WhatsApp)*.
Têm dificuldade com entender
No entanto, enfrentam limitações para entender o fluxo de navegação de sites e
memes e gírias. Muitas ainda têm falta de aplicativos, além de limitações
familiaridade com uso de teclados e novas com com planilhas e editor de
tecnologias web, apresentam dificuldade para texto. Também apresentam
distinguir informações verídicas de fake news. falta de familiaridade ao
Quanto à navegação, têm problemas com digitar em teclados e ler
leituras em letras pequenas. 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 Acessibilidade
acessível? em UX Writing
De forma resumida, a acessibilidade digital pode
ser trabalhada das seguintes formas: Como o foco deste documento é acessibilidade
para escrita, vamos trazer reflexões e exemplos
UX: determina a distribuição dos elementos em com base em 5 princípios de linguagem:
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 Clara e compreensível Perceptível e escaneável

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. Inclusiva Simples e direta Representativa
Linguagem clara e compreensível

Conteúdo fácil de entender,

independentemente da familiaridade da
pessoa, de seus conhecimentos, aptidões
linguísticas ou nível de concentração.
Cuidado com uso
de emojis
❌ Será que todas as pessoas entendem o sentido desses
emojis? Eles podem gerar alguma dúvida? Essa
Os emojis servem para transmitir repetição favorece ou prejudica?

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.
✅
Já neste exemplo,
E se for usar emojis, priorize os mais primeiramente, o
texto passou a
comuns, aqueles que as pessoas mensagem positiva
estão mais acostumadas, aumentado que foi
complementada pelo
mais a chance de compreensão. emoji sorrindo.
Identifique claramente ❌
O link deveria expressar com clareza para onde a pessoa irá.

o destino de cada link

Ex: Clique aqui para acessar as Condições Gerais de Campanha

As pessoas precisam saber exatamente

para onde vão ao clicar em um link.
✅
Neste caso, a pessoa sabe que será direcionada
para o site ao clicar no 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

❌
Muitas vezes, o uso do termo “clique aqui” é
vago para onde a pessoa será direcionada. 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 O botão não deixa claro o destino da página.
saber exatamente para onde vão ao clicar em Um bom exemplo seria: “conheça o curso”.

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. 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 Se seu objetivo for alcançar uma parcela mais ampla, pode ser que
entendem o que está escrito? esteja dificultando a compreensão. Nossa recomendação é usar a
flexão no masculino e feminino.

Além disso, por ser impronunciável, o X e o Infelizmente, nesse caso, pessoas não-binárias não se identificarão.
Por isso, se uma pesquisa mostrar que esse tipo de
@ não são inclusivos para aqueles que representatividade é importante, vale a pena explorar o uso do “e”.
usam leitores de tela, que ouvem
“meninquis” e “menin arroba s”.
 ✅ Deixe claro quais
requisitos são
obrigatórios.

Mostre a evolução e o que

ainda está pendente para

Senhas e a pessoa entender o que

precisa ajustar.

formulários com
informações claras ✅ 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.

Deixe o mais compreensível possível

cada etapa de preenchimento de ✅
formulários ou criação de senhas. Em caso de não preenchimento, as
mensagens de erro devem ser
apresentadas junto ao campo.

✅
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
Neste caso, a sigla aparece no título sem o
se estiver apenas na home. referente. Abaixo, consta o significado.
Explique as
mensagens de erro
Quando uma mensagem de erro for
exibida, ela deve identificar ✅ 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.
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.
Linguagem simples e direta

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.
Use uma linguagem
O Nubank e a
Magazine Luiza
mostram um jeito

conversacional
de conversar leve,
humanizado e
com clareza.

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
❌ O VTRADE usa termos em inglês e
muito específicos, o que pode
robotizada. acabar afastando pessoas não tão
familiarizadas com o assunto.
Mesmo sendo uma empresa do
Aqui tem uma calculadora de setor financeiro, ela poderia deixar
leiturabilidade que pode ajudar você a o conteúdo mais acessível para
pessoas que querem começar a
avaliar seu texto. investir, mas têm dúvidas ou medos.
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. Ambos os textos são claros e entendíveis, e destacam-se por usar
uma linguagem conversacional e com 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.
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 Será que todos têm familiaridade com o termo Alguns termos do Enjoei podem
jargões, termos técnicos ou OFF e com a expressão “Taca-le pau”? Por gerar dúvidas, como “enjubank” e
acreditar que não, é recomendado evitar “yeyezados”. Você consegue
estrangeirismos. palavras estrangeiras e memes. identificar para onde essa abas
direcionam? Mesmo se tratando de
Neste caso, poderia substituir o OFF por “de uma empresa para público jovem,
desconto”, o que não prejudicaria o sentido e essas nomenclaturas divertidas
ainda transmitiria uma sensação de benefício. podem mais confundir que ajudar.
 ❌
Evite parágrafos
grandes e blocos de
✅
texto muito próximos
Esses são dois exemplos do mesmo produto. A leitura fica mais difícil no
Todo texto da página deve ter alguma primeiro exemplo, enquanto a informação no segundo está mais sucinta e
utilidade e passar a mensagem de forma 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,
mais rápida e clara possível. deixando o conteúdo muito técnico e dificultando a navegação.

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. 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. Esses são dois exemplos do mesmo site. Teste você como a leitura é mais fácil no segundo.

Outra dica importante é usar as

palavras mil, milhão, bilhão para
evitar a repetição de zeros.
 ✅
Comece pelo
objetivo principal
Quando uma frase descreve um
objetivo e a ação para alcançá- Em ambos, os objetivos
principais estão iniciando as
lo, inicie por eles. Afinal, é isso orações, seguidos pela
que as pessoas precisam forma de como realizá-los.
identificar logo de cara.

✅
 ✅
Leis e termos em
❌
linguagem acessível
✅
A Lei Geral de Proteção de Dados
(LGPD) trouxe a importância da Mais do que estar ciente
ou permitir, as pessoas
privacidade dos dados, mas isso não devem entender para
que seus dados são
significa que temos que falar difícil. coletados (entender
mesmo) e ter a opção de
não concordar ou
Evite ao máximo termos jurídicos e concordar parcialmente.
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 Quando optar por
dados são realmente essenciais. pedir dados, em
formulários, utilize
sempre a caixa de
Dica: incentive o cuidado e a leitura aceite e deixe claro
o que a pessoa
com frases como “tire um tempo para receberá.
A Globo.com mostra com
transparência e de forma fácil
ler isso” ou “é importante você saber”.
✅ como coleta dados em seu site.
Linguagem inclusiva

Conteúdo voltado para incluir

pessoas com alguma limitação
permanente ou temporária.
Use os emojis ❌
O uso de emojis, neste caso, seria lido assim:

mais comuns 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?

Os emojis são lidos pelos leitores de tela, por

isso, priorize aqueles mais comuns, cujos
nomes padrões expressam melhor a emoção. ❌
Esta frase é lida: cadastre seu e-mail e receba um cupom de
Não repita emojis, porque os leitores leem o desconto especial dois pontos parênteses de fechamento.
nome repetidamente.

Cuidado também ao selecionar cor de pele, Saiba como são lidos alguns emojis:
porque o leitor lerá “pele clara” ou “pele 😀 rosto gargalhando
😂 rosto chorando de rir
escura. Por isso, priorize os emojis padrão, de
😊 rosto sorridente com olhos sorridentes e bochechas rosadas
cores amarelas. 😍 rosto com olhos em forma de coração
🤩 rosto gargalhando com olhos de estrela
Não use pontuações para criar emoctions 😋 rosto sorridente lambendo os lábios
( :) >< *-* ) , porque o leitor vai ler exatamente Para saber mais, adicione a extensão do leitor de tela Screen Reader
a pontuação. no seu navegador do chrome
 ✅

Crie maiores áreas de

clique em botões e links Pessoas com dificuldades motoras terão maior probabilidade de
✅
conseguires clicar nesses conteúdos porque a área de clique é grande.

Botões maiores ajudaram pessoas que não têm

precisão nos cliques a acessar conteúdos específicos.
Neste caso, o
Insira links em uma frase e não apenas em uma único botão com
palavra. Isso faz com que pessoas com deficiência área de clique
fácil para pessoas
motora tenham muito mais facilidade de clicar. com deficiência é
o “assine já”. Além

Lembre-se de criar botões e links que não pareçam ❌ disso, os links

“confira” nem
apenas textos. ❌ parecem ser
clicáveis.

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. ✅
❌
Quando usar texto Neste caso os ícones são meramente ilustrativos. Não haverá ganho nenhum em descrevê-los, é

alternativo em 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

imagens e ícones descrição é justamente a ação. Em casos específicos talvez seja importante descrever, pois serão
relevantes ao entendimento do conteúdo.

Qualquer conteúdo "não textual" Esta imagem do site da Vivo tem o seguinte alt text:
relevante para compreensão da "Imagem ilustrativa para Vivo pré no Brasil”.

informação, deve trazer uma descrição Neste caso, a imagem não contém informações
alternativa em texto (alt text). relevantes, por isso, o alt text pode ser
dispensado, a não ser que seja acrescentada uma
mensagem útil a ver com o produto.
Descreva a imagem com precisão, mas
Diferentemente da imagem das Americanas,
de forma sucinta. A recomendação é não em que o texto na imagem deve estar em alt
ultrapassar 125 caracteres. para ser lido pelo leitor de tela por trazer
uma informação extra relevante que não
está em outros textos.
Dica: não é necessário começar o texto
alternativo com “foto de” ou “imagem
Quando for criar o alt text, considere o contexto em que a imagem está aplicada.
de”. Ferramentas de leitura de tela irão As perguntas que precisamos nos fazer são:
identificá-la como uma imagem. • Por que esta imagem existe neste contexto e é relevante?
• Por qual motivo ela aparece?
• O que eu desejo transmitir com esta imagem?
 ✅

Forneça legendas, Libras

e/ou transcrições para ✅

recursos multimídias
A Magazine Luiza oferece A Azul tem o site adaptado para
Cerca de 80% dos surdos do mundo não suporte em Libras e com legenda. Libras. Esse é o Hugo, um programa
entendem as línguas escritas e se comunicam em desenvolvido pela handtalk.me/br
Libras. Sendo assim, qualquer conteúdo deve
possuir tradução para língua de sinais, seja áudio,
vídeo ou texto.
✅ 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
Para vídeos e áudios, também forneça legendas, podem ser ouvidas na íntegra.
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. ✅
 ❌
Evite textos
em imagens <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
Os textos em imagens não são significa que as primeiras
lidos por leitores de tela (por duas imagens apenas serão
lidas por leitores de tela
isso, novamente a importância
do alt text).
❌ como “link”. As pessoas
perderão todas as
informações de destaque.

Portanto, são aceitáveis apenas <img ng-src="https://s.mlcdn.com.br/banner/campanhas/1807deskcartao30x.png"

src="https://s.mlcdn.com.br/banner/campanhas/1807deskcartao30x.png">
Para descobrir qual o alt
text das imagens, basta
nos casos em que essas imagens clicar na imagem do site,
sejam decorativas e não com o botão direito, e
selecionar inspecionar.
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">
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 A Magazine Luiza é um grande A drograria Pacheco é exemplo
exemplo ao oferecer várias ruim, porque pessoas com
mais você tiver. formas de contato que atendem limitações na fala não conseguirão
diversos públicos e limitações. 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. 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.
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. ❌
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 A biologia usa o termo “raça” como uma categoria de
classificação dos seres. Para falar em raças biológicas é
capacitistas ou racistas 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.

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”.
Os termos “digite” e “veja” são excludentes, pois nem todas
as pessoas podem digitar ou ver.
 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.

Para destacar, não use Neste caso, a empresa ainda fala da “vida mais fácil e roxinha”, mas já
identificamos que nem todos veem a cor roxa.
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”.
❌
Visão de uma pessoa sem patologia ocular. Visão de uma pessoa com tritanopia.

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 acromatopsia. Visão de uma pessoa com Protanopia.
Linguagem representativa

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.
Evite generalizações Confira algumas dicas para você ser mais inclusiva e inclusivo:

no masculino • Use feminino e masculino no lugar de apenas o masculino.

Ex: Estado civil: solteiro/solteira

Ao escrever, normalmente, flexionam-se adjetivos • Não use o termo “homem” para se referir a homens e mulheres,
como se fosse uma palavra universal.
e substantivos para o gênero masculino, mesmo Ex: Substitua por “ser humano” ou “humanidade”.
em sites em que a pessoa já identificou seu gênero
em cadastros, como nos exemplos abaixo. • 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
Pensando que mais da metade da população que
vive no Brasil é mulher, excluímos um grande • Tire o artigo quando o termo for comum aos 2 gêneros.
Ex: Os médicos atendem hoje x Médicos atendem hoje
público. Usando uma linguagem mais ampla, é
possível gerar mais identificação e respeito.
 Prefira o uso do termo “gênero”,

Crie uma linguagem

por se tratar de uma distinção
sociológica, a “sexo”que é uma
categoria biológica. Neste caso,
❌
neutra e inclusiva também faltaram opções para
pessoas não-binárias.

✅
Apesar de permitir o uso do
Transgêneros e não-binários representam nome social, este cadastro não é
❌
quase 2% da população brasileira. Por isso, inclusivo ao exigir nome e
torna-se cada vez mais importante sobrenome de registro.
Também usa o termo “sexo”
incorporar escritas neutras. ❌ (não preferível), embora ofereça
✅ opção não-binárias.
Além de evitar generalizações no masculino,
a linguagem neutra visa incluir pessoas que
Este é um bom exemplo que
não se identificam com gêneros binários apresenta opções não-
(feminino e masculino). binárias e ainda oferece a
✅ possibilidade de não informar.
Um dos casos mais frequentes, que precisam
mudar rapidamente, são a obrigatoriedade
Essas tratativas são
do nome de registro e a ausência da opção realmente necessárias para
não-binária em cadastros e formulários. o cadastro? Como ficam as
❌ pessoas não-binárias?
Linguagem perceptível e escaneável

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.
 Confira algumas dicas:
• Divida o conteúdo em blocos quando for muito extenso.

Crie um site fácil • 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.
de encontrar • Prefira textos alinhados à esquerda. O texto justificado é mais difícil de ler
devido aos espaços disformes entre as palavras.

informações • Mantenha textos mais importantes em fontes maiores ou encontre outras

formas de destacá-los, como negrito e itálico.

Cada vez mais, as pessoas têm feito várias ANTES ❌ DEPOIS ✅

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. 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.
 Dois exemplos de breadcrumbs:

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.
✅
 ✅

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

A ajuda precisa entrar em contato com um humano.

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 A AJUDA é o primeiro tópico dentro

categoria PROGRAMA VIVA SAÚDE, o que dificulta de perfil no Nubank. Ao clicar, a
que a pessoa rapidamente identifique ao escanear a pessoa pode se orientar por tópicos
tela, já que teoricamente não há relação entre suporte ou rapidamente obter ajuda de um
e o programa. Ainda, é preciso percorrer mais 2 telas humano ao acessar o botão
para obter uma forma de contato. “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.
O Booking é um excelente exemplo. Quando a pessoa passa o mouse sobre
Às vezes ele aparece em um ícone de o ícone, aparece a explicação do que é aquele conteúdo.
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. 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 O Slack é uma
primeira vez que uma pessoa acessa excelente referência
seu site, mas também pode ser para entender e se
configurado para quando novos inspirar ao criar um
onboarding.
recursos são criados. 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. O Google é um excelente exemplo para
entender a importância de escanear
É importante que os títulos principais rapidamente informações. Ele usa
tamanhos e cores para ajudar as pessoas a
descrevam a finalidade de cada página. encontrarem facilmente o que procuram.

Evite conteúdos muito longos. Páginas curtas ❌

são mais fáceis de serem escaneadas e Com essa página, percebe-se como manter um
subtítulos também podem ajudar nesse padrão entre tamanhos, cores, estrutura e
processo, trazendo informações de apoio. quantidade de texto, por blocos, é importante
para ter uma leitura mais linear e encontrar
com facilidade as informações essenciais.
 ❌
Identifique
tabelas, gráficos 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.
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.

A Amazon apresenta com clareza o referente de cada coluna e linha.

Teste a acessibilidade do seu site

Faça você mesmo Converse com outras pessoas

Utilize leitores de tela, ative o modo Você pode fazer pesquisa com pessoas que têm
acessibilidade do seu celular, leia seu site de as limitações listadas neste guia (pessoas com
longe (para ver o tamanho das letras) ou tente deficiências, idosos, estrangeiros, etc) para ver se
usar seu site apenas com a navegação em teclado. o seu conteúdo está claro. Escute a experiência
Perceba se o seu site atende todas as pessoas. delas e pergunte o que poderia ser melhor.
Obrigada por chegar até aqui!

Tem dúvida
ou sugestão?
Carolyna Paiva
[email protected]
linkedin.com/in/carolyna-paiva
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