Re: Positioning Tooltips - Revisiting Hover SC

Wow, Marla - love your examples, and wish all sites were using these TODAY
                                                                                        
                    Erich Manser                                                        
                    IBM                                                                 
                    Accessibility,                                                      
                    IBM Research                                                        
                    Littleton,                                                          
                    MA / tel:                                                           
                    978-696-1810                                                        
                    Search for                                                          
                    accessibility                                                       
                    answers                                                             
                                                                                        
                                                                                        
                                                                                        
                                                                                        
                                                                                        
                                                                                        
                                                                                        



You don't need eyesight to have vision.



From: Marla Runyan <marlarunyan1@gmail.com>
To: Jim Allan <jimallan@tsbvi.edu>
Cc: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org>
Date: 04/08/2017 04:23 PM
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