WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Tooltips with HTML-content

for

From: Birkir R. Gunnarsson
Date: Apr 1, 2015 12:54AM

One thing to keep in mind here:
If the user may wan to carefully review the tooltip content (and if
you want it formatted with html it sounds like this is info the users
may want to review carefully, not just hear it announced on the fly) a
pop-up dialog triggerable by wih he keyboard is probably a better
solution for the user.
You could put a clickable help icon with suitable alt text next to the
term itself that, when activated, brings up a modal dialog with the
information.
For tooltips that are simple and short, using an accessible alert
combined with keyboard focus and aria-describedby work fine, but for
the more complex info that user needs to read more than once or needs
to memorize, make sure they can bring up that information, review it
until they feel confident they understand it, and then dismiss it. A
modal dialog would be just the thing for that.
Cheers
-B


On 3/31/15, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> 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.
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.