Developer Checklist — JavaScript Appendices

Correct code

JS_C_A3: Mouse actions must be paired with equivalent keyboard actions

This example shows how focus and blur events can be paired with mouseover and mouseout events, to perform the same action for keyboard or mouse interaction.

The important principal here is equivalence not equality — events don't need to be paired quite as literally as this example. Context-menus, for example, are typically triggered by mouse right-click events, which have no direct keyboard equivalent, but a keyboard equivalent could be provided by triggering the menu from a separate button or link. It doesn't matter if the keyboard and mouse interactions for a particular task are completely different, as long as they achieve an equivalent end-result.

Live Demo

The image is below is wrapped in a link, which has keyboard and mouse events, to perform an image-swap in response to either:

A plastic toy bunny with dopey eyes and freckles, wearing a shirt and a tie.

JavaScript Code

The JavaScript code for this example can be found in: JS_C_A3.js