Une ligne directrice —

Il y a tellement de sites Web qui n'ont pas pris en compte la convivialité globale de leurs utilisateurs malvoyants. Lorsqu'il s'agit de concevoir de meilleurs liens et d'envoyer de meilleurs e-mails, Slava Shestopalov a quelques conseils sur la façon d'améliorer l'expérience de votre site Web tout en gardant l'accessibilité à l'esprit.

Pourquoi « cliquez ici » et « par ce lien » sont de mauvais choix ? Et est-il acceptable d'utiliser « lire la suite » ? Toutes ces expressions sont devenues si courantes que beaucoup de gens ne voient aucun problème avec elles.

Combien de fois avez-vous rencontré ou composé ce qui suit sur des sites Web, dans des e-mails ou des intranets ?

• Remplissez ceci formulaire d'ici la fin de la journée.
• Vérifiez la politique d'équipement par le lien.
• Vous pouvez trouver plus d'informations iciiciet ici.

Dans cet article, j'expliquerai les erreurs courantes de formulation et de formatage et je montrerai des alternatives plus accessibles et informatives. Allons-y !

Liens significatifs

Alors, qu'est-ce qu'un lien hypertexte exactement ? C'est une combinaison d'une adresse Web (URL) et d'un élément cliquable (souvent un mot ou une phrase, parfois une image). Bien qu'il s'agisse d'un vaste sujet, nous nous concentrerons sur les liens textuels, à savoir leur facilité d'utilisation et leur accessibilité.

Les liens soigneusement composés expriment le respect envers les lecteurs, tandis que ceux qui sont mélangés provoquent confusion et suspicion . Lorsqu'un lien est présenté comme « ici » ou « ceci », il est plus difficile de le viser avec un curseur ou un doigt. De plus, il manque de transparence. Que se cache-t-il derrière : une page ou un fichier, un article ou un formulaire Web ? Il faut relire toute la phrase ou le paragraphe pour deviner.

Au contraire, les URL attachées à des phrases concises et explicites informent les gens sur la destination et sont des cibles plus pratiques pour cliquer ou appuyer. De plus, un lien bien composé a un sens hors contexte et combine généralement un sujet (par exemple, sécurité, marque, marketing) et un format (questionnaire, formulaire de demande, directive, politique, etc.).[19659014]Une comparaison de quatre phrases à gauche qui sont "dans leur contexte" et quatre phrases à droite qui sont "hors contexte" »/>

Exposition d'URL

Si une adresse Web est courte et ne ressemble pas à M$c0P88%X4LHr&dxQ1Al'exposer immédiatement fonctionnera également très bien, surtout si le public est censé pour le copier et le coller ailleurs.

Et si vous avez une longue chaîne de symboles indéchiffrable, l'exposer n'est pas une bonne idée dans la plupart des situations. Dans ce cas, envisagez d'intégrer une URL dans une phrase succincte ou de raccourcir l'adresse dans des outils tels que Bitly ou Cuttly.

Cependant, ces outils ne sont pas des solutions miracles.  : vous obtenez un lien plus court, mais ses parties significatives seront remplacées par des symboles aléatoires, qui sont suspects et non informatifs. La personnalisation des URL raccourcies est possible, mais il s'agit généralement d'une fonctionnalité payante.

Comparez les exemples suivants :

• bit.ly/30SjUa4y (suspect et illisible) ;
• bit.ly/smashing-books (sujet lisible);
• smash.ing/30SjUa4y (domaine reconnaissable);
• smash.ing/books (entièrement transparent).

Liens de téléchargement

Un lien qui guide vers une ressource téléchargeable nécessite un traitement légèrement différent. En plus de l'intégrer dans une phrase significative, vous devez également informer les utilisateurs du format et de la taille du fichier :

