"Acessível com VLibras" — e ilegível para todos

A Prefeitura de Florianópolis publicou um alerta sobre golpes financeiros no seu site. O aviso é uma imagem — invisível para leitores de tela. Ao abrir o VLibras, o widget de acessibilidade obrigatório do governo, o avatar fica parado e pede: "clique em um texto para traduzi-lo". Não há texto. Auditoria assistida por IA, validada à mão.

Papel
UX & Accessibility Designer
Tipo
Auditoria real
Alvo
pmf.sc.gov.br
Método
IA + validação

O problema

Um alerta sobre golpes tem um público óbvio: quem corre mais risco de cair neles. E entre os mais expostos ao phishing está quem não consegue inspecionar visualmente uma URL — pessoas cegas e com baixa visão.

É exatamente esse público que o aviso da Prefeitura não alcança. Não por descuido de conteúdo, mas por uma decisão de implementação que ninguém questionou.

A evidência

O mesmo modal, dois momentos

pmf.sc.gov.br
PREFEITURA DE
FLORIANÓPOLIS

Widget recolhido — já cobre "links"

pmf.sc.gov.br
PREFEITURA DE
FLORIANÓPOLIS

Tooltip expandido — cobre "SEGURANÇA" e o miolo do aviso

A ferramenta de acessibilidade anuncia a própria acessibilidade por cima do conteúdo que deveria tornar acessível.

Achado 1

O aviso inteiro é um PNG

Título, instruções, domínios oficiais — todo o texto está rasterizado dentro de uma imagem. Para um leitor de tela, é o vazio absoluto. Para quem usa zoom, o texto não reflui: borra.

A origem é conhecida: o material foi feito para redes sociais e reaproveitado no site. O que funciona no Instagram vira barreira num portal público.

WCAG 1.1.1 · Nível AConteúdo não textual

Informação essencial transmitida exclusivamente por imagem, sem alternativa textual equivalente.

Detectado pela IA
WCAG 1.4.5 · Nível AAImagens de texto

Texto apresentado como imagem quando poderia ser texto real — impedindo redimensionamento, alto contraste e personalização.

Detectado pela IA
WCAG 2.2.1 / 1.4.10Refluxo e escala

Em 320px de largura, o texto da imagem não reflui — o usuário precisa rolar em dois eixos para ler um aviso de segurança.

Detectado pela IA

Achado 2 · O que nenhuma ferramenta pega

O selo cobrindo a mensagem

O VLibras é exigido por lei em portais públicos. Está lá, visível, cumprindo o requisito formal. E aqui a auditoria automatizada passa em branco: nenhum validador detecta um elemento flutuante tapando o conteúdo — no DOM, nada está errado. A sobreposição é um fato visual, não estrutural.

Pior: o VLibras traduz texto para Libras. Como o aviso é uma imagem, ele não tem o que traduzir — e falha justamente com quem depende dele: a pessoa surda que tem Libras como primeira língua.

WCAG 2.4.11 / 1.4.13Obscurecimento de conteúdo

Elemento persistente da interface cobre conteúdo essencial, sem que o usuário possa reposicioná-lo ou dispensá-lo.

Só a validação manual pegou

A prova

A ferramenta pede um texto que não existe

Abri o VLibras. O que aconteceu foi mais eloquente do que qualquer relatório: o avatar apareceu parado, sem sinalizar nada — e o painel exibiu a instrução que encerra o caso.

🅰VLIBRAS
👤?

avatar em repouso — nada a traduzir

"Clique em um texto para traduzi-lo."

Não há texto. Há um PNG.

A instrução é literal: o VLibras traduz texto. Ele varre o DOM procurando conteúdo textual e, no modal, encontra o nada — porque tudo, do título aos domínios oficiais, está rasterizado dentro de uma imagem.

O avatar fica de braços cruzados, esperando um clique que nunca vai funcionar. É a conformidade em estado puro: a ferramenta instalada, visível, operante — e entregando zero. Com o painel aberto, ela ainda passa a cobrir a maior parte do alerta, inclusive os domínios oficiais.

O arquivo de origem confirma: um PNG único, com texto e ilustração achatados na mesma camada — material feito para redes sociais e reaproveitado no portal. A barreira não nasceu no código. Nasceu na exportação.

Achado 3

Quem recebe o quê

A soma das duas falhas produz um resultado que nenhum relatório de conformidade mostraria:

UsuárioO que efetivamente recebe do aviso
Pessoa cega (leitor de tela)Nada. A imagem não tem alternativa textual.
Pessoa com baixa visãoTexto que não escala — e agora coberto pelo widget.
Surda, Libras como 1ª línguaNada. O VLibras não tem texto para traduzir. A ferramenta feita para ela é inútil aqui.
Surda, leitora de portuguêsRecebe o aviso normalmente — sem barreira.
Qualquer pessoaO aviso coberto pelo próprio widget de acessibilidade.

