Developer checklist

Level A

Coding

FRM_A1: FORM element used correctly

[expand title=”Details”]

The FORM element is only used for forms (i.e. the entire page is not wrapped in a FORM element).

[/expand] [expand title=”Correct example(s)”]

Do not wrap the entire page within a FORM element

[/expand] [expand title=”Incorrect example(s)”]
<html lang="en"> <body> <form>entire page source code</form></body> </html>
[/expand]

FRM_A2i: Form content is understandable

[expand title=”Details”]

The content of all form fields (e.g. dropdown selection lists) is provided as text (i.e. ASCII characters are not used to represent text).

[/expand] [expand title=”Correct example(s)”]
<option value="Seasonal climate outlook">Temperature 10 to 20 degrees</option>
[/expand] [expand title=”Incorrect example(s)”]
<option value="Seasonal climate outlook"> Temperature 10 - 20 degrees </option>
[/expand]

FRM_A2ii: Form content is understandable

[expand title=”Details”]

The content of all form field labels are provided as text (i.e. ASCII characters are not used to represent text).

[/expand] [expand title=”Correct example(s)”]
<label for="severe_type">Weather type (Note: If Thunderstorm is selected, see <a href="http://www.bom.gov.au/catalogue/warnings/WarningsInformation_SW_STSW.shtml">Severe Thunderstorm Warnings</a> for more information.) </label>
[/expand] [expand title=”Incorrect example(s)”]
<label for="severe_type">Weather type<sup>*</sup></label> <p><sup>*</sup> If Thunderstorm is selected, see <a href="http://www.bom.gov.au/catalogue/warnings/WarningsInformation_SW_STSW.shtml">Severe Thunderstorm Warnings</a> for more information.)</p>
[/expand]

FRM_A3: Form elements are visible

[expand title=”Details”]

All form elements remain visible when images are disabled.

[/expand] [expand title=”Correct example(s)”]
<input type="image" name="ImageButtonGo" value="Search" id="ImageButtonGo" class="gobutton" src="/Images/SearchBtn.jpg" alt="Search" />
[/expand] [expand title=”Incorrect example(s)”]
<input type="image" name="ImageButtonGo" value="Search" id="ImageButtonGo" class="gobutton" src="/Images/Searchbtn.jpg" alt="" />
[/expand]

FRM_A4i: Form buttons are coded correctly

[expand title=”Details”]

Form image buttons have an ALT attribute.

[/expand] [expand title=”Correct example(s)”]
<input type="image" name="ImageButtonGo" value="Search" id="ImageButtonGo" class="gobutton" src="/Images/SearchBtn.jpg" alt="Search" />
[/expand] [expand title=”Incorrect example(s)”]

ALT is missing

<input type="image" name="ImageButtonGo" value="Search" id="ImageButtonGo" class="gobutton" src="/Images/Searchbtn.jpg"/>
[/expand]

FRM_A4ii: Form buttons are coded correctly

[expand title=”Details”]

Form image button ALT attributes are correct.

[/expand] [expand title=”Correct example(s)”]
<input type="image" name="ImageButtonGo" value="Search" id="ImageButtonGo" class="gobutton" src="/Images/SearchBtn.jpg" alt="Search" />
[/expand] [expand title=”Incorrect example(s)”]
<input type="image" name="ImageButtonGo" value="Search" id="ImageButtonGo" class="gobutton" src="/Images/GoBtn.jpg" alt="cancel" />
[/expand]

FRM_A5: Form button VALUE is correct

[expand title=”Details”]

The form button VALUE is correct (i.e. the VALUE must not be empty).

[/expand] [expand title=”Correct example(s)”]
<input type="image" name="ImageButtonGo" value="Search" id="ImageButtonGo" class="gobutton" src="/Images/SearchBtn.jpg" alt="Search" />
[/expand] [expand title=”Incorrect example(s)”]
<input type="image" name="ImageButtonGo" value="" id="ImageButtonGo" class="gobutton" src="/Images/SearchBtn.jpg" alt="Search" />
[/expand]

Error Messages

FRM_A6i: Mandatory fields are identified

