Event pairs

See section 7B of the book.

In order to make our JavaScript-driven pages more accessible to users who cannot or do not want to use the mouse, we should take care to define not only mouse events like mouseover and click, but also alternative, non-mouse events that make sure our scripts are also executed when the user tabs to a link.

Limitations of the tests

This page tries to find out which non-mouse events we should use to emulate mouse events. Note that this series of tests does not cover screen readers. Since I don't have any available, I cannot test anything. These tests are solely targeted at graphic desktop browsers where the users do not use a mouse.

I suppose the tests could also be used for browsers on mobile phones, but since I don't have any available I cannot run these tests, either. More data on mobile phone performance will be gratefully received, though.

Summary

Unfortunately we cannot create strict guidelines for pairing one mouse event with one non-mouse event. There is no one-to-one relationship, since non-mouse events work differently from mouse events. Therefore the recommendations below will probably work in a majority of cases, but not in all.

That said, these are the results of my test:

If a page must be perfectly accessible for non-mouse users, we are severely limited in our choice of elements to apply event handlers to. In practice we go back to the Netscape 3 era, where event handlers were only possible on links and form fields.

More research is clearly necessary.

Preparations

In most browsers users can go through the page by pressing the Tab button. When they do, the focus jumps to the next link or form field on the page. This always works in Explorer Windows and Mozilla. In Safari you might have to press F1 once to enable keyboard shortcuts.

Opera uses a slightly different system. Jumping from link to link is done by using Ctrl + Arrow Up/Down. Despite this different key combination I will still call it "tabbing".

Example: traditional mouseovers

As an example I recoded my mouseover script to be more accessible. Tabbing over the links also fires the mouseover effect.

How did I do that? First and most important, I connected the mouseover and mouseout scripts to two events, and not just one:

imgs[i].onmouseover = imgs[i].onfocus = mouseGoesOver;
imgs[i].onmouseout = imgs[i].onblur = mouseGoesOut;

Now the functions are called when the uses mouses over and out of the links, but also when he tabs into or out of them.

Nonetheless, adding a few events is not enough. My original script works by setting the onmouseover and onmouseout directly on the image. Unfortunately it is impossible to tab to an image: tabs only work for form fields and links. Therefore I had to re-assign my events to the image's parent node: the link.

This simple example doesn't change when we re-assign the events, but more complicated scripts might suffer from the inability to define accessible events on, say, a <div>.

To remain perfectly accessible, we can only define events on links and form fields, just like we did back in 1998. Although many scripts on the 'Net probably use links for defining event handlers on, advanced functionalities like my Edit text script may remain inaccessible to non-mouse users, since they use click events on paragraphs.