Notes de bas de page

Code

<section>
	<h2>But</h2>
	<p>Le plugiciel Notes de bas de page vise à mettre en place une méthode cohérente et facile d’accès pour répertorier les notes de bas de page dans l’ensemble des sites Web du gouvernement canadien. L’idée force qui sous-tend cette solution consiste à classer les notes de bas de page dans une liste de définitions à l’intérieur d’une section spécifique. Un exemple de ceci peut être trouvé dans la section <a href="#fn">Notes de bas de page</a>. Des styles CSS servent à disposer les notes de bas de page et à dissimuler les aides à la navigation<sup id="fn1-rf"><a class="fn-lnk" href="#fn1"><span class="wb-inv">Note de bas de page </span>1</a></sup>.</p>
</section>

<section>
	<h2>Avantages</h2>
	<ul>
		<li>Conformes à WCAG 2.0 AA<sup id="fn2-1-rf"><a class="fn-lnk" href="#fn2"><span class="wb-inv">Note de bas de page </span>2</a></sup></li>
		<li>Approche d'amélioration progressive</li>
		<li>Soutien pour Firefox, Opera, Safari, Chrome et IE 7+<sup id="fn2-2-rf"><a class="fn-lnk" href="#fn2"><span class="wb-inv">Note de bas de page </span>2</a></sup></li>
		<li>Soutien pour l'anglais et le français</li>
		<li>Mise en page et conception configurable<sup id="fn2-3-rf"><a class="fn-lnk" href="#fn2"><span class="wb-inv">Note de bas de page </span>2</a></sup> <sup id="fn3-rf"><a class="fn-lnk" href="#fn3"><span class="wb-inv">Note de bas de page </span>3</a></sup></li>
	</ul>
</section>

<section>
	<h2>Utilisation recommandée</h2>
		<ul>
			<li>Exécuter les notes de bas de page dans les pages Web<sup id="fn*-rf"><a class="fn-lnk" href="#fn*"><span class="wb-inv">Note de bas de page </span>*</a></sup></li>
		</ul>
</section>

<aside class="wb-fnote" role="note">
	<h2 id="fn">Notes de bas de page</h2>
	<dl>
		<dt>Note de bas de page 1</dt>
		<dd id="fn1">
			<p>Exemple de note de bas de page standard.</p>
			<p class="fn-rtn"><a href="#fn1-rf"><span class="wb-inv">Retour à la référence de la note de bas de page </span>1</a></p>
		</dd>
		<dt>Note de bas de page 2</dt>
		<dd id="fn2">
			<p>Exemple de note de bas de page qui comporte de nombreux liens.</p>
			<p class="fn-rtn"><a href="#fn2-1-rf"><span class="wb-inv">Retour à la <span>première</span> référence de la note de bas de page </span>2</a></p>
		</dd>
		<dt>Note de bas de page 3</dt>
		<dd id="fn3">
			<p>Exemple de note de bas de page qui compte plusieurs paragraphes (premier paragraphe).</p>
			<p>Exemple de note de bas de page qui compte plusieurs paragraphes (deuxième paragraphe).</p>
			<p>Exemple de note de bas de page qui compte plusieurs paragraphes (troisième paragraphe).</p>
			<p class="fn-rtn"><a href="#fn3-rf"><span class="wb-inv">Retour à la référence de la note de bas de page </span>3</a></p>
		</dd>
		<dt>Note de bas de page *</dt>
		<dd id="fn*">
			<p>Exemple de note de bas de page standard, représentée par un symbole.</p>
			<p class="fn-rtn"><a href="#fn*-rf"><span class="wb-inv">Retour à la référence de la note de bas de page </span>*</a></p>
		</dd>
	</dl>
</aside>