select-a11y transforms multi select into suggestions list with search input. It is compliant with Web Content Accessibility Guidelines (WCAG) and General repository for improving accessibility (Référentiel général d'amélioration de l'accessibilité - RGAA).

Demo

Example 1

Example 2

As seen in this second example, one or more option may have already an attribute selected in source.

To be transformed by select-a11y.js, the select element must be passed to the Select() constructor:

new Select(HTMLSelectElement);

Accessibility texts can be passed; the following texts are the defaults:

new Select(HTMLSelectElement, {
  text:{
    help: 'Utilisez la tabulation (ou la touche flèche du bas) pour naviguer dans la liste des suggestions',
    placeholder: 'Rechercher dans la liste',
    noResult: 'Aucun résultat',
    results: '{x} suggestion(s) disponibles',
    deleteItem: 'Supprimer {t}',
    delete: 'Supprimer'
  }
});

The simpliest way to use the plugin is to add a data-attribute on the selects that you want to transform, like data-select-a11y and add the following lines in one of your JavaScript file:

var selects = document.querySelectorAll('select[data-select-a11y]');

Array.prototype.forEach.call(selects, function(select){
  new Select(select);
});