Information de contexte et d'orientation
Par Victor Brito, le jeudi 14 février 2008, à 15h00 - Catégorie Moyens techniques - Lien permanent
Il s'agit de s'assurer que l'utilisateur reçoive des renseignements sur le contexte et l'orientation, de façon à ce qu'il comprenne les éléments et les mises en page complexes.
Dans un jeu de cadres, il faut donner un titre à chaque cadre pour faciliter son identification et sa navigation. En HTML, on emploie l'attribut title dans l'élément frame.
<!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>Un document sous forme de jeu de cadres</title>
</head>
<frameset cols="10%, 90%" title="Notre bibliothèque de documents électroniques">
<frame src="nav.html" title="Barre de navigation" />
<frame src="doc.html" title="Documents" />
<noframes>
<body>
<p><a href="bibliotheque.html" title="Lien vers la bibliothèque">Aller à la bibliothèque électronique</a></p>
</body>
</noframes>
</frameset>
</html>
Si l'intitulé des cadres ne suffit pas à rendre évidente leur compréhension, décrire l'objectif de ces cadres et la manière dont ils interagissent entre eux. En HTML, on complète l'attribut title par l'attribut longdesc, dont la valeur est l'URL contenant la description détaillée ; on peut aussi créer un lien vers cette description. En reprenant l'exemple indiqué plus haut, on obtient ceci :
<!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>Un document sous forme de jeu de cadres</title>
</head>
<frameset cols="10%, 90%" title="Notre bibliothèque de documents électroniques">
<frame src="nav.html" title="Barre de navigation" longdesc="description.html#navigation" />
<frame src="doc.html" title="Documents" longdesc="description.html#documents" />
<noframes>
<body>
<p><a href="description.html">Description des cadres</a></p>
<p><a href="bibliotheque.html" title="Lien vers la bibliothèque">Aller à la bibliothèque électronique</a></p>
</body>
</noframes>
</frameset>
</html>
<!--
Dans la page description.html, un contenu de ce genre :
#navigation - Ce cadre fournit les liens permettant la navigation dans le site
#documents - Ce cadre affiche le document courant
-->
Lorsque de gros blocs d'information sont fournis, il est plus judicieux de les diviser en groupes plus facilement manipulables. Dans un formulaire en HTML, on regroupera les champs ayant des points communs dans un élément fieldset et les différentes options d'un champ de sélection dans des éléments optgroup, comme dans cet exemple :
<form method="post" action="monformulaire.html">
<fieldset>
<legend>État civil</legend>
<p><label for="nom">Nom</label> <input id="nom" name="nom" type="text" /></p>
<p><label for="prenom">Prénom</label> <input id="prenom" name="prenom" type="text" /></p>
</fieldset>
<fieldset>
<legend>Localisation géographique</legend>
<p>
<label for="localisation">Région et département</label>
<select id="localisation" name="localisation">
<optgroup label="Alsace">
<option value="67">Bas-Rhin</option>
<option value="68">Haut-Rhin</option>
</optgroup>
<optgroup label="Auvergne">
<option value="03">Allier</option>
<option value="15">Cantal</option>
<option value="43">Haute-Loire</option>
<option value="63">Puy-de-Dôme</option>
</optgroup>
</select>
</p>
</fieldset>
</form>
En outre, en HTML, il est possible d'imbriquer des listes quand c'est approprié, sans oublier l'utilisation d'en-têtes pour structurer le document.
<h1>Découpage administratif de la France</h1>
<h2>Liste des régions, avec leurs départements respectifs</h2>
<ol>
<li>
Alsace
<ul>
<li>Bas-Rhin</li>
<li>Haut-Rhin</li>
</ul>
</li>
<li>
Auvergne
<ul>
<li>Allier</li>
<li>Cantal</li>
<li>Haute-Loire</li>
<li>Puy-de-Dôme</li>
</ul>
</li>
</ol>
<h3>Alsace</h3>
<h4>Bas-Rhin</h4>
<dl>
<dt>Préfecture</dt>
<dd>Strasbourg</dd>
<dt>Sous-préfectures</dt>
<dd>Haguenau</dd>
<dd>Molsheim</dd>
<dd>Saverne</dd>
<dd>Sélestat</dd>
<dd>Wissembourg</dd>
</dl>
Enfin, il faut associer explicitement l'étiquette du champ de contrôle de formulaire auquel il se rapporte. En HTML, on utilise l'élément label pourvu de l'attribut for, dont la valeur est celle de l'attribut id du champ de contrôle.
<label for="prenom">Prénom</label> <input id="prenom" type="text" />

