WCAG 1.4.9: Imagens de texto (sem exceção)

O Que Esta Regra Significa

WCAG 1.4.9 — Imagens de Texto (Sem Exceção) é um critério de Nível AAA que leva os requisitos da WCAG 1.4.5 (Imagens de Texto, Nível AA) à sua conclusão lógica. Enquanto a 1.4.5 permite imagens de texto quando a imagem é visualmente personalizável ou quando uma apresentação visual específica é essencial, a 1.4.9 elimina quase todas essas exceções. De acordo com este critério, o texto deve ser renderizado usando texto real — caracteres reais no DOM — em vez de imagens rasterizadas ou vetoriais contendo texto.

A única exceção permitida sob 1.4.9 é texto que seja puramente decorativo (sem qualquer valor informativo) ou texto que faça parte de um logotipo ou nome de marca em que o tratamento visual específico seja inseparável da identidade transmitida. Na prática, isso significa que capturas de tela de produtos contendo texto, banners gráficos com texto promocional, infográficos com dados rotulados, imagens de certificados, cards de citação em estilo de mídia social e documentos digitalizados exibidos na web devem todos ser substituídos por, ou pelo menos complementados com, texto real renderizado.

Um acerto em 1.4.9 ocorre quando cada trecho de texto significativo visível para o usuário é renderizado pelo mecanismo de texto do navegador — seja por meio de nós de texto HTML, conteúdo gerado por CSS quando apropriado, ou elementos SVG <text> — de modo que o agente do usuário possa refazer o fluxo, redimensionar, recolorir e reajustar o espaçamento. Um erro ocorre sempre que um <img>, <canvas>, imagem de fundo em CSS, SVG <image>, PDF incorporado ou qualquer outro recurso não textual é usado para exibir texto que carrega significado, independentemente de um atributo alt ser fornecido. Observe que um atributo alt bem escrito atende ao critério 1.1.1 (Conteúdo Não Textual), mas não satisfaz 1.4.9, porque o texto alternativo não é visualmente renderizado e a imagem original ainda nega a usuários videntes a capacidade de adaptar a apresentação visual do texto.

O critério afeta os seguintes padrões HTML comuns: elementos <img> cujos arquivos de origem contêm texto; propriedades CSS background-image apontando para imagens com texto embutido; elementos <canvas> nos quais o texto foi desenhado programaticamente; elementos SVG inline que usam <image> em vez de <text>; e conteúdos incorporados de terceiros, como iframes contendo conteúdo de imagem renderizada. Mesmo formatos tecnicamente escaláveis como SVG são analisados quando o texto é incorporado como um caminho ou imagem em vez de como um nó SVG <text>.

Por Que Isso Importa

Aproximadamente 2,2 bilhões de pessoas em todo o mundo têm algum tipo de deficiência visual, de acordo com a Organização Mundial da Saúde. Um subconjunto significativo dessas pessoas — incluindo pessoas com baixa visão, deficiências de visão de cores, dislexia e outras deficiências de leitura — depende de ferramentas de personalização de texto em nível de navegador ou sistema operacional para tornar o conteúdo legível. Essas ferramentas incluem funções de zoom, substituição de fonte, aumento do espaçamento entre letras e palavras, esquemas de cores de alto contraste ou personalizados e mecanismos de texto para fala que operam sobre texto renderizado no DOM. Quando o texto é incorporado dentro de uma imagem, cada uma dessas adaptações se torna indisponível para aquele conteúdo.

Considere um usuário com baixa visão que configurou seu navegador para renderizar texto em uma fonte sem serifa grande, com coloração de alto contraste amarelo sobre preto. Quando essa pessoa encontra um banner promocional com o texto "Summer Sale — 50% Off" embutido em um JPEG, o navegador não pode recolorir ou refazer o fluxo desse texto. A imagem pode aumentar de tamanho com o zoom da página, mas rapidamente se torna pixelada e mais difícil de ler, em vez de mais nítida. Se a mesma mensagem fosse renderizada como texto HTML real estilizado com CSS, as preferências do navegador do usuário seriam aplicadas automaticamente, e o conteúdo permaneceria nítido, ajustável e acessível.

