WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Footnotes

for

From: Karl Brown
Date: Feb 3, 2017 2:15AM

Hugo Giraudel wrote a piece in 2015 about accessible footnotes using CSS
<https://www.sitepoint.com/accessible-footnotes-css/>. I've tested his
codepen and it works really well, especially as it includes a way for the
user to get back to where they were in the document.

On Thu, Feb 2, 2017 at 10:06 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> That one works well.
>
> It's important to note that for footnotes, typically relying on same page
> anchors (a link with a hash tag pointing to the ID of the footnote) is not
> sufficient to ensure cross browser and cross platform accessibility within
> assistive technologies, mainly due to inconsistent support for this
> technique. Also this method doesn't help with multiple footnotes that
> reference the same target in which tracking is needed to return the mouse
> and keyboard only user back to the same footnote they originally activated.
>
> So the most reliable method for this is to use JavaScript to move focus
> appropriately and return them back to where they left off, both for mouse
> users and for keyboard users.
>
> The following is another example of this technique, which uses this
> scripting method to track multiple target references and return the user to
> the correct location after activation.
>
> http://whatsock.com/tsg/Coding%20Arena/Footnotes/
> Footnotes%20(Internal)/demo.htm
>
> A sighted keyboard only user need only press Enter on a footnote to jump
> to the desired footnote, then press Enter to return to where they left off
> as before.
>
> Also this technique sets both the Name and Description properties in the
> accessibility tree so that screen reader users, such as those using JAWS or
> NVDA or VoiceOver can hear both the Name and Description when tabbing
> through the active elements in order to quickly locate a desired footnote.
> You can see the naming calculation values for these properties using Visual
> ARIA by hovering the mouse over any of the footnotes that are not currently
> in focus.
> (http://whatsock.com/training/matrices/visual-aria.htm )
>
> All the best,
> Bryan
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>