mardi 10 février 2009

Utiliser jQuery pour augmenter l'accessibilité

C'est vrai, ce n'est pas donné à tous de bien voir. Certains ne voient pas du tout, mais nous reparlerons de ceux-ci dans un autre message (peut-être). Aujourd'hui nous allons nous concentrer sur ceux qui ont de la difficulté à lire les textes, que ce soit par handicap ou simplement par habitude.

Le code que je vous propose aujourd'hui est un petit script très simple qui permet de gérer l'agrandissement et la réduction de la taille de police sur votre page. Évidemment, ceci ne fonctionne que si vous avez utilisés des mesures relatives (em, %), chose que vous devriez toujours faire!

Ce script utilise la bibliothèque jQuery (http://jquery.com/) ainsi qu'un plugin appelé jQuery cookie (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)

Tout d'abord, nous allons développer les techniques utilisés pour conserver la taille de police dans un cookie;
var accessCookie = 'font'; //Le nom du cookie
function getSavedSize(){
var taille = parseFloat($('html').css('font-size'));//On va chercher la taille actuelle
var cookieTaille = $.cookie(accessCookie);
if(cookieTaille){ //Si la valeur existe, nous l'affectons à la variable
taille = cookieTaille;
}
return taille;
}

function saveSize(size){
$.cookie(accessCookie, size, { expires: 365 }); //Expires dans 1 an
}

Ensuite, nous devons ajouter le code pour la modification de la taille de police. C'est plutôt facile avec jQuery;
var originalSize = $('html').css('font-size'); //Pour revenir à la taille en tout temps,
//même si celle-ci est modifié par l'utilisateur (qui utilise IE par exemple)
function modifyFont(increase){
var nouvelleTaille = parseFloat($('html').css('font-size')) + increase;
setFont(nouvelleTaille);
}

function setFont(size){
$('html').animate({fontSize:size},300);
saveSize(size);
}

Finalement, on ajoute le code pour que les différents boutons utilisent le code;
$(document).ready(function() {
$('#increaseFont').click(function(){
modifyFont(2); //Normalement, les gens veulent grossir la police rapidement
return false;
});
$('#resetFont').click(function(){
setFont(originalSize);
return false;
});
$('#decreaseFont').click(function(){
modifyFont(-1); //Ou ils veulent la réduire lentement, afin d'être précis
return false;
});

//Afin de modifier la taille de la police au chargement (ainsi l'utilisateur ne voit
//pas que la police est modifié à chaque nouvelle page)
var size = getSavedSize() + '';
$("html").css({fontSize : size + (size.indexOf("px")!=-1 ? "" : "px")});
});

Voila! L'avantage de ce script est qu'il est réutilisable et vous pouvez l'utiliser avec n'importe quel élément HTML; vous n'avez qu'à définir le bon "id" pour chaque "bouton". Voici un exemple simple de trois liens qui permettent d'utiliser ce script et qui ne causent aucun problème si Javascript n'est pas activé;
<a href="#" id="increaseFont" title="Augmenter la taille de police">A+</a>&nbsp;
<a href="#" id="resetFont" title="Restaurer la taille de police">a</a>&nbsp;
<a href="#" id="decreaseFont" title="Diminuer la taille de police">a-</a>

Voilà! Ce n'est pas très compliqué comme code, mais je pense que c'est le genre de choses qui mérite définitivement 5 minutes de votre temps lorsque vous créez une page web. Les gens qui souffrent de problèmes de vue apprécieront définitivement l'effort et le temps que vous avez pris pour eux!