Developer checklist

The following checklists are intended to guide developers on the implementation of success criterion for coding. The checklists should be used during the development phase to ensure WCAG 2.0 compliance of all coding 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

Alternative

COD_A1: Non-text content must have a text alternative.

Emoticons, ASCII art or leetspeak must have an accessible alternative.

Correct example(s)
  1. <img src="smiley-face.gif" alt="Smiley face emoticon"/>
  2. 8-) (smiley face)
Incorrect example(s)
  1. <img src="smiley-face.gif/>
  2. 8-)

COD_A2: EMBED element must have a text alternative.

EMBED element has an equivalent text alternative.

Correct example(s)
<embed src="melbourne-area.jpg" height="60" width="144" autostart="false">
<noembed>
<a href="melbourne.html">7-day forecasts and latest weather information</a>
</noembed>
</embed>
Incorrect example(s)
<embed src=" melbourne-area.jpg" height="60" width="144" autostart="false">
</embed>

COD_A3: IFRAMEs must have a text alternative.

IFRAME has an equivalent text alternative.

Correct example(s)
<IFRAME src ="html_intro.asp" width="100%" height="300">
<a href="html_intro.asp>Weather forecasts</a>
</IFRAME>
Incorrect example(s)
<IFRAME src ="html_intro.asp" width="100%" height="300">
</IFRAME>

Content

COD_A4: Equations must be formatted using MathML.

MathML has been used for equations (not images).

Correct example(s)

<math>
<mn>2</mn>
<mo>+</mo>
<msqrt>
<mi>x</mi>
<mo>+</mo>
<mn>1</mn>
</msqrt>
<mspace width="20px" />
<mrow>
<mn>2</mn>
<mo>+</mo>
<msqrt>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mn>1</mn>
</mrow>
</msqrt>
</mrow>
</math>
Incorrect example(s)
equation
<img src="equation-image.png" alt="equation"/>

COD_A5: Short quotations must be marked up correctly.

Short quotations have been marked up with the Q element.

Correct example(s)
<p>When weather presenter Sally was asked to comment on tomorrow’s weather, she said. <Q>"Cloudy with light rain possibly developing towards midnight."</Q></p>
Incorrect example(s)
<p>When weather presenter Sally was asked to comment on tomorrow's weather, she said. "Cloudy with light rain possibly developing towards midnight."</p>

COD_A6: Blocks of quotations must be marked up correctly.

Blocks or sections of text quoted from other sources have been marked up with the BLOCKQUOTE element.

Correct example(s)
<blockquote>
<p>A wetter than normal season is more likely for most of Australia. Tasmania and parts of the tropical north have no strong tendency towards being wetter or drier than normal. </p>
</blockquote>
Incorrect example(s)
<p>A wetter than normal season is more likely for most of Australia. Tasmania and parts of the tropical north have no strong tendency towards being wetter or drier than normal.</p>

COD_A7: Lists must be coded correctly.

Lists have been coded with UL, OL and LI elements.

Correct example(s)

Code
<ol> <li>Rinse</li> <li>Plunge</li> <li>Set</li> <li>Poach</li> </ol>

Preview
1. Rinse
2. Plunge
3. Set
4. Poach

 

Code
<ul> <li>Rinse</li> <li>Plunge</li> <li>Set</li> <li>Poach</li> </ul>

Preview
* Rinse
* Plunge
* Set
* Poach

Incorrect example(s)
Code <ol> 1. Rinse 2. Plunge 3. Set 4. Poach </ol>   Code <ul> * Rinse * Plunge * Set * Poach </ul>

DOCTYPE

COD_A8: DOCTYPE must be present.

All pages must specify a DOCTYPE.

Correct example(s)
<!DOCTYPE html> must be first line of code in HTML document
Incorrect example(s)
No <!DOCTYPE> present

COD_A9: DOCTYPE must be correct.

DOCTYPE must declare the markup language used.

Correct example(s)
HTML 5:
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
A full list can be found at <!DOCTYPE> Declarations
Incorrect example(s)
<!DOCTYPE>
No markup language present (e.g. HTML strict or transitional, XHTML)

Forbidden

