Indication du format des fichiers à télécharger et accessibilité

Ce billet est le premier d’une série de trois portant sur l’accessibilité des liens vers des fichiers à télécharger.

Une recommandation d’accessibilité demande à ce que chaque lien pointant vers un fichier en téléchargement informe du format, du poids et éventuellement de la langue de ce dernier.

Je vous propose aujourd’hui de nous intéresser à l’indication du format du fichier en exposant, dans un premier temps, les bénéfices pour les utilisateurs ; puis, dans un second, en listant plusieurs possibilités graphiques et techniques d’y parvenir.

Avant d’entrer dans le vif du sujet, précisons que cette préconisation d’accessibilité s’applique aux liens pointant vers tous les types de fichier à télécharger.

Cela concerne donc notamment :

• Les documents bureautiques.
• Les fichiers audio et vidéo.
• Les images.
• Les fichiers compressés.

Bénéfices pour les utilisateurs

De manière générale, indiquer le format d’un fichier en téléchargement informe l’utilisateur de la nature du lien qu’il rencontre.

Il est ainsi prévenu qu’il n’est pas face à un lien « classique » et, qu’en l’utilisant, il ne sera pas dirigé vers une autre page ou un emplacement précis de la page courante (système d’ancre).

Concrètement, grâce à cette information, l’utilisateur est averti du changement de contexte que provoquera l’activation de ce type de lien ; à savoir : le téléchargement d’un fichier ou sa consultation dans un logiciel ou plug-in spécialisé.

Par exemple, aux personnes :

• Ne disposant pas du matériel et/ou du logiciel leur permettant d’exploiter le fichier.
  Ce renseignement leur évitant de le télécharger alors qu’il ne pourrait le consulter ou l’utiliser.
• Non ou mal-voyantes utilisant un lecteur d’écran.
  Cette information leur permettant d’anticiper le fait que leur navigation sera « interrompue ».

Sans la mise à disposition de ces indications, la navigation peut rapidement devenir désagréable pour l’utilisateur. Tout comme, au passage, l’absence de signalement des liens s’ouvrant dans une nouvelle fenêtre .

Présentation du format du fichier à télécharger

Sous forme de texte

Sans plus attendre, focus sur la méthode la plus efficace et robuste !
Il s’agit d’intégrer cette information sous forme de texte, en suffixe de l’intitulé du lien comme par exemple :

Code HTML :

<a href="#">Nom du fichier en téléchargement (<abbr>PDF</abbr>)</a>

À noter qu’il est vivement recommandé d’intégrer cette mention directement dans l’intitulé du lien.

Si elle est présentée à l’extérieur de la balise <a>, cette indication ne sera pas atteignable aisément par les utilisateurs de lecteur d’écran ; ces derniers devant, dans ce cas de figure, prendre connaissance du contexte du lien pour obtenir cette précieuse information.

Au delà de l’accessibilité, cela peut également être considéré comme une bonne pratique en terme d’ergonomie. Car intégrer cette indication directement dans l’intitulé du lien étendra de surcroît sa zone de clic.

Apparence de cette indication

Si souhaité, il est possible de styler cette indication différemment du nom du fichier à télécharger comme par exemple :

Ici, le traitement graphique de cette indication s’est résumé à :

• La suppression du soulignement.
• La réduction légère de la taille des caractères.
• L’éclaircissement de la couleur du texte, en veillant toujours à proposer un contraste suffisant avec la couleur d’arrière-plan .

Sous forme d’image

Une autre possibilité consiste à présenter cette information sous forme d’image.

Attention, si vous optez pour cette solution, veillez à ne pas intégrer cette image en CSS (via la propriété background-image) car cette indication serait perdue dans le cas où les styles et/ou les images d’arrière-plan ne seraient pas disponibles :

• Volontairement désactivés par l’utilisateur.
• Non chargés suite à un problème serveur ou de connexion.
• Remplacées en une couleur de fond en cas de mode « Contraste élevé » activé dans le système d’exploitation de l’utilisateur.
• Etc.

Ce qui ne se produira pas si l’image est placée directement dans le code HTML, avec un texte de remplacement (attribut alt) correctement renseigné.

Donc concrètement, une implémentation valide du point de vue de l’accessibilité serait par exemple :

Code HTML :

<a href="#">Nom du fichier en téléchargement <img alt="PDF" title="PDF" src="pdf.png" /></a>

À noter que la présence de l’attribut title dans la balise <img /> n’est pas requise en matière d’accessibilité.

Toutefois, nous vous recommandons de l’ajouter (mais davantage pour des raisons ergonomiques) car si le pictogramme utilisé n’est pas connu ou reconnu par l’utilisateur, son infobulle s’affichant au survol à la souris pourrait lui en préciser le sens.

Limites de cette méthode

Bien que cette méthode soit totalement valide du point de vue de l’accessibilité, on peut lui trouver quelques légers inconvénients :

• Le pictogramme ne s’agrandit pas lorsque la taille des caractères est augmentée par l’utilisateur (en mode zoom texte seulement). Cette indication peut donc être difficilement perceptible dans ce contexte de consultation.
• Le pictogramme utilisé ne sera pas forcément connu ou reconnu de tous.
  A priori, le pictogramme «  » (et ses variantes) est fréquemment utilisé donc potentiellement compris par la plupart des personnes.
  Mais qu’en est-il des pictogrammes «       » ou d’autres encore moins communs et répandus ?
