<search>, inert, until-found

<search> wraps a search or filter form and gives it the search landmark role, so screen reader users can jump to it as they jump to <nav> or <main> (see Outline and Landmarks). It replaces <form role="search">, is purely semantic, and still needs the <form> inside it. Use it for site search and on-page filters, not for the results. It is Baseline Widely available since April 2026.

inert is a global boolean attribute that makes a whole subtree non-interactive: its elements cannot be clicked, focused, selected or found by find-in-page, and they leave the accessibility tree. It is what showModal() applies to the rest of the page, available for a form while it submits, a closed off-canvas menu or hidden carousel slides. It adds no visual change, so pair it with a style such as reduced opacity. inert is Baseline Widely available since October 2025.

hidden="until-found" hides content like hidden, but lets the browser reveal it when find-in-page (Ctrl+F) or a URL fragment such as #refunds targets it. The browser fires a beforematch event on the element, removes the hidden attribute and scrolls to the match. Support is still limited (Chrome 102 1 and Firefox 148 555 , not Safari 10 ); elsewhere the content simply stays hidden, so reserve it for supplementary text.

A help page combining a search landmark, an inert panel and until-found contentHTMLLive

<style>
  body { font: 15px system-ui; margin: 16px; }
  [inert] { opacity: .45; }
  section { border: 1px solid #cfd8dc; padding: 0 12px; margin-top: 8px; }
  .found { background: #fff3e0; }
</style>
<search>
  <form action="/help/search">
    <label>Search help <input name="q" type="search" value="refund"></label> <button>Go</button>
  </form>
</search>
<section inert>
  <h3>Your orders (loading…)</h3>
  <button>Cancel order</button> <a href="/orders">View all</a>
</section>
<section>
  <h3>Returns</h3>
  <p>Return any item within 30 days.</p>
  <p id="refunds" hidden="until-found">Refunds reach your card within 5 business days.</p>
</section>
<script>
  const extra = document.getElementById('refunds');
  extra.addEventListener('beforematch', () => extra.classList.add('found'));
  location.hash = '#refunds'; // fragment navigation, like following a link to /help#refunds
</script>

Browser output of 37

The orders panel is faded and its controls cannot receive focus. The refund sentence started hidden, but navigating to #refunds fired beforematch (which highlighted it) and revealed it.

Pitfalls: move focus out before making its container inert, or keyboard users are stranded; and never use hidden="until-found" for content that must stay private, since it is searchable by design.

MENU