hidden="until-found": Conteúdo Escondido que a Busca Encontra

Esconder um bloco de conteúdo (um accordion, um "leia mais", uma seção colapsada) sempre teve um efeito colateral ruim: o Ctrl+F do navegador não encontra nada que esteja dentro de um elemento com display: none. O valor until-found do atributo hidden resolve exatamente isso — o conteúdo continua escondido visualmente, mas passa a ser encontrável pela busca nativa da página e por navegação por âncora, sem precisar de nenhum JavaScript para isso funcionar.

O jeito antigo

<h2>Perguntas frequentes</h2>

<button id="botao">Como faço para cancelar minha assinatura?</button>
<div id="resposta" style="display: none;">
    Acesse Configurações > Assinatura e clique em "Cancelar".
</div>

Com display: none, o texto "cancelar minha assinatura" simplesmente não existe para o mecanismo de busca do navegador. Se o usuário pressionar Ctrl+F e procurar por esse trecho, nada é encontrado — mesmo a resposta estando ali, na página.

Como funciona o hidden="until-found"

Basta trocar o valor booleano de hidden pela string until-found:

<h2>Perguntas frequentes</h2>

<button>Como faço para cancelar minha assinatura?</button>
<div hidden="until-found">
    Acesse Configurações > Assinatura e clique em "Cancelar".
</div>

Por baixo dos panos, o navegador aplica algo equivalente a content-visibility: hidden em vez de display: none. O elemento continua fora da tela e não ocupa espaço visualmente, mas seu conteúdo permanece indexado para a busca em página. Ao encontrar o termo procurado, o navegador remove o atributo hidden automaticamente, revela o elemento e rola a página até ele.

O evento beforematch

Um instante antes de revelar o conteúdo encontrado, o navegador dispara o evento beforematch no próprio elemento. É o gancho ideal para, por exemplo, atualizar o ícone de um accordion ou carregar dados que só existiam de forma resumida:

const resposta = document.getElementById('resposta');

resposta.addEventListener('beforematch', () => {
    document.getElementById('seta').textContent = '▼';
});

Note que o beforematch só dispara quando o elemento é revelado pela busca ou por navegação de fragmento — um clique direto no botão que remove o hidden via JavaScript não passa por esse evento.

Combinando com um accordion controlado por clique

Nada impede de usar until-found como estado inicial e ainda controlar a abertura manualmente com um clique, alternando entre until-found e a remoção completa do atributo:

const botao = document.getElementById('botao');
const resposta = document.getElementById('resposta');

botao.addEventListener('click', () => {
    if (resposta.hidden) {
        resposta.hidden = false;
    } else {
        resposta.hidden = 'until-found';
    }
});

Assim o bloco continua pesquisável mesmo fechado, e o clique manual funciona normalmente por cima disso.

Navegação por âncora

O mesmo mecanismo vale para links de fragmento (#id). Se o destino de um link estiver dentro de um elemento hidden="until-found", o navegador revela o elemento e rola até ele automaticamente, sem precisar de código extra para "abrir" a seção antes de navegar:

<a href="#detalhes-tecnicos">Ver detalhes técnicos</a>

...

<div hidden="until-found">
    <h3 id="detalhes-tecnicos">Detalhes técnicos</h3>
    <p>Conteúdo que só aparece quando alguém navega até aqui.</p>
</div>

Quando usar

• FAQs e accordions onde as respostas devem ser encontráveis pelo Ctrl+F, mesmo fechadas.
• Seções de "leia mais" ou conteúdo longo colapsado por padrão.
• Documentação técnica com blocos recolhíveis que precisam continuar indexáveis por busca em página e por mecanismos de busca externos.
• Qualquer lugar que hoje usa display: none só para economizar espaço visual, mas onde o conteúdo escondido ainda é relevante.

Cuidados

Em navegadores sem suporte, until-found é ignorado e o elemento se comporta como um hidden comum (equivalente a display: none) — o conteúdo simplesmente fica invisível e não aparece na busca, sem quebrar o restante da página. Vale também lembrar que until-found não substitui um accordion acessível feito com <details> ou com atributos ARIA quando o objetivo principal é a interação por clique; ele resolve especificamente o problema da busca em conteúdo escondido.

Compatibilidade

O suporte já existe nos navegadores baseados em Chromium desde a versão 102 e vem sendo adotado pelos demais motores, mas vale conferir a tabela atualizada antes de depender dele como única forma de exibir um conteúdo importante.

caniuse

Conclusão

O hidden="until-found" resolve um problema real e antigo de acessibilidade e usabilidade — conteúdo escondido que devia ser encontrável — com uma única mudança de atributo, sem exigir uma reescrita de como o accordion ou a seção colapsada já funciona.