Produits Entr'ouvert » w.c.s.

Le champ d'auto-complétion n'est pas compatible avec les technologies d'assistance, le design pattern Combobox est utilisé mais il n'est pas respecté :
• le role=combobox n’est pas au bon endroit, il devrait être sur la zone qu’on fait apparaitre et non sur le champ de formulaire qui permet de faire apparaitre le composant d’auto-complétion
• le composant qui qui permet d’afficher/masquer l’auto-complétion doit quant à lui respecter le motif de conception « disclosure »
• le champ de formulaire dans le composant d’auto-complétion n’a pas d’intitulé
• l’ordre de tabulation n’est pas cohérent : quand on clique sur le composant qui affiche et masque l’auto-complétion, on transporte bien le focus dans le composant d’auto-complétion, cependant ce composant se trouve tout à la fin du DOM, ce qui fait que l’ordre de tabulation n’est pas cohérent. Car si on souhaite sortir/fermer le composant d’auto-complétion, on retourne tout en haut de la page.

L'exemple suivant présente un exemple de système d'auto-complétion respectant le design pattern Combobox, il reste à adapter selon vos souhaits d'utilisation.

// Label du champ 
<label id="ville-label">
  Ville ou CP
</label>
// Zone de combobox
<div class="combobox-wrapper">
  <div role="combobox" 
       aria-expanded="false" 
       aria-owns="ville-listbox" 
       aria-haspopup="listbox" 
       id="ville-combobox">
// Input pour la saisie de l'autocomplétion
    <input type="text" 
           aria-autocomplete="both" 
           aria-controls="ville-listbox" 
           aria-labelledby="ville-label" 
           id="ville-input">
// 
    <button tabindex="-1" id="ville-combobox-arrow">
      <img src="imgs/arrow_drop_down_grey_27x27.png" alt="Déplier la liste des villes">
    </button>
  </div>
// Liste des options proposées en fonction de la sélection
  <ul aria-labelledby="ville-label" 
      role="listbox" 
      id="ville-listbox" 
      class="listbox hidden">
  </ul>
</div>

Ressource : https://www.w3.org/TR/wai-aria-practices-1.1/#combobox