HTML and XHTML with scripting support.
This technique relates to Success Criterion 2.1.1: Keyboard (Sufficient as a way to meet G90: Providing keyboard-triggered event handlers).
The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the onmouseover and onmouseout events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the onfocus and onblur events to change the image when the element receives and loses focus.
Each image is given a unique id. This unique id is passed to updateImage() along with a boolean value indicating which image is to be used: updateImage(imgId, isOver);. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The updateImage() function uses the image id to load the image and then changes the src attribue based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute.
It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size.
Load the Web page and test the events using a mouse and via the keyboard.
- Check that the "standard" image is displayed as expected when the Web page is loaded.
Using the Mouse
- Move the mouse over the element containing the event handlers (in this example it is an anchor element). Check that the image changes to the expected image.
- Move the mouse off of the element. Check that the image changes back to the "standard" image.
Using the Keyboard
- Use the keyboard to set focus to the element containing the event handlers. Check that the image changes to the expected image.
- Use the keyboard to remove focus from the element (generally by moving focus to another element). Check that the image changes to the "standard" image.
- Verify that the layout of other elements on the page is not affected when the image is changed.
- All of the steps for the above checks are true.