WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Glossary

for

From: E.J. Zufelt
Date: Jul 8, 2010 2:45AM

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/
>
>