E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Interactive Glossary

Number of posts in this thread: 17 (In chronological order)

From: Smith, Jennifer (GSL)
Date: Wed, Jul 07 2010 4:33PM
Subject: Interactive Glossary
No previous message | Next message →

I've been tasked with a project that includes a request for an
"Interactive Glossary" that would provide a word's definition in a
pop-up window when users hover over a word. The voices in my head tell
me there's not a way to do that and make the definitions accessible. Am
I wrong? Can anyone provide examples or advice on how to create
something like this?

Thanks,

Jen

Jennifer Smith
Multimedia Coordinator
Oklahoma Guaranteed Student Loan Program
Phone: (405) 234-4488
Fax: (405) 234-4583
E-Mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.ogslp.org <http://www.ogslp.org/>;

Note: This communication and attachments, if any, are intended solely
for the use of the addressee hereof. In addition, this information and
attachments, if any, may contain information that is confidential,
privileged and exempt from disclosure under applicable law including,
but not limited to, the Privacy Act of 1974. If you are not the intended
recipient of this information, you are prohibited from reading,
disclosing, reproducing, distributing, disseminating, or otherwise using
this information. If you have received this message in error, please
promptly notify the sender and immediately delete this communication
from your system.

From: deblist@suberic.net
Date: Wed, Jul 07 2010 4:42PM
Subject: Re: Interactive Glossary
← Previous message | Next message →

To start with, what does "hover" mean for users who don't use a mouse?

Once you've defined that, then you need to address the issues of screenreaders (do you have the freedom to assume only WAI-ARIA-compliant browser/screenreader combinations?) and users who browse the web magnified.

Additionally, there is a universal design issue (which is also going to affect people with limited vision and cognitive disabilities) that trying to make web browsers behave in unexpected ways doesn't work well for anybody. Web users don't expect hovering to give them a definition, and it's bad practice (again, both from a universal design perspective and from a cognitive disability practice) to try to reinvent the way browsers work.

-deborah

From: Smith, Jennifer (GSL)
Date: Wed, Jul 07 2010 4:48PM
Subject: Re: Interactive Glossary
← Previous message | Next message →

Deborah,

I completely agree, which I why I'm asking the list to see if anyone has
a creative solution that would allow me to provide all users access to
the definitions of the words used in the project.

Thanks for providing me with excellent reasons to share as to why I
can't create the type of "Interactive Glossary" they are thinking of.

-Jen

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Wednesday, July 07, 2010 4:45 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Interactive Glossary

To start with, what does "hover" mean for users who don't use a mouse?

Once you've defined that, then you need to address the issues of
screenreaders (do you have the freedom to assume only WAI-ARIA-compliant
browser/screenreader combinations?) and users who browse the web
magnified.

Additionally, there is a universal design issue (which is also going to
affect people with limited vision and cognitive disabilities) that
trying to make web browsers behave in unexpected ways doesn't work well
for anybody. Web users don't expect hovering to give them a definition,
and it's bad practice (again, both from a universal design perspective
and from a cognitive disability practice) to try to reinvent the way
browsers work.

-deborah

From: Susan Grossman
Date: Wed, Jul 07 2010 5:18PM
Subject: Re: Interactive Glossary
← Previous message | Next message →

On Wed, Jul 7, 2010 at 2:34 PM, Smith, Jennifer (GSL) < = EMAIL ADDRESS REMOVED = >wrote:

