- Image Rollovers
Use the event handlers on an anchor element rather than on the image element. An image cannot achieve keyboard focus so it would never be able to use the keyboard events.
Use the keyboard equivalent event handlers for the standard mouse event handlers.
onmouseover="rollon(this);"
onmouseout="rolloff(this);"
onfocus="this.onmouseover();"
onblur="this.onmouseout();"It’s actually better to assign event handlers dynamically (version 5+ browser), but if you need to support older browsers, use the hardcoded event handlers.
View the example image rollovers. Note: There are numerous ways to use JavaScript for rollovers and preloading images. We are not claiming this example is the only accessible way, we’re just showing an example of accessibility features in use.
- Popup Window
- Never use unrequested popups!
- Warn user on requested popups.
- Before link
- Inside link text
- In
titleattribute link of link
- Use real
hrefvalue.Dont’t use
href="#"orjavascript:psuedo-protocol.<!-- These methods fail when JavaScript is disabled -->
href="#" onclick="window.open(...);"
href="javascript:window.open(...);"
- Verify new window.
Don’t cancel default behavior of link (
return false;) until you have verified the existence of the new window. Otherwise, browsers with internal popup-blocking enabled may not be able to get to the content.<!-- This method fails with some popup blocking settings -->
href="foo.htm" onclick="window.open(...);return false;"
Instead use a function with a return value that returns
falseif the window has opened andtrueif it hasn’t.<!-- View example JS file for function details -->
href="foo.htm" onclick="return pop(this);"
View the completed accessible popup window example.
- Form Validation
Although I have no finished validation example, keep these tips in mind and you should do well.
- Always backup with server-side validation!
If your data must be valid, you should always back up the JavaScript validation with server-side validation. JavaScript can be disabled or unavailable.
- Wait until submission to validate.
Don’t distract a user by validating each field as they go through the form. Wait for the user to finish and submit the form, then validate and present feedback if necessary.
- Never auto-submit!
Never ever auto-submit a form. The most common abuse of this technique is submission with a drop-down
selectlist. Though this may present a usable solution for a person with a mouse, it is a usability and accessibility nightmare for keyboard users.
- Always backup with server-side validation!