Missing Search Functionality

What is this?

Walk into a library with ten thousand books but no card catalog, no computer system, and no librarian. The book you need is in there somewhere, but your only option is to browse every shelf. That is what your content-heavy website feels like without a search function. Search lets visitors skip the browsing and go straight to what they need. For sites with more than a handful of pages — blogs, documentation, product catalogs, knowledge bases — search is not a luxury feature. It is how the majority of people actually find things.

Why it matters

• For your visitors: Research by Jakob Nielsen showed that over 50% of website visitors are "search-dominant" — they look for a search box as the first thing they do, ignoring navigation entirely. These people know what they want. If you do not give them a search box, you are forcing search-dominant users to use a navigation system they actively dislike. They will leave and search on Google instead (where they might find your competitor).
• For your business: Every product someone cannot find is a product someone cannot buy. Every help article someone cannot find is a support ticket you have to answer manually. Search directly impacts revenue and support costs. Sites with search typically see 2-3x higher engagement from visitors who use it, because search users have high intent — they know what they want and they are ready to act.
• The standard: WCAG 2.4.5 requires "more than one way to locate a page within a set of pages." Navigation menus are one way; search is another. For sites with more than 20 or so pages, navigation alone is insufficient — you need search to truly satisfy this requirement. Google also considers site search a positive UX signal.

<header>
  <nav aria-label="Main">
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </nav>
  <form role="search" action="/search" method="get">
    <label for="site-search" class="sr-only">Search</label>
    <input
      type="search"
      id="site-search"
      name="q"
      placeholder="Search docs..."
      aria-label="Search the documentation"
    />
    <button type="submit">Search</button>
  </form>
</header>

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
    <a href="/blog">Blog</a>
    <!-- 200+ pages of content, no search bar -->
    <!-- Hope you enjoy clicking! -->
  </nav>
</header>

How to fix it

React / Next.js

Start with a basic search form that redirects to a results page. You can enhance it later with instant search.

// src/components/search.tsx
"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

export function Search() {
  const router = useRouter();
  const [query, setQuery] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (query.trim()) {
      router.push(`/search?q=${encodeURIComponent(query.trim())}`);
    }
  };

  return (
    <form role="search" onSubmit={handleSubmit} className="relative">
      <label htmlFor="site-search" className="sr-only">
        Search
      </label>
      <input
        type="search"
        id="site-search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
        className="h-9 w-48 border bg-transparent px-3 text-sm placeholder:text-gray-400 focus:w-64 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all"
      />
    </form>
  );
}

For bonus points, add a Cmd+K keyboard shortcut that opens a search dialog — power users will love you for it. Libraries like cmdk make this trivial to implement.

Plain HTML

<!-- Add to your header -->
<form role="search" action="/search" method="get">
  <label for="search" class="sr-only">Search this site</label>
  <input
    type="search"
    id="search"
    name="q"
    placeholder="Search..."
    style="
      height: 36px;
      padding: 0 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 14px;
    "
  />
  <button type="submit" style="min-height: 36px; padding: 0 12px;">Search</button>
</form>

The essentials: use role="search" on the form, type="search" on the input (which gives mobile users a search-optimized keyboard), a visible <label> or aria-label, and place it in or near your header where people expect it. For the backend, even a basic full-text search over your content is better than no search at all.

How the cat scores this

The scanner checks for the presence of a search form (identified by role="search", type="search" inputs, or form actions pointing to search-related URLs). The severity depends on site size: a 3-page portfolio without search is fine; a 50-page documentation site without search is a serious problem. The scanner estimates content volume by counting internal links and page depth. Sites above the threshold without any search mechanism get flagged. Bonus points for keyboard shortcuts (Cmd+K) and visible placement in the header.

Further reading

• Nielsen Norman Group: Search Is Not Enough — when to use search vs. navigation (you need both)
• WCAG 2.4.5: Multiple Ways — the standard requiring multiple ways to find content
• MDN: input type="search" — technical reference for search inputs