Notes de bas de page

Objet

Ce composant vise à assurer que les notes de bas de page sont conformes aux exigences de WCAG 2.0. L’objet principal est de mettre les notes de bas de page dans une liste de définitions dans une section qui leur est réservée. Un plugiciel d’appui est utilisé pour améliorer la navigation, l’accessibilité et assurer une compatibilité descendante aux anciens navigateurs pris en charge.

Justification

Beaucoup de sites Web affichent des notes de bas de page de façon incohérente et inaccessible. Ce composant vise à remédier aux problèmes rencontrés dans des sites Web qui offrent la BOEW.

Footnote Indicators

Footnotes are generally denoted by numbers, but may also be represented by other kinds of indicators, such as single letters or symbols.

The numbers used throughout this documentation's footnote examples (including numbers within IDs) can be safely subsituted with alternate kinds of indicators.

Lien vers les notes de bas de page

Cette section montre comment rechercher le lien vers les notes de bas de page.

Lien vers la section des notes de bas de page

Utiliser le code suivant pour rechercher le lien vers la section des notes de bas de page.

<a href="#fnb">Notes de bas de page</a>

Lien vers une note de bas de page

Utiliser le code suivant pour rechercher le lien vers une note de bas de page particulière.

<sup id="fnb1-ref"><a class="footnote-link" href="#fnb1"><span class="wb-invisible">Note de bas de page </span>1</a></sup>

Remarque : Les attributs ID des liens vers une note de bas de page multiréférentielle devraient contenir une lettre classée par ordre alphabétique placée juste après le nombre (par exemple : id="fnb2a-ref", id="fnb2b-ref", id="fnb2c-ref", etc.) afin de pouvoir faire, à l’aide d’un programme, la distinction entre les liens de référence.

Link to Multiple Footnotes

Use the following code as a basis to consecutively link to multiple footnotes.

<sup id="fnb2-ref"><a class="footnote-link" href="#fnb2"><span class="wb-invisible">Note de bas de page </span>2</a></sup> <sup id="fnb3-ref"><a class="footnote-link" href="#fnb3"><span class="wb-invisible">Note de bas de page </span>3</a></sup>

Note: Non-breaking spaces (i.e.  ) should be used to separate each link.

Section des notes de bas de page

Cette section explique comment créer une section réservée aux notes de bas de page.

Utiliser le code suivant pour créer la section:

<div class="wet-boew-footnotes" role="note">
	<section>
		<h2 id="fnb" class="wb-invisible">Notes de bas de page</h2>
		<dl>
			<!--INSÉRER LES NOTES DE BAS DE PAGE ICI-->
		</dl>
	</section>
</div>

Types de notes de bas de page

Cette section explique comment créer différents types de notes de bas de page censées être intégrées dans la section.

<dt>Note de bas de page 1</dt>
<dd id="fnb1">
	<p>Exemple de note de bas de page standard.</p>
	<p class="footnote-return"><a href="#fnb1-ref"><span class="wb-invisible">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="fnb2">
	<p>Exemple de note de bas de page qui comporte de nombreux liens.</p>
	<p class="footnote-return"><a href="#fnb2a-ref"><span class="wb-invisible">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="fnb3">
	<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="footnote-return"><a href="#fnb3-ref"><span class="wb-invisible">Retour à la référence de la note de bas de page </span>3</a></p>
</dd>

Migration de la BOEW 2.x à la BOEW 3.x

En cas de migration de la mise en œuvre de ce composant de la BOEW 2.x à la BOEW 3.x, les changements suivants de balisage HTML devraient être apportés :

• Les attribut ID des liens vers la note de bas de page ne sont plus placés sur des éléments, ils doivent maintenant être placés sur des éléments <a> (à partir de la version 1.01 dans la BOEW 2.3)
• Le nom de classe de la section des notes de bas de page a été modifiée de footnotes-container à wet-boew-footnotes
• La section des notes de bas de page (ou son conteneur <div>) devrait être intégrée dans un élément <section>
• Les ID de notes de bas de page sont maintenant déclarés directement sur des éléments <dd> (au lieu d’éléments <dt>)
• Paragraph class name for footnote return links has changed from float-left to footnote-return
• Les notes de bas de page multiréférentielles utilisent maintenant des intervalles imbriqués additionnels autour du « première » texte dans leurs liens retour cachés (soit première devient maintenant <span>première</span>)
• Les notes de bas de page de plusieurs paragraphes ne nécessitent plus de conteneur <div> pour s’afficher correctement.