VGAR Interaction Requirements
Requirements
Interaction
- Accessible Forms (INT-001)
- Error Messaging (INT-002)
- System Messages (INT-003)
- Modal Windows (INT-004)
- Onchange / Onfocus (INT-005)
- Buttons and Links (INT-006)
- Control Moving Content (INT-007)
- No Blinking/Flashing (INT-008)
- Give Users Time (INT-009)
- Custom Controls (INT-010)
- Diverse User Needs and Preferences (INT-011)
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.
<fieldset>
<legend class="screen-reader-only">Update Currency to</legend>
<label for="dollar-1">Dollars</label>
<input type="radio" name="cur" id="dollar-1" />
<label for="pound-1">Pounds</label>
<input type="radio" name="cur" id="pound-1" />
</fieldset>
<input type="button" value="Update Currency" />
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.
<label for="mySelect">Update Currency</label>
<select id="mySelect">
<option>Dollars</option>
<option>Pounds Sterling</option>
</select>
<input type="button" value="Go" onclick="updateCurr()" />
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:
- Describe what will happen via a textual description to the user prior to triggering the control
- aria-describedby="[ID OF CONTAINER OF THAT TEXT]" must be included within the control to ensure screen reader users will receive the message
<label for="langSelect">Choose Language</label>
<select id="langSelect" name="language" aria-describedby="describeLangDD">
<option selected="selected" value="1">English</option>
<option value="2">French</option>
</select>
<div class="screen-reader-only" id="describeLangDD">When you change the
language and then leave this drop down, the language for the entire site
will automatically be changed.</div>
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
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
These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information. You should not act or rely on such content without seeking the advice of a professional. All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.