WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to generate automatically accessible footnotes using ARIA

for

From: Kevin Chao
Date: Nov 9, 2011 3:00PM


Excellent job! Thanks! Works beautifully with Firefox 10pre (Nightly
and NVDA 2012.1 Snapshot and iOS 5, Safari, and VoiceOver.

Kevin

On 11/9/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> 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
>