Footnotes

Overview

Project Lead: Eric Dunsworth (@EricDunsworth)

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

Purpose

The purpose of this component is to help ensure footnotes on Web pages conform to WCAG 2.0 requirements. Its main concept is to place footnotes in a definition list, within a dedicated section. A supporting plugin is used to enhance navigation, accessibility, and provide backwards compatibility to supported legacy browsers.

Rationale

Throughout the web, many websites implement footnotes in inconsistent and/or inaccessible manners. This component aims to alleviate such issues on websites that implement WET.

Implementation

Please refer to this section for guidance on how to implement this component.

Working examples of an implementation (based on this section's guidance) can be found on the following pages:

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="#fnb">Footnotes</a>

Link to a Footnote

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

<sup id="fnb1-ref"><a class="footnote-link" href="#fnb1"><span class="wb-invisible">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="fnb2a-ref", id="fnb2b-ref", id="fnb2c-ref", 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="fnb2-ref"><a class="footnote-link" href="#fnb2"><span class="wb-invisible">Footnote </span>2</a></sup> <sup id="fnb3-ref"><a class="footnote-link" href="#fnb3"><span class="wb-invisible">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:

<div class="wet-boew-footnotes" role="note">
	<section>
		<h2 id="fnb" class="wb-invisible">Footnotes</h2>
		<dl>
			<!--PLACE FOOTNOTES HERE-->
		</dl>
	</section>
</div>

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="fnb1">
	<p>Example of a standard footnote.</p>
	<p class="footnote-return"><a href="#fnb1-ref"><span class="wb-invisible">Return to footnote </span>1<span class="wb-invisible"> 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="fnb2">
	<p>Example of a footnote being referenced by multiple pieces of content.</p>
	<p class="footnote-return"><a href="#fnb2a-ref"><span class="wb-invisible">Return to <span>first</span> footnote </span>2<span class="wb-invisible"> 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="#fnb2a-ref").

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="fnb3">
	<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="footnote-return"><a href="#fnb3-ref"><span class="wb-invisible">Return to footnote </span>3<span class="wb-invisible"> referrer</span></a></p>
</dd>

Migrating from WET 2.x to WET 3.x

If a WET 2.x implementation of this component is migrated into WET 3.x, the following HTML mark-up changes should be applied:

  • ID attributes of footnote links are no longer placed on <a> elements; they should be now be placed on <sup> elements (as of version 1.01 in WET 2.3)
  • Footnotes section's class name has changed from footnotes-container to wet-boew-footnotes
  • Footnotes section (or its <div> container) should be wrapped within a <section> element
  • Footnote IDs are now declared directly on <dd> elements (instead of <dt> elements)
  • Paragraph class name for footnote return links has changed from float-left to footnote-return
  • Multi-referenced footnotes now use additional nested spans around the "first" text in their hidden return links (i.e. first now becomes <span>first</span>)
  • Multi-paragraph footnotes no longer require a container <div> to render properly

Development

This component's source code can be found within the following files under the WET repository:

Known Issues

The following issues are currently known to exist within this component:

  • Print CSS may break in Opera (appears to be a general problem with the browser itself)
  • HTML mark-up may change from version to version, breaking backwards-compatibility; long-term maintenance strategies should be considered

Future

The following enhancements are slated to be implemented in future versions of this component:

  • Update dummy content in working example pages
  • Leverage placeholder selectors in SCSS (requires SASS 2.3.0 or higher; wasn't available in WET 3.0)
  • Properly "reset" dynamic return links in multi-referenced footnotes upon getting clicked
  • Fade-in/fade-out effect on highlighted footnotes via CSS3 transition property (and jQuery for supported legacy browsers)
  • Optional footnote "pop-up"" feature (tentative)

Version History