Onclick event handlers are triggered within certain applications to enable a variety of different client side functionality. SSB has tested onclick events for accessibility and created a list of concerns regarding their appropriate use within a web site or application.
An onclick event fires when the mouse is “clicks” on an element, a form element is selected using the Enter key, or the access key for an element is activated. This causes certain cases, specifically when used within form elements, that make the usage of onclick a difficulty for assistive technology users.
When the onclick event handler is used with a selection element (such as drop down menu or radio button list) to force form submission or navigation an assistive technology user’s focus will shift without their interaction. Generally speaking this will cause focus to shift to the beginning of the new page. This is confusing to a user of assistive technology and often causes the users to “get lost” within an application or site.
SSB recommends removing the onclick event handlers when they are used for navigation or forced form submission. An appropriately labeled element separate from the selection element should be provided that triggers the form post or navigation.
The action of the onclick event handler must be configured to ensure it can be accessed from the keyboard. In the even of form controls selected using “Enter” to handle selection this is a generally not a problem. If, however, container or text elements, such as DIV or SPAN, are used then an appropriate keyboard alternative, such as “onkeypress”, should be provided to ensure the action is accessible from the keyboard.
The page author must ensure that when content is updated using the onclick event handler this content is available to users of assistive technology. Generally this means updating the appropriate textual item to ensure it accurately reflects the state after it has been altered with the onclick. For example an element that is selected after an onclick event should have a textual description that updates it’s reflected state.