COD_A10: Deprecated or obsolete features are not used.

Deprecated or obsolete features (elements and/or attributes) have not been used. See full list of W3C deprecated and obsolete elements or attributes.

Correct example(s)
N/A
Incorrect example(s)
Element examples:
  • APPLET
  • BASEFONT
  • CENTER
  • FONT
Attribute examples:
  • align CAPTION
  • bgcolor BODY
  • border IMG, OBJECT
  • clear BR
  • width TD, TH

COD_A11: The appropriate coding has been used.

TABINDEX has not been used.

Correct example(s)
N/A
Incorrect example(s)

<input name="query" value="" size="50" class="QSInput" id="query" tabindex="3" type="text">

COD_A12: The appropriate coding has been used.

ACCESSKEY has not been used.

Correct example(s)
N/A
Incorrect example(s)
<label class="QSLabel" accesskey="s" for="query">

COD_A13: The appropriate coding has been used.

LONGDESC has not been used.

Correct example(s)
N/A
Incorrect example(s)
<img src="map.gif" alt="map" longdesc="map.txt">

COD_A14: The appropriate coding has been used.

ONKEYPRESS has not been used.

Correct example(s)
N/A
Incorrect example(s)
  1. <element onkeypress="JavaScriptAction">
  2. object.onkeypress=function(){JavaScriptAction};

COD_A15: The appropriate coding has been used.

The APPLET element has not been used to embed objects.

Correct example(s)
N/A
Incorrect example(s)
<applet code="maps.class" width="350" height="350">
Java applet that draws rain over the map.
</applet>

Improper use

COD_A16i: HTML must be valid.

Tags are closed properly.

Correct example(s)
<p>The chance of exceeding the median rainfall for July to September is more than 60% over most of mainland Australia</p>
Incorrect example(s)
<p>The chance of exceeding the median rainfall for July to September is more than 60% over most of mainland Australia

COD_A16ii: HTML must be valid.

XHTML tags are self-closing.

Correct example(s)
<img src="map.jpg" height="32" width="32" alt="" />
Incorrect example(s)
<img src="map.jpg" height="32" width="32" alt="">

COD_A16iii: HTML must be valid.

Tags are not transposed — tags closed in the order they are opened.

Correct example(s)
<strong>
<a href="www.vic.gov.au">Victoria Online</a>
</strong>
Incorrect example(s)
<strong>
<a href="www.vic.gov.au">Victoria Online</strong>
</a>

COD_A16iv: HTML must be valid.

Block level elements are not nested inside inline elements.

Correct example(s)
<p>
<strong>
The chance of exceeding the median rainfall for July to September is more than 60% over most of mainland Australia.
</strong>
</p>
Incorrect example(s)

<strong>
<p>
The chance of exceeding the median rainfall for July to September is more than 60% over most of mainland Australia.
</p>
</strong>

COD_A16v: HTML must be valid.

Compulsory tags are not omitted (even if the web page displays properly without them).

Correct example(s)
<table>
<tr>
<td>
My eGov allows you to rate content and bookmark your favourite resources.
</td>
</tr>
</table>
Incorrect example(s)
<table>
<td>
My eGov allows you to rate content and bookmark your favourite resources.
</td>
</table>

COD_A16vi: HTML must be valid.

Character entities are coded correctly.See full list of W3C character entity references.

Correct example(s)
<p>Then we went to the Melbourne &amp; Sydney.</p>
Incorrect example(s)
<p>Then we went to the Melbourne & Sydney.</p>

COD_A17: Information has been encoded properly.

The FIELDSET element has been used correctly (i.e. is not used to group links or other content).

Correct example(s)
<div class="border">
<H3>Africa</H3>
<ul>
<li><a href="SouthAfrica">South Africa</a></li>
<li><a href="kenya">Kenya</a></li>
<li><a href="Ethiopia">Ethiopia</a></li>
<li><a href="Tanzania">Tanzania</a></li>
</ul>
</div>
Incorrect example(s)
A link "Africa" expanded to show a list of additional links: South Africa, Kenya, Ethiopia, Tanzania.

