Accessible search form mark-up

A brief checklist for marking-up an accessible search form. Last updated on 21 May 2020.

  • Add role="search" landmark to the <form>
  • Associate the <label> and <input> using for="…" and id="…"
  • Add type="search" or type="text" to the <input>
  • Add type="submit" to the <button>
  • Optionally, associate the <input> with any help text using aria-describedby="…"

Example

<form role="search">
    <label for="search">Search</label>
    <input id="search" type="search" aria-describedby="search-help-text">
    <button type="submit">Search</button>
    <p id="search-help-text">Search by town or postcode.</p>
</form>

More info