[expand title=”Details”]

Mandatory fields are marked appropriately (i.e. “(Required)” in visible text within the LABEL or an image of an asterisk with an ALT attribute “required”).

[/expand] [expand title=”Correct example(s)”]
<label for="firstname">First name (required)</label><br> <input id="firstname" name="firstname" type="text">  
[/expand] [expand title=”Incorrect example(s)”]
<label for="firstname">First name*</label><br> <input id="firstname" name="firstname" type="text">  
[/expand]

FRM_A6ii: Identification of mandatory fields is defined

[expand title=”Details”]

A definition of how the mandatory fields are marked is provided (i.e. include instructional text at the start of the form outlining how mandatory fields are marked e.g. “Fields marked with the word “Required” are mandatory”.

[/expand] [expand title=”Correct example(s)”]
<p>Please complete all fields marked required</p>
[/expand] [expand title=”Incorrect example(s)”]
<p> Please complete all mandatory fields</p>
[/expand]

FRM_A6iii: Mandatory fields are identified

[expand title=”Details”]

The definition of mandatory fields is provided prior to the start of the form.

[/expand] [expand title=”Correct example(s)”]
<p>Please complete all fields marked required</p> <form>
[/expand] [expand title=”Incorrect example(s)”]
</form><p>Please make sure you have completed all required fields on the preceding form</p>
[/expand]

FRM_A7i: Error messages are displayed

[expand title=”Details”]

A valid error message is displayed on submission of an empty form (i.e. no data has been entered)

[/expand] [expand title=”Correct example(s)”]
<label for="firstname">First name (required)<br><span class="error"> Please enter your first name, e.g., Joanna or John</span> </label><br><input id="firstname" name="firstname" size="50" value="" type="text">
[/expand] [expand title=”Incorrect example(s)”]

No error message displayed

[/expand]

FRM_A7ii: Error messages are displayed

[expand title=”Details”]

A valid error message is displayed on submission of an invalid form (i.e. incorrect data has been entered).

[/expand] [expand title=”Correct example(s)”]
<label for="postcode">Postcode (required)<br> <span class="error"> Please enter your postcode, e.g., 6000</span> </label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
  Correct E.g. of FRM_A7ii [/expand] [expand title=”Incorrect example(s)”]

No error message displayed

Incorrect E.g. Of FRM_A7ii [/expand]

FRM_A7iii: Error messages are coded correctly

[expand title=”Details”]

Error messages are available to the user only after the form has been submitted.

[/expand] [expand title=”Correct example(s)”]

Form has not been submitted

<label for="postcode">Postcode (required)<br> </label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand] [expand title=”Incorrect example(s)”]

Error message is hidden with the style sheets and is available prior to form submission

Form has not been submitted

<label for="postcode">Postcode (required)<br> <span class="errorhidden">Please enter your postcode, e.g., 6000</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand]

FRM_A8: Error messages are coded correctly

[expand title=”Details”]

Error messages are included within the relevant field LABEL element.

[/expand] [expand title=”Correct example(s)”]
<label for="postcode">Postcode (required)<br> <span class="error">Please enter your postcode, e.g., 6000</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand] [expand title=”Incorrect example(s)”]
<label for="postcode">Postcode (required)<br></label><br><span class="error">Please enter your postcode, e.g., 6000</span><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand]

FRM_A9: Error messages are sufficient

[expand title=”Details”]

Error messages are descriptive.

[/expand] [expand title=”Correct example(s)”]
<label for="postcode">Postcode (required)<br> <span class="error"> Please enter your postcode, e.g., 6000</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand] [expand title=”Incorrect example(s)”]
<label for="postcode">Postcode (required)<br> <span class="error"> Invalid entry </span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand]

Meaningful Sequence

FRM_A10: Layout tables

[expand title=”Details”]

Forms using tables for layout have meaningful sequence (i.e. the form content makes sense when reading left to right, top to bottom through the layout table cells).

