Transformation élégante des pages présentant de nouvelles technologies
Par Victor Brito, le jeudi 14 février 2008, à 15h00 - Moyens techniques - Lien permanent
Il s'agit de s'assurer que les pages sont accessibles lorsque ces nouvelles technologies sont désactivées ou ne sont pas prises en charge.
Il s'agit de s'assurer que les pages restent parfaitement consultables sans feuille de style. C'est un point d'autant plus facile à vérifier que des navigateurs visuels, comme Firefox ou Opera, offrent la possibilité de désactiver aisément les CSS. On peut aussi vérifier ce point en affichant la page sous un navigateur textuel comme Lynx, qui donne une idée de la manière dont la page est vue par les robots des moteurs de recherche.
Il s'agit aussi de s'assurer que les pages restent consultables lorsque les scripts et autres artefacts programmables sont désactivés ou ne sont pas pris en compte. Par conséquent, il faut éviter de recourir à des liens du type <a href="javascript: uneFonction ()">cliquez ici</a> : ils ne pourront pas être suivis par les utilisateurs qui n'ont pas JavaScript, parmi lesquels les robots des moteurs de recherche. Si la page a besoin d'employer des scripts, il faudra soit utiliser l'élément noscript (dont le contenu sera affiché par les navigateurs ne prenant pas en charge le script) soit remplacer les scripts exécutés sur le poste client par des scripts côté serveur, à moins de proposer une page équivalente sans ces scripts. L'élément noscript doit être utilisé comme suit :
<script type="text/javascript"> un bout de code JavaScript </script> <noscript> <p>Contenu affiché si le script n'est pas pris en charge</p> </noscript>
Lorsque des scripts sont utilisés et qu'ils possèdent des gestionnaires d'événements, il faut s'assurer que l'utilisation de ces derniers soit indépendante des périphériques employés par l'utilisateur. Autrement dit, un événement se déclenchant par un clic de souris doit pouvoir être déclenché par l'appui sur une touche si l'utilisateur choisit la navigation au clavier, comme le montre le code ci-dessous :
<a href="un-lien.html" onclick="javascript: unEvenement ()" onkeypress="javascript: unEvenement ()">contenu du lien</a>
Lorsque du contenu dynamique est utilisé, il faut s'assurer qu'en cas de changement de ce dernier, ses équivalents soient aussi mis à jour. Prenons l'exemple d'une page utilisant un jeu de cadres :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Jeu de cadres</title> </head> <frameset cols="100%" title="Cadre principal"> <frame name="cadre" src="pommes.png" title="Pommes" /> </frameset> </html>
La page affiche une image dans le cadre unique. Imaginons qu'un lien vers une autre image cible ce cadre, lien codé comme suit :
<p>J'aime <a href="oranges.png" target="cadre" title="Oranges">les oranges</a></p>
Le titre initial du cadre (Pommes
) ne s'accordera plus avec le contenu courant dudit cadre (Oranges
). Par conséquent, l'attribut src de frame devrait cibler un fichier HTML, dans lequel l'image serait insérée, comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Jeu de cadres</title> </head> <frameset cols="100%" title="Cadre principal"> <frame name="cadre" src="pommes.html" title="Pommes" /> </frameset> </html> <!-- Dans pommes.html --> <p><img src="pommes.png" alt="Pommes" /></p>
En outre, il faut s'assurer que ce contenu dynamique reste accessible. Si ce n'est pas possible, il faut fournir une présentation de la page équivalente. Dans le cas d'un jeu de cadres, on emploiera la balise noframes, qui doit être placé dans l'élément frameset, après les différents éléments frame, et dont le contenu sera affiché par les navigateurs ne prenant pas en charge les jeux de cadres et sera visible des robots des moteurs de recherche.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Jeu de cadres</title>
</head>
<frameset cols="100%" title="Cadre principal">
<frame name="cadre" src="pommes.html" title="Pommes" />
<noframes>
<body>
<p><img src="pommes.png" alt="Pommes" /></p>
</body>
</noframes>
</frameset>
</html>