• Le format donne des indices sur ce que vous pouvez faire avec ces données (par exemple, si les informations sont en lecture seule ou modifiable) ;
• La taille du fichier est cruciale pour les personnes disposant d'une connexion Internet coûteuse, d'une connexion lente ou d'un stockage local limité. sur la droite qui en disent plus sur le format et la taille du fichier »/>

  Lorsque vous partagez un tas de fichiers (disons dans différents formats ou versions), il ne suffit pas de concevoir correctement chaque lien. Toute la série doit être bien numérisable et facile à utiliser.

  

  Plus après le saut ! Continuez à lire ci-dessous ↓

  Links vs. Buttons

  Tous les liens sur une page ou dans un e-mail n'ont pas la même importance. Les auteurs souhaitent souvent que leur public clique sur le lien principal, alors que les autres liens peuvent être ignorés. Si vous voulez attirer l'attention des gens sur l'action principale, pensez à la présenter sous forme de bouton :

  • « S'inscrire à la newsletter »
  • « Acheter des billets »
  • « Obtenir le livre blanc »
  • « Télécharger l'enregistrement »

  

  Si vous ne pouvez pas créer de bouton en raison de contraintes techniques ou de temps, optez pour une solution simple et rapide : placez ce lien sur une ligne distincte, mettez-le en gras, ajoutez un espacement au-dessus et en dessous, etc.

  

  Bien sûr, le texte du bouton doit suivre les modèles correspondants afin que vous ne franchissiez pas la frontière entre la motivation des lecteurs et leur manipulation :

  • Soyez concis (jusqu'à 4 à 5 mots) ;[19659032]Idéalement, commencer par un verbe (par exemple « obtenir », « acheter », « télécharger », « demander », et ainsi de suite) ;
  • Appelez l'action honnêtement (c'est-à-dire éviter d'étouffer des étapes désagréables comme regarder des publicités, s'inscrire ou soumettre des données personnelles). rapport », lorsqu'un utilisateur télécharge le fichier en échange de son nom et de ses coordonnées.

    

    Textes riches en liens

    Les liens permettent le fonctionnement d'Internet, cependant, pomper vigoureusement des URL dans chaque phrase n'est pas une bonne pratique (bien sûr, à moins que vous ne contribuiez à une base de connaissances de type Wikipédia qui est croisée connecté par nature).

    L'étape zéro consiste à vous assurer que vous avez vraiment—vraiment—avez besoin de tous les liens. Si vous pouvez modifier quelque chose, il n'y aura pas de problème à résoudre. Sinon, essayez de regrouper les liens : sous forme de liste à puces, à côté des paragraphes associés ou sous un titre approprié (par exemple, « Matériaux recommandés » ou « Ressources »).

    

    Regrouper les liens aide beaucoup, mais si l'objectif est de déclencher une action, le lien principal doit se démarquer. Alors, pourquoi ne pas en faire un bouton ?

    

    Dans les sections précédentes, nous avons découvert comment les liens descriptifs augmentent la convivialité et l'accessibilité. En même temps, de tels liens sont plus longs et, par conséquent, peuvent apparaître divisés dans un paragraphe, lorsque la première partie d'un lien reste à la fin de la ligne précédente et que la deuxième partie passe à la ligne suivante. Cela semble trivial par rapport aux plus gros défauts, mais les liens déformés sont un peu ennuyeux dans les textes encombrés de liens. à percevoir que celles qui s'inscrivent dans les lignes correspondantes. ( Grand aperçu)
    

    Si la largeur d'un paragraphe est fixe, composez le texte de la manière dont tous les liens s'insèrent dans les lignes, par exemple, essayez de commencer un paragraphe avec un lien. Cependant, les navigateurs et les appareils affichent le contenu différemmentet les liens continueront de changer pour certains utilisateurs. C'est pourquoi les listes sont une option plus sûre pour un ensemble de liens.

    Accessibilité des liens

    Les liens accessibles ne sont pas seulement ceux qui ont l'air bien rangés et clairs ; ils devraient également fonctionner correctement. Web Content Accessibility Guidelines (WCAG), la norme d'accessibilité numérique la plus connue au monde, comprend des recommandations sur les hyperliens, y compris certaines fonctionnalités non visuelles.

    Distinction

    L'une des exigences WCAG est ne pas se fier uniquement à la couleur lorsque vous souhaitez distinguer un bouton ou un lien du reste du texte. Peindre les liens en bleu ou dans une autre couleur ne suffit pas, car cela peut ne pas être visible pour les personnes atteintes de daltonisme . La méthode la plus courante consiste à souligner les liens ; ils peuvent également apparaître en caractères gras.

    

    Contraste des couleurs

    Les liens sont des éléments interactifs essentiels et doivent respecter les recommandations de contraste. WCAG a deux niveaux de conformité de contraste :

    1. AA : moyen, utilisé par de nombreux sites Web pour un public de masse ;
    2. AAA : élevé, principalement appliqué sur les sites gouvernementaux et par les communautés de personnes handicapées.

    Par exemple, le niveau AA nécessite de maintenir un contraste entre un lien et l'arrière-plan d'au moins 4,5:1 pour la taille de police normale et 3:1 pour le texte de grande taille .

    Remarque : Vous pouvez toujours vérifier vos couleurs à l'aide du Contrast Checker en ligne ou du plug-in ContrastA de Figma.

    

    Focus State

    Comme tous les composants interactifs, les liens doivent avoir un focus clavier visible. Tous les navigateurs populaires ont un focus accessible intégré par défaut (vous avez peut-être vu ce cadre bleu en gras autour des champs de saisie, des listes déroulantes, des boutons et des liens dans Google Chrome). Malheureusement, sur certains sites, la mise au point est supprimée manuellement ou personnalisée visuellement de sorte qu'un un lien ciblé peut sembler encore moins visible (par exemple estompé).

    

    Optimisation pour les lecteurs d'écran

    Les utilisateurs aveugles ne voient pas le Web – ils l'écoutent au moyen de "lecteurs d'écran", des programmes d'assistance qui transforment un texte écrit en un discours robotique rapide. Ils naviguent avec un clavier et se souviennent de dizaines de raccourcis pratiques pour passer d'un titre, d'un bouton ou d'un lien à l'autre au lieu d'écouter docilement tout le contenu d'une page.

    Ainsi, lorsque vous supprimez la verbosité pour les personnes voyantes (par exemple, dans le listes de versions ou de formats linguistiques différents), il est important de garder les liens clairs pour les utilisateurs de lecteurs d'écran également. Sinon, les visiteurs aveugles entendront ce qui suit :

    « Ukrainien — lien, anglais — lien, allemand — lien » téléchargez le modèle de plan de projet en anglais — lien… »

    Et probablement la chose la plus ennuyeuse sur un site Web d'actualités est d'entendre ceci :

    « En savoir plus — lien, en savoir plus — lien, en savoir plus — lien »

    

    Les personnes voyantes peuvent deviner que « Lire la suite… » se rapporte au titre le plus proche, et les personnes aveugles ont besoin de read-mores individualisés. Heureusement, l'attribut HTML aria-label est utile ici ; il permet de joindre un texte explicatif pour les utilisateurs de lecteurs d'écran.

    C'est souvent la responsabilité d'un concepteur de composer un texte lié à l'accessibilité et de collaborer avec un développeur autour d'une implémentation optimale, voici donc un exemple de code simplifié :

    Actualités
    Eleks Design L'équipe participera au Space Hackathon.
    Lire la suite...
    
    Projector Tech and Creative Institute lance cette année cinq cours sur l'accessibilité du Web.
    Lire la suite...
    

    Comme vous pouvez le voir, chaque "Lire la suite" a une explication détaillée pour les lecteurs d'écran. Cependant, vous n'aurez pas besoin de vous occuper des liens des articles avec aria-label si chaque titre est un lien lui-même.

    Actualités
    Eleks Design Team participera au Space Hackathon
    
     Projector Tech et Creative Institute lancent cette année cinq cours sur l'accessibilité du Web
    

    Liens dupliqués

    Les liens identiques multiples sont encore une autre pratique controversée répandue. Par exemple, sur une page Web, cela signifie que la même adresse Web est associée à un titre d'article, à une image de héros et à une phrase d'introduction. À première vue, tout va bien : où que vous cliquiez, vous accédez à l'article. Mais pour les utilisateurs aveugles, cela signifie répéter trois fois la même information ce qui prolonge le temps dont ils ont besoin pour parcourir le contenu jusqu'à ce qui les intéresse.

    

    Une remarque importante : Nous parlons maintenant de destinations identiques, mais une fiche peut en inclure différentes, par exemple, un lien vers l'article, le profil de l'auteur et des balises. Dans ce cas, des liens mineurs peuvent apparaître « enroulés » dans le principal.

    

    Maintenant, les e-mails. Disons que nous avons une invitation à un événement en ligne, où un lien Zoom se répète plusieurs fois. Dans la description de l'événement, la section « quoi/quand/où » et la partie finale. Non seulement cela créera une impression de désordre pour les utilisateurs voyants, mais aussi les utilisateurs malvoyants auront du mal à sauter entre des liens dupliqués.

    

    Lecture recommandée

    Dans cet article, je voulais suggérer des options au lieu d'afficher le sujet en noir et blanc. Il existe plusieurs nuances de bon design, et vous pouvez trouver la vôtre sur le chevauchement des meilleures pratiques et de votre cas particulier. En attendant, quelques lectures supplémentaires sur ce sujet :

    (vf, yk, il)