[/expand] [expand title=”Correct example(s)”]
<table> <tr><td> <label for="firstname">First name (required)</label><br><input size="50" id="firstname" name="firstname" type="text"> </td></tr>   <tr><td> <label for="lastname">Last name (required)</label><br><input size="50" id="lastname" name="lastname" type="text"> </td></tr> </table>  
[/expand] [expand title=”Incorrect example(s)”]
<table> <tr><td> <label for="firstname">First name (required)</label> </td> <td> <label for="lastname">Last name (required)</label></td></tr>   <tr><td> <input size="50" id="firstname" name="firstname" type="text"> </td><td> <input size="50" id="lastname" name="lastname" type="text"> </td></tr> </table>  
[/expand]

FRM_A11: Form sequence is correct

[expand title=”Details”]

The visual and source order is in the correct reading sequence in the form.

[/expand] [expand title=”Correct example(s)”]

Reading sequence is meaningful: First name, input field, last name, input field”

[/expand] [expand title=”Incorrect example(s)”]

Reading sequence is incorrectly read: First name, last name, input field, input field”

[/expand]

FRM_A12: Important information

[expand title=”Details”]

All important information is placed before the start of the form.

[/expand] [expand title=”Correct example(s)”]
<p>Please fill out the contact details if you would like to be contacted by staff</p>   <form> </form>
[/expand] [expand title=”Incorrect example(s)”]
<form> </form><p>Make sure you have filled out the contact details if you would like to be contacted by staff</p>
[/expand]

FRM_A13: Meaningful content sequence is maintained

[expand title=”Details”]

Form results display before the start of the form.

[/expand] [expand title=”Correct example(s)”]
Result 1 etc
	Result 2 etc
	<form> </form>
[/expand] [expand title=”Incorrect example(s)”]
<form> </form>
	Result 1 etc
	Result 2 etc
[/expand]

Keyboard

FRM_A14: Keyboard accessible

[expand title=”Details”]

The entire form can be successfully navigated from top to bottom using the keyboard i.e. the form does not contain a keyboard trap.

[/expand] [expand title=”Correct example(s)”]

Keyboard is not trapped in any form element

[/expand] [expand title=”Incorrect example(s)”]

Keyboard is trapped and cannot proceed past a certain form element

[/expand]

FRM_A15: Keyboard accessible

[expand title=”Details”]

All features of the form are keyboard accessible.

[/expand] [expand title=”Correct example(s)”]

All form features can be activated, entered and completed using the keyboard alone

[/expand] [expand title=”Incorrect example(s)”]

Some form features cannot be operated with the keyboard

[/expand]

FRM_A16i: Keyboard focus

[expand title=”Details”]

The presentation of all form fields changes appropriately on keyboard focus

[/expand] [expand title=”Correct example(s)”]

Field (no focus)

Presentation changes on mouse over

Presentation changes on keyboard focus

[/expand] [expand title=”Incorrect example(s)”]

Field (no focus)

Presentation changes on mouse over

Presentation changes on keyboard focus

[/expand]

FRM_A16ii: Keyboard focus

[expand title=”Details”]

The presentation of all form buttons changes appropriately on keyboard focus

[/expand] [expand title=”Correct example(s)”]

Button (no focus)

Presentation changes on mouse over

Presentation changes on keyboard focus

[/expand] [expand title=”Incorrect example(s)”]

Button (no focus)

Presentation changes on mouse over

Presentation changes on keyboard focus

[/expand]

Field Labels

FRM_A17i: Labels are present

[expand title=”Details”]

All fields have a label

[/expand] [expand title=”Correct example(s)”]
<label for="search">Search</label><input id="search" name="search" type="text"><input value="submit" type="submit">
[/expand] [expand title=”Incorrect example(s)”]
<p><input name="query" size="30" type="text"> <input value="submit" type="submit"></p>
[/expand]

FRM_A17ii: Labels are visible

[expand title=”Details”]

All field labels are visible (date fields excepted see also FRM_20i, ii)

[/expand] [expand title=”Correct example(s)”]
<label for="search">Search</label><input id="search" name="search" type="text"><input value="submit" type="submit">
[/expand] [expand title=”Incorrect example(s)”]
<label for="search" class="hidden">Search</label><input id="search" name="search" type="text"><input value="submit" type="submit">
[/expand]

