Mouse-specific event handler

(Referring UWEM Test: 6.4_HTML_01)

Test info

Failure cause

Found a mouse-specific event handler without a keyboard-specific version

The inspected element uses the mouse-specific event handler

  • onmousedown,
  • onmouseup,
  • onclick,
  • onmouseover, or
  • onmouseout

but does not provide a keyboard-specific or device-independent event handler that triggers the same functionality.

Why this may be a barrier

Some users don't have a mouse to navigate the page but rely on device-independent keyboard-input. As a result, functionality only provided through mouse-actions is not available to those users.

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page with mouse-specific event handler WITH A KEYBOARD-SPECIFIC VERSION</title></head>
<body>

<p onmousedown="alert('This is correct!')" onkeydown="alert('This is correct!')">Some content</p>

</body>
</html>

Solution

Add a keyboard specific event handler to the inspected element triggering the same functionality the mouse-event does. The following table maps device-specific event handlers: 

Mouse-specific Keyboard-specific or device-independent
onmousedown onkeydown
onmouseup onkeyup
onclick onkeypress
onmouseover onfocus
onmouseout onblur

Links with onclick should NOT use onkeypress because that would prevent tabbing through the page.

References

Related WCAG 1.0 Checkpoint

6.4

"For scripts and applets, ensure that event handlers are input device-independent." [Priority 2]
WCAG 1.0 Checkpoint 6.4

Referring UWEM Test

6.4_HTML_01

This test is targeted to check that mouse-specific event handlers have a keyboard specific (or device independent) version.

Examples

  • Mouse-down and mouse-up

    To support navigation without a mouse there must be a corresponding key functionality:

    • Every functionality provided onmousedown must also be provided onkeydown.
    • Every functionality provided onmouseup must also be provided onkeyup.
       
    Bad example:
    <body>
    <p>Click the button and hold the mouse-button for some time to see the event-handler in action (this functionality is not available without mouse-usage):</p>
     
    <input type="button" value="Click me!"
    onmousedown="this.value = 'Pushed the mouse-button!';"  
    onmouseup="this.value = 'Released the mouse-button!';"   >
     
    </body>
    Good example:
    <body>
    <p>Click the button and hold the mouse-button for some time to see the event-handler in action (this functionality can also be triggered using the keyboard):</p>
     
    <input type="button" value="Click me!"

    onmousedown="this.value = 'Pushed the mouse-button!';"
    onkeydown="return this.onmousedown();"

    onmouseup="this.value = 'Released the mouse-button!';"
    onkeyup="return this.onmouseup();">
     
    </body>
    Questions, suggestions, objections? Give us feedback!
  • On click

    To support navigation without a mouse there must be a corresponding key functionality:

    • Every functionality provided onclick must also be provided onkeypress.
    Bad example:
    <body>
    <a href="http://accessibility.egovmon.no"
    onclick="alert('Have fun checking your page with the eAccessibility Checker')"   >
    Go to the eAccessibility Checker
    </a>
    </body>
    Good example:
    <body>
    <a href="http://accessibility.egovmon.no"
    onclick="alert('Have fun checking your page with the eAccessibility Checker')"
    onkeypress="alert('Have fun checking your page with the eAccessibility Checker')">
    Go to the eAccessibility Checker
    </a>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • Mouse-over and mouse-out

    To support navigation without a mouse there must be a corresponding key functionality:

    • Every functionality provided onmouseover must also be provided onfocus.
    • Every functionality provided onmouseout must also be provided onblur.
       
    Bad example:
    <body>
    <p>Move the mouse over the image of Max Mustermann to see him smiling (this functionality is not available without mouse-usage).</p>
     
    <img src="images/maxMustermann.jpg" alt="Image of Max Mustermann"
    onmouseover="this.src = 'images/maxMustermann_smiling.jpg';"  
    onmouseout="this.src = 'images/maxMustermann.jpg';"       >
     
    </body>
    Good example:
    <body>
    <p>Move the mouse over the image of Max Mustermann to see him smiling (this functionality can also be triggered using the keyboard).</p>
     
    <img src="images/maxMustermann.jpg" alt="Image of Max Mustermann"

    onmouseover="this.src = 'images/maxMustermann_smiling.jpg';"
    onfocus="return this.onmouseover();"

    onmouseout="this.src = 'images/maxMustermann.jpg';"
    onblur="return this.onmouseout();">
     
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide