WCAG 1.4.5: Imagens de texto

O que esta regra significa

WCAG 1.4.5 — Imagens de texto (Nível AA) estabelece que, se a mesma apresentação visual puder ser obtida usando texto real, você deve usar texto real em vez de uma imagem que contenha texto. Uma imagem de texto é qualquer imagem em que caracteres de texto sejam o conteúdo principal a ser transmitido — por exemplo, um JPEG de um título, um banner PNG com um slogan ou um logotipo GIF que soletra o nome de uma marca em uma fonte estilizada.

A distinção entre aprovação e reprovação é simples: se a informação puder ser transmitida marcando caracteres reais em HTML e estilizando-os com CSS para obter a mesma aparência, então usar uma imagem em vez disso é uma falha. A regra não trata de imagens decorativas ou fotografias que por acaso contenham texto na cena (como uma placa de rua em uma foto). Ela se concentra em imagens em que o próprio texto é o conteúdo pretendido.

As WCAG definem duas exceções oficiais em que imagens de texto são permitidas:

• Exceção essencial: A apresentação visual específica é essencial para a informação transmitida. O exemplo clássico é um logotipo — em que a renderização específica das formas das letras é inseparável da identidade da marca. Um logotipo de empresa em que as formas de letras estilizadas SÃO a marca pode permanecer como imagem.
• Exceção personalizável: A imagem de texto pode ser visualmente personalizada de acordo com as necessidades do usuário. Isso significa que o usuário pode alterar a fonte, o tamanho, a cor e o plano de fundo do texto na imagem. Na prática, essa exceção quase nunca é atendida por implementações reais, porque a maioria das imagens não pode ser renderizada novamente dinamicamente de acordo com as preferências do usuário.

É importante observar o que este critério NÃO exige: ele não proíbe todas as imagens que contenham texto. Uma fotografia de um documento histórico, uma captura de tela usada como evidência ou uma imagem de gráfico em que os rótulos dos eixos fazem parte da visualização de dados não são o alvo principal desta regra, embora o texto alternativo (WCAG 1.1.1) ainda deva descrever seu conteúdo. O foco está em casos em que um designer optou por renderizar texto estilizado como uma imagem raster ou vetorial por motivos puramente estéticos quando o CSS poderia obter o mesmo resultado.

Elementos HTML mais comumente implicados em falhas incluem tags <img> usadas para títulos, banners, botões de call-to-action, rótulos de navegação, citações de depoimentos e texto promocional. Arquivos SVG que incorporam texto como paths (em vez de elementos <text>) também são uma preocupação, já que esses caracteres não podem ser selecionados, redimensionados ou refluídos pelo navegador.

Por que isso é importante

Quando o texto é incorporado dentro de uma imagem raster, ele se torna um bitmap fixo. O navegador pode ampliar ou reduzir a imagem, mas não pode refluí-lo, mudar sua fonte, aumentar seu peso ou alterar seu contraste de cor além do que já está “gravado” nos pixels. Isso cria barreiras significativas para vários grupos de pessoas com deficiência.

Usuários com baixa visão normalmente dependem de zoom do navegador, aumento de texto no sistema operacional ou softwares dedicados de ampliação. Texto real é ampliado com nitidez em qualquer nível de zoom; uma imagem de texto fica borrada e pixelada, tornando-se ilegível em alta ampliação. Aproximadamente 2,2 bilhões de pessoas no mundo têm algum tipo de deficiência visual, e muitas delas usam zoom ou ampliação como sua principal estratégia de adaptação, em vez de um leitor de tela.

Usuários com dislexia ou outros distúrbios de leitura frequentemente usam extensões de navegador ou tecnologias assistivas para substituir fontes, aumentar o espaçamento entre letras e alternar para esquemas de cores de alto contraste. Nenhuma dessas personalizações funciona em imagens de texto — os pixels são imutáveis. Um usuário que precisa da fonte OpenDyslexic ou de uma fonte sem serifa com espaçamento amplo simplesmente não pode aplicá-la a um título renderizado como PNG.

Usuários que dependem de esquemas de cores personalizados — incluindo pessoas com fotofobia, enxaqueca ou sensibilidade a contraste — podem configurar o sistema operacional para um modo de alto contraste ou cores invertidas. Texto em CSS responde a essas substituições em nível de sistema; texto em imagem não responde, e pode até se tornar mais difícil de ler quando as cores são invertidas de forma inesperada.

Considere um cenário concreto: um site de e-commerce turco renderiza os títulos de suas campanhas promocionais como imagens JPEG para preservar a fonte de exibição personalizada usada no guia de estilo da marca. Um usuário com baixa visão amplia o navegador para 200%. As imagens de produto são ampliadas de forma aceitável, mas o título da campanha — uma imagem — se torna uma mancha borrada de pixels. O usuário não consegue ler a promoção e perde a oferta. Se a mesma fonte tivesse sido fornecida via @font-face e aplicada a um elemento <h2> real, o texto permaneceria nítido em qualquer nível de zoom, porque a renderização vetorial de fontes é infinitamente escalável.