> I've been tasked with a project that includes a request for an
> "Interactive Glossary" that would provide a word's definition in a
> pop-up window when users hover over a word. The voices in my head tell
> me there's not a way to do that and make the definitions accessible. Am
> I wrong? Can anyone provide examples or advice on how to create
> something like this?
>
>
>
> Thanks,
>
> Jen
>
>
>
> Jennifer Smith
> Multimedia Coordinator
> Oklahoma Guaranteed Student Loan Program
> Phone: (405) 234-4488
> Fax: (405) 234-4583
> E-Mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.ogslp.org <http://www.ogslp.org/>;
>
>
>
> Note: This communication and attachments, if any, are intended solely
> for the use of the addressee hereof. In addition, this information and
> attachments, if any, may contain information that is confidential,
> privileged and exempt from disclosure under applicable law including,
> but not limited to, the Privacy Act of 1974. If you are not the intended
> recipient of this information, you are prohibited from reading,
> disclosing, reproducing, distributing, disseminating, or otherwise using
> this information. If you have received this message in error, please
> promptly notify the sender and immediately delete this communication
> from your system.
>
>

From: Susan Grossman
Date: Wed, Jul 07 2010 5:24PM
Subject: Re: Interactive Glossary
← Previous message | Next message →

On Wed, Jul 7, 2010 at 3:20 PM, Susan Grossman < = EMAIL ADDRESS REMOVED = >wrote:

>
>
> On Wed, Jul 7, 2010 at 2:34 PM, Smith, Jennifer (GSL) < = EMAIL ADDRESS REMOVED = >wrote:
>
>> I've been tasked with a project that includes a request for an
>> "Interactive Glossary" that would provide a word's definition in a
>> pop-up window when users hover over a word. The voices in my head tell
>> me there's not a way to do that and make the definitions accessible. Am
>> I wrong? Can anyone provide examples or advice on how to create
>> something like this?
>>
>>
Sorry about posting twice - Gmail froze on me and didn't include my message

I've seen similar to what you're asking done with an acronym tag using the
title attribute with a little scripting. You can tab to it, mouse over it,
and it's there for screen/voice readers. It doesn't work for
non-voice/screen reader browsers that have no scripting.

This wouldn't be a semantically correct tag for your situation, nor would
the href, but the span tag would.

If it becomes a requirement, this is probably your best bet. But if you can
get it removed from requirements, I'd steer clear.

Susan Grossman

>>
>> Thanks,
>>
>> Jen
>>
>>
>>
>> Jennifer Smith
>> Multimedia Coordinator
>> Oklahoma Guaranteed Student Loan Program
>> Phone: (405) 234-4488
>> Fax: (405) 234-4583
>> E-Mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> www.ogslp.org <http://www.ogslp.org/>;
>>
>>
>>
>> Note: This communication and attachments, if any, are intended solely
>> for the use of the addressee hereof. In addition, this information and
>> attachments, if any, may contain information that is confidential,
>> privileged and exempt from disclosure under applicable law including,
>> but not limited to, the Privacy Act of 1974. If you are not the intended
>> recipient of this information, you are prohibited from reading,
>> disclosing, reproducing, distributing, disseminating, or otherwise using
>> this information. If you have received this message in error, please
>> promptly notify the sender and immediately delete this communication
>> from your system.
>>
>>

From: Jukka K. Korpela
Date: Thu, Jul 08 2010 12:24AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

From: E.J. Zufelt
Date: Thu, Jul 08 2010 2:45AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

Good evening,

I think that this could be simplified with a strictly Javascript or Ajax approach without using an iFrame.

But, I would agree that some AT users will find it confusing that clicking on a link doesn't actually take them to a new page. I would also say that a JS approach is likey not to be indexed by search engines.

Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt

On 2010-07-08, at 1:26 AM, Jukka K. Korpela wrote:

