WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help with help icons

for

From: ben morrison
Date: Feb 26, 2009 9:00AM

On Wed, Feb 25, 2009 at 10:19 PM, < <EMAIL REMOVED> > wrote:

> 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



I guess it depends on how much information you are expecting to show and how
important it is,
is this one page or over the whole site.

I have seen people use/abuse the title attribute, using JS to add extra
styling functionality.

Maybe the best solution is to have a FAQ section at the bottom of the page.
This could be a simple UL.
<div class="faq">
<h2>FAQs</h2>
<ul>
<li id="faq-1">lorem ipsum</li>
...
</ul>
</div>

/* may even be better to keep it visible */
.faq {
position:absolute;
left:-999em;
}

You then simply link to the article in question:

<p>Some dummy copy<a href="#faq-1" class="help>Lorem</a> Ipsum</p>

The data is linked correctly and useful. What you do with it is then up to
you...

Ben
--
Ben Morrison