Usuários com dislexia frequentemente instalam extensões de navegador ou aplicam folhas de estilo personalizadas que trocam as fontes por tipos de letra amigáveis à dislexia, como OpenDyslexic, e aumentam o espaçamento entre caracteres e palavras para reduzir a aglomeração visual. Imagens de texto ignoram completamente essas adaptações. Um botão de chamada para ação renderizado como uma imagem em vez de um elemento HTML estilizado é efetivamente invisível para essas personalizações, potencialmente ocultando elementos interativos críticos de usuários que dependem de renderização personalizada.

Usuários com deficiência motora que dependem de acesso por varredura (switch access) ou software de rastreamento ocular podem usar ferramentas de zoom de forma intensa para atingir alvos precisos. Imagens de texto borradas e de baixa resolução em níveis altos de zoom criam dificuldade adicional de focalização. Usuários de leitores de tela que ainda têm alguma visão residual, mas usam um leitor de tela para compreensão, também podem perceber que imagens de texto são anunciadas de forma inconsistente, dependendo de o autor ter se lembrado de escrever um atributo alt completo — e mesmo um texto alternativo perfeito não restaura a apresentação visual de que precisam.

Além do acesso para pessoas com deficiência, usar texto real em vez de imagens de texto traz benefícios significativos de SEO. Rastreadores de mecanismos de busca indexam texto no DOM de forma muito mais confiável do que conseguem interpretar conteúdo de imagem, o que significa que manchetes promocionais, nomes de produtos e rótulos de categorias incorporados em imagens podem receber pouco ou nenhum peso de ranqueamento em buscas. O texto real também costuma ter tamanho de arquivo menor na maioria dos casos tipográficos, melhorando as pontuações de Core Web Vitals e reduzindo o consumo de banda para usuários em conexões de dados móveis — uma preocupação particularmente significativa em mercados onde a penetração de internet móvel é alta e os custos de dados ainda são um fator.

Regras Relacionadas do Axe-core

WCAG 1.4.9 exige testes manuais porque nenhuma ferramenta automatizada pode determinar de forma confiável se uma imagem contém texto significativo, se esse texto é puramente decorativo ou se sua renderização visual específica é essencial. As seguintes considerações se aplicam ao usar axe-core ou ferramentas relacionadas:

• Inspeção manual necessária (sem regra dedicada do axe): o axe-core não inclui uma regra que detecte automaticamente imagens de texto sob 1.4.9. Ferramentas automatizadas podem sinalizar elementos <img> sem atributos alt (a regra image-alt) e imagens de fundo que possam ter significado, mas não conseguem analisar o conteúdo de pixels de uma imagem para determinar se ela contém texto, nem julgar se esse texto é decorativo. Um testador humano deve inspecionar visualmente cada imagem e gráfico de fundo na página e decidir se ele transmite informação textual que não está também disponível como texto real renderizado no DOM. Esta é uma limitação inerente da análise estática: o reconhecimento óptico de caracteres poderia teoricamente ser aplicado, mas produziria um número significativo de falsos positivos em imagens que por acaso contêm letras incidentais ou tratamentos de logotipo.
• image-alt (regra do axe): Embora não seja um teste direto de 1.4.9, a regra image-alt verifica se todos os elementos <img> têm um atributo alt não vazio ou estão explicitamente marcados como decorativos. Executar essa regra ajuda auditores a identificar imagens que precisam de inspeção mais detalhada: qualquer imagem com um atributo alt descritivo que pareça uma frase ou contenha texto promocional é um forte sinal de que a própria imagem pode ser uma imagem de texto e, portanto, uma candidata a 1.4.9.
• Auditoria do Lighthouse "Image elements do not have [alt] attributes": Semelhante à image-alt, essa verificação do Lighthouse destaca imagens que estão completamente sem descrição. Os testadores devem revisar manualmente as imagens sinalizadas para avaliar se elas exibem texto.

Como Testar

