Select-a11y

Présentation

select-a11y est un script javascript associé à des css qui transforme un select (multiple ou non) en liste de suggestions avec champ de recherche à l'intérieur de cette liste.

En raison de sa complexité et pour faciliter les contributions, le développement de ce module est déporté sur un dépôt spécifique, avec sa propre page de démonstration et son jeu de tests.

Le script et les css du module de Scampi sont synchronisés sur ce dépôt.

Accessibilité

Pour la navigation au clavier :

  • utilisation d'un élément button natif activable au clavier qui permet d'ouvrir / fermer la liste ;
  • le focus est automatiquement déplacé sur le champ de recherche quand on ouvre la liste ;
  • les items dans la liste sont atteignables, soit via les flèches directionnelles haut et bas, soit via la tabulation ;
  • si l'utilisateur parcourt les items via les flèches il boucle à l'intérieur comme dans un menu ;
  • si l'utilisateur parcourt les items via la tabulation la liste se referme automatiquement et le focus sort de la liste ;
  • la liste est refermable via la touche echap quand le focus est dans la liste et le focus est alors remis sur le bouton ;
  • le choix d'un item dans la liste se fait bien l'activation de la touche enter et cela referme alors la liste et bouge le focus sur le bouton. Ce point peut sembler étrange s'agissant d'un select multiple et pourrait faire l'objet d'une évolution ultérieure
  • chacun des items ajoutés contient un élément button natif activable au clavier qui permet de supprimer l'item et cela bouge alors le focus sur l'élément précédent (autre item ajouté ou bouton qui ouvre / ferme la liste)

Pour la restitution dans les lecteurs d'écrans :

  • une zone masquée visuellement en aria-live permettant de faire annoncer aux lecteurs d'écrans :
    • l'existence et le nombre de suggestions de saisie lors d'une recherche ;
    • de confirmer la bonne sélection d'un élément dans la liste ;
  • un attribut aria-expanded pour indiquer l'état ouvert / fermé de la liste ;
  • un intitulé et une explication du fonctionnement du composant qui sont masqués visuellement mais restitués par les lecteurs d'écrans lors de la prise de focus sur le champ de recherche ;
  • des attributs role="listbox" et role="option" pour faire vocaliser correctement la liste des items ;
  • un attribut title sur les boutons de suppression des items pour préciser le nom de l'item supprimé.

Utilisation

La présentation de ce module passe par la personnalisation des variables et l'ajout de classes sur les éléments html et bien sûr le script associé.

Variables sass

// variables propres au module
$btn-select-a11y-bg:          $gray-9 !default;
$btn-select-a11y-symbol:      "\25BC" !default; // ▼

$tag-item-border:             $gray-7 !default;
$tag-item-supp-symbol:        "\2715" !default; // X
$tag-item-supp-symbol-color:  red !default;
$tag-item-supp-border:        red !default;

$a11y-suggestions-bg:         $gray-10 !default;
$a11y-suggestion-color:       $gray-3 !default;
$a11y-suggestion-color-hover: $gray-1 !default;
$a11y-suggestion-bg-hover:    $gray-9 !default;
$a11y-suggestion-bg-selected: $gray-7 !default;
$a11y-suggestion-border:      $gray-3 !default;

Script

Le script présent dans le module doit être concaténé avec les autres scripts du projet. Si les textes d'aide par défaut ne conviennent pas au projet ils peuvent être modifiés comme expliqué ci-dessous dans l'exemple.

Il est possible de changer les textes utilisés dans le script pour les textes lus uniquement par les aides techniques. Lors de la création du select-a11y il suffit de passer un objet contenant une propriété text en second paramètre :

new Select(HTMLSelectElement, {
  text:{
    help: 'Utilisez la tabulation (ou les touches flèches) 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'
  }
});

Les textes ci-dessus sont ceux utilisés par défaut.

Exemple d'utilisation

Au sein d'un formulaire, placer un élément select - ou plusieurs - portant l'attribut data-select-a11y (ainsi que l'attribut multiple s'il y a lieu) :


<div class="form-group">
  <label for="select-element">Que voulez-vous faire aujourd'hui ?</label>
  <select class="form-control" id="select-element" data-select-a11y data-placeholder="Chercher dans la liste">
      <option>Dormir</option>
      <option>Grimper aux arbres</option>
      <option>Tricoter</option>
      <option selected>Danser avec les licornes</option>
      <option>Rêver</option>
  </select>
</div>

Démo

Select à choix unique

Select à choix multiple