FRM_A17iii: Labels are coded correctly

[expand title=”Details”]

All field labels are coded with LABEL FOR and ID

[/expand] [expand title=”Correct example(s)”]
<label for="search">Search</label><input id="search" name="search" type="text">
[/expand] [expand title=”Incorrect example(s)”]
<p>Search</p> <input id="search" name="search" type="text">
[/expand]

FRM_A18i: Labels are correct

[expand title=”Details”]

All form field LABEL elements are correct (i.e. the field LABEL element contains the entire text of the label)

[/expand] [expand title=”Correct example(s)”]
<label for="search"> Melbourne sub-site search</label> <input id="search" name="search" type="text">
[/expand] [expand title=”Incorrect example(s)”]
<p>Melbourne sub-site</p> <label for="search">search</label><input id="search" name="search" type="text">
[/expand]

FRM_A18ii: Labels are correct

[expand title=”Details”]

All form LABEL elements are associated with a form field (i.e. there are no orphaned LABEL elements)

[/expand] [expand title=”Correct example(s)”]
<label for="search">Search</label><input id="search" name="search" type="text">
[/expand] [expand title=”Incorrect example(s)”]
<label>Melbourne</label><label for="search">Search</label><input id="search" name="search" type="text">
[/expand]

FRM_A18iii: Labels are correct

[expand title=”Details”]

Each form field has a single, unique field LABEL element associated with it

