Gli accordion, o sezioni comprimibili, sono un pattern molto diffuso nelle interfacce web. Permettono di organizzare grandi quantità di contenuti in poco spazio, migliorando la leggibilità e la navigazione della pagina. Hanno tuttavia un limite importante: il testo contenuto nelle sezioni chiuse non è individuabile tramite la funzione "Trova nella pagina" del browser.

Questo problema non riguarda soltanto l'esperienza utente: impedisce anche la creazione di link a frammenti di testo interni e può influenzare l'indicizzazione da parte dei motori di ricerca.

L'attributo HTML hidden=until-found è stato progettato proprio per risolvere questo tipo di problema. Quando applicato a un elemento nascosto, permette al browser di cercare il testo al suo interno, anche se non è visibile, e notificare la sezione se la ricerca trova una corrispondenza.

A livello tecnico, a differenza di hidden (che implica display:none), hidden=until-found applica content-visibility: hidden (documentato nei precedenti script). Ciò permette al browser di evitare il rendering visivo dell'elemento, pur mantenendolo nel layout concettuale del documento.

Il documento, nel momento della ricerca, emetterà un evento beforematch quando il browser proverà ad evidenziare un risultato trovato nella pagina, intercettandolo possiamo gestirne la visualizzazione

<section hidden="until-found" id="dettagli">
  <p>Questo contenuto può essere trovato con la ricerca.</p>
</section>

<script>
  document.querySelector('#dettagli').addEventListener('beforematch', () => {
    document.querySelector('#dettagli').hidden = false;
  });
</script>