<fieldset>
<legend>Africa</legend>
<ul>
<li><a href="SouthAfrica">South Africa</a></li>
<li><a href="kenya">Kenya</a></li>
<li><a href="Ethiopia">Ethiopia</a></li>
<li><a href="Tanzania">Tanzania</a></li>
</ul>
</fieldset>

COD_A18: Information has been encoded properly.

The LABEL element has been used correctly (i.e. is not used to label links or other content).

Correct example(s)
<a href="../calendar.htm"><img src="calendar.png" ALT=”Calendar”></a>
Incorrect example(s)

<LABEL>Calendar
<a href="../calendar.htm"><img src="calendar.png" ALT=”Calendar”></a>
</LABEL>

COD_A19: Text must be indented correctly.

Text has been indented with the stylesheets (i.e. not using the BLOCKQUOTE element).

Correct example(s)
<p class="indent">Nudgee Road and Toombul Road intersection improvement
<br />Transport Infrastructure
<br />Brisbane City Council
<br />GPO Box 1434
<br />Brisbane Qld 4001
</p>
Incorrect example(s)
Left-align text: "Write to:". Indented text underneath: "Nudgee Road and Toombul. Transport Infrastructure. Brisbane City Council. GPO Box 1434. Brisbane Qld 4001."
<blockquote dir="ltr" style="margin-right: 0px">
<p>Nudgee Road and Toombul Road intersection improvement
<br />Transport Infrastructure
<br />Brisbane City Council
<br />GPO Box 1434
<br />Brisbane Qld 4001</p>
</blockquote>

COD_A20: Elements must contain required attributes.

All elements contain their required attributes. The full list of W3C required element attributes.

Correct example(s)
Examples:
  • action FORM
  • alt AREA, IMG
  • cols TEXTAREA
  • content META
  • name MAP
  • rows TEXTAREA
  • src IMG
  • type SCRIPT
  • type STYLE
Incorrect example(s)
Example: no ALT attribute
<img src="big-image.jpg" >

COD_A21: Information conveyed visually should be explicitly stated in text.

Variations in the presentation of text have been indicated in the content of the page.

Correct example(s)
<h2>Listing</h2>
<ul>
<li><strong>Item 1 </strong></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Incorrect example(s)
<h2>Listing</h2>
<ul>
<li class="strong">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Keyboard

COD_A22: All content and functionality must be keyboard operable.

All moving or scrolling content is keyboard accessible.

Correct example(s)
All moving content (links) are keyboard accessible
Link "Find out more" shows keyboard focus indicator
Incorrect example(s)
Slideshow controls are keyboard accessible, but links to items are not
Link "2" shows text cursor but not keyboard focus indicator

Language

COD_A28: Page language must be coded correctly.

English or Australian English has been coded as the default language.

Correct example(s)
  1. <html lang="en">
  2. <html lang="en-au">
Incorrect example(s)
Missing lang="en" from within <html>

COD_A24: Foreign language pages must be coded.

LANG attribute is correct on foreign language pages [complete pages].

Correct example(s)
  1. <html lang="es"> (Spanish)
  2. <html lang="fr"> (French)
See full list of Language Codes
Incorrect example(s)
<html lang="en">
coded for a French language page (for example)

Links

COD_A25: Visual relationships are coded correctly.

Inactive text is not coded to visibly appear like links (i.e. not underlined).

Correct example(s)
<p>Paragraph of text</p>
Incorrect example(s)
<p><u>Paragraph of text</u></p>

COD_A26: Link text should be active.

Email links are active.

Correct example(s)
<a href="mailto:info@accessibilityoz.com.au">Email AccessibilityOz</a>
Incorrect example(s)
<p>Email info@accessibilityoz.com.au</p>

COD_A27: Link text should be active.

Website links are active.

Correct example(s)
<a href="http://www.accessibilityoz.com.au">Accessibilityoz.com.au</a>
Incorrect example(s)
<p>http://www.accessibilityoz.com.au</p>

COD_A28: Relationships between content are coded correctly.

Links have been used to reference supporting information (i.e. not asterisks and/or superscripts).

Correct example(s)
<a href="http://www.bom.gov.au/forecast">Read weather forecast</a>
Incorrect example(s)
Weather forecast <a href="http://www.bom.gov.au/forecast">*</a>