[/expand] [expand title=”Correct example(s)”]
<label for="search">Search</label> <input id="search" name="search" type="text">
[/expand] [expand title=”Incorrect example(s)”]
<label for="search">Search</label><label for="search">(enter text only</label><input id="search" name="search" type="text">
[/expand]

Fieldsets

FRM_A19: Related fields

[expand title=”Details”]

Related fields are grouped with the FIELDSET and LEGEND elements

[/expand] [expand title=”Correct example(s)”]
<fieldset> <legend>Personal details</legend> <label for="title">Title</label><input id="title" name="title" type="text"><label for="fname">First name (required)</label><input size="50" id="fname" name="fname" type="text"><label for="lname">Last name (required)</label><input size="50" id="lname" name="lname" type="text"> </fieldset>
[/expand] [expand title=”Incorrect example(s)”]
<p>Personal details</p> <label for="title">Title</label><input id="title" name="title" type="text"><label for="fname">First name (required)</label> <input size="50" id="fname" name="fname" type="text"><label for="lname">Last name (required)</label><input size="50" id="lname" name="lname" type="text">
[/expand]

FRM_A20i: Date fields

[expand title=”Details”]

Date fields (e.g. day, month, year) are coded using the TITLE attribute

[/expand] [expand title=”Correct example(s)”]
<fieldset><legend>Expiry Date </legend><select id="month" title="Month"> <option value="01">01</option>  <option value="12">12</option></select>   <select name="Year" title="Year"> <option value="2013">2013</option>  <option value="2022">2022</option></select> </fieldset>
[/expand] [expand title=”Incorrect example(s)”]
<fieldset> <legend>Expiry Date</legend> <select id="month"> <option value="01">01</option>  <option value="12">12</option></select>   <select name="Year"> <option value="2013">2013</option>  <option value="2022">2022</option></select> </fieldset>
[/expand]

FRM_A20ii: Date fields

[expand title=”Details”]

Date fields are grouped with the FIELDSET and LEGEND elements

[/expand] [expand title=”Correct example(s)”]
<fieldset> <legend>Expiry Date</legend> <select id="month" title="Month"> <option value="01">01</option>  <option value="12">12</option></select>   <select name="Year" title="Year"> <option value="2013">2013</option>  <option value="2022">2022</option></select> </fieldset>
[/expand] [expand title=”Incorrect example(s)”]
<p>Expiry Date</p> <select id="month" title="Month"> <option value="01">01</option>  <option value="12">12</option></select>   <select name="Year" title="Year"> <option value="2013">2013</option>  <option value="2022">2022</option></select>
[/expand]

FRM_A21i: Radio buttons

[expand title=”Details”]

Radio buttons are grouped with the FIELDSET and LEGEND elements

[/expand] [expand title=”Correct example(s)”]
<fieldset> <legend>Which of the following best describes the content of your message?</legend> <p><input name="type" value="System Fault" id="sys_fault" type="radio"> <label for="sys_fault">System Fault</label></p>   <p><input name="type" value="Suggestion" id="suggestion" type="radio"> <label for="suggestion">Suggestion</label> </p></fieldset>
[/expand] [expand title=”Incorrect example(s)”]
<p>Which of the following best describes the content of your message?</p> <p><input name="type" value="System Fault" id="sys_fault" type="radio"> <label for="sys_fault">System Fault</label></p>   <p><input name="type" value="Suggestion" id="suggestion" type="radio"> <label for="suggestion">Suggestion</label> </p>
[/expand]

FRM_A21ii: Checkboxes

[expand title=”Details”]

Checkboxes are grouped with the FIELDSET and LEGEND elements

[/expand] [expand title=”Correct example(s)”]
<fieldset> <legend>Select cities you are interested in</legend> <input name="type" value="Melbourne" id="melb" type="checkbox"> <label for="melb">Melbourne</label> <input name="type" value="Sydney" id="syd" type="checkbox"> <label for="syd">Sydney</label>  </fieldset>
[/expand] [expand title=”Incorrect example(s)”]
<p>Select cities you are interested in<input name="type" value="Melbourne" id="melb" type="checkbox"> <label for="melb">Melbourne</label> <input name="type" value="Sydney" id="syd" type="checkbox"> <label for="syd">Sydney</label>  </p>
[/expand]

FRM_A22i: Fieldsets are coded correctly

[expand title=”Details”]

FIELDSET elements have a LEGEND

[/expand] [expand title=”Correct example(s)”]
<fieldset> <legend>Are you working?</legend> <input name="type" value="yes" id="ys " type="radio"> <label for="sys_fault">Yes</label> <input name="type" value="no" id="no" type="radio"> <label for="no">No</label></fieldset>
[/expand] [expand title=”Incorrect example(s)”]
LEGEND is missing   <p>Are you working?> <fieldset> <input name="type" value="yes" id="ys " type="radio"> <label for="sys_fault">Yes</label <input name="type" value="no" id="no" type="radio"> <label for="no">No</label></fieldset>
[/expand]

FRM_A22ii: Fieldsets are coded correctly

[expand title=”Details”]

The LEGEND element is coded immediately after the FIELDSET element

[/expand] [expand title=”Correct example(s)”]
<fieldset> <legend>Are you working?</legend> <input name="type" value="yes" id="ys " type="radio"> <label for="sys_fault">Yes</label> <input name="type" value="no" id="no" type="radio"> <label for="no">No</label></fieldset>
[/expand] [expand title=”Incorrect example(s)”]
LEGEND is not the first element after the FIELDSET   <fieldset> <input name="type" value="yes" id="ys " type="radio"> <label for="sys_fault">Yes</label> <input name="type" value="no" id="no" type="radio"> <label for="no">No</label><legend>Are you working?</legend> </fieldset>
[/expand]

FRM_A22iii: Fieldsets are coded correctly

[expand title=”Details”]

The FIELDSET LEGEND is concise (i.e. less than 100 characters)

[/expand] [expand title=”Correct example(s)”]
<legend>Are you working full time in telecommunications?</legend>
[/expand] [expand title=”Incorrect example(s)”]
<legend>Please let us know whether you are currently working in a full time capacity in the public or private telecommunications sector?</legend>
[/expand]

JavaScript

FRM_A23i: Alternative

[expand title=”Details”]

JavaScript form features have an accessible alternative which is available when JavaScript is disabled

[/expand] [expand title=”Correct example(s)”]

Form features function and the form can be successfully submitted with JavaScript disabled

[/expand] [expand title=”Incorrect example(s)”]

Form cannot be completed with JavaScript disabled

<input type="submit" onclick="javascript:submit();">
[/expand]

FRM_A23ii: Alternative

[expand title=”Details”]

JavaScript form features that do not require an alternative are hidden when JavaScript is disabled

[/expand] [expand title=”Correct example(s)”]
JavaScript feature such as "Print this form" are hidden when JavaScript is disabled
[/expand] [expand title=”Incorrect example(s)”]

JavaScript feature such as “Print this form” remain visible and do not work when JavaScript is disabled

[/expand]

FRM_A23iii: Alternative

[expand title=”Details”]

Placeholding characters in form fields are removed when JavaScript is disabled

[/expand] [expand title=”Correct example(s)”]

JavaScript on

JavaScript off, placeholding characters disappear

[/expand] [expand title=”Incorrect example(s)”]

JavaScript on

JavaScript off, placeholding characters do not disappear

[/expand]

FRM_A24: Unusual behaviour

[expand title=”Details”]

Users are warned of any unusual behaviour before inputting content into a component

[/expand] [expand title=”Correct example(s)”]
Instructions are provided <span style="text-decoration: underline;">prior</span> to any complex or unusual form feature
[/expand] [expand title=”Incorrect example(s)”]
Instructions are either not provided or provided after any complex or unusual form feature
[/expand]

FRM_A25: Unexpected changes

[expand title=”Details”]

On focus (or exit) of a field a change in context or content does not occur

[/expand] [expand title=”Correct example(s)”]

All changes occur on selection of a button

[/expand] [expand title=”Incorrect example(s)”]

Change occurs automatically on focus or exit of an input field eg. Search form submits on exit of the input field.

[/expand]

FRM_A26: Changes in context

[expand title=”Details”]

On input of a field a change in context does not occur

[/expand] [expand title=”Correct example(s)”]

All changes occur on selection of a button

[/expand] [expand title=”Incorrect example(s)”]

User selects one of the following options popup automatically appears

[/expand]

FRM_A27: Changes in content

[expand title=”Details”]

On input of a field changes in content occur only after the current focus

[/expand] [expand title=”Correct example(s)”]

Form content changes dependent on selection of an option occur only after the current focus

[/expand] [expand title=”Incorrect example(s)”]

When user selects an option in “Country”, the options in “State / Province” change above the current focus

[/expand]

FRM_A28i: Form submission

[expand title=”Details”]

The form can be submitted when JavaScript is disabled

[/expand] [expand title=”Correct example(s)”]

Form can be submitted with JavaScript disabled

[/expand] [expand title=”Incorrect example(s)”]

Form cannot be submitted with JavaScript disabled

Form content automatically changes on selection of an option

[/expand]

FRM_A28ii: Form submission

[expand title=”Details”]

Any correct data is retained when an incorrect form is submitted when JavaScript is disabled

[/expand] [expand title=”Correct example(s)”]

Correct data is retained

[/expand] [expand title=”Incorrect example(s)”]

Correct data is not retained

[/expand]

FRM_A29i: Form submission

[expand title=”Details”]

Errors are identified with JavaScript disabled

[/expand] [expand title=”Correct example(s)”]

Errors are identified with JavaScript disabled

[/expand] [expand title=”Incorrect example(s)”]

Errors are not identified with JavaScript disabled

[/expand]

FRM_A29ii: Form submission

[expand title=”Details”]

Errors are identified appropriately with JavaScript disabled

[/expand] [expand title=”Correct example(s)”]

Errors are identified appropriately with JavaScript disabled

[/expand] [expand title=”Incorrect example(s)”]

Errors are not identified appropriately with JavaScript disabled

[/expand]

Style Sheets

FRM_A30: Form is understandable

[expand title=”Details”]

Form content remains unchanged when style sheets are disabled (i.e. extraneous content does not appear when style sheets are disabled)

[/expand] [expand title=”Correct example(s)”]

CSS ON

CSS OFF

[/expand] [expand title=”Incorrect example(s)”]

CSS ON

CSS OFF

[/expand]

FRM_A31: Form is understandable

[expand title=”Details”]

The visual order of the form matches the order of the content when style sheets are disabled

[/expand] [expand title=”Correct example(s)”]

CSS ON

CSS OFF

[/expand] [expand title=”Incorrect example(s)”]

CSS ON

CSS OFF

[/expand]

Level AA

Navigation

FRM_AA1: Search

[expand title=”Details”]

A search feature is provided

[/expand] [expand title=”Correct example(s)”] [/expand] [expand title=”Incorrect example(s)”] [/expand]

Meaningful Sequence

FRM_AA2: Consistency

[expand title=”Details”]

All form submission pages are styled consistently

[/expand] [expand title=”Correct example(s)”]

Submission pages are styled consistently

[/expand] [expand title=”Incorrect example(s)”]

Submission pages are not styled consistently

[/expand]

Keyboard

FRM_AA3i: Focus indicator

[expand title=”Details”]

All form fields have a highly visible keyboard focus indicator

[/expand] [expand title=”Correct example(s)”]

Field (no focus)

Keyboard focus

[/expand] [expand title=”Incorrect example(s)”]

Field (no focus)

Keyboard focus

[/expand]

FRM_AA3ii: Focus indicator

[expand title=”Details”]

All form buttons have a highly visible keyboard focus indicator

[/expand] [expand title=”Correct example(s)”]

Button (no focus)

Keyboard focus

[/expand] [expand title=”Incorrect example(s)”]

Button (no focus)

Keyboard focus

[/expand]

Error Messages

FRM_AA4: Financial transactions

[expand title=”Details”]

Financial transactions meet at least one of the following criteria: reversible (FRM_AA4i); checked (FRM_AA4ii) or confirmed (FRM_AA4iii).

[/expand]

FRM_AA4i: Financial transactions

[expand title=”Details”]

Financial transactions are reversible (i.e. form submission can be reversed)

[/expand] [expand title=”Correct example(s)”]
<p>Your credit card has been billed. However, you can change your mind and <a href="../canceltransaction.htm">cancel the transaction</a> within the next thirty minutes.</p>
[/expand] [expand title=”Incorrect example(s)”]

No ability to reverse the transaction

[/expand]

FRM_AA4ii: Financial transactions

[expand title=”Details”]

Financial transactions can be checked (i.e. data entered is checked for errors and the user is allowed to correct the errors)

[/expand] [expand title=”Correct example(s)”]
<p>Please review the following billing information and check that it is accurate before submitting the transaction. If changes need to be made please <a href="../edittransaction.htm">edit the transaction</a>.
[/expand] [expand title=”Incorrect example(s)”]

No ability for the user to check the details before submitting the transaction

[/expand]

FRM_AA4iii: Financial transactions

[expand title=”Details”]

Financial transactions can be confirmed (i.e. a mechanism is available for reviewing, confirming, and correcting information before finalizing the submission)

[/expand] [expand title=”Correct example(s)”]
<p>Before submitting this transaction</p> <label for="cnfm"> please confirm that you wish to transfer this money </label> <input name="type" value="confirm" id="cnfm" type="checkbox">
[/expand] [expand title=”Incorrect example(s)”]

No checkbox available to the user to confirm that they have approved the transaction

[/expand]

FRM_AA5: User controllable data

[expand title=”Details”]

Modification of user-controllable data meets at least one of the following criteria: reversible (FRM_AA5i); checked (FRM_AA5ii) or confirmed (FRM_AA5iii).

[/expand]

FRM_AA5i: User controllable data

[expand title=”Details”]

Modification of user-controllable data is reversible (i.e. can changes be reversed)

[/expand] [expand title=”Correct example(s)”]
<p>You have successfully deleted your account. If this has been done in error you can <a href="../reversedelete.htm">re-enable your account</a> within the next twenty four hours.</p>
[/expand] [expand title=”Incorrect example(s)”]

No ability to reverse the modification of data

[/expand]

FRM_AA5ii: User controllable data

[expand title=”Details”]

Modification of user-controllable data can be checked (i.e. data entered is checked for errors and the user is allowed to correct the errors)

[/expand] [expand title=”Correct example(s)”]
<p> Please confirm that you would like to delete your account. All emails will be lost. Please <a href="../confirmdelete.htm">confirm delete</a>.
[/expand] [expand title=”Incorrect example(s)”]

No ability for the user to check the details before submitting the modification of data

[/expand]

FRM_AA5iii: User controllable data

[expand title=”Details”]

Modification of user-controllable data can be confirmed (i.e. a mechanism is available for reviewing, confirming, and correcting information before finalizing the submission)

[/expand] [expand title=”Correct example(s)”]
<p>Before submitting this change, please confirm</p> <label for="cnfm"> Yes, I want to delete mu account </label> <input name="type" value="confirm" id="cnfm" type="checkbox">
[/expand] [expand title=”Incorrect example(s)”]

No checkbox available to the user to confirm that they have approved the modification of data

[/expand]

FRM_AA6: Legal transactions

[expand title=”Details”]

Legal transactions meet at least one of the following criteria: reversible (FRM_AA6i); checked (FRM_AA6ii) or confirmed (FRM_AA6iii).

[/expand]

FRM_AA6i: Legal transactions

[expand title=”Details”]

Legal transactions are reversible (i.e. form submission can be reversed)

[/expand] [expand title=”Correct example(s)”]
<p>You have successfully submitted your 2013 tax return. You have two days to <a href="../changereturn.htm">make any changes</a>.</p>
[/expand] [expand title=”Incorrect example(s)”]

No ability to reverse the legal transaction

[/expand]

FRM_AA6ii: Legal transactions

[expand title=”Details”]

Legal transactions can be checked (i.e. data entered is checked for errors and the user is allowed to correct the errors)

[/expand] [expand title=”Correct example(s)”]
<p>Your 2013 tax return information is provided. Please review and <a href="../editreturn.htm">edit</a> as necessary or <a href="../submitreturn.htm">submit to the Australian Taxation Office</a></p>.
[/expand] [expand title=”Incorrect example(s)”]

No ability for the user to check the details before submitting the legal transaction

[/expand]

FRM_AA6iii: Legal transactions

[expand title=”Details”]

Legal transactions can be confirmed (i.e. a mechanism is available for reviewing, confirming, and correcting information before finalizing the submission)

[/expand] [expand title=”Correct example(s)”]
<p>Please confirm that</p> <label for="cnfm"> Yes, everything in my 2013 tax return is true and correct</label> <input name="type" value="confirm" id="cnfm" type="checkbox">
[/expand] [expand title=”Incorrect example(s)”]

No checkbox available to the user to confirm that they have approved the legal transaction

[/expand]

FRM_AA7: Error suggestions

[expand title=”Details”]

Error messages include suggestions

[/expand] [expand title=”Correct example(s)”]
<label for="postcode">Postcode (required)<br><span class="error">Please enter your postcode, e.g., 6000</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand] [expand title=”Incorrect example(s)”]
<label for="postcode">Postcode (required)<br><span class="error">Please enter your postcode</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand]

FRM_AA8: Error messages

[expand title=”Details”]

Error messages are not available when style sheets are disabled prior to form submission

[/expand] [expand title=”Correct example(s)”]
<label for="postcode">Postcode (required)<br><span class="error">Your postcode is incorrect. Please enter your postcode, e.g., 6000</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>  
[/expand] [expand title=”Incorrect example(s)”]
Error correction suggestion is hidden with the stylesheets and is available prior to form submission   <label for="postcode">Postcode (required)<br><span class="errorhidden">Your postcode is incorrect. Please enter your postcode, e.g., 6000</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand]

FRM_AA9: Field suggestions

[expand title=”Details”]

Field error suggestions are included in the field LABEL element

[/expand] [expand title=”Correct example(s)”]
<label for="postcode">Postcode (required)<br><span class="error">Please enter your postcode, e.g., 6000</span></label><br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand] [expand title=”Incorrect example(s)”]
<label for="postcode">Postcode (required) </label><br> <span class="error">Please enter your postcode, e.g., 6000</span> <br><input id="postcode" name="postcode" size="4" value="adbd" type="text"></p>
[/expand]