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
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);
});