Billets publiés en septembre 2008 ↓

J’emprunte un instant la plume de 20cent (merci, 20cent) afin de vous faire part d’un sujet qui me travaille depuis quelque temps : la protection des adresses emails publiées dans le rédactionnel de nos sites.

Attention, je ne parlerai pas ici des formulaires d’envoi d’email protégés par les CAPTCHA et autres techniques plus ou moins fiables, mais bien des adresses emails présentes textuellement dans le corps de nos sites.

Faire ça bien

Mon postulat de départ :

• je ne pense pas que mettre les adresses en dur soit forcément très malin, mais des fois, en tant que petite main du web, on n’a pas le choix ;
• je veux respecter au maximum l’accessibilité, c’est à dire que mon adresse email soit lisible par monsieur tout le monde (ça exclut déjà pas mal de bidouilles) ;
• je n’ai pas du tout envie d’utiliser la technique du remplacement de l’adresse texte par une image (façon Facebook), que je trouve disgracieuse et pénible à l’usage ;
• je n’exclue évidemment pas de compléter les techniques de protection front par d’autres méthodes, comme par exemple les filtres anti-spams des boîtes email.

Or donc

Habituellement, ma technique de protection des emails est relativement basique, voire simpliste. Dans mon corps de page, j’échappe manuellement les « @ » et « . » de mes adresses et je ne mets aucun lien « mailto » en dur :

info[AT]mon-site[DOT]com

Ensuite via JavaScript, je transforme ma source pour en faire ça :

<a href="mailto:info@mon-site.com">info@mon-site.com</a>

Je vous sens déjà muets d’admiration.

Les avantages :

• ça reste lisible par un humain sans JavaScript ;
• c’est très confortable à l’usage pour l’humain muni de JavaScript.

Cela dit, les spambots ne sont peut-être pas aussi bêtes que je l’espère…

Une autre piste

Nouvelle idée donc, utiliser l’attribut dir qui permet de définir en HTML le sens de lecture d’un conteneur. En écrivant l’adresse à l’envers et en ajoutant la balise bdo munie de l’attribut dir à la valeur rtl (right to left), on obtient le bon texte à l’écran avec son inverse dans le code source.

Par exemple :

<p>moc[TOD]etis-nom[TA]ofni</p>

apparaîtra comme ça dans votre navigateur :

info[AT]mon-site[DOT]com

Il ne reste plus qu’à compléter via Javascript l’écriture du « mailto » (etc.) de ma technique initiale, histoire de brouiller un peu plus les pistes pour les spambots.

Les avantages :

• les mêmes que ci-dessus en complexifiant encore l’affaire ;
• sans CSS ça reste parfaitement lisible puisque c’est HTML qui gère la mise en forme « à l’endroit » de l’adresse pour la rendre compréhensible ;
• donc a priori c’est plutôt accessible.

Hélas ! Les inconvénients :

• j’ai tenté l’expérience sous Lynx (navigateur en mode texte pour ceux qui vivent sous terre depuis 1995), et l’attribut dir n’est pas actif… ce qui me laisse assez pessimiste sur l’accessibilité de la chose ;
• un copier-coller sous Firefox restituera le texte à l’envers… encore un point faible ;
• sémantiquement, c’est une utilisation a priori (?) détournée de l’attribut dir.

Ce serait peut-être pas mal de tester avec Jaws (hélas, je ne l’ai pas sous la main).

Bref, je suis quand même assez mitigé sur ce qui ressemblait à une belle idée.

Seriez-vous trop couard pour prendre mon gant ?

Voilà, j’ai fini. Si vous avez des compléments et des critiques à apporter, ou si vous souhaitez partager vos propres techniques, je suis tout ouï (c’est le but initial de ce sujet d’ailleurs).

Cordialement, STPo