Imagens de texto
O que a norma pede
O texto é apresentado como texto, e não como imagem. Imagens de texto só são aceitas quando essenciais (como logotipos) ou quando podem ser personalizadas, sempre com texto alternativo de mesmo conteúdo.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: não há imagens de texto.
- Outra forma: as imagens de texto são essenciais e têm texto alternativo com o mesmo conteúdo.
- Ou ainda: as imagens de texto não essenciais podem ser personalizadas pela pessoa e têm texto alternativo com o mesmo conteúdo.
- 1.1.1 (A)
- 1.4.5 (AA)
- 1.4.9 (AAA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Monte banners e destaques com texto real sobre a imagem, usando fontes web em vez de exportar títulos como imagem. Deixe como imagem só o que é essencial, como logotipos.
Banner da campanha
O banner da página inicial anuncia um prazo.
Errado: Texto dentro da imagem
Na entrega
Banner exportado como JPG com o prazo escrito na arte.
Não amplia bem e o prazo não é lido.
Certo: Texto real sobre a imagem
Na entrega
Fundo em imagem; título e prazo em texto HTML sobre ela.
O texto amplia, muda de contraste e é lido.
Implemente destaques visuais com HTML e CSS. Quando uma imagem de texto for inevitável, como no logotipo, use no alt exatamente o texto que aparece nela.
Título estilizado
O título da seção usa uma fonte decorativa.
Errado: Título como imagem
<img src="titulo-servicos.png" alt="Serviços">Fica borrado com zoom e não se adapta ao modo de alto contraste.
Certo: Título como texto
<h2 class="titulo-decorativo">Serviços</h2> /* font-family: "Fonte da marca", sans-serif; */O visual é o mesmo, com texto real.
Oriente a comunicação a entregar as peças com o texto separado da arte e não publique datas e prazos só em imagem. Revise cards de redes sociais antes de reaproveitá-los no site.
Comunicado em imagem
A equipe de comunicação envia um comunicado pronto em imagem.
Errado: Publicado como está
Decisão
Imagem do comunicado publicada sem o texto.
Parte do público não lê o comunicado.
Certo: Publicado em texto
Decisão
Texto do comunicado na página; a imagem fica como apoio.
O comunicado chega a todos.
Amplie a página para 200% e tente selecionar os textos com o mouse. Texto que fica borrado ou não pode ser selecionado provavelmente é imagem; confira se ele é essencial e se o alt repete o mesmo texto.
Aviso de prazo na página inicial
Um aviso diz: “Inscrições até 30/06”.
Errado: Texto em imagem sem alt equivalente
Leitor de tela anuncia: “Banner, imagem”
O prazo não é anunciado.
Certo: Texto real
Leitor de tela anuncia: “Inscrições até 30 de junho, título nível 2”
O aviso é lido e ampliado sem perda.
Publique em texto tudo o que importa, como datas e valores, e peça à comunicação o texto de cada peça. Se uma imagem de texto for inevitável, repita o texto no alt.
Card de evento
O card traz data, horário e local de uma audiência pública.
Errado: Tudo na arte
Na página
Só a imagem do card.
Quem usa leitor não sabe quando nem onde é a audiência.
Certo: Texto na página
Na página
“Audiência pública: 12/08, às 19h, na Câmara Municipal.” e a imagem como ilustração.
A informação está acessível a todos.