WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Glossary


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

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 =
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 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.