Téléversement de fichiers

Dernière mise à jour : 21 juillet 2025

Le téléversement permet de sélectionner un fichier depuis un appareil local pour l’envoyer vers une plateforme ou un système en ligne.

Dans cette page

  1. Utilisation
  2. Rédaction UX

1. Utilisation

Principales règles

  • Le téléversement de fichiers est principalement utilisé dans un formulaire, mais il peut l'être aussi dans un tout autre contexte.

  • Le libellé principal précise l’information à téléverser, par exemple une facture.

  • L’action attendue est présentée sous forme d'hyperlien et précise à l'utilisateur ou l'utilisatrice ce qui doit être fait, soit téléverser un fichier.

  • Des spécifications sur les types de fichiers acceptés et leur taille maximale doivent être communiquées en dessous de l'hyperlien.

  • Un seul fichier par champ peut être téléversé.

    Pour téléverser plus d'un fichier, il faut disposer le nombre requis de champs de téléversement un à la suite de l’autre.

Image représentant l'utilisation par défaut d'un champ de téléversement de fichiers
1. L’état par défaut correspond à l’aspect initial du champ de téléversement indiquant d’y ajouter un fichier.
Image représentant l'utilisation d'un champ de téléversement de fichiers en situation de succès ou d'erreur
2. L’état du téléversement indique si le fichier a été téléversé avec succès ou non.
Image représentant l'utilisation d'un champ de téléversement de fichiers avec un message d'erreur standardisé
3. Lorsque le champ de téléversement est obligatoire, un message d’erreur standardisé s’affiche si l’utilisateur ou l’utilisatrice a omis de téléverser le fichier demandé.

Interactivité

  • À l'état par défaut, l'entièreté du champ est cliquable pour sélectionner et téléverser un fichier depuis l'appareil.
  • Le glisser-déposer n'est pas disponible pour effectuer un téléversement.
  • Un message de succès ou d'erreur apparaît dans le champ pour indiquer l'état du téléversement du fichier.
  • Le nom du fichier correspond à celui du fichier fourni par l'utilisateur ou l'utilisatrice.
  • L'icône de suppression représentée par un X permet de supprimer un fichier après son téléversement, afin d'en téléverser un nouveau au besoin.

2. Rédaction UX

Règles spécifiques au téléchargement de fichiers

Libellé principal

  • Le libellé principal précise l'information à téléverser en quelques mots, par exemple Preuve d'achat.

  • Il est clair, concis et rédigé dans une forme positive.

  • Il commence par une majuscule.

  • Il n’a pas de ponctuation finale.

    S’il s’agit d’une phrase complète, il peut exceptionnellement se terminer par un point.

Action attendue

  • L'action attendue, présentée sous forme d'hyperlien, guide l'utilisateur ou l'utilisatrice dans le déclenchement du processus de téléversement.

  • Elle commence par une majuscule et un verbe à l'infinitif.

  • Elle n’a pas de ponctuation finale.

  • L'appel à l'action « Téléverser un fichier » est utilisé, puisqu'il convient à tous les contextes de téléversement de fichiers.

  • Il est toutefois possible de modifier ce libellé pour répondre à un besoin précis.

    Le cas échéant, consulter les règles de rédaction d’un hyperlien.

Spécifications du fichier

  • Les spécifications du fichier indiquent à l'utilisateur ou l'utilisatrice les types de fichiers acceptés et leur taille maximale.

  • La mention de ces spécifications commence par une majuscule et ne comporte pas de ponctuation finale.

  • La liste des formats de fichiers est d'abord précisée, suivie de la taille maximale acceptée.

    • Par défaut, cette mention est utilisée : « PDF, JPG, TIFF, PNG, ZIP ou BMP de moins de 35 Mo ».
    • Elle peut être adaptée selon les besoins en suivant les règles mentionnées précédemment.

Libellé des états de téléversement

  • Pour l'état de succès, le libellé normalisé « Téléversé » est utilisé.

  • Pour l'état d'erreur, le message varie selon le contexte.

    • Il précise en quoi consiste l'erreur et indique ce qui doit être fait pour la corriger.
    • Il est clair, concis et rédigé dans un langage simple et inclusif.

Règles générales pour les formulaires

Au-delà des règles propres au composant, il importe aussi de considérer celles qui concernent l’ensemble d’un formulaire.

  • Éviter les termes techniques, sauf s’ils sont connus par les personnes qui utiliseront le formulaire, par exemple des gens de métier.

  • Déterminer si la question est obligatoire et l’indiquer en ajoutant un astérisque.

  • Si une information complémentaire, mais non essentielle pour comprendre la question et y répondre doit être communiquée, une infobulle peut être utilisée.

Dans cette page

  1. Anatomie
  2. Astérisque et infobulle
  3. Grille
  4. États interactifs

1. Anatomie

Image représentant l'anatomie par défaut d'un téléversement de fichiers
À la base, le champ de téléversement adopte visuellement l'état par défaut indiquant qu'aucune interaction n'a été effectuée.
Image représentant l'anatomie l'état de succès d'un téléversement de fichiers
L’état de succès indique que le fichier a été sélectionné. L'icône et le texte se mettent à jour.
Image représentant l'anatomie d'état d'erreur d'un téléversement de fichiers
L’état d'erreur indique un problème survenu lors du téléversement.
Image représentant l'anatomie d'état d'erreur d'un téléversement de fichiers avec un message d'erreur
Lorsque le champ est obligatoire et que l’utilisateur soumet le formulaire sans avoir téléversé de fichier, le message vient se placer sous le composant.

2. Astérisque et infobulle

Pour tous les états, deux éléments peuvent être ajoutés au niveau du libellé principal, soit :

  • un astérisque (*) pour indiquer une question obligatoire ;
  • une infobulle pour fournir une information complémentaire, mais non essentielle pour comprendre la question et y répondre.

Ces éléments peuvent être utilisés simultanément ou séparément selon les besoins d’information à communiquer.

Image représentant l'utilisation d'un astérisque pour un téléversement de fichiers

3. Grille

Afin d'assurer une lisibilité optimale, il importe de respecter un certain spectre de longueur de ligne. Ces limites sont établies dans le composant selon les points de rupture de chaque taille d'écran.

Image représentant une petite grille de téléversement de fichiers
Grille – Petite (mobile) : La largeur maximale correspond à la totalité de la grille.
Image représentant une moyenne grille de téléversement de fichiers
Grille – Moyenne (tablette) : La largeur maximale est de dix colonnes.
Image représentant une grande grille de téléversement de fichiers
Grille – Large (ordinateur) : La largeur maximale est de sept colonnes.
Image représentant une très grande grille de téléversement de fichiers
Grille – X-large (ordinateur) : La largeur maximale est de six colonnes.

4. États interactifs du champ de téléversement

Défaut

Image représentant un état interactif du champ de téléversement en différents styles

Survol

Image représentant un état interactif du champ de téléversement en différents styles

Actif - focus

Image représentant un état interactif du champ de téléversement en différents styles

Désactivé

Image représentant un état interactif du champ de téléversement en différents styles