VGAR Interaction Requirements

Onchange / Onfocus (INT-005)

Don't change things onChange or onFocus; let users say, "go"

Always use a “GO” button or similar action titled button to trigger a change in the page so that changes only occur when the user initiates them. Do not change page context by changing what is presented on screen after the user enters information or leaves a field with the onChange or onFocus/onBlur events.

In the rare instance that an onBlur event must be used to trigger a change in page context or presentation, the user must be warned prior to triggering the change with a textual description and aria-describedby.

Requirements

Don't Use onChange or onFocus (INT-WEB-005-01)

The onchange and onfocus events MUST not be utilized to perform any actions for the user.

Use "GO" Buttons (INT-WEB-005-02)

The onblur event MUST not be used to perform any user action, unless deemed absolutely necessary. A “go” button is always the preferred approach in this instance.

Warn Users in Text and With aria-describedby (INT-WEB-005-03)

If an onblur event MUST be used to cause a “significant” change to a page, the page MUST:

1. Describe what will happen via a textual description to the user prior to triggering the control
2. aria-describedby="[ID OF CONTAINER OF THAT TEXT]" must be included within the control to ensure screen reader users will receive the message

Activate Only on Up Event (INT-WEB-005-04)

Actions completed with mouse or touch input MUST not use the down-event to execute any part of the function.

-OR-

Make sure there is a way for the user to abort or undo the action.

-OR-

Allow the up-event to reverse any outcome of the preceding down-event

Test Procedures

Keyboard (INT-WEB-005-01-T)

Interact with each form control and confirm that no actions take place onchange or onfocus.

Keyboard (INT-WEB-005-02-T)

Interact with each form control and confirm that no actions take place onblur (rather they require a go button) unless this is absolutely necessary.

Screen reader (INT-WEB-005-03-T)

Interact with each form control that uses an onblur event to cause a "significant" change to a page, the page visually describes what will happen via a textual description to the user prior the control being triggered, and that description is also read to the user after the label, onfocus.

Mouse / Touch Screen (INT-WEB-005-04-T)

Confirm that there are no actions which are completed using the down-event from mouse or touch input OR that there is a way for the user to abort or undo the action OR that the up-event allows the user to reverse any outcome of the preceding down-event.

Related Content

WCAG Success Criteria

• 2.5.2 Pointer Cancellation
• 3.2.2 On Input

W3C Techniques

• G80: Providing a submit button to initiate a change of context
• H32: Providing submit buttons
• H84: Using a button with a select element to perform an action
• G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
• SCR19: Using an onchange event on a select element without causing a change of context
• G201: Giving users advanced warning when opening a new window
• G210: Ensuring that drag-and-drop actions can be cancelled
• G212: Using native controls to ensure functionality is triggered on the up-event.

Common Failures

• F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value
• F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed
• F101: Failure of Success Criterion 2.5.2 due to activating a control on the down-event