Fermer

décembre 6, 2021

Une ligne directrice —


Résumé rapide ↬

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 !

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.

 Une comparaison de quatre phrases avec des liens « méchants » (à gauche) et quatre phrases avec des liens « mieux » (à droite). Il est recommandé d'éviter d'utiliser « ici » ou « ceci » et d'utiliser des parties de phrases explicites comme liens.

Les liens intégrés dans des phrases significatives sont plus compréhensibles. ( Grand aperçu)

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" »/>

Un texte de lien bien composé a généralement un sens hors contexte. ( Grand aperçu)

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.

 Une comparaison des liens intégrés dans des phrases significatives (à gauche, indiqués comme « bons ») et des liens exposant des URL courtes (à droite, indiqués comme « aussi décents »)

Dans de nombreux cas, il n'y a rien de mal à exposer des URL courtes ; cependant, ce ne sera pas la solution la plus élégante d'un point de vue visuel. ( Grand aperçu)

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).

Une comparaison d'une manière « décente » de utilisez des liens raccourcis (sur la gauche) et une manière « vilaine » qui n'a pas l'air très bonne et utilise trop d'espace

Les URL « long charabia » occupent beaucoup d'espace et sont difficiles à mémoriser. Cependant, ils pourraient devenir une solution non sophistiquée mais pratique pour le copier-coller. ( Grand aperçu)

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 »/>
    Une bonne pratique pour les liens de téléchargement consiste à afficher le format et la taille du fichier. ( Grand aperçu)

    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.

     Une comparaison des liens avec de nombreux mots répétés aux liens concis qui ont été édités et sont maintenant « moins verbeux »

    Plus avec moins : essayez d'éditer les mots répétés et garder la liste compacte. ( Grand aperçu)
    Plus après le saut ! Continuez à lire ci-dessous ↓

    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 »

     Un exemple « coquin » présenté à gauche d'un lien de touche subtil utilisé dans un texte aléatoire. Sur la droite, le même titre et le même texte aléatoire sont présentés mais avec un bouton bleu bien visible qui dit « Acheter des billets »

    Le lien clé mérite d'être un bouton bien visible. ( Grand aperçu)

    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.

     ]Un exemple avec le bouton à gauche, alors que le même titre et le même texte aléatoire sont affichés à l'aide d'un lien principal situé sur une ligne séparée avec un espacement par rapport au reste du texte

    Le lien principal peut également être situé sur un ligne séparée avec espacement du reste du texte. ( Grand aperçu)

    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.

       Une comparaison du bouton de lien avec un texte long (à gauche) et une autre version illustrée à l'aide d'un bouton concis avec un texte court ( à droite)

      Les boutons proéminents conviennent jusqu'à ce qu'ils se transforment en bannières agressives ou soient surutilisés. ( Grand aperçu)

      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 »).

      Un exemple d'un le texte encombré de liens affiché à gauche et un autre avec une liste concise de liens à droite

      Les textes encombrés de liens submergent le public avec trop d'options. De plus, il est difficile de formuler des liens lorsqu'ils font partie d'une phrase. ( Grand aperçu)

      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 ?

       Le même exemple que ci-dessus mais maintenant l'une des phrases « Obtenez des billets gratuits » est présentée comme un bouton bleu et attire donc plus l'attention

      Le plus accrocheur un lien est, plus il incite à cliquer/tapoter dessus. ( Grand aperçu)

      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.

      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.

       Une comparaison de trois façons d'utiliser les liens qui se distinguent par la couleur : les liens affichés en texte bleu (à gauche), les liens soulignés affichés en texte bleu (au milieu) et les liens affichés en caractères bleus gras. (à droite)

      Les liens doivent différer du reste du texte par au moins une caractéristique supplémentaire, à l'exception de la couleur. ( Grand aperçu)

      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.

      A comparaison de liens avec différentes recommandations de contraste de couleur selon les deux niveaux de conformité de contraste des WCAG

      La mesure du contraste à l'œil nu ne fonctionne pas toujours. Par exemple, le vert doit être plus foncé et plus saturé que le bleu pour satisfaire à l'exigence. ( Grand aperçu)

      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é).

      Non focalisé (gauche), mise au point standard (milieu) et personnalisé exemples de focus (à droite) illustrés à l'aide de liens soulignés et colorés (bleu)

      Si vous n'avez pas d'inspiration pour créer un état de focus personnalisé, conservez au moins celui standard. ( Grand aperçu)

      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 »

       Un exemple d'utilisation des liens « Lire la suite » à gauche par rapport à une version avec des titres utilisés comme liens à droite

      Il existe deux manières principales de mettre un lien sur une page d'actualités : faire de chaque titre un lien ou ajouter un auxiliaire des phrases telles que « Lire la suite… ». ( Grand aperçu)

      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.

      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.

       À gauche : un exemple de plusieurs liens identiques vers le même lien qui couvre tout le bloc. À droite, le même lien affiché une fois.

      Il est préférable de faire de l'ensemble du bloc un lien plutôt que de créer plusieurs liens qui guident vers la même destination. ( Grand aperçu)

      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.

      Un exemple de lien principal (à gauche) et de liens secondaires qui sont « enroulés » dans le principal (à droite)

      La zone de clic de le lien principal 'enveloppe' les liens auxiliaires (profil de l'auteur et tags). ( Grand aperçu)

      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.

      Un exemple « vilain » présenté à gauche avec des liens dupliqués fournis dans un texte comparé à un "meilleur" exemple montré à droite montrant un lien proéminent présenté comme un bouton bleu

      Un lien proéminent parle plus fort qu'un tas de liens dispersés. ( Grand aperçu)

      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 :

      Smashing Editorial" width="35" height="46" loading="lazy" decoding="async(vf, yk, il)




Source link