Ajax, navigation et accessibilité… Exemple pratique

Hadrien — Sat, 08 Sep 2007 23:42:00 +0200

J'ai codé à l'arrache un exemple pratique pour illustrer mon astuce concernant la navigation en Ajax accessible. Bon, c'est pas encore top au point, mais ça fonctionne nickel sous Firefox. Sous Safari 2, l'historique n'est pas modifié donc, pas de précédent ou suivant. Seul le rechargement de page fonctionne. Opera 9.5, seul le bouton Suivant ne fonctionne étrangement pas. Et IE, j'ai pas testé : j'ai pas envie de lancer VMWare : j'attends vos retours en commentaires.

Donc, de quoi s'agit il ? Nous avons une liste paginée. Sont affichés la liste des articles de ce blog par lot de 10 éléments. Une pagination en dessous permet d'afficher les 10 éléments suivants grâce à Ajax. Vous constaterez que lors d'un clic sur un numéro de page, une ancre s'ajoute à l'url. Mais aucun rechargement de page ne s'effectue.

Faîtes donc le test suivant : naviguez de page en page, puis rechargez la page. Vous vous retrouverez à la même pagination où vous étiez \o/ Attention, ce n'est pas fini. Cliquez sur le bouton précédent de votre navigateur… Pas de rechargement ni de changement de page, mais vous voilà quand même à la pagination précédente, toujours en ajax :o Revenez donc en arrière deux ou trois fois, puis repartez en avant. Même principe. Tout se charge par Ajax.

Voilà une application Ajax totalement accessible et qui reste utilisable comme tout site traditionnel.

Ah oui, ça se passe ici :

Exemple pratique pour rendre Ajax accessible

La prochaine étape sera d'écrire un module pour YUI afin de faciliter l'implémentation de cette méthode.

Ajax, navigation et accessibilité…

Hadrien — Sun, 26 Aug 2007 14:55:00 +0200

Quand on fait un site tout en Ajax, la problématique principale est l'accessibilité. Quand le contenu de la page web est chargée avec Ajax, il n'y a plus de changement physique de page, donc d'url. Du coup, les boutons précédents, suivant et recharger du navigateur ne serve à rien, hormis ramener à la page d'accueil du site. Sans débattre sur l'utilité de faire un site 100% ajax, voici un moyen de ne pas perdre le fil de la navigation.

Imaginons le cas pratique suivant. J'arrive sur une page avec une liste d'items et des boutons de pagination (précédent - 1 - 2 -3 - suivant). Je clique sur suivant, et seul la liste des items est chargée via ajax. Je clique 3 fois sur suivant, je suis donc à 4 chargements de listes, et je trouve enfin ce que je cherche. Sur l'item en question, un lien externe m'envoie vers une nouvelle page. Zut, c'était pas ça. Je clique sur le bouton précédent de mon navigateur… Arf… Me revoilà à la première page de pagination de ma liste d'item. Heureusement que je me souviens que j'était à la 4° page, sinon, j'aurais du me retaper tout les clics sur suivant jusqu'à reconnaitre la page où j'étais.

Pour éviter ceci, je vous propose une solution toute simple. Le concept est de placer des paramètres en tant qu'ancre dans l'url :

Nous arrivons sur la page principale, nous sommes à l'adresse :
http://www.monsiteenajax.com/liste.html

Je clique sur suivant, l'adresse ne change pas. C'est ici qu'il faut agir. Lors du clic, je vais ajouter une ancre à l'url avec mes paramètres pour me retrouver avec une url de ce style :
http://www.monsiteenajax.com/liste.html#page-2

Pour ce faire, il suffit de changer la valeur de window.location. Voici une fonction qui permet de changer cette valeur :

var changeAnchor = function(anchor)
{
	// Si l'url possède déjà une ancre
	if (window.location.href.match(new RegExp('#.*$')))
	{
		window.location = window.location.href.replace(
			new RegExp('#.*$'),
			'#' + anchor
		);
	}
	// Sinon, il suffit de l'ajouter à la fin
	else
	{
		window.location = window.location.href + "#" + anchor
	}
	
	return window.location;
}

Donc, lors de l'évenement qui va déclencher la requete ajax et l'affichage de la deuxième page de la liste, je fais un petit changeAnchor('page-2') afin de changer mon ancre et garder en mémoire que je suis sur la pagination numéro 2.
Ainsi, si je change de page, puis que je clique sur Précédent, ça sera l'url http://www.monsiteenajax.com/liste.html#page-2 qui sera chargée.

Ne reste plus qu'à exploiter cette fonction. C'est encore tout simple. Implémentez cette fonction :

var getAnchor = function()
{
	return window.location.href.match(
		new RegExp('#.*$')
	);
}

Il ne reste plus qu'à l'appeler au load de la page, et de faire les actions relatives à ce qu'elle renvoit.

Reprenons notre cas. Je clique sur le lien pour avoir la pagination suivante. Cela va appeler une fonction qui va charger la liste et à la fin, elle va faire un changeAnchor('page-2').

Sur le onload de la page, je met un switch sur le getAnchor pour effectuer les actions relative. Donc, là, si mon anchor contient page, il faudra afficher la page dont le numéro suit :

window.onload = function()
{
	// Je récupère l'ancre et la splite sur le '-' car
	// j'ai décidé de séparer mes paramètres par des '-'
	var startParams = getAnchor()page.split('-');
	
	// Je teste le premier paramètre
	switch (startParams[0])
	{
		case 'page':
			// Je suis dans le cas de la pagination
			
			// Si le deuxième paramètre est setté
			if (startParams[1])
			{
				// J'apelle ma méthode d'affichage de page
				// avec le paramètre adéquat
				displayPage(
					startParams[1]
				);
			}
			break;
		
		// Je peux imaginer un autre cas
		case 'autrecas':
			doSomething();
			break;
	}
}

Et voilà. Si je quitte cette page, puis que j'y reviens en consultant mon historique, je reviendrais à l'affichage ajax correspondant. Autre bonus, à chaque fois que l'on change l'ancre via changeAnchor(), c'est une nouvelle entrée dans l'historique du navigateur qui se crée. Donc, on peut réellement utiliser les boutons de la navigation comme pour un site traditionnel.

Un autre avantage très important, c'est que le site redevient bookmarkable. L'utilisateur peut sans problème mettre en signet une page modifiée par ajax.

Si vous avez des remarques ou des améliorations à proposer, n'hésitez pas

EDIT : Voici un exemple pratique.

Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - astuce

Ajax, navigation et accessibilité… Exemple pratique

Ajax, navigation et accessibilité…