RE: Footnotes and Tooltips

The smashing magazine has good examples on accessible tooltips with keyboards which I would recommend. The pattern supports keyboards.


[cid:image001.png@01D61D59.0FEDDCF0]

Sean Murphy | Accessibility expert/lead
Digital Accessibility manager
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917

www.telstra.com

This email may contain confidential information.
If I've sent it to you by accident, please delete it immediately



From: caroline <woodward.caroline@gmail.com>
Sent: Tuesday, 28 April 2020 11:20 AM
To: Jeana Clark <jclark@veritashealth.com>
Cc: w3c-wai-ig@w3.org
Subject: Re: Footnotes and Tooltips

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.
Hi Jeana,
I was wondering, forgive my ignorance but if navigated using keyboard, would the hover be triggered when it gained focus? If yes, would any pertinent information be covered by the appearance of that information before the user could see it?

When thinking about using hovers some things I have check for is whether the hover will impact keyboard-only users, also not all screen-reader users are blind, I'm guessing this is solely for desk top.

I know it's not exactly what you're looking for but wondered if their may be something impacted by that.




On Mon, Apr 27, 2020, 4:55 PM Jeana Clark <jclark@veritashealth.com<mailto:jclark@veritashealth.com>> wrote:
This seems like a great tutorial on how to add footnotes to your website and have them be accessible: https://www.sitepoint.com/accessible-footnotes-css/


However, my client has requested that they also have a hoverability/tooltip aspect to them. Where you can hover or keyboard tab to the footnote, and it displays the footnote on the screen in context of the content you’re reading. Sara Soueidn had this great write up about trying to achieve tooltips without javascript… but in the end determined that, to do it well, you really do need javascript: https://www.sarasoueidan.com/blog/accessible-tooltips/


Does anyone have a complete solution (or guidance) for footnotes + hover that is considered accessible?

Thanks,
Jeana


________________________________
Jeana Clark
Creative Director

Tel: 847.607.8577
jclark@veritashealth.com<mailto:jclark@veritashealth.com>


[Image removed by sender. Veritas Health, LLC]<https://www.veritashealth.com/>


Spine-health.com<https://www.spine-health.com/> | Arthritis-health.com<https://www.arthritis-health.com/>
Sports-health.com<https://www.sports-health.com/> | Pain-health.com<https://www.pain-health.com/>


*** CONFIDENTIALITY NOTICE*** This message and any included attachments are from Veritas Health, LLC (owner and operator of Spine-health.com<http://Spine-health.com>, Arthritis-health.com<http://Arthritis-health.com>, Sports-health.com<http://Sports-health.com> and Pain-health.com<http://Pain-health.com>) and are intended for the addressee only. The contents in this message may contain confidential information belonging to the sender that is legally privileged. Unauthorized forwarding, printing, copying, distribution, or use of such information is strictly prohibited and may be unlawful. If you are not the addressee, please promptly delete this message and notify the sender of the delivery error by e-mail or contact the Veritas Health, LLC at admin@veritashealth.com<mailto:admin@veritashealth.com>. Veritas Health reserves the right to view all communications into and out of the company and senders shall have no expectation of privacy.