Consulta de CNPJ é uma das poucas tarefas digitais no Brasil em que "abrir o navegador e digitar" virou regra. Cadastros, contratos, validação de fornecedor, due diligence, prospecção — tudo passa por alguma busca pública. E é justamente por ser tão cotidiano que o site precisa funcionar pra quem não está olhando para a tela com as duas mãos no mouse: leitor de tela ativo, navegação só com teclado, visão reduzida, daltonismo, ou simplesmente preferência por contraste alto.
O CNPJ Aberto é construído com isso em mente desde o começo. Este post é um mapa honesto: o que está pronto, como usar cada ferramenta com tecnologia assistiva e o que ainda está na lista pra melhorar.
Navegação só com teclado
Toda interação importante do site é acessível pela ordem natural do Tab. Não há armadilhas comuns de SPA — modais que prendem o foco, botões sem :focus visível, menus dropdown que só abrem no hover.
O que está em todas as páginas:
- Foco visível em todo elemento interativo. O contorno de foco usa a cor de destaque do tema (verde no claro, ajustada no escuro) com 2px de offset, então fica óbvio onde o teclado está parado, mesmo sobre fundos claros.
- Ordem de tabulação previsível. Header → busca → menu → conteúdo principal → ações da página → footer. Nenhuma navegação intermediária inserida via JavaScript.
Enterconfirma busca,Escfecha dropdowns. A barra de busca aceita CNPJ formatado (11.222.333/0001-44) ou só dígitos; oEnterenvia direto pra ficha quando o CNPJ é válido, ou pra/buscaquando é texto.- Sem captcha. Nunca houve. Captcha quebra leitor de tela e bloqueia teclado-only users sem qualquer ganho real de proteção contra abuso (rate-limit por IP resolve melhor).
Atalhos práticos no dia a dia
Não inventamos atalhos de teclado novos — eles costumam conflitar com o leitor de tela. Os atalhos úteis são os nativos do navegador, mas vale lembrar quando se está fazendo várias consultas seguidas:
| Ação | Atalho |
|---|---|
| Voltar para a busca | Tab até o topo, ou / em alguns navegadores |
| Abrir ficha em nova aba | Ctrl/Cmd + clique nos resultados |
| Pular pro próprio conteúdo | Tab 1–3 vezes a partir do topo |
| Copiar CNPJ formatado | Foco no badge → Enter |
O botão de copiar (que aparece ao lado do CNPJ no header da ficha, do número de telefone, do email e da razão social) é um <button> HTML padrão, anunciado pelo leitor de tela como "Copiar CNPJ" — não é só um ícone decorativo.
Leitor de tela: NVDA, VoiceOver, JAWS e TalkBack
A regra editorial do site é: o leitor de tela deve receber a mesma informação que a tela, sem texto truncado nem dado escondido em title que não é lido.
Como isso aparece na prática:
- Renderização no servidor (SSR). O HTML inicial já vem com razão social, CNPJ, situação cadastral, endereço, CNAE, sócios e contatos. Você não precisa esperar JavaScript hidratar pra ler o conteúdo. Isso é especialmente útil em conexões lentas e em screen readers mais antigos que pulam frames até a hidratação terminar.
- Ícones puramente decorativos têm
aria-hidden. Os emojis e SVGs dos badges (relógio do "5 anos de atividade", círculo do status) ficam invisíveis pro leitor — o texto do badge sozinho já carrega o significado, e ouvir "símbolo" três vezes seguidas atrapalha a leitura. - Botões só-de-ícone têm
aria-labelexplícito. O botão de WhatsApp na linha do telefone é anunciado como "Chamar no WhatsApp". O botão "Personalizar" do layout dos cards é anunciado como "Personalizar quais cards são exibidos". Nada de "botão sem nome". - Tabelas viram tabelas. O quadro societário, a distribuição etária dos sócios e a lista de filiais usam
<table>real com<th>quando faz sentido, não<div>empilhado com flexbox — então o leitor anuncia "tabela de 3 colunas e N linhas" e o usuário pode navegar célula a célula. - Idioma marcado no HTML. A página inteira é
lang="pt-BR", então leitores em modo bilíngue trocam pra fonética em português automaticamente.
Testamos manualmente com NVDA (Windows) e VoiceOver (macOS) em todas as rotas principais. JAWS e TalkBack seguem o mesmo padrão de ARIA, então funcionam pelo mesmo motivo — embora não façamos pass de teste recorrente neles. Se algo soar quebrado, abre uma issue na página de contato.
Tema escuro e contraste
O botão de tema (sol/lua) fica no canto superior direito do header. Ele alterna entre claro e escuro e persiste a escolha em localStorage, então não muda toda vez que você abre o navegador.
Por que isso importa pra acessibilidade:
- Fadiga visual. Tema escuro reduz brilho geral, útil pra quem usa o site horas seguidas em ambiente com pouca luz.
- Sensibilidade à luz (fotofobia). Comum em quadros de enxaqueca, dano retiniano e algumas condições oftalmológicas. O escuro tira a maior parte do fundo branco que dispara crise.
- Daltonismo. Os indicadores de status (Ativa, Baixada, Suspensa, Inapta) usam cor e texto, nunca cor sozinha. "Verde" e "vermelho" são reforçados pelo nome do estado, então quem não distingue as duas cores ainda lê o significado.
O contraste das duas paletas (claro e escuro) foi calibrado pra ficar acima do mínimo WCAG AA (4.5:1 pra texto normal, 3:1 pra texto grande) em todos os elementos textuais. Onde isso não é verdade ainda — pequenas legendas auxiliares em text-ink-tertiary sobre bg-surface-2, em alguns badges discretos — está no roadmap próximo de revisão.
Movimento e animação
Animações no site são todas curtas (≤200ms) e funcionais — hover de botão, suavização de modal entrando, spinner de loading. Nada de scroll-jacking, parallax ou auto-play de carrossel.
Para quem prefere zero animação, o CSS respeita prefers-reduced-motion: reduce do sistema. Se você marcou "Reduzir movimento" nas configurações do macOS, Windows ou Android, todas as animações caem pra 0.01ms (efetivamente instantâneas). Sem precisar configurar nada no site.
Como cada ferramenta funciona com tecnologia assistiva
O site não é só a busca de CNPJ — tem um conjunto de ferramentas pra cenários diferentes. Aqui está como cada uma se comporta com teclado e leitor de tela:
| Ferramenta | Como abrir | Pontos de acessibilidade |
|---|---|---|
Consulta de CNPJ (/cnpj/[cnpj]) | Digite o CNPJ na busca principal e Enter | SSR completo; cards anunciados como <section> com <h2>; copy buttons rotulados; ordem do Tab segue ordem visual |
Grupo empresarial (/cnpj/[cnpj]/grupo-empresarial) | Na ficha → link Página dedicada no card Grupo Empresarial, ou acrescente /grupo-empresarial à URL da ficha | Cabeçalho SSR com main e título; grafo SVG com zoom (roda do mouse) e botões com title; link Voltar retorna à mesma ficha |
| Busca avançada | Menu → "Busca Avançada de Empresas" | Cada filtro é um <label> associado ao campo; multi-select de UF e CNAE é navegável por teclado; resultados em <ul> com <li> |
| Busca avançada de sócios | Menu → "Busca Avançada de Sócios" | Mesma base; nomes mascarados pela RF (LGPD) são anunciados conforme aparecem |
| Consulta em lote | Menu → "Consulta em Lote" | Textarea para colar até N CNPJs; progresso reportado por aria-live region; export como CSV mantém estrutura tabular |
| Raio-X de Pessoa | Menu → "Raio-X de Pessoa" | Lista de empresas e co-sócios em links navegáveis; sem dependência de hover |
| Rede societária | Menu → "Rede Societária" | Mapa SVG tem fallback em lista quando o usuário tem prefers-reduced-motion ativo |
| Validar CNPJ / Gerador de CNPJ | Menu → "Validar CNPJ" / "Gerador de CNPJ" | Formulários simples; resultado anunciado via aria-live (válido / inválido) |
| Empresas por cidade | Menu → "Empresas por Cidade" | Autocomplete de cidade navegável por seta cima/baixo + Enter |
| Sócios em comum | Menu → "Sócios em Comum" | Adiciona CNPJs em chips removíveis com Backspace; resultado em tabela ordenável |
| API REST + SDKs (Python, Node) + MCP | Sem UI | Saída JSON estruturada — formato nativamente acessível, independe de renderização visual |
A linha da API e MCP merece destaque: se um usuário com deficiência visual prefere uma experiência conversacional, dá pra plugar o servidor MCP do CNPJ Aberto no Claude Desktop e perguntar coisas como "consulta o CNPJ X e me lê o status, os sócios e o capital social". O leitor de tela ouve a resposta em prosa em vez de navegar a UI. Não substitui a página acessível, mas amplia o repertório de como obter o dado.
Onde ainda dá pra melhorar (e o que está no roadmap)
Acessibilidade não é estado final — é processo. Coisas que reconhecemos como faltando ou imperfeitas hoje:
- Skip link "Pular para o conteúdo principal". Hoje o usuário de teclado precisa tabular por uns 5–8 elementos do header antes de chegar ao
<main>. Skip link visível só com foco está no próximo ciclo de melhorias. - Contraste em legendas auxiliares. Alguns textos em
text-ink-tertiary(legendas pequenas dentro de cards) ficam no limite do mínimo WCAG AA — funcionam, mas confortavelmente acima do limite seria melhor. - Auditoria automatizada em CI. Rodamos lighthouse pontualmente e
axe-coreem desenvolvimento, mas não há ainda um gate no pipeline que bloqueia PR com regressão de a11y. Está sendo desenhado. - Tradução de
altem SVGs decorativos. Onde existe SVG comaria-hidden, está coberto. Em ilustrações que carregam informação (mapa de rede societária, gráficos de panorama), os equivalentes textuais ainda precisam ser revisados caso a caso. - PDF gerado. O relatório PDF (botão "Relatório PDF" na ficha) é estruturado, mas não passa por validação rigorosa de PDF/UA. Pra uso oficial em requisitos de acessibilidade legal, recomendamos extrair os dados via API e gerar PDF próprio com ferramenta certificada.
Se você usa leitor de tela ou teclado-only no dia a dia e topa algo quebrado, é o tipo de bug que tem prioridade máxima — abra um chamado pelo contato ou pelo formulário no canto inferior direito de qualquer página.
Perguntas frequentes
O CNPJ Aberto é conforme com WCAG?
Seguimos as recomendações da WCAG 2.1 nível AA como linha de base: contraste mínimo, foco visível, navegação por teclado, lang no documento, ARIA labels em controles sem texto, respeito a prefers-reduced-motion. Não fizemos ainda uma auditoria formal externa que emita certificado de conformidade. Para uso em contextos que exigem certificação (licitações públicas, contratos com Lei Brasileira de Inclusão), considere fazer auditoria própria sobre as páginas que vão entrar no escopo.
Funciona com NVDA, VoiceOver, JAWS e TalkBack?
Sim. NVDA e VoiceOver passam por teste manual em todas as releases que tocam UI principal. JAWS e TalkBack consomem os mesmos atributos ARIA, então funcionam pelo mesmo motivo, mas confessamos que o ciclo de teste com esses dois é menos regular. Reportes ajudam.
Tem como navegar tudo só com teclado?
Sim. Toda ação que existe em hover/clique existe via Tab → Enter (ou Espaço em alguns toggles). Modais e dropdowns prendem o foco enquanto abertos e devolvem pra origem ao fechar com Esc. Se você encontrar um elemento inalcançável por teclado, é bug.
O tema escuro tem alto contraste real?
A paleta escura tem contraste WCAG AA em todo o texto significativo. Não é exatamente um "modo alto contraste" no sentido OS (preto puro com texto branco puro), porque preto puro causa halos visuais ao redor do texto pra muitos leitores. Se você prefere modo de alto contraste nativo (Windows High Contrast Mode, macOS Increase Contrast), o site herda o esquema do sistema operacional respeitando forced-colors.
Os dados de sócios são lidos por inteiro pelo leitor de tela?
Os nomes vêm mascarados pela própria Receita Federal por força da LGPD (***1234**, sem nome completo em CPF). O leitor de tela lê o que aparece na tela, sem ocultar nada — mas o que aparece é o que a RF disponibiliza publicamente. Para consulta de Pessoa Jurídica como sócia (PJ), o CNPJ completo é lido normalmente.
Posso consultar CNPJ sem usar a interface gráfica?
Sim, três caminhos:
- API REST com
X-API-Key, plano gratuito de 1.000 requisições/dia. - SDK Python ou Node/TypeScript.
- Servidor MCP no Claude Desktop — pergunta em linguagem natural, ouve a resposta. Especialmente útil pra fluxo conversacional com leitor de tela.
O site funciona com zoom em 200%?
Sim. Todo layout é responsivo até zoom 400% em desktop sem perda de funcionalidade (WCAG SC 1.4.4 e 1.4.10). Em zoom alto, o layout cai pra coluna única — os cards reflowam, nada se sobrepõe.
Se este post deixou de cobrir alguma fricção real que você vive no site, manda pelo contato. A acessibilidade só melhora com feedback de quem usa de fato.