1. Execute uma varredura automatizada como primeira etapa. Abra o axe DevTools, a extensão de navegador da Deque ou o Lighthouse no Chrome DevTools e execute uma auditoria de página inteira. Revise quaisquer problemas relacionados a imagens que forem sinalizados. Embora nenhuma regra automatizada cubra diretamente 1.4.9, esta etapa destaca todos os elementos <img> e imagens de fundo em CSS para revisão manual posterior. Exporte os resultados e anote cada imagem que tenha um atributo alt não vazio, com aparência de frase, ou que o axe sinalize sob image-alt.
2. Inspecione visualmente todas as imagens e gráficos de fundo. Role pela página e examine cada imagem, fundo em CSS, elemento canvas e gráfico SVG. Pergunte: esta imagem contém texto? Se sim, esse texto é puramente decorativo (não adiciona informação e poderia ser removido sem perda)? É um logotipo em que o estilo específico da letra é inseparável da identidade da marca? Se nenhuma das exceções se aplica, a imagem é uma falha em 1.4.9.
3. Desative imagens no navegador. No Firefox, vá para about:config e defina permissions.default.image como 2, ou use uma extensão como "Disable Images". Recarregue a página. Qualquer informação textual que desapareça e não seja substituída por texto visível no DOM (não apenas um atributo alt anunciado por um leitor de tela) representa uma falha em 1.4.9. Reative as imagens após o teste.
4. Aplique uma folha de estilo de usuário personalizada. No Firefox, coloque um arquivo no diretório chrome/userContent.css do seu perfil e adicione uma regra como * { font-family: OpenDyslexic, sans-serif !important; color: yellow !important; background-color: black !important; }. Recarregue a página. O texto renderizado como HTML real adotará esses estilos; o texto incorporado em imagens não mudará. Qualquer conteúdo textual que permaneça visualmente inalterado e ilegível sob esses estilos forçados é uma falha.
5. Teste com NVDA e Firefox. Navegue pela página usando o modo de navegação do NVDA. Para cada imagem, observe o que o NVDA anuncia. Se o NVDA ler um atributo alt que contenha conteúdo textual substancial, compare esse conteúdo com o que é exibido visualmente na imagem. A presença de conteúdo textual significativo em um atributo alt é um forte indicador de que a imagem contém texto — e confirma uma falha em 1.4.9, mesmo que 1.1.1 esteja tecnicamente satisfeito.
6. Teste com VoiceOver e Safari no macOS. Use VO + Seta para a Direita para percorrer o conteúdo. Ouça descrições de imagens que narrem frases completas, títulos ou texto promocional. Faça uma verificação cruzada com a inspeção visual para confirmar se a origem é uma imagem em vez de texto real.
7. Dê zoom até 400%. WCAG 1.4.4 e 1.4.10 exigem que o texto permaneça legível em níveis altos de zoom. Imagens de texto se tornam pixeladas quando ampliadas com o zoom do navegador; texto real renderizado pelo mecanismo do navegador permanece nítido. Em 400% de zoom, qualquer texto que pareça borrado ou pixelado provavelmente é uma imagem de texto e deve ser investigado como uma falha em 1.4.9.

Como Corrigir

Banner promocional com texto embutido — Incorreto

<!-- A marketing banner where the headline and CTA are baked into the image.
     Even with alt text, users cannot customize the text rendering. -->
<a href='/sale'>
  <img src='/images/summer-sale-banner.jpg'
       alt='Summer Sale — Up to 50% off all products. Shop Now.'
       width='1200' height='400'>
</a>

Banner promocional com texto embutido — Correto

<!-- The banner uses a real background image for visual decoration,
     while all text is rendered as real HTML so users can resize,
     recolor, and reflow it independently. -->
<a href='/sale' class='sale-banner'>
  <!-- Background image set via CSS: .sale-banner { background-image: url(/images/summer-bg.jpg); } -->
  <h2 class='sale-banner__headline'>Summer Sale</h2>
  <p class='sale-banner__offer'>Up to 50% off all products</p>
  <span class='sale-banner__cta'>Shop Now</span>
</a>

Infográfico com pontos de dados rotulados — Incorreto

<!-- An infographic where category labels and percentages are drawn
     into the PNG. Screen reader users hear the alt; sighted low-vision
     users cannot enlarge or recolor the labels. -->
<img src='/images/market-share-2024.png'
     alt='Market share 2024: Product A 42%, Product B 31%, Product C 27%'
     width='800' height='600'>

Infográfico com pontos de dados rotulados — Correto

