Liens dans du texte

Bonjour
J'essaie d'adapter un site ancien pour le rendre accessible sur tablettes. Ce site contient essentiellement des textes avec un grand nombre de liens.
Le résultat pratique est que ces liens sont très proches les uns des autres et donc difficiles à cliquer sans souris.
Quelle méthode recommanderiez vous pour rendre ces liens un peu plus accessibles?
Merci de vos conseils

Bonjour PapyJP,

Google suggère une dimension de 32px² pour qu'un élément soit accessible (cliquable) sur mobile et tablette.
J'ajouterais aussi - je le précise car je l'ai vu récemment sur certains sites - rendre cliquable le conteneur du texte et pas seulement celui-ci.

Bonne journée.

Merci de ta réponse.
Pour clarifier la question, voici un exemple au hasard extrait de ce site, où les liens sont en rouge:
http://paralletes.free.fr/tests/photo/vues.jpg
et c'est loin de représenter la densité max de liens dans une phrase.
Avec une souris, pas de problèmes, mais avec un doigt...
Je pense à faire (en Javascript) quelque chose comme afficher la liste des liens d'une zone de texte sur un "ontouchstart" sur le titre de la zone.
Une autre idée?
Modifié par PapyJP (29 Feb 2016 - 10:33)

Ha oui, vu comme ça effectivement la question est intéressante. Évidement qu'appliquer une dimension à 32px² casserait entièrement le design.

Par expérience, je n'ai d'ailleurs croisé aucun site qui avait une astuce à l'épreuve des balles. La plupart du temps on galère à cliquer avec le doigt sur des liens intra-texto.


Je vais peut-être dire une connerie et ce n'est d'ailleurs peut-être pas réalisable mais imaginons un lien dont le texte apparaît tel que sur la capture d'écran. Pourquoi au lieu de cliquer directement sur un lien l'utilisateur ne cliquerait pas sur une boite vide qui est en avant plan par rapport au lien. Une espèce de zone de sûreté de Xpx de haut qui serait cliquable et qui renverrait vers la cible du lien (genre 1.4em de haut par ex) ? Reste qu'il faudra quand même un espace minimum entre deux liens. Pour le cas "vue ft-xxxxx, vue cb-ccccccc" cela resterait difficile à gérer.

Je vais réfléchir à tout ça..
Modifié par Greg_Lumiere (29 Feb 2016 - 12:35)

Bonjour,
Si la question est d'améliorer l'accessibilité des liens au sein d'un paragraphe, le fait d'augmenter la hauteur de ligne (CSS Line-Height) est déjà une première réponse. Il est difficile d'aller jusqu'aux préconisations Google, sous peine d'avoir des lignes trop espacées, mais une valeur de 1.5 ou un peu plus reste jouable.
J'utilise cet espacement sur min site (portail de test...) et cela semble fonctionner correctement sur portable, les liens étant cliquables sans difficulté avec les doigts.
Juste une piste...

Augmenter la taille du texte et l'interlignage serait en effet la meilleure option si ton souci est l'accessibilité (le RGAA exige un interlignage minimum de 1.5, par exemple).

Question purement technique, il me semble avoir vu (il y a longtemps) une technique utilisant un outline transparent et un outline-offset pour augmenter la zone cliquable : je ne sais pas si ça fonctionne vraiment, ni si ça fonctionne avec les navigateurs actuels…

Bonjour,

Je n'ai pas l'impression qu'il y ait beaucoup de sites qui passent à un interligne de 1.5 dans le but de régler ce problème de liens dans les textes. En plus de ça, ces liens sont souvent secondaires, longs et en moyenne rarement voisins d'autres liens, ce qui rend un clic avec le doigt pas si dur que ça. Si la police de base n'a pas été diminuée, je ne ferais rien.

Pour les 32px au carré préconisés de taille minimum, je crois que cela concerne plutôt les liens principaux et les boutons, pas vraiment les liens au sein d'un texte.

