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:
  <input list="components" type="search" id="search">
  <datalist id="components"> 
    <option value="Alert"> 
    <option value="Animation"> 
    <option value="Button"> 
    <option value="Checkbox">
    <option value="Date picker">
    <option value="Expander accordion">
    <option value="Footer / contentinfo">
    <option value="Form">
    <option value="Header / banner">
    <option value="Heading: h1, h2, h3">

  <button type="submit">
    <span class="hidden">Search</span>

Developer notes


  • 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


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


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


  • Focus must be visible