Footnotes
Looking for WET v3.1?
WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.
Purpose
This component allows developers to easily embed footnotes into their Web pages, and helps to achieve WCAG 2.0 compliance when providing such footnotes.
Use when
- The end of a page's content contains a footnotes section.
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
Working example
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 subsituted 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 an alphabetically-ordered letter just after the number (e.g. id="fn2a-rf", id="fn2b-rf", id="fn2c-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.  ) 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="#fn2a-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 an "a" after the footnote number (e.g. href="#fn2a-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>Source code
- Date modified: