Footnotes

Questions or comments?

Purpose

This plugin allows developers to easily embed footnotes into their Web pages, and helps to achieve WCAG 2.0 compliance when providing such footnotes.

Use when

Do not use when

Working example

Evaluation and report

How to implement

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.

Linking to Footnotes

This section discusses how to link to footnotes.

Link to Footnotes Section

Use the following code to link to a footnotes section.

<a href="#fn">Footnotes</a>

Link to a Footnote

Use the following code as a basis to link to a particular footnote.

<sup id="fn1-rf"><a class="fn-lnk" href="#fn1"><span class="wb-inv">Footnote </span>1</a></sup>

Note: The ID attributes of links to a multi-referenced footnote should contain a hyphen and a number just after the indicator (e.g. id="fn2-1-rf", id="fn2-2-rf", id="fn2-3-rf", etc) to make it possible to programmatically distinguish one referrer link from another.

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">Footnote </span>2</a></sup> <sup id="fn3-rf"><a class="fn-lnk" href="#fn3"><span class="wb-inv">Footnote </span>3</a></sup>

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

Footnotes Section

This section explains how to set-up a dedicated footnotes section.

Use the following code as a basis to create the section:

<aside class="wb-fnote" role="note">
	<h2 id="fn">Footnotes</h2>
	<dl>
		<!--PLACE FOOTNOTES HERE-->
	</dl>
</aside>

Types of Footnotes

This section explains how to create different types of footnotes, which are expected to be placed within the footnotes section.

Standard Footnote

This is a footnote that is referenced only once within a given page's content.

Use the following code as a basis to create a standard footnote:

<dt>Footnote 1</dt>
<dd id="fn1">
	<p>Example of a standard footnote.</p>
	<p class="fn-rtn"><a href="#fn1-rf"><span class="wb-inv">Return to footnote </span>1<span class="wb-inv"> referrer</span></a></p>
</dd>

Multi-referenced Footnote

This is a footnote that is referenced two or more times within a given page's content. By default, its return link should point to (and explicitly identify) the first reference to the footnote. If JavaScript support is available, a supporting plugin will automatically remove the explicit identifier in the return link text, in addition to managing the return link's destination when the footnote is accessed via a different reference from the content.

Use the following code as a basis to create a footnote that can be referenced by multiple pieces of content:

<dt>Footnote 2</dt>
<dd id="fn2">
	<p>Example of a footnote being referenced by multiple pieces of content.</p>
	<p class="fn-rtn"><a href="#fn2-1-rf"><span class="wb-inv">Return to <span>first</span> footnote </span>2<span class="wb-inv"> referrer</span></a></p>
</dd>

Note 1: The href attributes of return links in multi-referenced footnotes should always contain "-1" after the footnote indicator (e.g. href="#fn2-1-rf").

Note 2: The return link text of multi-referenced footnotes should always contain <span>first</span>, to specifically denote their default destinations when JavaScript support isn't present.

Multi-paragraph Footnote

Footnotes containing two or more paragraphs are supported. They can take the form of either a standard or multi-referenced footnote.

Use the following code as a basis to create a footnote containing multiple paragraphs:

<dt>Footnote 3</dt>
<dd id="fn3">
	<p>Example of a footnote containing multiple paragraphs (first paragraph).</p>
	<p>Example of a footnote containing multiple paragraphs (second paragraph).</p>
	<p>Example of a footnote containing multiple paragraphs (third paragraph).</p>
	<p class="fn-rtn"><a href="#fn3-rf"><span class="wb-inv">Return to footnote </span>3<span class="wb-inv"> referrer</span></a></p>
</dd>

Quality control of footers references

A workaround were implemented to ensure the footer items always refer to the first instance where the footnote is refered in the content. It is a best practice that the footers are property coded where their reference is pointing initially to the first instance. When this is not the case, the footnote plugin will fix the link and trigger a warning in the browser console. In such situation, it will show a warning like: wb-fnote - Relink first reference of #myfoootnote for #fn4-1-rf

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

Source code (GitHub)

Date modified: