# Footnotes

- Documentation
- Questions or comments?

## Purpose

The purpose of the Footnotes plugin is to implement a consistent, accessible way of handling footnotes across Government of Canada web sites. The main concept behind this solution is to place footnotes in a definition list, within a dedicated section. An example of this can be found in the Footnotes section. Supporting CSS is used to lay out the footnotes and hide navigational aidsFootnote 1.

## Benefits

- Conforms to WCAG 2.0 AAFootnote 2
- Progressive enhancement approach
- Support for Firefox, Opera, Safari, Chrome, and IE 7+Footnote 2
- Support for English and French
- Configurable layout and designFootnote 2 Footnote 3

## Recommended usage

- Implementing footnotes in Web pagesFootnote *

## Footnotes

Footnote 1

  Example of a standard footnote.

  Return to footnote 1 referrer

Footnote 2

  Example of a footnote being referenced by multiple pieces of content.

  Return to first footnote 2 referrer

Footnote 3

  Example of a footnote containing multiple paragraphs (first paragraph).

  Example of a footnote containing multiple paragraphs (second paragraph).

  Example of a footnote containing multiple paragraphs (third paragraph).

  Return to footnote 3 referrer

Footnote *

  Example of a standard footnote, denoted by a symbol.

  Return to footnote * referrer

## Code

    <section>
    	<h2>Purpose</h2>
    	<p>The purpose of the Footnotes plugin is to implement a consistent, accessible way of handling footnotes across Government of Canada web sites. The main concept behind this solution is to place footnotes in a definition list, within a dedicated section. An example of this can be found in the <a href="#fn">Footnotes</a> section. Supporting CSS is used to lay out the footnotes and hide navigational aids<sup id="fn1-rf"><a class="fn-lnk" href="#fn1"><span class="wb-inv">Footnote </span>1</a></sup>.</p>
    </section>

    <section>
    	<h2>Benefits</h2>
    	<ul>
    		<li>Conforms to WCAG 2.0 AA<sup id="fn2-1-rf"><a class="fn-lnk" href="#fn2"><span class="wb-inv">Footnote </span>2</a></sup></li>
    		<li>Progressive enhancement approach</li>
    		<li>Support for Firefox, Opera, Safari, Chrome, and IE 7+<sup id="fn2-2-rf"><a class="fn-lnk" href="#fn2"><span class="wb-inv">Footnote </span>2</a></sup></li>
    		<li>Support for English and French</li>
    		<li>Configurable layout and design<sup id="fn2-3-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></li>
    	</ul>
    </section>

    <section>
    	<h2>Recommended usage</h2>
    	<ul>
    		<li>Implementing footnotes in Web pages<sup id="fn*-rf"><a class="fn-lnk" href="#fn*"><span class="wb-inv">Footnote </span>*</a></sup></li>
    	</ul>
    </section>

    <aside class="wb-fnote" role="note">
    	<h2 id="fn">Footnotes</h2>
    	<dl>
    		<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>
    		<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>
    		<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>
    		<dt>Footnote *</dt>
    		<dd id="fn*">
    			<p>Example of a standard footnote, denoted by a symbol.</p>
    			<p class="fn-rtn"><a href="#fn*-rf"><span class="wb-inv">Return to footnote </span>*<span class="wb-inv"> referrer</span></a></p>
    		</dd>
    	</dl>
    </aside>

Date modified:
  2016-06-10