✎ Technique: Site search

Example

To maximize comprehension for people scanning the page visually, you should provide a text field with a helpful placeholder and a suitably labelled button (such as "search") rather than a symbol or icon. The search feature should appear above the main content of the page, typically inside or below the page header and navigation.

In terms of markup, there are some specifics you should take into account, as shown in this snippet:

<div role="search">
  <form>
    <label for="search" class="vh">Search the site</label>
    <input type="text" id="search" placeholder="Eg. chocolates" />
    <button type="submit">search</button>
  </form>
</div>

Notes

• There is a hidden <label> for screen reader users that is announced when they focus the input. This can be hidden using an accessible hiding technique like:

  .visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
  }
  

  Placeholder attributes are not reliably read in assistive technologies, and since the "search" label of the button will not have been focused first, this is the most reliable way to tell the user what the input is for.

• The search form is placed within a role="search" region. This means screen reader users should be told they are in a search region when they focus the input. It also means that the area will turn up in "landmarks" (regions) navigation dialogs, and it can be reached using keyboard shortcuts such as the "r" key in JAWS.
• For browsers that support placeholder styling, the text color should be made a darker gray than is often the browser default, allowing for easier reading.