WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Glossary

for

From: Jukka K. Korpela
Date: Jul 8, 2010 12:24AM

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/