RE: Good accessibility practice for handling footnotes

Hello,

 

I suggest checking out the DAISY Knowledge Base on this issue.

 

http://kb.daisy.org/publishing/docs/html/notes.html

 

Let me know  if this helps.

 

Best

George

 

 

 

From: Bryan Garaventa <bryan.garaventa@levelaccess.com> 
Sent: Friday, July 30, 2021 1:23 PM
To: Peter Weil <peter.weil@wisc.edu>; Louise Lister <Louise.Lister@iop.org>; w3c-wai-ig@w3.org
Subject: RE: Good accessibility practice for handling footnotes

 

Hi,

Yes of course.

 

The aria-description attribute is sort of a special case, in that it is scheduled to be added to the ARIA spec because it is needed to handle setting the description property in the accessibility tree without having to reference external elements, much like aria-label does, however it has already been added to the mainstream desktop browsers (Chrome and Firefox) to support it. As a result, when tabbing in these browsers using JAWS or NVDA, it will announce the associated description when the numerical footnote link receives focus. Though this is not yet support in Safari in iOS, the footnote link still makes sense in context when swiping left and right with one finger. As a side note, setting aria-description=” “ will do the opposite and clear the description property in the accessibility tree, even if the element includes a title attribute.

 

The aria-flowto attribute is present simply to add an additional layer of navigation for supporting Ats. When using JAWS for example, you can arrow to a footnote link and press the = key to jump directly to the flowed-to element, and Shift+= to go backwards irrespective of which element has focus. Such users have the option of using this method for navigation or pressing Enter to jump manually within the page using standard focus management.

 

The aria-controls attribute is present because aria-flowto won’t actually work without it. 😊 

 

All the best,

Bryan

 

 

 

Bryan Garaventa

Principal Accessibility Architect

Level Access, Inc.

 <mailto:Bryan.Garaventa@LevelAccess.com> Bryan.Garaventa@LevelAccess.com

415.624.2709 (o)

 <http://www.levelaccess.com/> www.LevelAccess.com

 

From: Peter Weil <peter.weil@wisc.edu <mailto:peter.weil@wisc.edu> > 
Sent: Friday, July 30, 2021 10:36 AM
To: Louise Lister <Louise.Lister@iop.org <mailto:Louise.Lister@iop.org> >; w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> ; Bryan Garaventa <bryan.garaventa@levelaccess.com <mailto:bryan.garaventa@levelaccess.com> >
Subject: RE: Good accessibility practice for handling footnotes

 

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

 

This is really interesting, Bryan. Thanks for sharing. I’d like to learn more about this solution.

How is screenreader support for aria-description?

What exactly is aria-flowto used for?

Also, what is the purpose of aria-controls here?

Thanks,

 

Peter

 

--

Peter Weil, Web Developer

University Marketing

University of Wisconsin–Madison

peter.weil@wisc.edu <mailto:peter.weil@wisc.edu> 

(m) 608-220-3089

 

On Jul 30, 2021, 11:21 AM -0500, Bryan Garaventa <bryan.garaventa@levelaccess.com <mailto:bryan.garaventa@levelaccess.com> >, wrote:

Hi,

When I was developing the footnotes design pattern for Apex, I did a lot of experimentation with different combinations and finally settled on a combination of standard focus control plus ARIA to increase navigation options for AT users.

http://whatsock.com/Templates/Footnotes/Internal/index.htm

It has no accessibility issues that I can find.

 

Please let me know how this works for you.

 

All the best,

Bryan

 

 

 

Bryan Garaventa

Principal Accessibility Architect

Level Access, Inc.

 <mailto:Bryan.Garaventa@LevelAccess.com> Bryan.Garaventa@LevelAccess.com

415.624.2709 (o)

 <http://www.levelaccess.com/> www.LevelAccess.com

 

From: Louise Lister <Louise.Lister@iop.org <mailto:Louise.Lister@iop.org> >
Sent: Thursday, July 29, 2021 8:05 AM
To: w3c-wai-ig@w3.org <mailto:w3c-wai-ig@w3.org> 
Subject: Good accessibility practice for handling footnotes

 

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

 

 

Hello all,

 

I just wondered if there was an approved good practice for the use of accessible footnotes. We have some articles on our website that carry footnotes (currently numbered) that point to links further down the page. 

 

Currently, a typical fragment looks a bit like this:

<p>Content in here<a href="#_ftn2" title="">[2]</a>.</p>

 

Then the footnote further down the page:

<div>

<p class="MsoFootnoteText"><a href="#_ftnref2" title="">[2]</a> the content source web link</p>

 

Would using the aria-describedby attribute as detailed by this writer be the best way forward? See https://www.sitepoint.com/accessible-footnotes-css/

 

I am guessing this scenario would affect research and education websites like ours rather than being a more general requirement.

 

If anyone can advise that would be great and then I can look at making it so (Jean-Luc Picard style).

 

Thank you, and sorry about all my questions!

 

With kind regards,

Louise

 

 

  _____  

This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically.. 

Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office:  37 Caledonian Road, London, N1 9BU <https://goo.gl/maps/DUHbKcbzuUN2> 

Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy <https://emea01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=02%7C01%7C%7C6716aa3c6fd84da5102808d5c0b234a0%7Cf9ee42e6bad04e639115f704f9ccceed%7C0%7C0%7C636626793962820374&sdata=RI6OT4MumRlklNzF5i2M9ZxS6P%2FxxLg%2FJwcnMJ%2B0480%3D&reserved=0> 

  _____