> Smith, Jennifer (GSL) wrote:
>
>> I've been tasked with a project that includes a request for an
>> "Interactive Glossary" that would provide a word's definition in a
>> pop-up window when users hover over a word. The voices in my head
>> tell me there's not a way to do that and make the definitions
>> accessible.
>
> You could use normal link markup, like
> <a href="defs.html#foo">foo</a>
> together with JavaScript code that gets triggered by an onmouseover event.
> That way, it would work as a normal link but also as a "quick link" when
> moused over.
>
> Pop-up windows as such are a problem for several reasons. They may be
> prevented by browser settings (this would not be a big problem here as the
> link would still work when clicked on), they may confuse users and their
> software, and they may just irritate.
>
> In a situation like this, a frame (probably an inline frame i.e. iframe)
> might be useful. Oops, I said the f-word... but really, if you reserve a
> small area of the window for display of the definitions, then you avoid most
> of the problems of pop-up windows. There are surely several accessibility
> issues to be considered, but at least this would give better functionality
> to majority of users than pop-up windows.
>
> I'm thinking of something like the following:
>
> <iframe name=defs width=300 height=100 id=defs src="defs.html"></iframe>
>
> with links like
>
> <a href="defs.html#foo" target="defs" onmouseover="show(this)">foo</a>
>
> and code like
>
> <script type="text/javascript">
> var defFrame = document.getElementById('defs');
> function show(element) {
> defFrame.src = element.href;
> }
> </script>
>
> --
> Yucca, http://www.cs.tut.fi/~jkorpela/
>
>

From: Simius Puer
Date: Thu, Jul 08 2010 7:06AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

There have been discussions on this list regarding a similiar but not quite
identical topic - the <abbr> tag. Whilst not exactly the same problem it has
many of the same issues - the technical implementation, how to cater for
multiple disability types and the repetition on the page.

http://www.webaim.org/discussion/mail_thread.php?thread=3805
http://www.webaim.org/discussion/mail_thread.php?thread=4232

One of the main points that often gets overlooked is one that I'm glad
Deborah raised in her reply - that of Universal Design. Too often the
'solutions' developed only cater for the visually able and those who rely on
AT due to vision loss (the polar-opposites if you like) whilst missing out
on a plethora of other disability types such as limited vision and cognitive
disabilities.

I won't go over all the points raised in the previous threads but to
summarise the highlights:

- Consider the mechanism itself and how it will work (or not) for each
disability type

Whilst the issues surrounding pop-ups are well documented I don't think
an iframe is an acceptable alternative. The question of focus raises it's
ugly head - not only from an AT perspective but also for those with
cognitive issues (and I don't just mean disabilities - consider how older
generations or less web-savvy people use the internet - usability studies
would no doubt highlight plenty of problems with this approach)

- Consider the repetition of the definitions - you can't simply 'expand'
the first instance as not everyone reads a document top-to-bottom, but you
also don't want to force anyone to listen to the full description on every
instance.

- From a real-world perspective you also need to consider SEO and user
choice also - think Universal Design, not just accessibility.

If you want to see more detail on those points please see:
http://www.webaim.org/discussion/mail_thread.php?thread=4232#post38

Jared has quite rightly pointed out [
http://www.webaim.org/discussion/mail_thread.php?thread=4232#post37] that
there is no ideal solution at the moment and we need to look to the W3C to
expand how user agent handle certain elements...sadly as we all know that
isn't going to happen overnight.

My suggestion would be to go low-tech (at least in terms of what the user
agent/website front-end needs to do) - create your links along the lines of

<a href="glossary#term" name="id87687" title="Glossary entry for [term]"
class="glossary">term</a>

- The addition of the title tag allows you to differentiate between a
regular link one to the glossary. I am not 100% convinced this is necessary
but maybe some AT users could give feedback here? The simple idea is to
empower the user by giving them that little bit more information about the
link purpose.

- The addition of class="glossary" enables you to do something visually
equivalent for sighted users (the title tag does display on hover but is
easily missed).

- The addition of the name attribute is to enable the developer to
include an additional on page "back" button by passing this attribute to the
glossary page for inclusion in the link back to the article. This is simply
an addition to the back button to make it a little easier for those with
cognitive issues. Yes, there is a much easier way to do this with
JavaScript back buttons that use the 'referrer' value but what about those
without/blocking JS?

A very simple solution and hopefully one that should prove accessible to as
many people as possible. Don't forget to add a simple "glossary" link to
your navigation too.

Now, once you have your solid solution in place - then you can get clever
and perhaps offer additional layers of functionality such as showing the
glossary explanation in a side-panel.

Of course, you would need to consider any additional functionality carefully
so that the implementation itself is accessible (1 - you don't want this to
confuse AT users, 2 - I say "offer" as you probably want this turned off by
default so as to keep it simple for those with cognitive difficulties) but
it would allow you to do something a little more fancy for your non-disabled
users (and possibly keep your bosses happy). Hopefully you may find this
additional complexity unnecessary once you have the simple solution in
place, but if you do go down that road then don't forget to test for
usability too ;]

