Developer checklist

The following checklists are intended to guide developers on the implementation of success criteria for JavaScript, and are broadly grouped by the kind of functionality that each requirement relates to:

  • General Principles
  • Interactive Content (e.g. custom widgets, image viewers, maps, calendars, etc.)
  • Menus and Navigation
  • Form Validation
  • Audio and Video

The checklists should be used during the development phase to ensure WCAG 2.0 compliance of all JavaScript on the site, and should form part of the unit testing phase undergone by developers when updating or creating new content or functionality.

Level A

General Principles

JS_G_A1: All non-text content has an equivalent text alternative

Visually-dynamic information (such as a progress meter) should have a text equivalent

Correct example(s)
See Appendix JS_G_A1

JS_G_A2: All non-text content has an equivalent text alternative

Functionality that can’t be made accessible must have a long description that provides the same information

Correct example(s)
See Appendix JS_G_A2

JS_G_A3:All non-text content has an equivalent text alternative

Functionality that can’t be presented in text must be descriptively identified

Correct example(s)
See Appendix JS_G_A3

JS_G_A4: All non-text content has an equivalent text alternative

Functionality that relies on JavaScript should not be present when JavaScript is unavailable

Correct example(s)
See Appendix JS_G_A4

JS_G_A5: Labels or instructions are provided when content requires user input

Interactive content must have an associated label or short instructions about its behaviour

Correct example(s)
See Appendix JS_G_A5

JS_G_A6: Information and structure can be programmatically determined

Use functions of the DOM to add content to a page

Correct example(s)
See Appendix JS_G_A6

JS_G_A7: Information and structure can be programmatically determined

Do not use events to emulate the behaviour of links

Correct example(s)
<a href="page.html">
Incorrect example(s)
<span onclick="document.location='page.html'">

JS_G_A8: Blocks of repeating content can be bypassed

Use an expandable/collapsible menu to bypass blocks of content

Correct example(s)
See Appendix JS_G_A8

Interactive Content

JS_C_A1: All functionality is operable through a keyboard interface

Interactive content should be accessible to the keyboard, using common keystrokes like ‘Tab’, ‘Enter’ and Arrow Keys

Correct example(s)
See Appendix JS_C_A1

JS_C_A2: Use the click event of links and buttons as an activation event

Use the click event of links and buttons as an activation event

Correct example(s)
See Appendix JS_C_A2
Incorrect example(s)
<input type="button" value="Compute Monthly Pay” onkeypress="compute()">

JS_C_A3: All functionality is operable through a keyboard interface

Mouse actions must be paired with equivalent keyboard actions

Correct example(s)
See Appendix JS_C_A3

JS_C_A4: All functionality is operable through a keyboard interface

Do not use events to restrict keyboard access or remove focus indication

Incorrect example(s)
onfocus="this.blur()"

JS_C_A5: Timed activity can be controlled

Warn the user when a time-limit is about to expire, and provide a mechanism for extending it

Correct example(s)
See Appendix JS_C_A5

JS_C_A6: Timed activity can be controlled

Use scripting to scroll content and provide a mechanism to pause it

Correct example(s)
See Appendix JS_C_A6-A7

JS_C_A7: Timed activity can be controlled

Use scripting to create an alternative, static version of scrolling content

Correct example(s)
See Appendix JS_C_A6-A7

JS_C_A8: Timed activity can be controlled

Use scripting to create a blinking animation that stops in 5 seconds

Correct example(s)
See Appendix JS_C_A8

JS_C_A9: Maintain a logical focus order for interactive components

Insert dynamic content into the DOM immediately following its trigger element

Correct example(s)
See Appendix JS_C_A9

JS_C_A10: Maintain a logical focus order for interactive components

Create custom dialogs in a device independent way

Correct example(s)
See Appendix JS_C_A10-A12

JS_C_A11: Maintain a logical focus order for interactive components

Use scripting to re-order content in the DOM

Correct example(s)
See Appendix JS_C_A11

JS_C_A12: Changes of context are only initiated by user request or with user control

Use progressive enhancement to open custom dialogs on user request

Correct example(s)
See Appendix JS_C_A10-A12

Menus and Navigation

JS_N_A1: All functionality is operable through a keyboard interface

Dynamic menus should be fully accessible to the keyboard, using ‘Tab’ and Arrow Keys

Correct example(s)
See Appendix JS_N_A1

JS_N_A2: Changes of context are only initiated by user request or with user control

Use an actuation event, rather than focus or load event, to programmatically open links or trigger popup windows

Correct example(s)
See Appendix JS_N_A2

JS_N_A3: Changes of context are only initiated by user request or with user control

Use progressive enhancement to open windows on user request

Correct example(s)
See Appendix JS_N_A3

JS_N_A4: Changes of context are only initiated by user request or with user control

Do not use the change event of a SELECT element for navigation

Correct example(s)
See Appendix JS_N_A4

JS_N_A5: Changes of context are only initiated by user request or with user control

Do not automatically redirect the page using JavaScript

Correct example(s)
See Appendix JS_N_A5

JS_N_A6: Changes of context are only initiated by user request or with user control

Do not automatically refresh the page without user confirmation or control

Correct example(s)
See Appendix JS_N_A6

Form Validation

JS_F_A1 If an input error is detected, the field should be identified and the error described in text

Form validation should be triggered by submission, rather than individual field events

Correct example(s)
See Appendix JS_F_A1-A3-A4

JS_F_A2: Form submission should be bound to the form’s submit event, not to the submit button’s click event

Form submission should be bound to the form’s submit event, not to the submit button’s click event

Correct example(s)
<form action="/search" onsubmit="return validate(this)">
Incorrect example(s)
<input type="submit" onclick="return validate(this)">

JS_F_A3: If an input error is detected, the field should be identified and the error described in text

Form validation should trigger an alert then set focus on the first invalid field

Correct example(s)
See Appendix JS_F_A1-A3-A4

JS_F_A4: If an input error is detected, the field should be identified and the error described in text

Validation error messages should be programmatically inserted directly after the field they relate to, using functions of the DOM

Correct example(s)
See Appendix JS_F_A1-A3-A4

JS_F_A5: If an input error is detected, the field should be identified and the error described in text

Do not force the focus to remain in invalid fields

Correct example(s)
See Appendix JS_F_A5

Level AA

Form Validation

JS_F_AA1: If an input error is detected, and suggestions for corrections are known, these can be provided in text

Where form fields require a specific format or range of values, contextual help-text can be programmatically inserted directly after the field it relates to, using functions of the DOM

Correct example(s)
See Appendix JS_F_AA1