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 Edge<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>&#160;<sup id="fn4-0-rf"><a class="fn-lnk" href="#fn4"><span class="wb-inv">Note de bas de page </span>4</a></sup></li>
	</ul>
</section>

<section>
	<h2>Utilisation recommandée<sup id="fn4-1-rf"><a class="fn-lnk" href="#fn4"><span class="wb-inv">Note de bas de page </span>4</a></sup></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 4</dt>
		<dd id="fn4">
			<p>Exemple de note de bas de page lorsqu'il est initialement cliqué et que l'utilisateur est redirigé vers la première instance de la note de base de page. Ceci même si cela a été codifié autrement. Cela prévient un comportement indésirable lorsqu'une note de bas de page est ajouté durant une revue du contenu.</p>
			<p class="fn-rtn"><a href="#fn4-1-rf"><span class="wb-inv">Retour à la <span>première</span> référence de la note de bas de page </span>4</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>