Notes de bas de page

Questions ou commentaires?

But

Ce plugiciel permet aux développeurs d’intégrer facilement des notes de bas de page dans leurs pages Web et facilite la conformité à WCAG 2.0 lors de l’intégration de ces notes de bas de page.

Needs translation

Use when

  • The end of a page's content contains a footnotes section.

Needs translation

Do not use when

  • A page's content contains multiple footnotes sections (e.g. table notes... scenarios where table-specific footnotes directly follow every table).
  • A page is entirely dedicated to footnotes

Exemples

How to implement

Needs translation

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 substituted 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="#fn">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="fn1-rf"><a class="fn-lnk" href="#fn1"><span class="wb-inv">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 un trait d'union et un numéro placée juste après l’indicateur (par exemple : id="fn2-1-rf", id="fn2-2-rf", id="fn2-3-rf", etc.) afin de pouvoir faire, à l’aide d’un programme, la distinction entre les liens de référence.

Needs translation

Link to Multiple Footnotes

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

<sup id="fn2-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>

Note: Non-breaking spaces (i.e. &#160;) 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:

<aside class="wb-fnote" role="note">
	<h2 id="fn">Notes de bas de page</h2>
	<dl>
		<!--INSÉRER LES NOTES DE BAS DE PAGE ICI-->
	</dl>
</aside>

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.

Notes de bas de page normales

Il s’agit d’une note de bas de page mentionnée qu’une seule fois dans une page donnée.

Utiliser le code suivant pour créer une note de bas de page normale :

<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>

Note de bas de page multiréférentielle

Il s’agit d’une note de bas de page mentionnée deux fois ou plus dans une page donnée. Par défaut, son lien retour devrait indiquer (et identifier explicitement) le premier renvoi à la note de bas de page. Si la prise en charge de JavaScript est disponible, un plugiciel d’appui supprimera automatiquement l’identificateur explicite dans le texte du lien retour, en plus de gérer la destination du lien retour lorsque l’accès à la note de bas de page se fait par une référence différente à partir du contenu.

Utiliser le code suivant pour créer une note de bas de page qui peut être mentionnée par plusieurs éléments du contenu:

<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>

Remarque : Les attributs href des liens retour dans des notes de bas de page multiréférentielles devraient toujours contenir « -1 » après l’indicateur de la note de bas de page (p. ex. href="#fn2-1-rf").

Remarque 2 : Le texte du lien retour de notes de bas de page multiréférentielles devrait toujours contenir <span>première</span>, pour désigner spécifiquement leurs destinations par défaut quand il n’y a pas de prise en charge de JavaScript.

Note de bas de page de plusieurs paragraphes

Les notes de bas de page contenant deux ou plusieurs paragraphes sont prises en charge. Elles peuvent se présenter sous forme de notes de bas de page normale ou multiréférentielle.

Utiliser le code suivant pour créer une note de bas de page contenant plusieurs paragraphes :

<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>

Needs translation

Events

Event Trigger What it does
wb-init.wb-fnote Triggered manually (e.g., $( ".wb-fnote" ).trigger( "wb-init.wb-fnote" );). Used to manually initialize the Footnotes plugin. Note: The Footnotes plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-fnote (v4.0.5+) Triggered automatically after the Footnotes plugin initializes. Used to identify where the Footnotes plugin was initialized (target of the event). 
$( document ).on( "wb-ready.wb-fnote", ".wb-fnote", function( event ) {
});
$( ".wb-fnote" ).on( "wb-ready.wb-fnote", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Footnotes plugin source code on GitHub

Date de modification :