<!-- An accessible SVG chart where all labels are SVG <text> nodes.
     Users can zoom, reflow, and apply high-contrast themes to the text.
     An adjacent <table> provides the same data in tabular form. -->
<figure>
  <svg viewBox='0 0 800 400' role='img'
       aria-labelledby='chart-title chart-desc'>
    <title id='chart-title'>Market Share 2024</title>
    <desc id='chart-desc'>Pie chart: Product A 42%, Product B 31%, Product C 27%</desc>
    <!-- chart paths -->
    <text x='200' y='150' class='chart-label'>Product A — 42%</text>
    <text x='450' y='200' class='chart-label'>Product B — 31%</text>
    <text x='350' y='320' class='chart-label'>Product C — 27%</text>
  </svg>
  <figcaption>
    <details>
      <summary>View data as table</summary>
      <table>
        <caption>Market Share 2024</caption>
        <thead><tr><th>Product</th><th>Share</th></tr></thead>
        <tbody>
          <tr><td>Product A</td><td>42%</td></tr>
          <tr><td>Product B</td><td>31%</td></tr>
          <tr><td>Product C</td><td>27%</td></tr>
        </tbody>
      </table>
    </details>
  </figcaption>
</figure>

Imagem de fundo em CSS contendo um cabeçalho com muito texto — Incorreto

<!-- The page title is set as a CSS background image rather than real text.
     This is a common design pattern from the early 2000s image-replacement era
     that should not appear in modern codebases. -->
<h1 class='logo-header'></h1>
<!-- CSS: .logo-header {
       background: url('/images/page-title-about-us.png') no-repeat;
       width: 400px; height: 80px; display: block;
       text-indent: -9999px;
     } -->

Imagem de fundo em CSS contendo um cabeçalho com muito texto — Correto

<!-- Real text is rendered by the browser. Custom web fonts reproduce
     the desired typographic style without sacrificing adaptability.
     The background image, if needed at all, is purely decorative texture. -->
<h1 class='page-title'>About Us</h1>
<!-- CSS: .page-title {
       font-family: 'BrandTypeface', serif;
       font-size: 3rem;
       color: #1a1a2e;
       letter-spacing: 0.05em;
     } -->

Erros Comuns

• Presumir que um atributo alt completo satisfaz 1.4.9. Fornecer uma alternativa textual detalhada no atributo alt atende à WCAG 1.1.1, mas não resolve 1.4.9. O critério trata especificamente de a renderização visual do texto ser acessível à personalização, não de equivalentes programáticos para leitores de tela.
• Usar técnicas de substituição de imagem em CSS (text-indent: -9999px ou métodos com clip) em elementos de <h1> a <h6>. Essas técnicas legadas ocultam visualmente o texto real e o substituem por uma imagem de fundo, o que significa que usuários videntes com baixa visão recebem apenas a imagem, enquanto usuários de leitores de tela recebem apenas o texto oculto — um descompasso que prejudica ambos os grupos de maneiras diferentes.
• Exportar tipografia da web como PNG ou JPEG porque uma fonte personalizada não está disponível como web font. Se um tipo de letra licenciado não puder ser legalmente servido como web font, a solução correta é negociar direitos de web font ou escolher um tipo de letra alternativo, não rasterizar texto em imagens.
• Tratar arquivos SVG como inerentemente acessíveis. Um SVG que incorpora texto como elementos <path> (saída comum de ferramentas de design gráfico, como a opção "outline text" do Illustrator) é tão inacessível quanto um PNG. O SVG deve usar elementos <text> para passar em 1.4.9.
• Incorporar texto em elementos <canvas> sem um fallback em texto real. O conteúdo de canvas é rasterizado em nível de pixel. Qualquer texto desenhado via ctx.fillText() não faz parte do DOM e não pode ser adaptado por agentes do usuário. É necessário um overlay ou alternativa em texto real.
• Deixar imagens de documentos digitalizados (PDFs renderizados como imagens) sem camadas de texto real baseadas em OCR. Documentos digitalizados apresentados em tags <img> ou como PDFs apenas de imagem falham em 1.4.9. É necessário executar OCR e incorporar uma camada de texto selecionável, ou converter o documento para HTML devidamente marcado.
• Usar imagens de texto para dados dinâmicos, como preços, quantidades em estoque ou conteúdo gerado pelo usuário. Sempre que um servidor gera uma imagem que contém dados textuais, esses dados ficam presos no formato de imagem. Preços em listagens de produtos, disponibilidade de assentos em plataformas de reserva e placares de esportes ao vivo devem ser renderizados como texto real para que os usuários possam redimensioná-los e recolorí-los.
• Ignorar imagens de assinatura de e-mail. Equipes de marketing frequentemente criam blocos de assinatura como imagens para preservar a identidade visual. Quando esses e-mails são arquivados e vinculados a partir de sites, as imagens de assinatura se tornam conteúdo web sujeito a 1.4.9.
• Ignorar conteúdo de widgets de terceiros. Widgets de chat, selos de prova social e carrosséis de avaliações fornecidos por fornecedores terceirizados podem injetar imagens de texto na página. Os proprietários de sites continuam responsáveis pela acessibilidade de todo o conteúdo em suas páginas; se um fornecedor não puder fornecer renderização baseada em texto, deve-se buscar outro fornecedor.
• Confundir exceções de logotipo com exceções gerais de branding. A exceção de logotipo cobre apenas o logotipo ou wordmark em si — o nome da marca estilizado. Ela não se estende a slogans, rótulos de navegação ou qualquer outro texto que apareça ao lado do logotipo na mesma imagem.

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 obrigações obrigatórias de acessibilidade web para uma ampla gama de organizações que operam na Turquia. A circular exige que as entidades abrangidas estejam em conformidade com a WCAG 2.1 Nível AA como linha de base mínima. As entidades explicitamente abrangidas incluem instituições públicas e órgãos governamentais, plataformas de e-commerce, bancos e instituições financeiras, hospitais e prestadores de serviços de saúde privados, empresas de telecomunicações com 200.000 ou mais assinantes, agências de viagens, empresas de transporte privado e escolas privadas autorizadas pelo Ministério da Educação Nacional.