• Pour les contributeurs, si ce pictogramme ne peut pas être intégré automatiquement par l’outil de publication utilisé (CMS), cela peut-être fastidieux de l’ajouter manuellement, bien plus que sous forme de texte.

Dans l’attribut title du lien

Il est également possible d’inclure cette indication dans l’attribut title du lien comme par exemple :

Pour que cette méthode soit considérée comme valide, il faut impérativement que le nom du fichier à télécharger soit également présent dans cet attribut title.

Code HTML :

<a href="#" title="Nom du fichier en téléchargement (PDF)">Nom du fichier en téléchargement</a>

Cette solution n’est pas optimale, le contenu de l’attribut title n’étant pas disponible dans tous les cas de figure :

• Sans survoler le lien (et attendre patiemment l’affichage de l’infobulle), l’utilisateur passera à côté de cette information.
• L’utilisateur naviguant exclusivement au clavier n’aura pas accès à cette indication, l’infobulle ne s’affichant pas à la prise de focus du lien.
• Il en est de même pour les personnes naviguant sur périphériques mobiles (smartphones ou tablettes) ; sur certains d’entre-eux, l’infobulle ne s’affichant pas au toucher.
• L’utilisateur de lecteur d’écran, l’ayant configuré pour restituer uniquement les intitulés de liens (contenu entre les balises <a> et </a>), ne disposera pas de cette information. De plus, certains lecteurs d’écran ne restituent jamais le contenu de l’attribut title.

Via du texte caché

Enfin, une dernière possibilité (hors utilisation d’ARIA) consiste à placer cette indication dans l’intitulé du lien ; mais, cette fois, en la masquant à l’écran comme par exemple :

Attention, si vous optez pour cette technique, n’utilisez pas les propriétés CSS « display: none; » et/ou « visibility: hidden; » pour cacher cette mention car elle ne serait pas restituée aux utilisateurs de revue d’écran.

La technique appropriée consiste donc à sortir ce contenu de l’écran comme par exemple :

Code HTML :

<a href="#">Nom du fichier en téléchargement <span class="masquer">(PDF)</span></a>

Code CSS :

.masquer {
   position: absolute;
   left: -99999px;
}

En l’état, cette solution est loin d’être idéale, cette indication n’étant ici transmise que lorsque les CSS sont désactivés ou aux personnes aveugles ou mal-voyantes se servant d’un lecteur d’écran.

Néanmoins, des optimisations sont envisageables pour afficher cette indication dans tous les contextes de navigation. Les voici présentées ci-après.

Affichage au survol et à la prise de focus clavier

En déclarant quelques propriétés CSS aux pseudo-classes « :hover » et « :focus » , il est respectivement possible d’afficher cette mention au survol et à la prise de focus du lien comme par exemple :

Cette méthode est d’ailleurs prescrite par le W3C pour signaler les liens déclenchant l’ouverture d’une nouvelle fenêtre (technique WCAG G201 – en anglais) et mise en pratique sur cette démonstration : Pop-Up Warning .

Mais, tout comme celle du title, cette solution impose à l’utilisateur de survoler le lien pour avoir accès à cette information. Ce qui, selon nous, n’est pas idéal pour l’anticipation de la navigation.

Affichage sur périphériques mobiles

Pour remédier au fait que les utilisateurs sur smartphones ou tablettes ne peuvent accéder à cette information cachée, une solution peut consister à la rendre visible par défaut sur ces périphériques.

L’intervention technique à prévoir est assez simple et légère.
Il suffit, via Media-Queries (RWD) , de forcer l’affichage de cette indication sur ces supports de consultation.

Concrètement, il s’agit, à partir d’une certaine résolution d’écran, de surcharger les propriétés initialement appliquées à cette mention.

Ce qui donne par exemple, en reprenant notre classe CSS « .masquer » de tout à l’heure :

@media screen and (max-width: 640px) {
  .masquer {
     position: static;
  }
}

Toute la difficulté de cette « parade » résidant dans le choix de la résolution maximale à cibler…

Conclusion

Il existe donc plusieurs possibilités plus ou moins efficaces pour indiquer le format d’un fichier à télécharger. Information qui, pour rappel, informera l’utilisateur de la nature du lien et du changement de contexte qu’entrainera son activation : rendant par conséquent sa navigation plus agréable.

Bien que toutes les solutions présentées soient tout à fait valides du point de vue de l’accessibilité, force est de constater que la plus efficace en la matière s’avère être la solution la plus simple ; soit, présenter le format du fichier à télécharger sous forme de texte visible intégré directement dans l’intitulé du lien.

Seulement, cette mention seule n’est pas suffisante pour assurer l’accessibilité de ce type de liens. Pour d’autres raisons, il est également attendu de spécifier le poids et (éventuellement) la langue de ces fichiers à télécharger.

Ressources

• Indiquer le poids et le format de chaque document en téléchargement (recommandation graphique AcceDe Web)
• Indiquer le format, le poids, et éventuellement la langue, de chaque document en téléchargement (recommandation éditoriale AcceDe Web)
• Présence des informations de format pour les documents en téléchargement (critère RGAA 2.2)
• Dans chaque page Web, pour chaque fichier en téléchargement, des informations relatives à sa consultation sont-elles présentes ? (critère AccessiWeb 2.2)

Ajouter un commentaire

Tous les champs sont obligatoires.

Nom

Email

Commentaire

Current ye@r *

Leave this field empty