Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default. Include a search button.

<form role="search" action="/search/">
  <label for="search">
    Search this website:
  </label>
  <input type="search" id="search">
  <button type="submit">
    <span class="hidden">Search</span>
  </button>
</form>

Developer notes

Name

  • Use a label with a for="input-id to describe the input
  • Use aria-label="Search this website" if a label can’t be used

Role

  • Use role="search" for the <form>
  • Use type="search" for the text <input>

Group

  • Form identifies itself as role="search"
  • Include a search submit button.

Focus

  • Focus must be visible