Amicalement,
Modifié par parsimonhi (29 Feb 2016 - 14:22)

parsimonhi a écrit :
Bonjour,

Je n'ai pas l'impression qu'il y ait beaucoup de sites qui passent à un interligne de 1.5 dans le but de régler ce problème de liens dans les textes. En plus de ça, ces liens sont souvent secondaires, longs et en moyenne rarement voisins d'autres liens, ce qui rend un clic avec le doigt pas si dur que ça. Si la police de base n'a pas été diminuée, je ne ferais rien.

Pour les 32px au carré préconisés de taille minimum, je crois que cela concerne plutôt les liens principaux et les boutons, pas vraiment les liens au sein d'un texte.

Amicalement,

Bin, sur l'image fournie par PapyJP il me semble bien voir deux liens sur deux lignes successives dont la distance de séparation verticale peut poser problème... Ou alors je dois consulter date date mon ophtalmo.
Si j'en crois les articles traitant de typographie et les règles d'accessibilité rappelées par Ten, un interlignage "aéré" a ses raisons d'être.
Je ne suis pas sûr que le caractère"secondaire" ou "long" des liens soit à prendre en compte dans le cas présent.
Le problème se résume à savoir s'il est possible ou non de cliquer dessus sans erreur.
Pour quelqu'un ayant de "gros doigts" ou déficient visuel, la nuance est d'importance.

Bonjour,

Greg_Lumiere a écrit :
Tout-à-fait, mais je pense que ce n'est pas parce que le lien est secondaire voir tertiaire qu'il ne doit pas être accessible. Sinon quel intéret de le mettre ?

En taille de police normal, un lien dans un texte est quand même pas inaccessible. Il est au pire juste un peu difficile à cliquer s'il est juste à côté d'un autre lien. S'il est d'un usage occasionnel, est-ce que ça vaut vraiment la peine de bâtir une usine à gaz pour ça ?

Amicalement,

Bonjour,

sepecat a écrit :

Bin, sur l'image fournie par PapyJP il me semble bien voir deux liens sur deux lignes successives dont la distance de séparation verticale peut poser problème... Ou alors je dois consulter date date mon ophtalmo.
Si j'en crois les articles traitant de typographie et les règles d'accessibilité rappelées par Ten, un interlignage "aéré" a ses raisons d'être.
Je ne suis pas sûr que le caractère"secondaire" ou "long" des liens soit à prendre en compte dans le cas présent.
Le problème se résume à savoir s'il est possible ou non de cliquer dessus sans erreur.
Pour quelqu'un ayant de "gros doigts" ou déficient visuel, la nuance est d'importance.

Oui, j'ai bien vu l'exemple initial. Et je suis du genre à ne quasi jamais descendre en dessous de 1em de taille de police, et à rechercher un design aéré. Par contre, je n'aime pas la complexité pour pas grand chose. Ici, à part éventuellement augmenter un peu le line-height si vraiment la densité des liens le justifie (je suis d'accord là-dessus même si c'est d'un usage rare), et surtout en prenant la précaution de choisir des unités qui tiendront compte des réglages des utilisateurs en difficulté (pas de font-size en px donc, et des font-size au minimum de 1em), je ne pense pas qu'il soit nécessaire de faire plus.

Amicalement,
Modifié par parsimonhi (29 Feb 2016 - 15:40)

parsimonhi a écrit :
Je suis du genre à ne quasi jamais descendre en dessous de 1em de taille de police, et à rechercher un design aéré...

+1. Je crois que tout le secret du truc est dans cette ligne...

Quelque soit le design je ne descendrais pas en dessous de 0.8em pour un paragraphe. De toute façon en dessous c'est illisible.

Merci à tous pour vos réponses.

Il me semble très difficile d'écarter suffisamment les liens sans remettre en cause la totalité du site.

Je crois que je vais faire des essais avec un bouton en fixed qui fait apparaître la liste des liens dans une fenêtre.
La suite sans doute dans le secteur "javascript" du forum...