Além da acessibilidade, usar texto real traz benefícios mensuráveis de SEO. Rastreadores de mecanismos de busca indexam diretamente nós de texto; eles não conseguem extrair de forma confiável o conteúdo textual de imagens sem OCR. Um título incorporado em um PNG é invisível para o algoritmo de classificação do Google. Migrar para texto real pode melhorar a indexação de palavras-chave e o ranqueamento da página para o mesmo conteúdo.

Regras relacionadas do Axe-core

WCAG 1.4.5 exige testes manuais. Não há uma única regra automatizada do axe-core que detecte de forma confiável imagens de texto, pelos motivos explicados abaixo.

• Teste manual obrigatório — nenhuma regra automatizada dedicada: Ferramentas automatizadas podem detectar que existe um elemento <img> e que ele possui um atributo alt, mas não conseguem determinar se o conteúdo visual dessa imagem é principalmente texto renderizado. Fazer isso exigiria reconhecimento de imagem / OCR em cada imagem da página, o que é computacionalmente caro e dependente de contexto. Uma ferramenta que analisa uma página não consegue distinguir entre uma fotografia que incidentalmente contém uma placa com palavras e um título deliberadamente renderizado como imagem. É necessário julgamento humano para avaliar se uma determinada imagem existe com o propósito de apresentar texto estilizado que poderia, em vez disso, ser marcado como texto HTML real com estilização em CSS.
• Sinal parcial a partir de regras de contraste de cor: Regras do axe-core como color-contrast não são acionadas em texto incorporado em imagens, porque operam em nós de texto do DOM e valores de cor CSS computados. Se uma imagem de texto tiver contraste insuficiente, a verificação automatizada de contraste simplesmente não a detectará. Isso significa que imagens de texto podem falhar simultaneamente tanto em 1.4.5 quanto em 1.4.3 (Contraste mínimo) sem qualquer alerta automatizado — um forte motivo para realizar auditorias manuais completas.
• Texto como paths em SVG: Quando um SVG exporta texto como contornos (<path>) em vez de elementos <text>, o axe-core não tem como saber que esses paths formam palavras. É necessária inspeção manual do código-fonte do SVG para determinar se o texto foi convertido em contornos e se ele deveria, em vez disso, ser um elemento <text> real com uma web font aplicada.

Como testar

1. Execute uma varredura automatizada como linha de base. Use o axe DevTools (extensão de navegador) ou o Lighthouse no Chrome DevTools para identificar quaisquer problemas sinalizados na página. Embora nenhuma das ferramentas tenha uma regra dedicada para 1.4.5, o resultado da varredura pode revelar problemas relacionados, como ausência de texto alt em imagens ou falhas de contraste de cor em nós de texto. Anote quaisquer imagens sinalizadas — elas se tornam candidatas para revisão manual.
2. Inspecione visualmente todas as imagens da página. Abra a página em um navegador e examine sistematicamente cada elemento <img>, cada SVG inline, cada imagem de plano de fundo em CSS e cada elemento canvas. Pergunte, para cada um: o propósito principal desta imagem é exibir texto? Se sim, prossiga para a etapa seguinte.
3. Verifique se o CSS poderia obter o mesmo resultado. Para qualquer imagem identificada na etapa 2, pergunte: uma web font (@font-face) combinada com propriedades CSS (cor, sombra de texto, espaçamento entre letras, plano de fundo em gradiente) poderia produzir um resultado visualmente equivalente? Se a resposta for sim, a imagem de texto é uma falha, a menos que a exceção de logotipo se aplique.
4. Verifique as exceções de logotipo. Se um site alegar a exceção de logotipo, confirme que a imagem é genuinamente um logotipo de marca em que o design das formas das letras é inseparável da identidade da marca, e não apenas um título definido na fonte da marca.
5. Teste com zoom do navegador. Aumente o zoom do navegador para 200% e 400% (usando Ctrl/Cmd + ou as configurações do navegador). Observe se o texto na página permanece nítido. Imagens de texto ficarão borradas ou pixeladas; texto real permanecerá nítido. Esse teste verifica simultaneamente violações de 1.4.5 e questões relacionadas de reflow (WCAG 1.4.4 e 1.4.10).
6. Inspecione o código-fonte de SVG. Clique com o botão direito em qualquer SVG e escolha “Ver código-fonte” ou use o DevTools do navegador para inspecionar o DOM do SVG. Confirme que o conteúdo de texto usa elementos <text> em vez de elementos <path> que traçam contornos de letras. Se todo o texto tiver sido convertido em paths, o SVG tem o mesmo problema que uma imagem raster de texto.
7. Teste com um leitor de tela para entender o impacto combinado. Use NVDA com Firefox, VoiceOver com Safari em macOS/iOS ou JAWS com Chrome. Navegue até as imagens de texto e confirme que o atributo alt transmite com precisão o conteúdo textual. Embora um atributo alt significativo atenda à WCAG 1.1.1 (Conteúdo não textual), ele não resolve a falha de 1.4.5 — o texto ainda não é personalizável pelo usuário. Registre ambos os problemas separadamente.
8. Aplique uma folha de estilo de usuário ou extensão de navegador personalizada. Instale uma extensão de navegador como Stylus ou use o recurso de folha de estilo de usuário embutido do Firefox para substituir famílias de fontes e aumentar o tamanho da fonte globalmente. Texto real mudará; texto em imagem não mudará. Isso simula diretamente o que usuários com distúrbios de leitura experimentam quando aplicam suas fontes preferidas.

