WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with help icons

for

From: Jukka K. Korpela
Date: Feb 26, 2009 8:35AM

Carol Wheeler wrote:

> What is a tooltip? <a class=info href="#">This is a tooltip <span>an
> aiding text that appears just when you roll on with the
> mouse</span></a>. The basic idea comes from Eric Meyer's <a class=info
> href="http://www.meyerweb.com/eric/css/edge/popups/demo.html"><b>pure
> css popups</b><span>a very clever way to get dynamic effects on an
> html page without using javascript.</span></a>

The approach more or less fails the specific accessibility criterion that a
page be usable without style sheets. Just think or look what the page
_content_ is, when CSS is ignored. It's sufficiently close to working to
confuse the user in a refined way!

To make it non-confusing, you would have to add punctuation and spaces so
that sentences are understandable and words don't run together (e.g.,
"popups</b><span>a" means that the textual content is "popupsa"). This
sounds simple, but I'm afraid it mostly makes the idea non-working.

Moreover, if you really meant using href="#" (to make the technique work on
older browsers, I presume), then that would create a link to the start of
the page, with a fairly long link text - bad usability, bad accessibility.

--
Yucca, http://www.cs.tut.fi/~jkorpela/