WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with help icons

for

From: Dean Hamack
Date: Feb 25, 2009 4:45PM

I've got the unobtrusive part down, and screenreader users can simply
jump from the help topic to the definition with anchored links.

As I said before, a dl won't work because both the dt and the dd tag
plus the link to close the popup all need to be in a container. You
can't do that in a valid way unless you use a definition list for every
single term and use the list as the container.

Like I said, the thing I'm struggling with is the text for the help link
and the link to jump back to the term.

-------- Original Message --------
Subject: Re: [WebAIM] Help with help icons
From: "Seth Kane" < <EMAIL REMOVED> >
Date: Wed, February 25, 2009 3:45 pm
To: "WebAIM Discussion List" < <EMAIL REMOVED> >

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