Jour 13: Utilisez de vrais liens

Une des plaies de la conception Web est le lien "javascript:", un pseudo-lien qui éxécute un morceau de code en Javascript quand vous le cliquez. L'endroit le plus courant où vous rencontrez ce problème est le weblog où l'on trouve un lien pour afficher les commentaires dans une fenêtre individuelle. Pourquoi est-ce un problème ? Parce-que 11% des utilisateurs d'Internet n'utilisent pas Javascript pour une raison ou une autre, y compris les utilisateurs handicapés qui ont des navigateurs qui ne le supportent pas. Ces pseudo-liens ne fonctionneront pas pour eux ; utiliser des liens réels à la place.

Bien qu'il soit très facile de décrire et de réparer ce problème, je ne dirais jamais assez combien cette astuce est importante. Certains problèmes, comme ne pas avoir de "lien d'évitement" de votre barre de navigation, réduisent l'ergonomie à des degrés variables, mais au moins votre page est toujours lisible. Au contraire, ce problème rend des pans entiers de votre site Web complètement innaccessibles. Si vos commentaires sont cachés derrière un lien "javascript:", c'est comme s'ils n'existaient pas.

Qui en bénéficie ?

  1. Marc en bénéficie. Lynx ne supporte pas Javascript.
  2. Michel en bénéficie. Links ne supporte pas Javascript.
  3. Liliane en bénéficie. Bien qu'elle utilise Internet Explorer, son déparement informatique applique le règlement intérieur de n'autoriser Javascript que sur une petite liste de sites reconnus. Votre site Web n'est pas sur cette liste.
  4. Google en bénéficie. Google aimerait suivre ces liens et indexer leur contenu, mais il est incapable de suivre un lien "javascript:", parce-qu'il n'éxécute pas le code Javascript lorsqu'il indexe le Web.

Comment le réaliser ?

Les gabarits par défaut de Movable Type et Radio font cela correctement maintenant, il se peut donc que vous n'ayez rien à faire. Regardez le code source de votre page d'accueil et cherchez "javascript:". Si vous ne le trouvez pas, cette astuce ne s'applique pas à vous.

Cependant, si votre gabarit Movable Type contient un lien comme celui-ci :

<a href="javascript:OpenComments(<$MTEntryID$>)">Comments (<$MTEntryCommentCount$>)</a>

Alors changez le ainsi :

<a href="<$MTCGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>" onclick="OpenComments(<$MTEntryID$>); return false">Comments (<$MTEntryCommentCount$>)</a>

Dans les navigateurs compatibles Javascript, cela fonctionnera encore de la même façon, car l'attribut onclick a priorité sur l'attribut href. La nouvelle version appelle toujours la fonction OpenComments, qui ouvre une nouvelle fenêtre. Cependant les navigateurs non Javascript (et Google) ignoreront l'attribut onclick complètement et pourront suivre le lien spécifié dans href, ce qui affichera les commentaires dans la même fenêtre.

si vous utilisez les pseudo-liens javascript: pour d'autres raisons, arrêtez. Arrêtez immédiatement. Ne passez pas par la case départ, ne touchez pas les 500 €, etc. Appliquez la technique précédente à votre propre code de façon à ce que les navigateurs non Javascript puissent toujours suivre les liens réels.

Approfondir

Postscript

Ne pensez même pas à me faire parler des systèmes de menu basés sur Javascript. Ils vous rendent cool tout autant que fumer rend cool. Utilisez des liens réels.