WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Glossary

for

From: Ken M
Date: Jul 8, 2010 7:33AM

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 REMOVED> <mailto: <EMAIL 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.
>
>