E-mail List Archives
Thread: Re: Help with help icons
Number of posts in this thread: 11 (In chronological order)
From: Dean Hamack
Date: Wed, Feb 25 2009 3:25PM
Subject: Re: Help with help icons
No previous message | Next message →
BTW: the "divs" inside the list items were actually supposed to be "p"
tags (not that it really matters)
From: Dean Hamack
Date: Wed, Feb 25 2009 3:40PM
Subject: Help with help icons
← Previous message | Next message →
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>
From: Seth Kane
Date: Wed, Feb 25 2009 3:45PM
Subject: Re: Help with help icons
← Previous message | Next message →
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
From: Dean Hamack
Date: Wed, Feb 25 2009 4:45PM
Subject: Re: Help with help icons
← Previous message | Next message →
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 ADDRESS REMOVED = >
Date: Wed, February 25, 2009 3:45 pm
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
From: Carol Wheeler
Date: Thu, Feb 26 2009 8:15AM
Subject: Re: Help with help icons
← Previous message | Next message →
Perhaps a tooltip solution?
<quote>
Tooltip CSS
EX:
What is a tooltip? <a class=info href="#">This is a tooltip <span>an
aiding text that appears just when you roll on with the mouse</span></a>. The
basic idea comes from Eric Meyer's <a class=info
href="http://www.meyerweb.com/eric/css/edge/popups/demo.html"><b>pure css
popups</b><span>a very clever way to get dynamic effects on an html page without
using javascript.</span></a>
CODE:
<style>
a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}
a.info:hover{z-index:25; background-color:#ff0}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#ff0; color:#000;
text-align: center}
</style>
</quote>
Carol E. Wheeler
= EMAIL ADDRESS REMOVED =
Web Department
American Institute for Cancer Research
1759 R Street NW
Washington DC 20009
Tel: 202-328-7744
Fax: 202-328-7226
http://www.aicr.org
From: Jukka K. Korpela
Date: Thu, Feb 26 2009 8:35AM
Subject: Re: Help with help icons
← Previous message | Next message →
Carol Wheeler wrote:
> What is a tooltip? <a class=info href="#">This is a tooltip <span>an
> aiding text that appears just when you roll on with the
> mouse</span></a>. The basic idea comes from Eric Meyer's <a class=info
> href="http://www.meyerweb.com/eric/css/edge/popups/demo.html"><b>pure
> css popups</b><span>a very clever way to get dynamic effects on an
> html page without using javascript.</span></a>
The approach more or less fails the specific accessibility criterion that a
page be usable without style sheets. Just think or look what the page
_content_ is, when CSS is ignored. It's sufficiently close to working to
confuse the user in a refined way!
To make it non-confusing, you would have to add punctuation and spaces so
that sentences are understandable and words don't run together (e.g.,
"popups</b><span>a" means that the textual content is "popupsa"). This
sounds simple, but I'm afraid it mostly makes the idea non-working.
Moreover, if you really meant using href="#" (to make the technique work on
older browsers, I presume), then that would create a link to the start of
the page, with a fairly long link text - bad usability, bad accessibility.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
From: Carol Wheeler
Date: Thu, Feb 26 2009 8:45AM
Subject: Re: Help with help icons
← Previous message | Next message →
Jukka, thanks for the reply, I'm always learning.
Here is one of our pages with the tooltip.
http://www.aicr.org/site/News2?abbr=pub_&;page=NewsArticle&id=14376
Tiny URL:
http://tinyurl.com/azxkpj
So--in this case putting the additional information at the bottom of the page would be better? Not that I think the department that oversees this section would go for it...
Carol E. Wheeler
= EMAIL ADDRESS REMOVED =
Web Department
American Institute for Cancer Research
1759 R Street NW
Washington DC 20009
Tel: 202-328-7744
Fax: 202-328-7226
http://www.aicr.org
From: ben morrison
Date: Thu, Feb 26 2009 9:00AM
Subject: Re: Help with help icons
← Previous message | Next message →
On Wed, Feb 25, 2009 at 10:19 PM, < = EMAIL ADDRESS 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
From: ben morrison
Date: Thu, Feb 26 2009 9:05AM
Subject: Re: Help with help icons
← Previous message | Next message →
On Wed, Feb 25, 2009 at 11:39 PM, < = EMAIL ADDRESS REMOVED = > wrote:
>
> Like I said, the thing I'm struggling with is the text for the help link
>
>
>
> <p id="sf">SuperFilter <a href="#sfDef" class="help">What's
> this?</a></p>
>
Keep the link text no need to add any more
<a href="#sfDef" class="help">SuperFilter</a>
--- and the link to jump back to the term. ---
<a href="#sf">Back to term</a>
Maybe just Back, or if its now a JS popup you could image replace for a
close icon or whatever fits best.
--
Ben Morrison
From: Dean Hamack
Date: Thu, Feb 26 2009 9:15AM
Subject: Re: Help with help icons
← Previous message | Next message →
On 2/26/09 8:02 AM, "ben morrison" < = EMAIL ADDRESS REMOVED = > wrote:
> Keep the link text no need to add any more
>
> <a href="#sfDef" class="help">SuperFilter</a>
Won't work because the term itself is going to be a link to an action. The
other suggestions are good. Thanks.
From: Dean Hamack
Date: Thu, Feb 26 2009 9:45AM
Subject: Re: Help with help icons
← Previous message | No next message
I agree with Jukka. I took a look at your page with styles disabled, and it
doesn't make sense.
In my sample link (http://bushidodesigns.net/tooltips/) if you disable
styles, you can jump back and forth between the terms and it still makes
sense. The only thing I'm not sure about is how it works for the
screenreader user who has js enabled.
On 2/26/09 7:43 AM, "Carol Wheeler" < = EMAIL ADDRESS REMOVED = > wrote:
>
> Jukka, thanks for the reply, I'm always learning.
>
> Here is one of our pages with the tooltip.
> http://www.aicr.org/site/News2?abbr=pub_&;page=NewsArticle&id=14376
>
> Tiny URL:
> http://tinyurl.com/azxkpj
>
>
> So--in this case putting the additional information at the bottom of the page
> would be better? Not that I think the department that oversees this section
> would go for it...