COD_A29: Relationships between content are coded correctly.

A HREF elements contain content (i.e. are not empty).

Correct example(s)
<a href="http://www.bom.gov.au/forecast">Read weather forecast</a>
Incorrect example(s)
<a href="http://www.bom.gov.au/forecast"></a>

COD_A30: Relationships between content are coded correctly.

JavaScript ONCLICK links have not been used.

Correct example(s)
<a href="http://www.web.edu.au">Web Education</a>
Incorrect example(s)
<a href="javascript:onclick=NewWindow('http://www.web.edu.au')">Web Education</a>

COD_A31: Relationships between content are coded correctly.

JavaScript ONKEYPRESS links have not been used.

Correct example(s)
<a href="http://www.web.edu.au">Web Education</a>
Incorrect example(s)
<a href="javascript:search()" onkeypress="return runScript(event)">

Timing and movement

COD_A32: Allow adequate time for users to complete tasks.

A timed redirect has not been used.

Correct example(s)
N/A
Incorrect example(s)
<meta http-equiv="refresh" content="5;url=http://www.aus.gov.au">

COD_A33: The appropriate coding has been used.

The BLINK element has not been used.

Correct example(s)
N/A
Incorrect example(s)
<blink>string</blink>

COD_A34: The appropriate coding has been used.

The MARQUEE element has not been used.

Correct example(s)
N/A
Incorrect example(s)

<marquee behavior="slide" direction="left">
Slide-in text
</marquee>

COD_A35: Do not initiate seizures.

The general or red flash threshold has not been violated.

Correct example(s)
Ensure there are no more than three general flashes and / or no more than three red flashes within any one-second period
Incorrect example(s)
Content that blinks and/or flashes more than 3 times in any 1 second period

COD_A36: Provide a mechanism to stop or pause movement.

Moving or scrolling content can be stopped.

Correct example(s)
text has a "Pause" link underneath
Incorrect example(s)
Text reads "This text will scroll..." with no way to pause

COD_A37: Provide a mechanism to stop or pause movement.

Animated GIFs stop within 5 seconds.

Correct example(s)
N/A
Incorrect example(s)
Screenshot of an animated gif switching from NAB logo to bhphiliton logo

COD_A38: Allow adequate time for users to complete tasks.

Session time outs have a warning.

Correct example(s)
Explanation within the page content is provided if a session timeout is likely to occur
Incorrect example(s)
Session time out occurs with no prior warning Your session has expired. Please login to continue.

Level AA

Improper use

COD_AA1: Content is readable.

Images of text have not been used instead of text (except logos).

Correct example(s)
<h2>Melbourne area</h2>
<p>Mostly sunny.  Patches of morning frost in the east.
Winds north to northwesterly and light increasing
to 15 to 20 km/h in the middle of the day.</p>
Incorrect example(s)
<h2><img alt="Melbourne Area" src="/assets/img/bom/MA_title.gif"></h2>
<p>Mostly sunny. Patches of morning frost in the east.
Winds north to northwesterly and light increasing
to 15 to 20 km/h in the middle of the day.</p>

COD_AA2: Presentation is consistent.

The font type is consistent.

Correct example(s)
Header: Melbourne area. Body text: Mostly sunny. Patches of morning frost in the east. Winds north to northwesterly and light increasing to 15 to 20 km/h in middle of the day.
Incorrect example(s)
The same text as the previous example, but it is using four different fonts.

Links

COD_AA3: Links are coded correctly.

There no broken links.

Correct example(s)
<a href="http://www.bom.gov.au/act/">
The Bureau of Meteorology (ACT)</a>
Incorrect example(s)
<a href="http://www.bureau.gov.au/act/">The Bureau of Meteorology (ACT)</a>

Text size

COD_AA4: Text can be scaled successfully.

Text can be resized to 200% without loss of content or functionality.

Correct example(s)
Large text underneath a featured image. The image, text and in-text links are all formatted correctly.
Incorrect example(s)

Content overlaps at 200%

Large text "Your chance to win an iPad" partially obscures a link "Find out more"