Des « enhancements » pour votre page de recherche

Connaissez-vous le concept anglosaxon d’enhancement ? En français ça se traduirait par amélioration. Les js enhancement ou css enhancement améliorent vos pages sans pour autant priver les utilisateurs dont le navigateur n’aurait qu’un support succint des css ou de javascript des fonctionnalités de base. Aujourd’hui je vous propose quelques enhancements améliorations pour votre très précieuse page de recherche.

Les access key

En html, les liens et les éléments de formulaires peuvent se voir attribuer un attribut accesskey. Exemple : <input type="text" name="s" id="s" accesskey="r" />

A l’origine créés pour améliorer l’accessibilité sur les pages web, les accesskey permettent de créer des raccourcis pour accéder à certains éléments d’une page html. Par exemple sur le barbablog, grâce au petit bout de code ci-dessus, vous pouvez sur toutes les pages et à tout instant à la recherche d’une simple pression des touches Ctrl et R (‘tain j’aurais dû être vendeur d’épluche légumes magique sur un marché moi).

Informez vos utilisateurs

C’est bien beau les accesskey mais encore faut-il informer vos visiteurs que vous leur avez mis à disposition ces raccourcis. Sur ce site, j’ai mis cette information en bas de la page de recherche, près la liste des résultats. Pourquoi en bas ? Parce que le plus important sur une page de recherche, c’est comme l’indique le nom de la page : les résultats. Donc pas la peine de polluer le haut de la page avec une information que l’utilisateur n’est pas venu chercher.

De plus, on peut légitimement supposer que si l’internaute n’a pas trouvé son bonheur lors de sa recherche après avoir consulté la liste des résultats, il voudra relancer une recherche. C’est là que vous lui parlez des accesskey :

Pour effecteur une nouvelle recherche, vous pouvez utiliser le raccourci clavier Alt + R sur internet explorer, Shift + Alt + R sur Firefox, Ctrl + R sur Safari.

Une pincée de css

Si vous avez un navigateur de dernière génération vous devez normalement voir dans le texte ci-dessus les noms de touches avec une bordure qui donne un petit effet de relief, genre comme si c’était une touche de clavier. Ca tombe bien vu que c’est ce qu’on veut faire comprendre à nos utilisateurs.

Ce qui est encore plus chouette c’est que pour désigner du texte à entrer sur un clavier, il existe en html le tag <kbd>. KBD pour keyboard. Avec un peu de css et un marquage sémantique on aboutit à un résultat assez parlant.

le html

<p class="helper">Pour effecteur une <a href="#searchheader">nouvelle recherche</a>, vous pouvez utiliser le raccourci clavier <kbd>Alt</kbd> + <kbd>R</kbd> sur internet explorer, <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> sur Firefox, <kbd>Ctrl</kbd> + <kbd>R</kbd> sur Safari.</p>

les css

p.helper small {color:#666; font-size: .8em; margin: 1em 0}
kbd {border: 1px outset #333; background: #eee; font-size: 1.1em; color: #c00; padding: .1em .3em; font-family:"Courier New", Courier, mono; font-family:Geneva, Arial, Helvetica, sans-serif; }

Une louchette de javascript

Si vous êtes observateurs, vous aurez constaté que j’ai placé sur les mots « nouvelle recherche » un lien. Vous l’avez vu ? Bravo, vous avez gagné un week end en Normandie pour 2 personnes. Le lien renvoie vers une ancre nommée, #searchheader, l’id de mon input texte pour entrer une recherche. Ainsi lorsque l’utilisateur cliquera sur ce lien, il sera renvoyé en haut de la page, au niveau du formulaire de recherche.

Mais on peut faire mieux. Et si, comme dirait marc Lévy, et si en plus de renvoyer vers le formulaire on donnait le focus [1] au champ de recherche (ainsi vous pouvez entrer directement des termes à rechercher). C’est possible vous répondrai-je avec le sourire et du javascript.

Je vous la fait courte et sans explication de texte mais avec quand même des commentaires dans le code. Si l’explication est trop succinte ou si vous avez des problèmes pour mettre en oeuvre ce script chez vous, n’hésitez pas à vous manifester dans les commentaires.

// pour lancer le script au chargement de la page
addEvent(window,'load',initNewSearch); // au chargement de la page, on déclenche la fonction initNewSearch, laquelle va ajouter un nouveau comportement sur le lien
// fonction d'initialisation
function initNewSearch() {
if(!getElementsByClass('helper')) return; // on ne déclenche cette fonction que si on trouve un paragraphe avec une classe "helper". getElementsByClass est une fonction de ma bibliothèque personnelle
var myLink = getElementsByClass('helper')[0].getElementsByTagName('a')[0]; // on cible le premier lien de ce paragraphe
addEvent(myLink,'click', newSearch); // on ajoute un comportement à ce lien : on lance la fonction newSearch lorsque le lien est cliqué
}
// Fonction principale
function newSearch() {
var searchInput= $('s'); // cible le champ texte pour la recherche. $ est un raccourci pour document.getElementById()
searchInput.value=""; // on vide le champs
searchInput.focus(); // on lui donne le focus
}

Pour info, je n’utilise pas de librairies javascript type jquery, prototype ou mootools sur ce blog car comme je l’ai déjà écrit dans un billet sur la refonte de ce blog, je les trouve assez lourde et surtout surdimensionnée pour un site de ce type. A la place, j’utilise une librairie récupérée chez Dustin Diaz composée des 10 fonctions javascript les plus utilisées. Vous trouverez les fonctions $(), getElementsByClas() et addevent() chez lui.

Et encore une pincée de css pour alerter l’utilisateur

C’est bien beau de donner le focus au champ de recherche lorsqu’on clique sur le lien « nouvelle recherche » ou lorsqu’on utilise les accesskey, encore faut-il en informer l’utilisateur. Ça tombe bien, en css il existe une pseudo classe :focus qui permet de cibler l’élément qui a le focus sur votre page.

En l’utilisant intelligemment et en changeant l’aspect du champ de recherche lorsque celui ci a le focus, on signale alors à l’utilisateur qu’il s’est passé quelque chose.

input#s {border: 1px solid #000; padding : 1px 3px;} /* le champ de recherche a un fond blanc et une bordure noire lorsqu'il n'est pas utilisé */
input#s:focus {background: #000; border: 2px solid #fff; color: #FFF;} /* le champ de recherche a un fond noir et une bordure blanche lorsqu'il a le focus */

Pour comprendre l’effet dont je parle, utiliser le racourci clavier Alt + R sur internet explorer, Shift + Alt + R sur Firefox, Ctrl + R sur Safari. Effet garanti [2] !

1. Pour les non initiés, donner le focus signifie activer le champs texte
2. (enfin pas sur ie, lui, il n’interprète pas la pseudo classe focus).