Video examples

iOS Voiceover

Android Talkback

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

Search with autocomplete suggestions

<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