Você pode usar imagens que contenham texto para criar interesse visual, organizar informações ou alcançar um determinado estilo no seu design. No entanto, usar texto como imagem pode tornar seu design menos acessível.
Como as imagens se encaixam no design acessível?
Imagens de texto podem criar barreiras para pessoas que dependem de tecnologias assistivas, como leitores de tela. Essas ferramentas só conseguem interpretar caracteres de texto reais — não texto incorporado em imagens.
Por exemplo, considere esta imagem de um folheto:
O fundo do folheto está coberto por desenhos em estilo grafite que incluem palavras e letras. As palavras e letras que fazem parte do fundo visual não são essenciais para entender o design e não precisam ser lidas por um leitor de tela.
No entanto, a imagem também apresenta texto na coluna esquerda, com o título do evento “Creative Artists Awards Night” e, abaixo dele, os detalhes do evento, que um leitor de tela não pode ler, a menos que seja transcrito e incluído no texto alternativo (alt text).
Texto vs. Imagens de Texto
| Texto | Imagens de Texto |
|---|---|
| Editável e selecionável no Editor Venngage | Aparece como parte da imagem e não pode ser editado |
| Legível por leitores de tela | Não legível por tecnologias assistivas |
| Pode ser estilizado usando fontes, cores e ferramentas de formatação | Deve ser substituído ou descrito com alt text |
| Redimensiona claramente e permanece nítido em qualquer tamanho | Pode ficar borrado ou distorcido ao redimensionar |
👉 Usar texto real garante que seu conteúdo seja acessível, pesquisável e visualmente consistente em todos os dispositivos.
Como garantir que suas imagens sejam acessíveis
A solução mais fácil e eficaz é usar texto em vez de imagens de texto sempre que possível.
Para adicionar e estilizar texto no Venngage:
-
Clique em Texto na barra lateral esquerda do Editor.
-
Escolha um tipo de texto (título, subtítulo ou corpo do texto).
-
Use a caixa delimitadora para mover ou redimensionar o texto no canvas.
-
Personalize seu texto usando a barra superior, que inclui:
Seletor de cores
Menus de fonte e tamanho
Estilos negrito, itálico e sublinhado
Opções de alinhamento
Altura e espaçamento de linha
Listas com marcadores ou numeradas
Ferramenta de hyperlink
Tag de Texto (para marcar cabeçalhos e adicionar alt text)
Efeitos, Camadas, Alinhar, Agrupar, Bloquear/Desbloquear, Duplicar e Excluir
Se for necessário usar uma imagem de texto
Se substituir a imagem não for possível (por exemplo, em um logotipo ou elemento decorativo), adicione alt text para descrever a imagem e inclua o mesmo texto que aparece visualmente.
Se o texto for puramente decorativo ou parte da identidade da marca, indique isso no alt text para ajudar tecnologias assistivas a ignorar conteúdo não essencial.
Curious about upgrading? Compare our plan features side by side.