Comment renseigner au mieux l’internaute sur un fichier qu’il ou elle s’apprête à télécharger.

Ce que j’ai fait :

• lire l’article Indication du format des fichiers à télécharger et accessibilité(lien externe) d’Atalan
• lire la notice Intégrer le poids et le format des fichiers dans chaque lien et bouton permettant de les télécharger(lien externe) de AcceDe Web
• lire l’article Fichiers en téléchargement(lien externe) du Guide de l’intégrateur

Ce que j’ai appris

Format, poids et langue d’un fichier à télécharger : quelle obligation légale ?

Le terme de “fichier à télécharger” désigne tout type de fichiers : documents bureautiques, fichiers audio et vidéo, images, fichiers compressés.

Le Référentiel Général d’Amélioration de l’Accessibilité (RGAA) préconisait dans sa version 3 d’indiquer pour un fichier à télécharger son format, son poids et sa langue (si elle différait de la langue principale du document). Cependant cette recommandation a disparu de la version 4 du RGAA.

Les notes sur la révision du RGAA(lien externe) confirment en effet la suppression de ce critère d’accessibilité par la justification suivante :

Absence d’élément dans les WCAG permettant de considérer que l’absence d’indication de format, poids ou langue des fichiers en téléchargement est un motif de non conformité.

Il n’est donc plus nécessaire, pour être en conformité avec le RGAA, d’indiquer le format, le poids et la langue d’un fichier à télécharger. Toutefois s’il n’y a plus d’obligation légale, plusieurs raisons justifient de maintenir cette bonne pratique.

Des indications utiles

Si les Web Content Accessibility Guidelines (WCAG) ne recommandent pas spécifiquement d’indiquer le format, le poids et la langue d’un fichier à télécharger, elles indiquent en revanche qu’un lien doit être suffisamment explicite afin d’aider les internautes à comprendre sa fonction et à décider s’ils veulent le suivre. Connaître le poids, le format et la langue d’un fichier que l’on s’apprête à télécharger peut donc contribuer à rendre un lien explicite.

Cela permet tout d’abord de signaler à l’internaute qu’il ne s’agit pas d’un lien classique menant vers une autre page, mais d’un fichier à télécharger.

Par ailleurs connaître le format ou la langue (si elle diffère de la langue principale de la page) à l’avance évite à un internaute de télécharger inutilement un fichier s’il ne possède pas le logiciel adéquat pour l’ouvrir, ou s’il ne connaît pas la langue dans laquelle il est rédigé.

Il est également utile de connaître le poids d’un fichier dans le cas d’une connexion internet bas débit ou mobile. Les internautes dans cette situation pourront donc choisir de différer le téléchargement du fichier.

Enfin, les personnes utilisant un lecteur d’écran seront moins désorientées et pourront mieux anticiper une interruption de navigation si elles disposent de ces informations.

Le référentiel de bonnes pratiques Opquast recommande également de faire figurer ces informations :

• Le format des fichiers proposés en téléchargement est indiqué(lien externe)
• La taille des fichiers internes proposés en téléchargement est indiquée(lien externe)
• La langue des fichiers en téléchargement est précisée lorsqu’elle diffère de celle de la page d’origine(lien externe)

Les limites de ces indications

Il peut arriver que des fichiers soient générés à la volée avant d’être téléchargés, par exemple le résultat d’un questionnaire ou d’une recherche. Dans ce cas, le poids exact ne peut être connu à l’avance et il est admis de donner un poids approximatif ou maximal. Par exemple : environ 2,5 Mo.

Quand des liens pointent vers des documents externes au site, sur lequels vous n’avez pas la main, il peut arriver que leur poids ou format change sans que vous en soyez averti. Des informations erronées ne sont certes pas optimales mais elles avertiront à minima l’internaute qu’il s’agit d’un fichier à télécharger et non d’un lien classique. Autrement dit, mieux vaut ça que pas d’information du tout, et une vérification ponctuelle sur ces fichiers externes peut permettre de mettre ces informations à jour.

Techniques pour indiquer le format, le poids et la langue

Il existe plusieurs techniques permettant de faire figurer ces indications. Atalan, dans son article Indication du format des fichiers à télécharger et accessibilité(lien externe), en détaille plusieurs :

• dans l’intitulé du lien, sous forme de texte : comme toujours il s’agit de la méthode la plus simple à mettre en oeuvre et la plus efficace
• dans l’attribut title du lien : mais comme vous commencez à le savoir si vous suivez régulièrement ce blog, l’attribut title n’est pas restitué par tous les lecteurs d’écran, n’est pas accessible sur les terminaux tactiles et n’est disponible qu’au survol de la souris
• via du texte caché en Cascading Style Sheets (CSS) : mais l’information ne sera transmise que lorsque les CSS seront désactivés ou aux personnes aveugles ou mal-voyantes se servant d’un lecteur d’écran

Je vous invite vivement à lire l’article d’Atalan sur le sujet pour connaître toutes les informations relatives aux différentes techniques.

Pour ma part, je vais vous présenter la méthode que je privilégie, sur mes sites personnels notamment : des indications fournies directement dans l’intitulé du lien et stylées différemment du nom du fichier.

Le code Hypertext Markup Language (HTML) est le suivant :

<a href="#" class="link">
  Nom du fichier à télécharger<span class="link__info"> (PDF, 2,5 Mo)</span>
</a>

Les indications de poids et de format doivent bien être intégrées à l’intérieur de la balise <a>, d’une part pour qu’elles se trouvent dans la zone de clic du lien, d’autre part pour être plus facilement atteignable par les lecteurs d’écran. Il est important de placer l’espace entre l’intitulé du lien et les indications de poids/format dans le <span>, juste avant l’ouverture du parenthèse (nous verrons juste après pourquoi).

Voici les styles CSS associés au code HTML :

$background: #fff;
$text: #1c2a43;
$link: #f22613;

.link {
  color: $link;
  border-bottom-color: $link;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1em;
  text-decoration: none;
  transition: border-bottom .2s ease-in-out;

  &:hover,
  &:active {
    border-bottom-color: $background;
  }

  &__info {
    border-bottom-color: $background;
    color: $text;
    font-size: .8em;
    border-bottom-style: inherit;
    border-bottom-width: inherit;
  }
}

Vous pouvez consulter ce même code et son résultat sur ce lien CodePen(lien externe).

Les informations de poids et de format encapsulées dans un <span> sont de taille plus petite et de couleur différente du lien. Le soulignement par défaut du lien est supprimé et simulé grâce à la propriété border-bottom. Le <span> intégré dans le lien possède lui aussi bordure inférieure, de la même couleur que le fond de la page et superposé à la bordure du lien, ce qui permet de le masquer. Au survol - de l’intitulé ou des indications de format et de poids -, la bordure inférieure du lien disparaît.

L’espace ajouté à l’intérieur du <span>, juste avant l’ouverture de la parenthèse, est nécessaire pour interrompre la bordure inférieure de l’intitulé du lien au même niveau que le dernier caractère de l’intitulé.

Et vous ? Quelles sont vos techniques pour afficher les informations relatives aux fichiers à télécharger ?