• Success Criterion 3.2.2
  • Conformance level A

Search Box That Auto-Navigates Once Enough Characters Are Typed

3.2.2 — On Input

Scenario

Setting

A community forum's discussion thread

What’s wrong

Typing in a search box auto-navigating to results page at N characters.

Example 

searchInput.addEventListener('input', () => {
  if (searchInput.value.length >= 3) {
    window.location.href = '/search?q=' + encodeURIComponent(searchInput.value);
  }
});

Why it matters

Typing the third letter of a search term navigates away immediately, so a user can never finish typing a longer, more precise query.

How to test

Type in a search box and stop typing (don't press Enter): if it auto-navigates to a results page after a certain number of characters, it fails.

How to fix

Trigger the search on form submission, either Enter or a Search button, not automatically after a character count threshold.

searchForm.addEventListener('submit', (e) => {
  e.preventDefault();
  window.location.href = '/search?q=' + encodeURIComponent(searchInput.value);
});

Outcome

A member types a full search phrase and presses Enter to see complete, relevant results.

Who is affected

Users with dyslexia or motor impairments who type in short bursts get redirected before finishing their intended search term.

Learn more

Related scenarios