WebAIM - Web Accessibility In Mind

E-mail List Archives

How to generate automatically accessible footnotes using ARIA

for

From: Bryan Garaventa
Date: Nov 9, 2011 12:21AM

Hi,
A while back, someone asked about standards for accessible footnotes. So, thinking about it, I figured ARIA could be used to do this.

Since I'm a big fan of making things work by themselves, I automated the accessibility so that, to add footnotes, you just use an object literal to declare each footnote (including markup), then put a span tag around the word or phrase that applies to that footnote.

E.G.

var footnotes = {
f1: 'Footnote 1 text. <a href="url">Reference</a>',
f2: 'Footnote 2 text. <a href="url">Reference</a>'
};

Then, in the body:

This text is part of a
<span id="f1" class="footer">paragraph</span>
in the
<span id="f2" class="footer">page body</span>
content.

The span ID attributes match the declared footnotes in the object literal, which is how the match is made at runtime. Plus embedded A tags are relocated automatically to prevent the nesting of active elements.

Instructions:
1) Using the mouse, click on a footnote to jump to the referenced material,
then click the footnote to jump back to your original location.
2) Using the keyboard, Tab to or Arrow to a footnote, then press Enter to jump to the selected footnote,
then press Enter on the footnote to jump back to your original location.

Demo: http://whatsock.com/modules/aria_footnote_generator_module/demo.htm

All the best,
Bryan