WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Tooltips with HTML-content

for

From: Sylvia Richardson
Date: Mar 30, 2015 11:55AM

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.