Explorateur de fichier

Introduction

L’explorateur de fichier est un composant disponible sur tous les systèmes d’exploitation. Lorsque celui-ci est présent dans une page web, il doit se comporter comme attendu par l’utilisateur.

Mode de navigation

À la souris, chaque fichier peut être ouvert via un double clic. Les touches Control et Shift permettent d’effectuer une sélection multiple.

En navigant au clavier, les flèches permettent de déplacer la sélection. La touche Entrée permet d’ouvrir un fichier. Les touches Control+Barre Espace ou Shift+flèches du clavier permettent de sélectionner plusieurs fichiers.

Au lecteur d’écran, la navigation est identique à celle du clavier, chaque fichier est correctement vocalisé (nom, taille, type…), de plus l’état sélectionné/non sélectionné est également indiqué.

Ouvrir l’exemple

Mise en place de la structure

Au niveau de la structure, nous utilisons des balises div. Pour que celles-ci soient vocalisées correctement nous avons ajouté quelques attributs et rôles ARIA.

Le rôle listbox pour indiquer au lecteur d’écran qu’il s’agit d’une liste d’éléments. L’attribut aria-multiselectable pour indiquer qu’il s’agit d’une liste à sélection multiple. Chaque élément de liste doit posséder un rôle option.

Pour que chaque fichier soit correctement vocalisé, on ajoute un attribut aria-label sur chaque élément de la liste. Enfin, pour que chaque fichier soit focusable, on ajoute un attribut tabindex="0".

Exemple de code

<div role="listbox" aria-multiselectable="true" aria-label="liste des fichiers, vue mosaïque">
  <div tabindex="0" role="option" aria-label="test 001.avi, video, 18.9MB">… </div>
  …
</div>

Visibilité du focus

La position du focus doit être visible à tout moment. Un effet est appliqué à la vignette qui a le focus. Cet effet reste visible même sur les fichiers sélectionnés.

Gestion du clavier

Pour que les utilisateurs puissent correctement naviguer dans la liste, les éléments suivants du clavier doit être géré via Javascript :

• Les flèches pour se déplacer dans la liste.
• Les touches Ctrl, Shift et la barre espace pour sélectionner plusieurs fichiers.
• Les touches Ctrl+a pour sélectionner tous les éléments.
• La touche Entrée pour lancer l’ouverture d’un fichier.