E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Beranek, Nicholas
Date: Thu, Feb 02 2017 11:19AM
Subject: Accessible Footnotes
No previous message | Next message →

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.

From: David Kaplan
Date: Thu, Feb 02 2017 11:31AM
Subject: Re: Accessible Footnotes
← Previous message | Next message →

You should probably use a TITLE attribute in your anchor tag.

Ex: <a href='#footnote1- title='Footnote. My foot itches.->1</a>

You could also just try linking the whole footnote.
David Kaplan | Senior UX Designer
ORACLE Construction & Engineering
5 Tower Bridge
300 Barr Harbor Drive
West Conshohocken, PA 19428
O: +1 610 538 1694 | M: +1 215 360 1774





> On Feb 2, 2017, at 1:19 PM, Beranek, Nicholas < = EMAIL ADDRESS 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.
> > > >

From: Middleton, John
Date: Thu, Feb 02 2017 12:21PM
Subject: Re: Accessible Footnotes
← Previous message | Next message →

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 ADDRESS REMOVED = on behalf of
= EMAIL ADDRESS 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.
>>>>

From: Bryan Garaventa
Date: Thu, Feb 02 2017 3:06PM
Subject: Re: Accessible Footnotes
← Previous message | Next message →

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Karl Brown
Date: Fri, Feb 03 2017 2:15AM
Subject: Re: Accessible Footnotes
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>

From: Bryan Garaventa
Date: Fri, Feb 03 2017 10:47AM
Subject: Re: Accessible Footnotes
← Previous message | Next message →

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Mr K M I Brown
Date: Fri, Feb 03 2017 2:39PM
Subject: Re: Accessible Footnotes
← Previous message | No next message

When I first saw it I checked in IE8, Chrome, Safari and Firefox, including with a portable NVDA (I can't remember the version, it was a while ago).


On 3 February 2017, at 17:47, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com