WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Tooltips with HTML-content

for

From: Birkir R. Gunnarsson
Date: Apr 1, 2015 8:25AM

A somewhat, but not entirely, useful solution is to put ellipsis "..."
after the word
"help..."
traditionally putting "..." has indicated that activating the item
opens a dialog (see "save as..." in Windows apps), however screen
readers often do not announce punctuation so this is lost on many
users.
There are on-going discussions for ARIA 1.1 to expand the
aria-haspopup attribute with a list of options to indicate type of
widget (menu, dialog, definition..) but that is still at the
conceptual consideration stage.

For one website that had a lot of definition terms I was playing
around with simply putting instructions at the top saying (use the tab
key to discover definition terms, use enter to open help for that
definition), and then I implemented clickable divs or spans with
tabindex but no role.
I did this to keep the screen reading seamless (enabling screen
readers to read text without interrupting announcements of embedded
links or buttons).
Think:
<code>
<p>My favorite
<span tabindex="0" onClick="processclick(event)"
onKeyUp="processkey(event)" class="focus">IRA</span>
provider is Lost Profits LLLC</p>
</code>

This worked fine, user was able to read the text uninterrupted, but
then user had to use his tab key to look for definition terms and
activate them to review a modal dialog with definitions.
Also this is technically a violation of 4.1.2 since the clickable
element has no "role".
html5 has some tags, dfn and abbr, but assistive technology support
for them has not been overwhelming and besides that you would not be
able to format the title with html.


My solution was somewhat hacky.
If there are clear instructions to users about the type of interaction
I felt this was acceptable, but I would not necessarily recommend this
as a standard best practice.



On 4/1/15, Sylvia Richardson < <EMAIL REMOVED> > wrote:
> 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
>
>
>