Code example

<label for="listbox-input"
       id="example-label">
  Choose your favorite NATO letter
</label>
<div role="combobox"
     aria-expanded="false"
     aria-owns="listbox-input"
     aria-haspopup="listbox"
     id="example-combobox">

  <input type="text"
         aria-autocomplete="list"
         aria-controls="input-listbox"
         id="input-listbox">

</div>
<ul aria-labelledby="example-label"
    role="listbox"
    id="example-listbox">
    <li role="option">Alpha</li>
    <li role="option">Bravo</li>
    <li role="option">Charlie</li>
</ul>

Developer notes

Name

  • Purpose must be clear from the label

Role

  • Use role="combobox" for the input
  • Use role="listbox" for the list of options
  • Use role="option" for the individual options

State

  • Use aria-expanded="true/false" on the text input to indicate the state of the list

Group

  • Use aria-haspopup="true" on the text input to indicate there is a popup

Focus

  • Focus must be visible

Documentation