Français

<datalist>

Suggest options while typing, when screen readers cooperate

— 1 min read

  • HTML
  • accessibility
  • semantics
  • forms

<datalist> — The input suggestions

The <datalist> element provides a list of suggestions for an <input>. The user can pick a suggestion or type a free value. It is a hybrid between a text field and a <select>.

When to use it

You want to offer suggestions without forcing a choice: a country field, a city field, a tags field. The user types and the list filters. But be careful: behavior varies between browsers, and assistive technologies have documented problems with <datalist>.

What you gain

Accessibility: in theory, screen readers announce the suggestions. In practice, NVDA + Firefox does not expose them correctly, JAWS announces them inconsistently depending on the browser, and TalkBack may ignore the list entirely. Zooming to 400% hides the dropdown, and high contrast mode can make options unreadable. Test systematically before deploying.

Code example

<label for="browser">Preferred browser:</label>
<input list="browsers" id="browser" name="browser">
 
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Further reading