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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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 (eg. HTML strict or transitional, XHTML)

Forbidden

COD_A10: Deprecated or obsolete features are not used.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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)

<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.

Details

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.

Details

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)
<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.

Details

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.

Details

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.

Details

All moving or scrolling content is keyboard accessible.

Correct example(s)

All moving content (links) are keyboard accessible

Incorrect example(s)

Slideshow controls are keyboard accessible, but links to items are not

Language

COD_A28: Page language must be coded correctly.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

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.

Details

Moving or scrolling content can be stopped.

Correct example(s)
Incorrect example(s)

COD_A37: Provide a mechanism to stop or pause movement.

Details

Animated GIFs stop within 5 seconds.

Correct example(s)

N/A

Incorrect example(s)

COD_A38: Allow adequate time for users to complete tasks.

Details

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

Level AA

Improper use

COD_AA1: Content is readable.

Details

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.

Details

The font type is consistent

Correct example(s)
Incorrect example(s)

Links

COD_AA3: Links are coded correctly.

Details

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.

Details

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

Correct example(s)
Incorrect example(s)

Content overlaps at 200%