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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Middleton, John
> Sent: Thursday, February 02, 2017 11:21 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accessible Footnotes
>
> I like and have used the wet-boew Footnotes technique as required:
> https://wet-boew.github.io/v4.0-ci/demos/footnotes/footnotes-en.html
>
> Regards,
> John Middleton
> Web Development Specialist
> IT Client Technology
> American Institutes for Research (AIR)
> Austin, TX 78723
> www.ktdrr.org
>
>
>
>
> On 2/2/17, 12:19 PM, "WebAIM-Forum on behalf of Beranek, Nicholas"
> < <EMAIL REMOVED> on behalf of
> <EMAIL REMOVED> > wrote:
>
> >Hi folks,
> >
> >A colleague of mine, Brian Lovely, tried to pose a question to the
> >group but the email has not come through. I'm hoping that it comes
> through mine!
> >
> >Here is the question:
> >
> >We have footnotes that are indicated by linked numbers. Is a linked
> >number enough or should there be some kind of visually hidden text like
> >"footnote"? ...and what about links back to the content from the
> >footnote text? Code example follows:
> >
> ><a href="#footnote1">1</a>
> >
> ><div id="footnote1">My foot itches</div>
> >
> >
> >Thank you!
> >
> >Nick Beranek
> >Accessibility Tech Lead
> >Digital Accessibility Team
> >> >
> >The information contained in this e-mail is confidential and/or
> >proprietary to Capital One and/or its affiliates and may only be used
> >solely in performance of work or services for Capital One. The
> >information transmitted herewith is intended only for use by the
> >individual or entity to which it is addressed. If the reader of this
> >message is not the intended recipient, you are hereby notified that any
> >review, retransmission, dissemination, distribution, copying or other
> >use of, or taking of any action in reliance upon this information is
> >strictly prohibited. If you have received this communication in error,
> >please contact the sender and delete the material from your computer.
> >> >> >archives at http://webaim.org/discussion/archives
> >>
> > > at http://webaim.org/discussion/archives
> > > > > >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015