Please note that we will be conducting scheduled maintenance on May 2nd, 2024 between 8:00pm EST and 12:00am EST. During this time AMP will be temporarily unavailable.

  • Media Type Web > Focus Control
  • State Active
  • Advisory No

Using an event handler, such as the onChange event, that triggers focus or context changes when input is given by the user can cause significant challenges for users with disabilities. Authors should avoid using event handlers to trigger context changes whenever possible. This use of onChange is mostly associated with the select (drop-down / listbox) form control type, but this issue can occur with checkboxes, radio buttons, text input fields, etc. When a user initiates a change such as by pressing enter on a link it is not a violation of this best practice.

Compliant Example

<!--Example #1-->
<form action="(EmptyReference!)" method="get"
name="FormName">
  <select name="select _0">
    <option value="one">first</option>
    <option value="two">second</option>
    <option value="three">third</option>
  </select>
  <input type="button" value="Go!" name="go_button"
onKeyPress=" document.location=' http://www.ssbtechnologies.com'"
onClick=" document.location=' http://www.ssbtechnologies.com'" />
</form>

<!--Example #2- using angular.js-->
HTML:
<section ng-controller="SelectController as select">
<h3>{{select.heading3}}</h3>
<label for="{{select.officeId}}">{{select.officeLabel}}</label>

<select id="{{select.officeId}}" ng-model="officeLocation" 
ng-options="location.text for location in officeLocation track by
location.value">
<option value="">--Select--</option>
</select>

<input type="button" value="Go" name="btnGo"
id="btnGo"
onkeypress="window.location.href='http://www.ssbbartgroup.com/contact-us/'"
onclick="window.location.href='http://www.ssbbartgroup.com/contact-us/'" />

</section>

ANGULAR.JS SNIPPET:
app.controller('SelectController', ['$scope', function($scope) {
this.officeLabel= 'Office Location';
this.officeId= 'selectLocation';
this.heading3= "Select Menu";
$scope.officeLocation= officeLocation;
}]);
  
var officeLocation = [
{
text:'San Francisco',
value:'sfo',
},

{
text:'Washington D.C.',
value:'dc',
},

{
text:'Other',
value:'other',
},
];

Non-Compliant Example

<!-- Select box example -->
<form action="(EmptyReference!)" method="get"
name="FormName">
<select name="select _0" onChange="
document.location='http://www.ssbbartgroup.com'">
		<option value="one">first</option>
		<option value="two">second</option>
		<option value="three">third</option>
	</select>
</form>

For dropdown selection controls, add in a form button (i.e. Apply) that allows the user to trigger the form update event. Ensure that this element has a text value that properly communicates its function.

When an additional button is not an option, developers can use the onBlur event which will be fired when the user tabs out of the field to trigger focus changes. To preserve the 'one click' functionality for mouse users, the onBlur event should be coupled with the onMouseDown event which should trigger the change for mouse users. This approach should allow mouse and keyboard users to select the item without requiring an associated button.

Provide instructions or a description for particular focus changes that occur in the document. For example, if a phone number is required and focus automatically moves from the "area code" to the next three digits after the area code has been typed in, this behavior may be described on the page.

Organization Standards

  • § 508-1194.22 Web Sites and Applications
    • (l) Ensure scripts are accessible
  • Section 508 and 255 (Revised 2017)
    • Chapter 3: Functional Performance Criteria
      • 302.1 Without Vision
  • WCAG 2.0 Level A
    • 3.2.2 On Input
  • WCAG 2.1 Level A
    • 3.2.2 On Input

Other Mapped Standards

  • § 508-1194.21 Software Applications and Operating Systems
    • (a) Ensure keyboard control of application
  • § 508-1194.22 VA Testing Checklist - Web Sites and Applications
    • (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
      • (l.2) Is keyboard focus visually and programmatically discernable?
        • (l.2.b) Are event handlers that trigger focus changes avoided?
  • § 508-1194.31 Functional performance criteria
    • (a) Ensure access for blind and visually impaired
  • 47 CFR 14. Advanced Communication Services
    • 47 CFR 14.21 Performance Objectives
      • (b) Accessible
        • (b)(1) Input, control, and mechanical functions shall be locatable, identifiable, and operable
          • (b)(1)(i) Operable without vision
          • (b)(1)(ii) Operable with low vision without relying on audio
          • (b)(1)(v) Operable with limited manual dexterity
  • BITV 2.0 (Priority I)
    • 3.2.2 Bei Eingabe
  • Baseline Tests for Software & Web Accessibility (v2.0.2 2017)
    • 3. Focus (order)
  • HHS HTML 508 Checklist (2019)
    • Section J: Sites containing Forms
      • J4 Is the form free of making a selection when attempting to navigate the options? (only submits when user makes a selection)
  • JIS X 8341-3: 2004 - Technical Standards Subpart 5
    • 5.3 (e) Ensure user control of page updates and navigation
  • KWCAG
    • 4-1 - Ensure plug-ins are directly accessible
      • 4-1-1 - Ensure that the embedded content itself is accessible
  • NFB Certification
    • Non-Standard Controls
  • Telecommunications Act Accessibility Guidelines
    • 1193.41 Input, control, and mechanical functions.
      • (a) Operable without vision. Provide at least one mode that does not require user vision.
      • (b) Operable with low vision and limited or no hearing. Provide at least one mode that permits operation by users with visual acuity between 20/70 and 20/200, without relying on audio output.
      • (e) Operable with limited manual dexterity. Provide at least one mode that does not require user fine motor control or simultaneous actions.
  • WCAG 2.0 Level A & AA Baseline
    • 3 Focus Order
  • WCAG 2.0 Level AAA
    • 3.2.5 Change on Request
  • WCAG 2.1 Level A & AA Baseline
    • 3. Focus Order
  • WCAG 2.1 Level AAA
    • 3.2.5 Change on Request
  • WCAG 2.2 Level A
    • 3.2.2 On Input
  • WCAG 2.2 Level A & AA Baseline
    • 3. Focus Order
  • WCAG 2.2 Level AAA
    • 3.2.5 Change on Request

  • Severity

    8 (red)
    in range of 1 to 10

  • Noticeability

    5 ()
    in range of 1 to 10

  • Tractability

    6 ()
    in range of 1 to 10