Keyboard Support (NAV-001)

Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, assistive technology (AT) compatibility, and screen reader users. It also benefits usability for all users by reducing the need for context switching when filling out forms online and other similar scenarios.

To ensure compatibility with keyboard it is best not to use 3rd party tools, plugins, or applets because they can introduce complications.

There should not be any keyboard traps in which the user is unable to exit an element such as a modal. Changes to the page or context should only occur when initiated by the user and not when a user places keyboard focus on an element or leaves an element in an onBlur event.

When a change of context results from an onBlur event or an onChange event the user should be notified of the change unless it occurs below the currently focused element.

Requirements

Keyboard Only (NAV-WEB-001-01)

All functionality and content MUST be available to users via the keyboard only (without a mouse) without requiring specific timing of keystrokes.

Keyboard Events (NAV-WEB-001-02)

Onmouseover / onmouseout events MUST be accompanied by onfocus / onblur.

$('.trigger').on('mouseover focus', function(){
	//do stuff
});

$('.trigger').on('mouseout blur', function(){
	//do stuff
});
		

No 3rd Party Tools (NAV-WEB-001-03)

3rd party tools, plugins, and applets SHOULD not be used in the web application as it makes accessibility compliance more complicated, and this SHOULD be considered before choosing 3rd party technologies.

No Keyboard Trap (NAV-WEB-001-04)

If any part of the UI takes control of keyboard focus (e.g., PDF viewer or modal window) it MUST, through keyboard commands only, allow focus to return to the launching element and browser.

Use onBlur Not onChange (NAV-WEB-001-05)

Onblur MUST be used instead of onchange, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users.

$('#dropdown').on('blur', function(){
	$('input#currency').val(convertCurrency('pounds'));
})
		

No Context Change onFocus (NAV-WEB-001-06)

Changes of context MUST not be initiated onfocus.

Warn for Context Change (NAV-WEB-001-07)

Changes to the screen caused by onblur or onchange events SHOULD be minor enough that they are not a change of context. If changes are major enough to be a change of context, they MUST be user initiated (e.g., with a “go” button) or the user MUST be informed of the change ahead of time with text onscreen (not visually hidden).


Test Procedures

Keyboard (NAV-WEB-001-01-T)

Run through all use cases using keyboard only (i.e., without a mouse), confirming that all features and functionality are fully available to users.

Keyboard (NAV-WEB-001-02-T)

Run through all use cases using the keyboard only (i.e., without a mouse), confirm that any "mouseover" events are available to the keyboard when the keyboard focus is placed on the element.

No 3rd Party Tools (NAV-WEB-001-03-T)

Confirm that 3rd party tools, plugins, and applets are not be used in the web application unless absolutely necessary.

Keyboard (NAV-WEB-001-04-T)

Run through all use cases using keyboard only (i.e., without a mouse), confirm that no UI elements take control of keyboard focus unless they also return focus.

Keyboard (NAV-WEB-001-05-T)

Confirm that onblur is used instead of onchange unless it cannot be avoided and care has been taken to ensure that it has no negative consequences for keyboard only or screen reader users.

Keyboard (NAV-WEB-001-06-T)

Confirm that changes of context are never initiated onfocus.

Keyboard (NAV-WEB-001-07-T)

Confirm that screen changes caused by onblur and onchange events are minor, and if not that the user is informed of the change of context ahead of time with text onscreen (not visually hidden).


Related Content

WCAG Success Criteria

W3C Techniques

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.