WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Tooltips with HTML-content

for

From: Bryan Garaventa
Date: Mar 31, 2015 9:52PM

Hello,
I have programmed the Tooltip module within the TSG archive to do what you are asking, with strict adherence to the spec regarding functionality and accessibility. This can be downloaded at
https://github.com/accdc/tsg

Contained within the folder
Coding ArenaTooltips

It works on form fields, but can also be used on any other form of active element, which you can experiment with by changing the code and seeing what happens.

All the best,
Bryan



-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Sylvia Richardson
Sent: Monday, March 30, 2015 10:55 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Accessible Tooltips with HTML-content

Does anyone have recommendations for screen reader- and keyboard-friendly tooltips that meet the standards set in WAI-ARIA 1.0 Authoring Practices<http://www.w3.org/TR/wai-aria-practices/#tooltip>; and allow HTML-formatted content? Ideally, I'd like to find an existing library rather than reinvent the wheel, but we can write custom code if we need to.

A little background here: I work for a health insurance company. We want to have definitions of complex terms, like co-insurance, that appear on mouseover/keyboard focus. The code would need to work with a <span> or similar element as the parent. Unfortunately, most of the examples I have seen only work smoothly with <input> elements. Additionally, we need to be able to include HTML-formatted content in the tooltip itself, generally lists.

The best luck I have had so far is using qTip2<http://qtip2.com/>; with some customizations to support keyboard handlers, but the behavior is not as smooth as I would like. Specifically, in Firefox with NVDA or Jaws, tabbing to an element with a tooltip reads the tooltip but not the parent text (possibly due to using role="alert" instead of tooltip).

Any help you can offer would be appreciated.

Sylvia Richardson | Web Accessibility Advisor <EMAIL REMOVED> < <EMAIL REMOVED> >


Blue Cross and Blue Shield of North Carolina

Confidentiality Notice: This message is intended only for the use of the individual or entity to which it is addressed. This communication may contain individual protected health information ("PHI") that is subject to protection under state and federal laws, or other privileged, confidential or proprietary information of Blue Cross and Blue Shield of North Carolina that may not be further disclosed. If you are not the intended recipient, or the employee or agent responsible for delivering this communication to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to this message and deleting it from your computer. Thank you.