Como corrigir

Cabeçalho de banner decorativo — Incorreto

<!-- Falha: Um título de marketing é renderizado como JPEG para preservar uma fonte personalizada -->
<div class='hero'>
  <img src='summer-sale-heading.jpg' alt='Summer Sale — Up to 50% Off' />
</div>

Cabeçalho de banner decorativo — Correto

<!-- Corrigido: A mesma fonte personalizada é fornecida via @font-face e aplicada a um título real.
     O texto agora é selecionável, escalável e personalizável pelo usuário. -->
<style>
  @font-face {
    font-family: 'BrandDisplay';
    src: url('/fonts/brand-display.woff2') format('woff2');
    font-display: swap;
  }
  .hero-heading {
    font-family: 'BrandDisplay', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #c0392b;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
</style>

<div class='hero'>
  <h1 class='hero-heading'>Summer Sale — Up to 50% Off</h1>
</div>

SVG com texto convertido em contornos — Incorreto

<!-- Falha: O texto foi convertido em paths na exportação do SVG,
     tornando os caracteres inacessíveis e não escaláveis como texto -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'>
  <!-- Dezenas de elementos <path> que traçam as letras de 'Accsible' -->
  <path d='M10 60 L20 20 L30 60 ...' fill='#003087' />
</svg>

SVG com texto convertido em contornos — Correto

<!-- Corrigido: O SVG usa um elemento <text> real com referência a uma web font.
     O texto agora é indexável, selecionável e escalável. -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'
     role='img' aria-label='Accsible'>
  <defs>
    <style>
      .svg-label {
        font-family: 'BrandDisplay', sans-serif;
        font-size: 48px;
        fill: #003087;
      }
    </style>
  </defs>
  <text class='svg-label' x='10' y='60'>Accsible</text>
</svg>

Imagem de plano de fundo em CSS com texto embutido — Incorreto

<!-- Falha: O rótulo do botão faz parte da imagem de plano de fundo,
     não é um nó de texto real -->
<a href='/shop' class='cta-button'></a>

<style>
  .cta-button {
    display: block;
    width: 200px;
    height: 60px;
    background: url('shop-now-button.png') no-repeat center;
    background-size: cover;
  }
</style>

Imagem de plano de fundo em CSS com texto sobreposto — Correto

<!-- Corrigido: O botão usa um nó de texto real estilizado com CSS.
     A imagem de plano de fundo é puramente decorativa (gradiente ou textura). -->
<a href='/shop' class='cta-button'>Shop Now</a>

<style>
  .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    font-family: 'BrandDisplay', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

Logotipo — Exceção aceitável

<!-- Aceitável: Um logotipo em que o design específico das letras
     É a identidade da marca. O texto alternativo transmite com precisão o conteúdo textual.
     O CSS não pode reproduzir as formas de letras desenhadas à mão. -->
<a href='/' aria-label='Accsible — Home'>
  <img src='accsible-logo.svg'
       alt='Accsible'
       width='160'
       height='48' />
</a>

Erros comuns

• Usar um JPEG ou PNG para títulos de página porque o mockup de design usa uma fonte que não está disponível no Google Fonts — a correção adequada é hospedar a fonte localmente como um arquivo WOFF2 usando @font-face, não “assar” o título em uma imagem.
• Exportar seções inteiras de hero como uma única imagem plana a partir de ferramentas de design como Figma ou Photoshop, o que incorpora todos os textos, botões e rótulos em um único arquivo raster. Cada elemento de texto deve ser um nó HTML separado.
• Converter texto de SVG em paths durante a exportação para evitar dependências de carregamento de fontes no servidor. Isso elimina a acessibilidade e a capacidade de busca do texto. Use elementos <text> com uma referência de fonte em CSS em vez disso.
• Colocar texto promocional ou legal (como termos e condições, preços ou regras de concursos) dentro de uma imagem para preservar controle preciso de layout. Qualquer texto que os usuários precisem ler deve ser texto HTML real.
• Alegar a exceção de logotipo para todo texto com a marca — a exceção se aplica apenas ao logotipo propriamente dito, não a qualquer título ou rótulo definido na tipografia da marca. Um título em Helvetica Neue não é um logotipo.
• Fornecer um atributo alt preciso e presumir que isso resolve a falha de 1.4.5 — não resolve. O texto alternativo atende à WCAG 1.1.1 (Conteúdo não textual), mas não torna o texto da imagem personalizável pelo usuário, que é o requisito distinto de 1.4.5.
• Usar elementos <canvas> do HTML5 para renderizar texto estilizado para efeito visual sem fornecer uma alternativa em texto real no DOM. Texto renderizado em canvas tem todas as mesmas desvantagens do texto em imagem.
• Incorporar texto em imagens de pré-visualização de Open Graph ou compartilhamento em redes sociais e esquecer que essas imagens também aparecem na página (por exemplo, como imagem destacada em um post de blog). Se a imagem destacada for contexto decorativo, isso pode ser aceitável — mas se for o título principal do artigo, é uma falha.
• Ignorar templates de newsletters por e-mail — embora clientes de e-mail estejam fora do escopo das WCAG para navegadores, muitas organizações publicam suas newsletters como páginas web. Texto em imagens de cabeçalho de e-mail incorporadas como conteúdo web ainda aciona a 1.4.5.
• Presumir que imagens em alta resolução Retina resolvem o problema — uma imagem de texto em resolução 2× ou 3× é mais nítida do que uma imagem 1×, mas ainda falha em 1.4.5 porque o texto continua não personalizável, não refluível e invisível para mecanismos de busca e tecnologias assistivas.

Relação com os regulamentos de acessibilidade da Turquia

A Circular Presidencial 2025/10 da Turquia, publicada no Diário Oficial nº 32933 em 21 de junho de 2025, estabelece padrões obrigatórios de acessibilidade web e móvel para uma ampla gama de entidades que operam na Turquia. A circular faz referência explícita às WCAG 2.2 como padrão técnico normativo, e a conformidade em Nível AA — que inclui a WCAG 1.4.5 — é exigida para elegibilidade ao Erişilebilirlik Logosu (Logotipo de Acessibilidade), emitido pelo Ministério da Família e Serviços Sociais (Aile ve Sosyal Hizmetler Bakanlığı). Esse logotipo funciona como uma marca oficial de certificação indicando que um produto digital atende aos requisitos de acessibilidade definidos na circular.

As entidades abrangidas pela circular cobrem uma ampla seção da economia digital da Turquia. Instituições públicas e órgãos governamentais em todos os níveis são obrigados a cumprir, assim como bancos e instituições financeiras regulados pela BDDK (Agência de Regulação e Supervisão Bancária). Hospitais e prestadores de serviços de saúde, tanto públicos quanto privados, estão incluídos. No setor privado, plataformas de e-commerce, operadoras de telecomunicações com 200,000 ou mais assinantes, agências de viagens, empresas de transporte privado e escolas privadas e instituições de ensino autorizadas pelo Ministério da Educação Nacional (MoNE / Milli Eğitim Bakanlığı) estão todas dentro do escopo da circular.

Para essas organizações, a WCAG 1.4.5 tem implicações diretas e práticas. Muitos sites turcos de e-commerce e institucionais usam imagens promocionais, banners com fontes personalizadas e cabeçalhos de campanha que incorporam texto como imagens raster — uma prática comum em fluxos de trabalho de design web que se originam em ferramentas de design visual. Sob a Circular Presidencial, tais implementações constituem uma não conformidade de Nível AA e desqualificariam o site de obter ou manter o Erişilebilirlik Logosu. Bancos que exibem tabelas de taxas de juros como imagens, hospitais que listam nomes de departamentos em banners PNG ou operadoras de telecomunicações que apresentam tarifas promocionais como arquivos de imagem planos estariam todos em violação desse critério.

Organizações que buscam conformidade devem auditar todas as imagens em suas propriedades web em busca de conteúdo textual incorporado, priorizar a conversão de páginas de alto tráfego (homepages, páginas de produto, páginas de serviços) primeiro e estabelecer um fluxo de trabalho de design para desenvolvimento que proíba a entrega de conteúdo textual dentro de arquivos de imagem. Investir em uma estratégia de web fonts usando @font-face com formato WOFF2 e valores apropriados de font-display permitirá que designers alcancem a mesma riqueza tipográfica exigida pelas diretrizes de marca, permanecendo totalmente em conformidade com as WCAG 2.2 Nível AA e com o mandato de acessibilidade de 2025 da Turquia.