From: Ken M
Date: Thu, Jul 08 2010 7:33AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

Smith, Jennifer (GSL) wrote:
> I've been tasked with a project that includes a request for an
> "Interactive Glossary" that would provide a word's definition in a
> pop-up window when users hover over a word. The voices in my head tell
> me there's not a way to do that and make the definitions accessible. Am
> I wrong? Can anyone provide examples or advice on how to create
> something like this?

Sure, Jen. I could do that for you, all though I'm new to the
accessibility thing. It would require Javascript.

Would you be wanting definitions from an English dictionary, or from
your own glossary?

If you look at this page, http://define.com, each word on the page is
clickable with a hyperlink, even though there are no links in the text.
This is done with a simple javascript.

Right now, these links open in the parent window, but they could easily
open in a pop-up or a _blank window.

Basically, for all the text you want to be linkable, you put it in a CSS
element with an ID that has the word "hypertext" as part of the id.

For example;

<p id="hypertext1">This is an example of text that would automatically
have hyperlinks over each word to the english dictionary.</p>

Right now the javascript I use for this doesn't discriminate the words
that are between regular hypertext tags, so when you want to link to
something other than the dictionary, you exclude that from the hypertext
id element. Although I'm sure with a little fussing this could be
rectified.

Here's how I exclude normal links now, although I admit it's not the
most elegant solution.

<p><span id="hypertext1">This is text that will be include. Here is a
link that will be excluded:</span><a href="mylink">word.</a><span
id="hypertext2">now these words *will* be included.</span></p>

I could do something like this for you in ajax as well.

>
> Thanks,
>
> Jen
>
>
>
> Jennifer Smith
> Multimedia Coordinator
> Oklahoma Guaranteed Student Loan Program
> Phone: (405) 234-4488
> Fax: (405) 234-4583
> E-Mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.ogslp.org <http://www.ogslp.org/>;
>
>
>
> Note: This communication and attachments, if any, are intended solely
> for the use of the addressee hereof. In addition, this information and
> attachments, if any, may contain information that is confidential,
> privileged and exempt from disclosure under applicable law including,
> but not limited to, the Privacy Act of 1974. If you are not the intended
> recipient of this information, you are prohibited from reading,
> disclosing, reproducing, distributing, disseminating, or otherwise using
> this information. If you have received this message in error, please
> promptly notify the sender and immediately delete this communication
> from your system.
>
>

From: Ken M
Date: Thu, Jul 08 2010 7:48AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

By the way, here's the javascript to make links. You can play with it
and modify it however you want.

