WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with help icons

for

From: dean@bushidodesigns.net
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


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of
<EMAIL REMOVED>
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
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>