See section 7B of the book.
not want to use the mouse, we should take care to define not only mouse events like
click, but also alternative, non-mouse events that make sure our scripts are also executed
when the user tabs to a link.
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.
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:
mouseover: pair with
mouseout: pair with
click: pairing not necessary
dblclick: don't know
keydownis the least bad option
keyupis the least bad option
mousemove: impossible to emulate without a mouse
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.
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".
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
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
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
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.