function makelinks() {
var reg =
/(<[^>]*>)|(?:(to|or|by|we|for|not|some|of|the|an|as|if|like|had|not|and|in|on|adj|adv|that|than|then|but|it|&.{1,6};))|([a-zA-Z]{2,})/gi;
var reg_we= /(we)i/
var matches = [];
var elems = document.getElementsByTagName("*");
for (var i = 0; i < elems.length; i++) {
if (elems[i].id.indexOf("hypertext") == 0) matches.push(elems[i]);
}
for (i = 0; i < matches.length; i++) {
var txt = document.getElementById(matches[i].id);
var origText = txt.innerHTML;
txt.innerHTML = "";
txt.innerHTML = origText.replace(reg, "<a href='$3' title='Click
for definition of $3'>$3</a>$1$2");
}
}

Ken M wrote:
> Smith, Jennifer (GSL) wrote:
>> I've been tasked with a project that includes a request for an
>> "Interactive Glossary" that would provide a word's definition in a
>> pop-up window when users hover over a word. The voices in my head tell
>> me there's not a way to do that and make the definitions accessible. Am
>> I wrong? Can anyone provide examples or advice on how to create
>> something like this?
>
> Sure, Jen. I could do that for you, all though I'm new to the
> accessibility thing. It would require Javascript.
>
> Would you be wanting definitions from an English dictionary, or from
> your own glossary?
>
> If you look at this page, http://define.com, each word on the page is
> clickable with a hyperlink, even though there are no links in the text.
> This is done with a simple javascript.
>
> Right now, these links open in the parent window, but they could easily
> open in a pop-up or a _blank window.
>
> Basically, for all the text you want to be linkable, you put it in a CSS
> element with an ID that has the word "hypertext" as part of the id.
>
> For example;
>
> <p id="hypertext1">This is an example of text that would automatically
> have hyperlinks over each word to the english dictionary.</p>
>
> Right now the javascript I use for this doesn't discriminate the words
> that are between regular hypertext tags, so when you want to link to
> something other than the dictionary, you exclude that from the hypertext
> id element. Although I'm sure with a little fussing this could be
> rectified.
>
> Here's how I exclude normal links now, although I admit it's not the
> most elegant solution.
>
> <p><span id="hypertext1">This is text that will be include. Here is a
> link that will be excluded:</span><a href="mylink">word.</a><span
> id="hypertext2">now these words *will* be included.</span></p>
>
> I could do something like this for you in ajax as well.
>
>
>
>
>> Thanks,
>>
>> Jen
>>
>>
>>
>> Jennifer Smith
>> Multimedia Coordinator
>> Oklahoma Guaranteed Student Loan Program
>> Phone: (405) 234-4488
>> Fax: (405) 234-4583
>> E-Mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> www.ogslp.org <http://www.ogslp.org/>;
>>
>>
>>
>> Note: This communication and attachments, if any, are intended solely
>> for the use of the addressee hereof. In addition, this information and
>> attachments, if any, may contain information that is confidential,
>> privileged and exempt from disclosure under applicable law including,
>> but not limited to, the Privacy Act of 1974. If you are not the intended
>> recipient of this information, you are prohibited from reading,
>> disclosing, reproducing, distributing, disseminating, or otherwise using
>> this information. If you have received this message in error, please
>> promptly notify the sender and immediately delete this communication
>> from your system.
>>
>>

From: Susan Grossman
Date: Thu, Jul 08 2010 8:27AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

On Thu, Jul 8, 2010 at 5:07 AM, Simius Puer < = EMAIL ADDRESS REMOVED = >wrote:

> There have been discussions on this list regarding a similiar but not quite
> identical topic - the <abbr> tag. Whilst not exactly the same problem it
> has
> many of the same issues - the technical implementation, how to cater for
> multiple disability types and the repetition on the page.
>
> http://www.webaim.org/discussion/mail_thread.php?thread=3805
> http://www.webaim.org/discussion/mail_thread.php?thread=4232
>
> One of the main points that often gets overlooked is one that I'm glad
> Deborah raised in her reply - that of Universal Design. Too often the
> 'solutions' developed only cater for the visually able and those who rely
> on
> AT due to vision loss (the polar-opposites if you like) whilst missing out
> on a plethora of other disability types such as limited vision and
> cognitive
> disabilities.
>
> I won't go over all the points raised in the previous threads but to
> summarise the highlights:
>
> - Consider the mechanism itself and how it will work (or not) for each
> disability type
>
> Whilst the issues surrounding pop-ups are well documented I don't think
> an iframe is an acceptable alternative. The question of focus raises
> it's
> ugly head - not only from an AT perspective but also for those with
> cognitive issues (and I don't just mean disabilities - consider how older
> generations or less web-savvy people use the internet - usability studies
> would no doubt highlight plenty of problems with this approach)
>
> - Consider the repetition of the definitions - you can't simply 'expand'
> the first instance as not everyone reads a document top-to-bottom, but
> you
> also don't want to force anyone to listen to the full description on
> every
> instance.
>
> - From a real-world perspective you also need to consider SEO and user
> choice also - think Universal Design, not just accessibility.
>
> If you want to see more detail on those points please see:
> http://www.webaim.org/discussion/mail_thread.php?thread=4232#post38
>
> Jared has quite rightly pointed out [
> http://www.webaim.org/discussion/mail_thread.php?thread=4232#post37] that
> there is no ideal solution at the moment and we need to look to the W3C to
> expand how user agent handle certain elements...sadly as we all know that
> isn't going to happen overnight.
>
> My suggestion would be to go low-tech (at least in terms of what the user
> agent/website front-end needs to do) - create your links along the lines of
>
>

I'm not a fan of using a hyperlink for this. It doesn't seem semantically
correct to me since it's not a link, it goes nowhere and so is misleading.
In some browsing software you'll hear how many links are on the page.. Not
sure why the idea of using a span and it's title tag isn't being considered
here. I agree with what you've said other than the use of the href. Am I
missing an issue with the use of a span tag, or a reason you feel an href is
appropriate?

Thanks - Susan

> <a href="glossary#term" name="id87687" title="Glossary entry for [term]"
> class="glossary">term</a>
>
> - The addition of the title tag allows you to differentiate between a
> regular link one to the glossary. I am not 100% convinced this is
> necessary
> but maybe some AT users could give feedback here? The simple idea is to
> empower the user by giving them that little bit more information about
> the
> link purpose.
>
> - The addition of class="glossary" enables you to do something visually
> equivalent for sighted users (the title tag does display on hover but is
> easily missed).
>
> - The addition of the name attribute is to enable the developer to
> include an additional on page "back" button by passing this attribute to
> the
> glossary page for inclusion in the link back to the article. This is
> simply
> an addition to the back button to make it a little easier for those with
> cognitive issues. Yes, there is a much easier way to do this with
> JavaScript back buttons that use the 'referrer' value but what about
> those
> without/blocking JS?
>
> A very simple solution and hopefully one that should prove accessible to as
> many people as possible. Don't forget to add a simple "glossary" link to
> your navigation too.
>
> Now, once you have your solid solution in place - then you can get clever
> and perhaps offer additional layers of functionality such as showing the
> glossary explanation in a side-panel.
>
> Of course, you would need to consider any additional functionality
> carefully
> so that the implementation itself is accessible (1 - you don't want this to
> confuse AT users, 2 - I say "offer" as you probably want this turned off by
> default so as to keep it simple for those with cognitive difficulties) but
> it would allow you to do something a little more fancy for your
> non-disabled
> users (and possibly keep your bosses happy). Hopefully you may find this
> additional complexity unnecessary once you have the simple solution in
> place, but if you do go down that road then don't forget to test for
> usability too ;]
>
>
>

From: deblist@suberic.net
Date: Thu, Jul 08 2010 8:33AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

Ken M wrote:

> If you look at this page, http://define.com, each word on the page is clickable with a hyperlink, even though there are no links in the text.

Ken, I assume you are only creating the links for every single word as a proof of concept, and would never do it in reality, right? Because wow, that page is painful in a screenreader.

-Deborah

From: Ken M
Date: Thu, Jul 08 2010 8:42AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

= EMAIL ADDRESS REMOVED = wrote:
> Ken M wrote:
>
>> If you look at this page, http://define.com, each word on the page is clickable with a hyperlink, even though there are no links in the text.
>
> Ken, I assume you are only creating the links for every single word as a proof of concept, and would never do it in reality, right? Because wow, that page is painful in a screenreader.

Deborah,

I need to obtain a screen reader so I can appreciate what you're
experiencing.

This was just sort of an easy way to make reading the dictionary fun for
people who love to just explore definitions. I'm one of those people.

To make the page less painful there could be some text at the very
beginning of the page that gives an option to turn off the universal
hyperlinks so it's not so painful for people with screen readers. I
could set a cookie on the client so that it only has to be set once,
then it remembers.

Of course, the website is a dictionary, so that's a very unique
circumstance. Most people wouldn't be doing this with every word.
However, it does offer the opportunity to automate to a certain degree.
For example, if you had a large glossary of thousands of terms you
could have only those words be highlighted...I've seen that done on
websites.

But the javascript still would work if you only want to put certain
blocks of text in an element with a "hypertext" id.

By the way, that little script is still pretty rough. I'm just figuring
out regular expressions myself. I paid a programmer to create this for
me about 5 years ago before I knew javascript or css. Now that I know a
little, I can see that I'm not fully taking advantage of the power of
regular expressions.

> -Deborah
>

From: Ken M
Date: Thu, Jul 08 2010 10:51AM
Subject: Re: Interactive Glossary
← Previous message | Next message →

Ken M wrote:
> For example, if you had a large glossary of thousands of terms you
> could have only those words be highlighted...I've seen that done on
> websites.

Actually, on second thought, that's not a good idea. I should have
thought about that a little before sending that to the list. That would
be best handled on the server side. It'd be pretty foolish to do it on
the client. I'm sure the technical experts here were scratching their
heads on that one. :)

