'/%3E%3C/svg%3E){kind=small}
Nouveau Components
Téléversement de fichiers
Le téléversement de fichiers permet à l’utilisateur d’ajouter un document à un formulaire ou à un traitement. Il repose sur un champ de fichier natif, complété d’un texte d’aide précisant les formats et le poids acceptés, et d’un bouton de retrait. Deux habillages sont proposés, la forme simple et la zone de dépôt, qui conservent tous deux le champ natif. Les états de réussite et de refus sont communiqués visuellement et aux technologies d’assistance.
Quand utiliser un téléversement de fichiers
- Pièce justificative : l'utilisateur doit joindre un document existant, facture, attestation, photo.
- Import de données : un tableur ou un export à charger dans l'application.
- Envoi multiple : plusieurs fichiers d'un coup, avec un récapitulatif de ce qui a été retenu.
Quand ne pas en utiliser
- Pour une saisie de texte : demander un fichier pour recueillir trois lignes de texte reporte le travail sur l'utilisateur.
- Sans contrainte annoncée : un champ qui accepte tout puis refuse après coup est une impasse. Formats et taille se disent avant.
- Comme seul moyen : si une alternative existe, saisie en ligne ou envoi par courriel, la proposer.
Modes d'action
- Souris : le bouton ouvre le sélecteur de fichiers ; la zone de dépôt accepte le glisser-déposer.
- Clavier : le champ natif est atteignable par tabulation et s'active par Entrée ou Espace. Le glisser-déposer n'est jamais le seul chemin (WCAG 2.1.1).
- Lecteur d'écran : le fichier choisi est annoncé par une région live, et son nom devient la description du champ.
Contenu
- Les contraintes avant la saisie : formats acceptés et taille maximale figurent dans l'aide, rattachée au champ.
- Un retour explicite : le nom du fichier retenu s'affiche, le refus dit la règle et pas seulement « fichier invalide ».
- Un retrait nommé : le bouton de retrait nomme le fichier concerné, sinon deux boutons voisins deviennent indiscernables.
Mots-clés
- input type="file" : champ natif de sélection de fichiers, accessible tel quel.
- aria-describedby : rattache une aide ou une erreur à un champ. L'ordre des identifiants détermine l'ordre de lecture.
- aria-invalid : signale un champ en erreur aux technologies d'assistance.
- Zone de dépôt : habillage du champ natif acceptant le glisser-déposer, sans jamais le remplacer.
Décomposition des composants
Deux habillages du même champ natif : la forme simple et la zone de dépôt.
Champ simple
- Le champ natif est accessible tel quel : aucun rôle ni attribut ARIA n'est ajouté pour le décrire.
- Le nom accessible du bouton de retrait nomme le fichier, « Retirer le fichier facture.pdf » : deux boutons de la même page ne portent pas le même nom.
- Le focus est rendu au champ AVANT que le bouton ne soit masqué (WCAG 2.4.3).
- L'état d'erreur suit la validation dans les deux sens : posé quand le fichier est refusé, levé dès qu'il passe.
Zone de dépôt
- L'input réel reste dans le flux et reste focalisable : il est rendu transparent et superposé au bouton d'habillage, qui n'est qu'un décor.
- Le focus étant porté par l'input, l'indicateur de focus est dessiné sur le conteneur, sinon il serait invisible (WCAG 2.4.7).
- La mention glisser-déposer reste restituable : un utilisateur de lecteur d'écran n'est pas forcément un utilisateur clavier exclusif, lui cacher la mention le priverait d'un moyen disponible.
- Une fois le fichier choisi, son nom devient la description du champ : l'annonce de la région live est fugace, la description reste.
Lecteur d'écran
- Le champ est annoncé avec son label et son aide, avant toute saisie.
- Le fichier retenu est annoncé par une région live, après un délai de 500 ms.
- Un refus dit la règle, et le message reste disponible dans la description du champ.
- Le bouton de retrait nomme toujours le fichier qu'il retire.
Le champ de fichier natif étant conservé dans les deux variantes, les interactions clavier sont celles du navigateur : aucune n'est à reconstruire. Le glisser-déposer est un moyen supplémentaire, jamais le seul chemin.
| Touche | Fonction |
|---|---|
| Tab | Déplace le focus vers le champ de téléversement, puis vers le bouton de retrait lorsqu'un fichier est choisi. |
| Maj + Tab | Déplace le focus vers l'élément précédent. |
| Entrée ou Espace | Ouvre le sélecteur de fichiers du système lorsque le focus est sur le champ. Active le bouton de retrait lorsque le focus est sur lui. |
| Échap | Ferme le sélecteur de fichiers du système sans rien choisir. |
Note : le bouton de retrait rend le focus au champ AVANT d'être masqué. Dans la zone de dépôt, l'input réel reste focalisable sous l'habillage : l'indicateur de focus est dessiné sur le conteneur, sinon il serait invisible.