WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with help icons


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...

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

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

-----Original Message-----
[mailto: <EMAIL REMOVED> ] On Behalf Of
Sent: Wednesday, February 25, 2009 4:20 PM
To: 'WebAIM List'
Subject: [WebAIM] Help with help icons

I've been tasked with creating popup help topics and I'm trying to
figure out the best way to do it from an accessibility standpoint.

Visually, there will be a word or phrase with a question mark icon next
to it. Clicking on the icon will launch a small popup div that explains
more about the topic, or has a definition of the term. I guess I'm just
trying to figure out the best text to use for the help link and back
link. Should it be "help", "what's this?", "more about this topic", etc.

Here's a sample of what I'm doing now. I know a definition list would be
better semantically, but it won't work in this case since the term,
definition, and close link all need to be enclosed in the popup.

<p id="sf">SuperFilter <a href="#sfDef" class="help">What's

<h2>Help Topics</h2>
<li id="sfDef">
<div>The SuperFilter helps you filter your search results</div>
<div><a href="#sf">Back to term</a></div>