Having recently set out on the long journey of mastering a new CMS I’ve found myself searching for and stumbling upon¹ all manner of plugins, customizations and tweaks for WordPress.

The latest clever addition I found is the use of footnotes. When used properly, footnotes are an appropriate way of commenting on or referencing a portion of text².

Footnotes serve as a more graceful way to add an aside compared to the long-winded parenthetical. (For instance, here I could give some personal insight into the guilty pleasure of using lengthy digressions, but as you can see, by the time you reach the end of this amusing passage, the original point is confused with a new idea).

So let’s have a look at the requirements for this project:

1. A format for referencing footnotes
2. A format for displaying footnotes
3. A method of moving between the two
4. Making your footnotes accessible

A format for referencing footnotes

This first requirement is easy: footnotes are referenced nearly universally with superscript. Deciding what form of superscript to use: number, letter, figure or symbol is entirely up to you. I personally chose numbers.

Fortunately, support for superscript is part of the W3C recommendation for paragraphs, lines and phrases – thereby making it perfectly valid for appropriate use.

In practice, your code may start off looking something like this:

<sup>1</sup>

A format for displaying footnotes

Footnotes are commonly placed at the bottom or “foot” of a page or section. There is no rule stating a footnote cannot go elsewhere, but sticking to traditional conventions is a recommended best practice.

How you choose to style your footnotes is also a personal choice. Perhaps you can peruse your library or book collection to see how it’s been styled elsewhere.

However you choose to style your footnote, using CSS provides the most flexibility to differentiate it from preceding paragraphs.

The resulting code may start off looking something like this:

<div id="footnote">
	<ol>
		<li>Footnote</li>
	</ol>
</div>

By applying an id to the containing div we can cascade the styling of content within. By using an ordered list we retain the continuity of footnotes throughout the page.

A method of moving between the two

Ideally, references should link to their respective footnotes and footnotes should link back to their references. This provides the user with an effortless method of jumping to the footnote and then returning to the passage.

The resulting code may look something like this:

This is some text<sup><a href="#32066" id="fn1">1</a></sup>

<div id="footnote">
	<li id="32066">This is a footnote <a href="#fn1">↑</a></li>
</div>

… and the resulting output may look something like this:

Making your footnotes accessible

For some, the example above may appear perfectly usable. You see a linked number in superscript, click and you’re taken to a footnote. A link in the footnote returns you to the sentence you last read. It doesn’t take much to deduce this just by looking at it.

For those who aren’t looking however the purpose isn’t as clear. Questions arise for those visiting the page with an assistive device such as JAWS: What is this linked number? Where does the link #32066 take me? Once I get there what will I find and how will I get back? Users of JAWS and other assistive devices are simply not seeing a page with the same clarity.

Once again we check the W3C HTML 4.01 specification for a solution and find a fitting one in section 12.1.4: Link Titles.

The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.

The resulting code may look something like this:

This is some text<sup><a href="#32066" id="fn1" title="see footnote">1</a></sup>

<div id="footnote">
	<li id="32066">This is a footnote <a href="#fn1" title="return to article">↑</a></li>
</div>

Add a little CSS and the possibilities are endless!

That’s all there is to it. Your methods may vary but this should serve as a good starting point. See below for how we do it here at Like Wow Online.

In a future article we’ll learn how to automate footnote creation with AppleScript. Stay tuned for Part II.. Using AppleScript to create HTML footnotes