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 factsheets:

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

Level A

Coding

SCO_A1i

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

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

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. Visual order of columns is left to right.
CSS Off:
Correct Example of SCO_A2 with CSS Off. Content order of columns matches visual order, top to bottom.
Incorrect example(s)
CSS On:
Incorrect Example of SCO_A2 with CSS On. Visual order of columns is left to right.
CSS Off:
Incorrect Example of SCO_A2 with CSS Off. Content order does not match the visual order.

SCO_A3

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. Navigation tab order: NSW, VIC, QLD.
CSS Off:
Correct Example of SCO_A3 with CSS Off. Links are listed top to bottom: NSW, NSW's sublinks, VIC, VIC's sublinks, QLD.
Incorrect example(s)
CSS On:
Incorrect Example of SCO_A3 with CSS On. Navigation tab order: NSW, VIC, QLD.
CSS Off:
Incorrect Example of SCO_A3 with CSS Off. Links are listed top to bottom: VIC, VIC's sublinks, NSW, NSW's sublinks, QLD.

SCO_A4i

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. Visual reading order goes from left to right.
Source order (CSS Off):
Correct Example of SCO_A4i_Source Order_CSS Off. Source order goes from top to bottom, and matches the visual reading order.
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

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. Visual reading order goes from top to bottom.
Source order (CSS Off):
Correct Example of SCO_A4i_Source Order_CSS Off. Source order goes from top to bottom.
Incorrect example(s)
Visual/reading order:
Incorrect Example of SCO_A4ii_Reading Order_CSS On. Visual reading order goes from top to bottom.
Source order (CSS Off):
Incorrect Example of SCO_A4ii_Source Order_CSS Off. Source order goes from left to right, then top to bottom. It does not match the visual reading order.

SCO_A5

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

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. Keyboard focus order goes from left to right.
Visual/reading order:
Correct Example of SCO_A6 Visual Reading Order. Visual reading order goes from left to right.
Source order (CSS Off):
Correct Example of SCO_A6 Source Order with CSS off. Source order matches keyboard and visual reading order, going top to bottom.
Incorrect example(s)
Keyboard focus order:
Incorrect Example of SCO_A6 Keyboard Focus. Keyboard focus goes from a middle element, to the right-hand side, to the left-hand side.
Visual/reading order:
Incorrect Example of SCO_A6 Visual Reading Order. Visual reading order goes from left to right.
Source order (CSS Off):
Incorrect Example of SCO_A6 Source Order with CSS off. Source order matches keyboard focus order, but does not match visual reading order.

Controls

SCO_A7

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. The slideshow selection control is above and before the slideshow. The change is after the current focus.

Incorrect example(s)

Incorrect Example of SCO_A7. The slideshow selection control is below and after the slideshow. The change is before the current focus.

SCO_A8

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. Question mark icon is not receiving focus.
On focus of help item
Correct Example of SCO_A8_On Focus. Question mark icon is receiving focus. A pop-up with more information appears to the right of the icon.
Change occurs to the right
Incorrect example(s)
No focus on superscript item
Incorrect Example of SCO_A8_No Focus on SuperScript. Superscript item is not receiving focus.
On focus
Incorrect Example of SCO_A8_On Focus. Superscript item is receiving focus. A pop-up with additional information appears above and to the left of the superscript item.
Change occurs prior to the current focus

SCO_A9

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. The error message 'This field is required' appears above current focus.