WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Tooltips with HTML-content

for

From: Sylvia Richardson
Date: Apr 1, 2015 7:18AM

Thanks! I like that idea, and it is something we had considered as an alternate solution. Some of our pages have several tooltips, so making the content optional is probably a good idea from a usability perspective. In my quick tests, role="dialog" or role="alertdialog" plus some focus management seems to work fairly well.

For a help icon, does anyone have suggestions for short alt text that would make it clear the user can open a dialog? "Help" seems too vague, but something like "Read definition" might become annoying if repeated.

Thanks,

Sylvia


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, April 01, 2015 2:55 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible Tooltips with HTML-content

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.
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
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.