RE: Positioning Tooltips - Revisiting Hover SC

Another issue I’ve seen before and brought up previously was when I am on a page and I have low resolution or a responsive view because of zoom with no horizontal scrollbars and I hover over something to get the tooltip and scrollbars appears the tooltip appears off the right edge of the screen.  If I move to try and read the tooltip off the edge the tooltip disappears.  I believe this issue occurs more likely with responsive and zoomed views which people with low vision are more likely to need.  While you could argue it’s not available to the mobile person as well the information is available to others on the desktop.  So the parity on desktop is not the same with other users.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>
703.637.8957 (Office)

Visit us online: Website<http://www.ssbbartgroup.com/> | Twitter<https://twitter.com/SSBBARTGroup> | Facebook<https://www.facebook.com/ssbbartgroup> | LinkedIn<https://www.linkedin.com/company/355266?trk=tyah> | Blog<http://www.ssbbartgroup.com/blog/>
Download our CSUN Presentations Here!<http://info.ssbbartgroup.com/CSUN-2017_Gateway-Sig-Slide-Decks-2017.html>

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Marla Runyan [mailto:marlarunyan1@gmail.com]
Sent: Saturday, April 08, 2017 4:22 PM
To: Jim Allan
Cc: public-low-vision-a11y-tf
Subject: Positioning Tooltips - Revisiting Hover SC

LVTF,

As many of you may recall, the original “Metadata on Hover” SC was addressing the issue of tooltips that are generated from the title attribute being obscured by an enlarged mouse pointer. This is a daily occurrence for many low vision users, including myself. While we all know that tooltips should not contain essential information (only advisory information), I don’t see tooltips going away any time soon.  Also, determining whether or not their content is “essential” or advisory opens the door for a wide range of interpretations — especially when they appear as the only visual label for icons.

From a low vision user perspective, encountering a tooltip that I cannot read is a constant reminder of an accessibility barrier — because I see a piece of something, and the rest is out of reach.  So, even if the same content is available on the page, how would I know? All I know is that there is something right in front of me that I can’t access. This is a very different experience from a keyboard-only user who is likely not aware that a tooltip even exists.

So, this got me thinking….

Is it possible to position title attribute tooltips ABOVE their triggers?
Is it possible to make title attribute tooltips keyboard accessible?

The answer is yes.

Should we revisit the “metadata on hover” SC, I created a sandbox where I positioned the tooltips above their triggers.

The first 3 examples are using the title attribute as the content for the tooltip. The last two examples use a custom tooltip created from a span.

All of them appear on hover, so they are also keyboard accessible.

https://jsfiddle.net/obsqynyp/4/


This is far from perfect - just exploring possibilities.

Looking forward to discussing further.

Thank you,
Marla