Semantic Form Landmarks with the HTML5 search Element

For years, creating an accessible search landmark required adding explicit ARIA roles to generic containers, most commonly through <form role="search"> or <div role="search">. While functional, relying on ARIA attributes to describe fundamental document structure violates the first rule of ARIA—use native HTML semantics whenever they exist.

The native <search> element fills this missing piece of the HTML5 landmark specification. It provides a standardized container representing a search or filtering section, mapping automatically to the search landmark role in assistive technology trees across modern browsers.

Example #

<search>
  <form action="/search" method="get">
    <label for="site-search">Search documentation</label>
    <input
      type="search"
      id="site-search"
      name="q"
      placeholder="Search guides, components..."
      autocomplete="off"
    />
    <button type="submit">Search</button>
  </form>
</search>

Implementation #

<!-- Site-wide header search landmark with instant filter suggestions -->
<header class="site-header">
  <a href="/" class="brand-logo">Documentation</a>

  <search class="search-landmark" aria-label="Documentation search">
    <form action="/search" method="get" class="search-form" role="search">
      <!-- Fallback role="search" ensures full compatibility with legacy screen readers -->
      <div class="search-input-group">
        <label for="doc-query" class="visually-hidden">Search all topics</label>
        <input
          type="search"
          id="doc-query"
          name="query"
          placeholder="Filter documentation..."
          aria-autocomplete="list"
          aria-controls="search-suggestions"
          autocomplete="off"
          spellcheck="false"
        />
        <button type="reset" class="clear-btn" aria-label="Clear query">
          &times;
        </button>
      </div>

      <ul id="search-suggestions" class="suggestions-list" hidden>
        <!-- Dynamic search results populated via script -->
      </ul>

      <button type="submit" class="submit-btn">Search</button>
    </form>
  </search>
</header>

Main Point: The native search element creates an accessible search landmark in the accessibility tree without needing redundant ARIA role annotations.

Credits #

Photo by Gabor Koszegi on Unsplash

← Home