WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with help icons

for

From: Seth Kane
Date: Feb 25, 2009 3:45PM

I would consider using a Definition List instead of a P TAG and a A HREF
next to each other. So you would do it something like this...


<dl>
<dt>SuperFilter</dt>
<dd>Something short and sweet about a SuperFilter.....</dd>
</dl>

Then you use Unobtrusive JavaScript to have the non-disabled experience
see the bubble help or whatever it is that you want done on the
Presentation End.

For Example: You put a style around the DD that only displays a HELP
ICON and when you hover over the DD (i.e. Help ICON) it displays the
text between the tag as a bubble. If you had a large definition
(paragraphs) I would then consider putting in the DD a <a href> That
says <dd>Something short and sweet about a SuperFilter.....<a
href="tippage.html#SuperFilter">For Additional information on
SuperFilter click here</a></dd> which would then take you to a new page
with a larger description of the term.



Seth Kane Sr. Presentation Layer Developer