WebAIM - Web Accessibility In Mind

E-mail List Archives

Help with help icons

for

From: Dean Hamack
Date: Feb 25, 2009 3:40PM

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
this?</a></p>

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