RE: Good accessibility practice for handling footnotes

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
(m) 608-220-3089

On Jul 30, 2021, 11:21 AM -0500, Bryan Garaventa <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.
Bryan.Garaventa@LevelAccess.com<mailto:Bryan.Garaventa@LevelAccess.com>
415.624.2709 (o)
www.LevelAccess.com<http://www.levelaccess.com/>

From: Louise Lister <Louise.Lister@iop.org>
Sent: Thursday, July 29, 2021 8:05 AM
To: 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>
________________________________