WCAG 1.4.9 é um critério de Nível AAA e, portanto, está acima do mínimo obrigatório estabelecido pela Circular Presidencial 2025/10. As entidades abrangidas não são legalmente obrigadas a cumprir 1.4.9 para atender às obrigações básicas da circular. No entanto, alcançar o Nível AAA nos critérios aplicáveis demonstra um compromisso de excelência com a inclusão e amplia significativamente o público que pode usar o serviço de forma eficaz.

Vários setores abrangidos pela circular têm incentivos particularmente fortes para buscar voluntariamente a conformidade com 1.4.9. Plataformas de e-commerce frequentemente usam banners promocionais, gráficos de promoção e cabeçalhos de categorias de produtos renderizados como imagens — todos padrões comuns de falha em 1.4.9. Para usuários com baixa visão ou dislexia que dependem de personalização de texto para tomar decisões de compra, essas falhas se traduzem diretamente em conversões perdidas e potencial exposição legal sob os mais amplos marcos de proteção ao consumidor e antidiscriminação da Turquia. Bancos e instituições financeiras apresentam, de forma semelhante, taxas de empréstimo, resumos de contas e tabelas de tarifas; se qualquer uma dessas informações estiver incorporada em imagens, clientes com baixa visão não podem adaptar a apresentação para lê-la com segurança, levantando preocupações tanto sob a circular quanto sob as regras de proteção ao consumidor de serviços financeiros. Hospitais e prestadores de serviços de saúde que exibem instruções de dosagem, detalhes de consultas ou informações de pacientes em forma de imagem criam riscos à segurança de pacientes que não conseguem adaptar a renderização do texto.

Organizações que buscam preparar seus ativos digitais para futuras evoluções regulatórias — ou aquelas que buscam contratos de compras públicas que exijam liderança comprovada em acessibilidade — são fortemente aconselhadas a auditar e corrigir falhas em 1.4.9 como parte de um programa abrangente de acessibilidade. O SDK de overlay da Accsible pode ajudar com adaptação de texto em tempo de execução para alguns cenários legados de imagem de texto, mas a correção permanente em nível de código — substituindo imagens de texto por texto HTML real estilizado via CSS e web fonts — continua sendo a solução mais robusta e duradoura para conformidade de longo prazo.