Follow

OnChange Opinion

The onChange event handler is commonly used within a drop down list to force navigation in browsers. This event handler proves a challenge for users of assistive technology who have difficulty selecting items in the drop down list without having the server submission performed.

Onchange Function

The onchange event is fired whenever the selection in a drop down list is changed with either the keyboard or mouse or text within a textarea is altered.

Problem Areas

The onChange event should be avoided whenever possible, specifically when this event forces form submission or navigation to another page. 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.

Workaround

If the onChange event must be used certain measures can be implemented to ensure its usability in assistive technology user.

Addition of a title attribute

The SELECT element in question should add a title attribute. This title attribute should contain the appropriate label for the drop down list and provide the keyboard shortcuts necessary to browse the list without activating the onChange event.

Note: To ensure that the title attribute is rendered in assistive technology, the SELECT element should not define an explicit label. In most current assistive technology, the presence of an explicit label element will override the rendering of the title attribute.

Publishing keyboard shortcuts

Keyboard shortcuts for not triggering the onChange event in assistive technology should be published in an assistive technology user manual. This assistive technology user manual does not have to be complex, and in the case of Bstore, it should be a short one page summary of various page elements that do not trigger default behaviors. Using JAWS 4.02 with Internet Explorer, this can be accomplished using the following keyboard shortcuts:

Open Combo Box

Alt + Down Arrow

Close Combo Box

Alt + Up Arrow

Select Item

Enter

Example HTML

Form without title attribute

<form action=”(EmptyReference!)” method=”get” name=”FormName”> <select name=”select _0″ onChange=”document.location=’http://www.ssbtechnologies.com'”> <option value=”one”>first</option> <option value=”two”>second</option> <option value=”three”>third</option> </select> </form>

Form with title attribute

<form action=”(EmptyReference!)” method=”get” name=”FormName”> <select name=”select _0″ onChange=”document.location=’http://www.ssbtechnologies.com'” title=”Site Wide Navigation. Use ctrl + down arrow to open and navigate menu”> <option value=”one”>first</option> <option value=”two”>second</option> <option value=”three”>third</option> </select> </form>

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Help Desk
www.ssbbartgroup.com | 800.889.9659
© 2005 - 2015 - SSB BART Group. All rights reserved.
Privacy | Security | Credits | License
Powered by Zendesk