From: Claudia.Case@wellsfargo.com
Date: Thu, Jul 08 2010 2:33PM
Subject: Re: Interactive Glossary
← Previous message | Next message →

Jennifer,
WAI-ARIA includes roles for keyboard-accessible Tooltips, Definitions, and Dialog Tooltips. Below are some good resources related to these ARIA roles.

WAI-ARIA 1.0 | The Roles Model:
Tooltip: http://www.w3.org/WAI/PF/aria/roles#tooltip
Definition: http://www.w3.org/WAI/PF/aria/roles#definition

WAI-ARIA Authoring Practices 1.0 | Design Patterns:
Tooltip: http://www.w3.org/WAI/PF/aria-practices/#tooltip
Dialog Tooltip (in progress): http://www.w3.org/WAI/PF/aria-practices/#dialog_tooltip

DHTML Style Guide:
Tooltip: http://dev.aol.com/dhtml_style_guide#tooltip
Dialog (Tooltip): http://dev.aol.com/dhtml_style_guide#dialogtooltip

Working code examples (recommend using with IE8/Firefox 3.6 and JAWS 11, or higher):
CITA | ARIA Tooltip examples: http://test.cita.illinois.edu/aria/tooltip/index.php
CodeTalks.org | ARIA Tooltip examples: http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases#Tooltip