O portal está formalmente conforme — tem o widget exigido por lei. Mas a ferramenta instalada não funciona nesta tela, e a exclusão mais grave (a pessoa cega, que não recebe absolutamente nada) não tem ferramenta nenhuma que a resolva.

O insight

Conformidade não é acessibilidade. E às vezes é o disfarce dela.

O widget permite marcar o item na checklist e encerrar o assunto — produz a sensação de dever cumprido, e é essa sensação que impede a pergunta seguinte: a mensagem chegou em alguém? O avatar parado, pedindo um texto que não existe, é o retrato disso. Acessibilidade não se instala: se decide na hora de criar o conteúdo.

Onde a IA acertou e onde falhou

O limite da auditoria automatizada

Rodei a auditoria com IA e validei à mão — teclado e leitor de tela. A divisão do trabalho foi nítida:

✓ A IA pegou (em minutos)
  • Texto embutido em imagem (1.1.1, 1.4.5)
  • Ausência de alternativa textual
  • Falha de refluxo em telas estreitas
  • Contraste do amarelo sobre o fundo
  • Tamanho do alvo de toque do "×"
✗ A IA não viu
  • O widget cobrindo o texto — no DOM, nada está errado
  • Que o VLibras é inútil aqui — não há texto para traduzir
  • A gravidade do contexto — um aviso de golpe que exclui quem não pode conferir a URL

A IA acerta o mensurável. Contraste é matemática; alt text ausente é uma checagem booleana. Mas ela não sabe o que aquele conteúdo significa para quem depende dele.

A correção

O mesmo aviso, acessível

A solução não é sofisticada. É texto real.

⚠ Alerta de segurança

Cuidado com golpes em nome da Prefeitura

Desconfie de mensagens suspeitas, links desconhecidos e boletos de origem duvidosa.

Antes de fornecer informações ou realizar pagamentos, confirme se o domínio é oficial: pmf.sc.gov.br ou floripa.sc.gov.br

Entendi Saiba mais
Texto real em HTML · headings semânticos · foco preso no modal · Esc fecha · widget reposicionado

O leitor de tela lê o aviso inteiro; o texto reflui e escala; o VLibras finalmente tem o que traduzir; e a mensagem para de ser coberta. O conteúdo é idêntico — mudou a decisão de implementá-lo como texto, não como figura.

Decisões

Três mudanças, uma sistêmica

01Texto real em vez de imagem — sempreEsforço baixo

Nenhum aviso ou informação essencial em portal público deve viver dentro de um PNG. A arte pode ilustrar; o texto tem que ser texto.

Hipótese
Em HTML semântico, o conteúdo alcança leitores de tela, o VLibras, buscadores e usuários de zoom — de uma vez só.
Métrica
Violações WCAG A/AA na tela: ~4 → 0 · aviso legível por leitor de tela: 0% → 100%
02Reposicionar o widget e testar com conteúdo realEsforço baixo

O widget não pode sobrepor conteúdo. Precisa de área segura, e o teste de sobreposição deve entrar no checklist de publicação — em mobile, não só no desktop.

Hipótese
Testando na largura real dos usuários (mobile domina o acesso a serviços públicos), o obscurecimento aparece antes de ir ao ar.
Métrica
Aviso coberto pelo widget em 360px: ~35% (recolhido) e ~70% (aberto) → 0%
03Mudar a régua: de "temos o widget" para "a mensagem chegou?"Esforço cultural

A falha raiz não é técnica: é a régua de sucesso. Instalar a ferramenta virou sinônimo de ser acessível. Enquanto a pergunta for "estamos conformes?", a resposta será sim — e o cego continuará sem o aviso.

Hipótese
Um teste real com leitor de tela antes de publicar responde à pergunta certa: a mensagem chegou?
Métrica
Comunicados críticos testados com leitor de tela antes de publicar: 0% → 100%

Takeaways

O selo pode ser o disfarce

Uma ferramenta de acessibilidade visível cria a sensação de dever cumprido — e essa sensação é o que impede a pergunta seguinte.

Auditoria automatizada tem um teto

A IA pega o que é mensurável no DOM. Sobreposição visual e inutilidade contextual ficam invisíveis para ela.

Acessibilidade se decide na criação, não na correção

A barreira nasceu quando alguém exportou um PNG feito para o Instagram. Nenhuma ferramenta instalada depois conserta isso.

IA acelera, o designer decide

A auditoria assistida cortou horas de checagem. Mas foi o julgamento humano que viu o widget tapando a palavra — e entendeu o que isso significa para quem depende do aviso.

Nota. Auditoria independente da versão pública do site, em julho de 2026, com intenção construtiva. O alerta da Prefeitura é uma iniciativa correta e necessária — o problema está na implementação, e a correção é simples e barata. Recomenda-se validação com usuários reais de tecnologia assistiva antes de qualquer alteração em produção.