WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Footnotes

for

From: Bryan Garaventa
Date: Feb 3, 2017 10:47AM

Hi, when you say you've tested it, can you also mention on which browsers and with which assistive technologies you've done so? This helps to include I've found, since lots of people have different definitions of 'testing'.
Thanks,
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 Karl Brown
Sent: Friday, February 03, 2017 1:16 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible Footnotes

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
> >>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

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