Cheers,
Claudia Case

-----Original Message-----
From: Smith, Jennifer (GSL) [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, July 07, 2010 2:34 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Interactive Glossary

I've been tasked with a project that includes a request for an
"Interactive Glossary" that would provide a word's definition in a
pop-up window when users hover over a word. The voices in my head tell
me there's not a way to do that and make the definitions accessible. Am
I wrong? Can anyone provide examples or advice on how to create
something like this?

Thanks,

Jen

Jennifer Smith
Multimedia Coordinator
Oklahoma Guaranteed Student Loan Program
Phone: (405) 234-4488
Fax: (405) 234-4583
E-Mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.ogslp.org <http://www.ogslp.org/>;

Note: This communication and attachments, if any, are intended solely
for the use of the addressee hereof. In addition, this information and
attachments, if any, may contain information that is confidential,
privileged and exempt from disclosure under applicable law including,
but not limited to, the Privacy Act of 1974. If you are not the intended
recipient of this information, you are prohibited from reading,
disclosing, reproducing, distributing, disseminating, or otherwise using
this information. If you have received this message in error, please
promptly notify the sender and immediately delete this communication
from your system.

From: Smith, Jennifer (GSL)
Date: Thu, Jul 08 2010 3:03PM
Subject: Re: Interactive Glossary
← Previous message | Next message →

Thanks to everyone who provided suggestions and ideas! My hope is to
not have to do something like this at all, but if I'm forced, I'll have
the tools I need to make it work the best way possible.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Thursday, July 08, 2010 2:33 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Interactive Glossary

Jennifer,
WAI-ARIA includes roles for keyboard-accessible Tooltips, Definitions,
and Dialog Tooltips. Below are some good resources related to these
ARIA roles.

WAI-ARIA 1.0 | The Roles Model:
Tooltip: http://www.w3.org/WAI/PF/aria/roles#tooltip
Definition: http://www.w3.org/WAI/PF/aria/roles#definition

WAI-ARIA Authoring Practices 1.0 | Design Patterns:
Tooltip: http://www.w3.org/WAI/PF/aria-practices/#tooltip
Dialog Tooltip (in progress):
http://www.w3.org/WAI/PF/aria-practices/#dialog_tooltip

DHTML Style Guide:
Tooltip: http://dev.aol.com/dhtml_style_guide#tooltip
Dialog (Tooltip): http://dev.aol.com/dhtml_style_guide#dialogtooltip

Working code examples (recommend using with IE8/Firefox 3.6 and JAWS 11,
or higher):
CITA | ARIA Tooltip examples:
http://test.cita.illinois.edu/aria/tooltip/index.php
CodeTalks.org | ARIA Tooltip examples:
http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases#Tooltip

Cheers,
Claudia Case

-----Original Message-----
From: Smith, Jennifer (GSL) [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, July 07, 2010 2:34 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Interactive Glossary

I've been tasked with a project that includes a request for an
"Interactive Glossary" that would provide a word's definition in a
pop-up window when users hover over a word. The voices in my head tell
me there's not a way to do that and make the definitions accessible. Am
I wrong? Can anyone provide examples or advice on how to create
something like this?

Thanks,

Jen

Jennifer Smith
Multimedia Coordinator
Oklahoma Guaranteed Student Loan Program
Phone: (405) 234-4488
Fax: (405) 234-4583
E-Mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.ogslp.org <http://www.ogslp.org/>;

Note: This communication and attachments, if any, are intended solely
for the use of the addressee hereof. In addition, this information and
attachments, if any, may contain information that is confidential,
privileged and exempt from disclosure under applicable law including,
but not limited to, the Privacy Act of 1974. If you are not the intended
recipient of this information, you are prohibited from reading,
disclosing, reproducing, distributing, disseminating, or otherwise using
this information. If you have received this message in error, please
promptly notify the sender and immediately delete this communication
from your system.

From: Simius Puer
Date: Thu, Jul 08 2010 3:45PM
Subject: Re: Interactive Glossary
← Previous message | No next message

>
> I'm not a fan of using a hyperlink for this. It doesn't seem semantically
> correct to me since it's not a link, it goes nowhere and so is misleading.
> In some browsing software you'll hear how many links are on the page.. Not
> sure why the idea of using a span and it's title tag isn't being considered
> here. I agree with what you've said other than the use of the href. Am I
> missing an issue with the use of a span tag, or a reason you feel an href
> is
> appropriate?
>
> Thanks - Susan
>

Sorry Susan, I had a minor error in my example - it was meant to indicate
linking to glossary.htm#term (i.e. an anchor on a real page) with a return
link. The point about keeping a consistent start to the "title" text was to
help AT users who can choose to skip if they get sick of hearing "glossary
term: xyz".

The <span> idea you are referring to has exactly the same problems as the
<abbr> I was detailing (plus more potentially) and no matter how it is
implemented the result is not accessible (to one disability group or another
- usually cognitive group).