Developer Checklist

The following checklists are intended to guide developers on the implementation of success criterion for the source order. The checklists should be used during the development phase to ensure WCAG 2.0 compliance of the source order on the site and should form part of the unit testing phase undergone by developers when updating or creating new content or functionality.

Areas of importance to be reviewed for source order accessibility are also covered specifically in the relevant category factsheet:

  • Navigation; Content; Coding; Tables, Forms and interactive site features (e.g. Interactive Maps, Slideshow, Image Gallery etc).

Level A

Coding

SCO_A1i

Details

Has the appropriate formatting been used (i.e. for text layout whitespace is not used to format text to into a column layout)?

Correct example(s)
<table><tr><td>Web Content Accessibility Guidelines covers a wide range of issues and recommendations for making Web content more accessible.</td><td>This document contains principles, guidelines, success criteria, benefits and examples that define and explain the requirements for making Web-based information and applications accessible.</td></tr></table>
Incorrect example(s)
<p>Web Content Accessibility Guidelines covers &nbsp; &nbsp; &nbsp; This document contains principles, guidelines,<br>a wide range of issues and recommendations&nbsp; &nbsp; &nbsp;success criteria, benefits and examples that<br>for making Web content more accessible. &nbsp; &nbsp; &nbsp;define and explain the requirements for making<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Web-based information and applications accessible.</p>

SCO_A1ii

Details

Has the appropriate formatting been used (i.e. for tabular content whitespace is not used to format text to look like a table)?

Correct example(s)
<table Summary="Minimum and maximum temperatures for Australian state capital cities" Caption="Temperature comparison by city"><tr><th>City</th><th>Min</th><th>Max</th></tr><tr><td>Melbourne</td><td>10</td><td>16</td></tr><tr><td>Sydney</td><td>15</td><td>21</td></tr></table>
Incorrect example(s)
<p>City &nbsp; &nbsp; &nbsp; Min &nbsp; &nbsp; &nbsp; Max &nbsp; &nbsp; &nbsp; Melbourne &nbsp; &nbsp; &nbsp; 10 &nbsp; &nbsp; &nbsp; 16 Sydney &nbsp; &nbsp; &nbsp; 15 &nbsp; &nbsp; &nbsp; 21</p>

Sequence

SCO_A2

Details

Does the visual order of columns match the order of the content with style sheets disabled?

Correct example(s)
CSS On:
Correct Example of SCO_A2 with CSS On
CSS Off:
Correct Example of SCO_A2 with CSS Off
Incorrect example(s)
CSS On:
Incorrect Example of SCO_A2 with CSS On
CSS Off:
Incorrect Example of SCO_A2 with CSS Off

SCO_A3

Details

Does the visual order of the site feature (i.e. navigation, form etc.) match the order of the content with style sheets disabled?

Correct example(s)
CSS On:
Correct Example of SCO_A3 with CSS On
CSS Off:
Correct Example of SCO_A3 with CSS Off
Incorrect example(s)
CSS On:
Incorrect Example of SCO_A3 with CSS On
CSS Off:
Incorrect Example of SCO_A3 with CSS Off

SCO_A4i

Details

Are the visual and source order in the correct reading sequence in the content?

Correct example(s)
Visual/Reading order:
Correct Example of SCO_A4i_Reading Order_CSS On
Source order (CSS Off):
Correct Example of SCO_A4i_Source Order_CSS Off
Incorrect example(s)
Visual/Reading order:
Incorrect Example of SCO_A4i_Reading Order_CSS On
Source order (CSS Off):
Incorrect Example of SCO_A4i_Source Order_CSS Off

SCO_A4ii

Details

Are the visual and source order in the correct reading sequence in the form?

Correct example(s)
Visual/reading order:
Correct Example of SCO_A4ii_Reading Order_CSS On
Source order (CSS Off):
Correct Example of SCO_A4i_Source Order_CSS Off
Incorrect example(s)
Visual/reading order:
Incorrect Example of SCO_A4ii_Reading Order_CSS On
Source order (CSS Off):
Incorrect Example of SCO_A4ii_Source Order_CSS Off

SCO_A5

Details

Is the keyboard focus order meaningful – does the tab order preserve meaning and operability (i.e. the TABINDEX attribute has not been used as this may interfere with built-in logical tab order)?

Correct example(s)
TABINDEX is not used.
Incorrect example(s)
<input name="query" value="" size="50" class="QSInput" id="query" tabindex="3" type="text">

SCO_A6

Details

Does the visual and source order of the site page and/or feature match the keyboard focus order?

Correct example(s)
Keyboard focus order:
Correct Example of SCO_A6 Keyboard Focus
Visual/reading order:
Correct Example of SCO_A6 Visual Reading Order
Source order (CSS Off):
Correct Example of SCO_A6 Source Order with CSS off
Incorrect example(s)
Keyboard focus order:
Incorrect Example of SCO_A6 Keyboard Focus
Visual/reading order:
Incorrect Example of SCO_A6 Visual Reading Order
Source order (CSS Off):
Incorrect Example of SCO_A6 Source Order with CSS off

Controls

SCO_A7

Details

If the selection of an option causes a change in context and/or content is the change after the current focus?

Correct example(s)

Correct Example of SCO_A7

Incorrect example(s)

Incorrect Example of SCO_A7

SCO_A8

Details

If hovering over an option causes a change in context and/or content, is the change after the current focus?

Correct example(s)
No focus on help item
Correct Example of SCO_A8
On focus of help item
Correct Example of SCO_A8_On Focus Change occurs to the right
Incorrect example(s)
No focus on superscript item
Incorrect Example of SCO_A8_NoFocus on SuperScript
On focus
Incorrect Example of SCO_A8_On Focus Change occurs prior to the current focus

SCO_A9

Details

If the change in content and/or context is not instigated by the user (e.g. by selecting a button) is the user informed of the change prior to the change occurring?

Correct example(s)
Changes in context or content should only occur after the current focus, or once a submit button is activated (to the right or below)
Incorrect example(s)
On focus of a field a change occurs prior to the current focus Incorrect Example of SCO_A9