<datalist>
Suggérer des options pendant la saisie, quand les lecteurs d'écran veulent bien
<datalist> — Les suggestions de saisie
La balise <datalist> fournit une liste de suggestions pour un <input>. L'utilisateur peut choisir une suggestion ou taper une valeur libre. C'est un hybride entre un champ texte et un <select>.
Quand l'utiliser
Tu veux proposer des suggestions sans forcer un choix : un champ pays, un champ ville, un champ de tags. L'utilisateur tape et la liste se filtre. Mais attention : le comportement varie entre navigateurs et les technologies d'assistance ont des problèmes documentés avec <datalist>.
Ce que tu gagnes
Accessibilité : en théorie, les lecteurs d'écran annoncent les suggestions. En pratique, NVDA + Firefox ne les expose pas correctement, JAWS les annonce de manière incohérente selon le navigateur, et TalkBack peut ignorer la liste entièrement. Le zoom à 400 % masque la liste déroulante, et le mode contraste élevé peut rendre les options illisibles. Teste systématiquement avant de déployer.
Exemple de code
<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>