ACT Government Website Development Standard
Website Development Standard
Single Public Face – Whole of Government Web Presence
Version 1.0
December 2014
1
ACT Government Website Development Standard
Contents
Introduction ............................................................................................................................................ 4
Document details........................................................................................................................ 4
Change log .................................................................................................................................. 4
Purpose ....................................................................................................................................... 4
Scope .......................................................................................................................................... 4
Background ................................................................................................................................. 4
Audience ..................................................................................................................................... 5
1.
Visual presentation ......................................................................................................................... 6
1.1. Wireframe............................................................................................................................ 6
1.2. Graphic design ..................................................................................................................... 6
2.
General elements ............................................................................................................................ 6
2.1. Accessibility.......................................................................................................................... 6
2.2. Usability ............................................................................................................................... 6
2.3. Browser support .................................................................................................................. 7
2.4. Device support ..................................................................................................................... 7
2.5. Doctype ................................................................................................................................ 7
2.6. Character encoding.............................................................................................................. 7
2.7. Language .............................................................................................................................. 8
2.8. Title ...................................................................................................................................... 8
2.9. Metadata ............................................................................................................................. 8
3.
2.10.
Colour ............................................................................................................................. 8
2.11.
Fonts............................................................................................................................... 8
2.12.
Cascading style sheets (CSS) .......................................................................................... 9
2.13.
Print CSS ......................................................................................................................... 9
2.14.
Scripts ............................................................................................................................. 9
2.15.
Website mark-up ........................................................................................................... 9
Header elements ........................................................................................................................... 10
3.1. Masthead ........................................................................................................................... 10
3.2. Search ................................................................................................................................ 10
3.3. Branding............................................................................................................................. 10
4.
Navigation elements ..................................................................................................................... 11
4.1. Main navigation ................................................................................................................. 11
5.
Body elements .............................................................................................................................. 11
5.1. Forms ................................................................................................................................. 11
5.2. Frames ............................................................................................................................... 11
5.3. Images................................................................................................................................ 11
2
ACT Government Website Development Standard
5.4. Links ................................................................................................................................... 12
5.5. Breadcrumbs...................................................................................................................... 12
5.6. New windows .................................................................................................................... 12
5.7. Lists .................................................................................................................................... 12
5.8. Page layout ........................................................................................................................ 12
5.9. Tables ................................................................................................................................. 13
5.10.
6.
Text .............................................................................................................................. 13
Footer elements ............................................................................................................................ 13
6.1. Footer ................................................................................................................................ 13
Checklist ................................................................................................................................................ 13
Appendices............................................................................................................................................ 15
Appendix A – SPF suite of documents ...................................................................................... 15
Appendix B – Site testing tools ................................................................................................. 15
Glossary ................................................................................................................................................. 16
3
ACT Government Website Development Standard
Introduction
Document details
Owner
Review cycle
Acknowledgements
Copyright
Licence
Manager, Online Systems, Shared Services ICT, CMTEDD
This standard should be reviewed every 6 months
http://www.act.gov.au/copyright
Official use of ACT Government Website Development Standard is
licensed under a Creative Commons Attribution 2.5 Australia Licence.
To attribute this material, cite the ACT Government
Change log
Version
1.0
Date
Dec 2014
Change details
Release version
Author
ICT Policy Office
Purpose
The ACT Government’s Website Development Standard provides a guide to assist web managers to
meet the minimum required website standards when constructing a website. It is not the purpose of
this document to provide a ‘how-to guide’ on meeting the minimum required standards.
Scope
The ACT Government’s Website Development Standard applies to the development of websites for
directorates, agencies, statutory authorities, the Canberra Institute of Technology, ACT Government
schools and preschools, as well as non-profit organisations whose primary function is provision of
education, training, research and/or related services in Australia and whose secretariat is within ACT
Government.
The ACT Government’s Website Development Standard does not apply to government business
enterprises and does not cover the development of non-web documents such as PDF, RTF etc.
This standard forms part of the overall suite of standards as part of the ACT Government Single
Public Face (see Appendix A for a full list of the standards and guidelines). It should be used in
conjunction with the other relevant ACT Government web standards and guidelines, 3rd party
standards for the development of standards-compliant websites (for example from World Wide Web
Consortium (W3C)), and the development of accessible websites using techniques such as in the
Web Content Accessibility Guidelines (WCAG) 2.0.
A summary checklist has been provided at the end of this document.
Background
ACT Government websites need to be developed according to industry standards and best practice.
This document replaces the previous ACT Government Website Development and Management
4
ACT Government Website Development Standard
Standard (Version 1.3, 5 May 2011) and identifies the required elements for developing an ACT
Government website.
Audience
The ACT Government’s Website Development Standard is a resource for staff and consultants
involved in the development and management of ACT Government websites. A basic understanding
of website development and management is assumed.
Anyone who is implementing these standards should have read the ACT Government’s Website
Planning Guideline prior to entering the development phase.
Agencies that implement the Single Public Face Standard (SPF) will not be required to read this
document. Agencies that are not utilising the SPF are required to read and follow the document in
its entirety.
5
ACT Government Website Development Standard
1. Visual presentation
1.1.
Wireframe
Prior to any graphic design work commencing on the website, a wireframe must be developed to
display the key items and their location on the page. Where necessary, this must also include the
home page wireframe and sub page wireframes.
Rationale:



1.2.
This provides the first visual layout of how the elements will be placed on the
website
Ensures correct functionality is being included
Gives better direction to the graphic design component
Graphic design
This is the overall appearance of the website. The graphic design must encompass all visual aspects
of the website and meet the standards outlined in this document. Where necessary, this must also
include the home page design and sub page designs.
Rationale:

First visual of how the website will look once implemented
2. General elements
2.1.
Accessibility
The site must be developed to meet accessibility requirements. All Australian Governments have
decided that their websites must achieve WCAG 2.0 Level A compliance by December 2012 and
Level AA compliance by December 2014.
Rationale:



2.2.
Web Content Accessibility Guidelines (WCAG) 2.0: http://www.w3.org/TR/2008/RECWCAG20-20081211/
Web Accessibility National Transition Strategy:
http://www.finance.gov.au/publications/wcag-2-implementation/index.html
See Appendix B – Site testing tools
Usability
A website should undergo a usability review prior to being released to the public. If the budget
allows, it is recommended that an expert usability review is undertaken and that testers from
outside the ACT Government be recruited to provide an external viewpoint.
A good resource for all aspects of usability is http://www.usability.gov/ which provides guidelines,
methods, templates and a good introduction to the process.
6
ACT Government Website Development Standard
Rationale:

2.3.
Assists with ensuring that the site is easy to use, learn and understand from an end
user’s perspective
Browser support
A websites minimum support is the current and prior major release of each of the major browsers.
Also, review your web statistics to identify what browsers the majority of traffic is coming from.
You should also test what happens to your website when viewed on older browsers and whether the
user is still able to access the information, just displayed in a less usable way.
Rationale:



2.4.
Google: http://googleenterprise.blogspot.com/2011/06/our-plans-to-supportmodern-browsers.html
Content and basic functionality should be accessible to all browsers
See Appendix B – Site testing tools
Device support
A website should support low resolution, tablet and mobile devices including the use of touch screen
technologies.
Rationale:

2.5.
Mobile devices (PDAs and mobile phones) are being used more to access the Web
Doctype
Every web page must have a doctype declared with the minimum being HTML 4.01 Transitional.
When using newer technologies (such as HTML 5) you should ensure that there is graceful
degradation for browsers that do not support that technology.
Rationale:


2.6.
W3C Recommendation: http://www.w3.org/TR/1999/REC-html401-19991224/
See Appendix B – Site testing tools
Character encoding
Web pages must declare the character set UTF-8.
Rationale:



What Is UTF-8 And Why Is It Important?:
http://developers.sun.com/dev/gadc/technicalpublications/articles/utf8.html
Encoding usage statistics: http://trends.builtwith.com/encoding
Encoding in UTF-8 is likely to trigger parsing or rendering errors in mobile browsers
7
ACT Government Website Development Standard
2.7.
Language
Web pages must declare the language as English (Australian).
Rationale:


2.8.
WCAG 2.0: http://www.w3.org/TR/WCAG20/#meaning
For content that is in another language see the ACT Government’s Writing for the
Web Guide and the Internationalization Best Practices: Specifying Language in
XHTML & HTML Content: http://www.w3.org/TR/i18n-html-tech-lang/
Title
The page title must accurately and succinctly describe the content of each web page so that the
context of the page is clear. The title must appear on each page.
Rationale:


2.9.
See the ACT Government’s Writing for the Web Guide
WCAG 2.0: http://www.w3.org/TR/WCAG20/#navigation-mechanisms
Metadata
ACT Government websites must comply with the ACT Government’s Metadata Standards for Webbased Resources.
Rationale:



ACT Government’s Metadata Standards for Web-based Resources:
http://sharedservices/actgovt/ICTpolicies.htm
The ACT Government has decided that, to comply with the requirements of the
Territory Records Act, metadata must be applied to all resources.
Refer to the ACT Government’s Writing for the Web Guide for applying metadata to
non-HTML files
2.10. Colour
Colours used on the website must meet the minimum requirements as specified by WCAG 2.0.
Rationale:


WCAG 2.0: http://www.w3.org/TR/WCAG20/#visual-audio-contrast
See Appendix B – Site testing tools
2.11. Fonts
Fonts used on the website must be of sans-serif type.
Rationale:


Sans-serif type ensures text is easier to read on screen and are the most crossplatform and cross-browser compatible
WebAIM Font techniques: http://www.webaim.org/techniques/fonts/
8
ACT Government Website Development Standard
2.12. Cascading style sheets (CSS)
Styles must be stored in external style sheets and have sufficient comments and human readable
formatting within to make the document maintainable.
Rationale:




A correctly marked up style sheet will aid future development and maintenance of
the website
Global style changes can be made quickly and easily
CSS files can be cached by browsers
See Appendix B – Site testing tools
2.13. Print CSS
There must be a defined print CSS for each site that includes the following elements:



Branding
Breadcrumbs
Content
Rationale:


A print friendly style sheet will remove the non essential elements from the page
enabling the user to read the core content on the page
Users will use less printer ink and less paper when printing web pages
2.14. Scripts
Scripts must be stored in external files and have sufficient comments and human readable
formatting within to make the document maintainable.
Provide alternative mechanisms for accessing content that rely on scripting languages or applets.
Appropriate information must also be provided to the user if they are unable to use the script
functions.
Rationale:


Script files can be cached by browsers
A well formatted script will aid future development and maintenance of the website
2.15. Website mark-up
Each template must address all the mandatory elements as outlined in this document and meet the
following mark-up standards:






Sufficient comments where appropriate
Neat coding presentation e.g. indenting parent/child elements
Table-less design
Valid HTML/XHTML
Valid CSS
Maintainable code including class and id naming conventions and meaning
9
ACT Government Website Development Standard
Rationale:


WCAG 2.0: http://www.w3.org/TR/WCAG20/
See Appendix B – Site testing tools
3. Header elements
3.1.
Masthead
A masthead section is to be located at the top of each page and should include the following
elements:






Site branding
Site title
Skip to content link
Search
Contact information link
Accessibility link
Rationale:

3.2.
Ensures common elements across ACT Government websites.
Search
Where a specialised website search is not required websites must utilise the ACT Whole of
Government search facility.
The search must be accessible from every page within the website.
To have a site collection created on the Whole of Government Search you should Contact the
Manager, Online Systems, Shared Services ICT.
Rationale:


3.3.
Enables users to discover content
Ensures a consistent user experience regardless of what ACT Government website is
being viewed
Branding
All ACT Government websites must adhere to the ACT Government’s Branding Guidelines.
Rationale:

Please refer to the ACT Government’s Branding Guidelines:
http://sharedservices/ACTGovt/Branding/
10
ACT Government Website Development Standard
4. Navigation elements
4.1.
Main navigation
Provide a navigation system that is user centred so that visitors to your site can easily locate the
information or service they require. The navigation must remain constant throughout the website
and provide access to all the information outlined in the information architecture without the use of
orphan pages.
Rationale:


Provides easy access to information
Ensures a consistent user experience within the website
5. Body elements
5.1.
Forms
Forms must be presented in a usable, consistent and professional manner. All forms provided online
must be created to meet the minimum accessibility requirements.
Rationale:



5.2.
A poorly designed form can cause issues not only for those relying on assistive
technologies but for all users
WCAG 2.0: http://www.w3.org/TR/WCAG20/
See Appendix B – Site testing tools
Frames
Frames are not to be used as part of the website design.
Rationale:


5.3.
Frames present a number of usability problems
Frames can interfere with book-marking, printing, indexing and retrieval by search
engines, and using the browser’s ‘back’ button
Images
Images must be optimised for the web in relation to file size, dimensions and file type.
Rationale:


Contributes to faster downloading of pages
Contributes to responsive web experience for all users, including those with low
bandwidth fixed or mobile internet access
11
ACT Government Website Development Standard
5.4.
Links
Create navigational controls that provide visual feedback in reaction to mouse movements and
menu selections. The navigation system should provide feedback that answers three basic questions:



Where am I?
Where have I been?
Where can I go?
Rationale:


5.5.
Users can see a trail of where they are on a website and easily return to a previous
location
Visual feedback lets a user know that there is something to interact with
Breadcrumbs
Breadcrumbs should be included on every page where possible.
Rationale:


5.6.
Ensures common elements across ACT Government websites.
Users can see a trail of where they are on a website and easily return to a previous
location
New windows
Opening a new window or tab must be at the user’s discretion and not forced upon them.
Exceptions are files such as PDF or Word documents which may open in the default program.
Rationale:


5.7.
Allows the user to have control of their web experience
Maintains the integrity of the 'Back' button
Lists
Lists should be marked up using the correct list type.
Rationale:


5.8.
W3C Recommendation: http://www.w3.org/TR/1999/REC-html40119991224/struct/lists.html
See also the ACT Government’s Writing for the Web Guide
Page layout
Page layouts should use a fluid width approach with a maximum width for all content elements.
Rationale:


Ensures the site can be viewed on most platforms
Uses available space
12
ACT Government Website Development Standard


5.9.
Page layout should support small browser windows and low resolution devices and
try to avoid horizontal scrolling.
See Appendix B – Site testing tools
Tables
Tables must be used to present data and must not be used for placement of content as a design
layout.
Rationale:



Allows for easier maintenance
Keep presentation separate from design
WCAG 2.0: http://www.w3.org/TR/WCAG20/
5.10. Text
Text must be aligned to be read from left to right.
Rationale:


Left justified text is easier to read than text that is right justified or centred
See the ACT Government’s Writing for the Web Guide
6. Footer elements
6.1.
Footer
A footer section is to be located at the end of each page and must include the following elements:


Timestamp for the last updated date of the page
Links to the following
o Copyright
o Disclaimer
o Privacy
o Feedback tool
o Other languages information
o Sitemap
o ACT Government portal
o Canberra Connect portal
o Jobs ACT
Rationale:
Ensures common elements across ACT Government websites
Checklist
Use the checklist of items below to ensure that you have addressed all the elements during the
website development process.
13
ACT Government Website Development Standard
Website Development Checklist
Visual presentation
1.1. Wireframes have been created
1.2. Graphic design has been completed
General elements
2.1. Accessibility requirements have been met
2.2. Website has undergone usability testing
2.3. Website meets minimum browser support
2.4. Support for low resolution and other devices is present
2.5. Template has a doctype declared
2.6. UTF-8 character encoding has been specified
2.7. Language has been declared as English (Australian)
2.8. Title tag has been included in the template
2.9. Metadata standards are adhered to
2.10. Colour schemes meet WCAG 2.0 compliance
2.11. Sans-serif font has been used
2.12. CSS is external and human readable
2.13. Print CSS has been created
2.14. Scripts are external, unobtrusive, cause no accessibility issues or
browser errors
2.15. Website mark-up is compliant and maintainable
Header elements
3.1. Masthead contains the correct elements
3.2. Search has been included
3.3. Branding adheres to the ACT Government’s Branding Guidelines
Navigation elements
4.1. Site navigation is constant and supports the user
Body elements
5.1. Forms are accessible
5.2. Frames have not been used in the template
14
ACT Government Website Development Standard
Website Development Checklist
5.3. Images have been optimised for the web
5.4. Links provide feedback to the user
5.5. Breadcrumbs have been included
5.6. New windows are not forced upon the user
5.7. Lists have been used correctly
5.8. Page layouts are fluid and support low resolution platforms
5.9. Tables are not used for design
5.10. Text has been aligned to read from left to right
Footer elements
6.1. Footer includes the mandatory elements
Appendices
Appendix A – SPF suite of documents
The Single Public Face suite of guidelines and standards consist of:






Website Planning Guideline
Website Development Standard (this document)
Website Management Guideline
Single Public Face Standard
Search Engine Optimisation Guideline
Writing for the Web Guide
Appendix B – Site testing tools
Below is a list of online tools that can be used to help validate the website during and after its
development. It is important to use a variety of tools when running automated tests to gather as
much information as possible; however there are still areas that will require human review.
HTML/XHTML
W3C Markup Validation Service: http://validator.w3.org/
CSS
W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/
Feeds
W3C Feed Validation Service: http://validator.w3.org/feed/
15
ACT Government Website Development Standard
Mobile
W3C mobileOK Checker: http://validator.w3.org/mobile/
W3C all-in-one
Unicorn – W3C’s Unified Validator: http://validator.w3.org/unicorn/
Links
W3C Link Checker: http://validator.w3.org/checklink
Accessibility
AChecker – Web Accessibility Checker: http://achecker.ca/checker/index.php
WAVE: http://wave.webaim.org/
Functional Accessibility Evaluator: http://fae.cita.uiuc.edu/
Colour contrast
AccessColor: http://www.accesskeys.org/tools/color-contrast.html
Load time
Pingdom: http://tools.pingdom.com/fpt/
WebPagetest: http://www.webpagetest.org
Browser tools such as Google Chrome Developer Tools that come bundled with Chrome. All of these
options additionally allow you to export the logs as a HAR file, which can then be loaded into HTTP
Archive Viewer at http://www.softwareishard.com/har/viewer/ to visualise the data.
Browser testing
Browsershots: http://browsershots.org/
Adobe BrowserLab: https://browserlab.adobe.com/en-us/index.html
Glossary
Accessibility – The term ‘accessibility’ in this document refers to how the web is accessible to people
with disabilities.
Assistive technologies – A term that includes assistive and adaptive devices for people with
disabilities to better access the web.
Breadcrumbs – A navigation tool that allows a user to see where the current page is in relation to
the website's organisational structure and offer shortcut links for users to navigate to higher level
categories.
Browser – Software for accessing information resources on the World Wide Web.
Cache – A component that stores data.
Character encoding – A character encoding system consists of a code that pairs each character from
a given repertoire with something else, such as a sequence of natural numbers, octets or electrical
pulses, in order to facilitate the transmission of data (generally numbers and/or text) through
telecommunication networks or storage of text in computers.
16
ACT Government Website Development Standard
CSS – Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation
semantics (the look and formatting) of a document written in a markup language.
Device – This is referring to any device other than a desktop or laptop computer, e.g. mobile and
PDA devices.
Doctype – A Document Type Declaration is an instruction that associates a particular document with
a Document Type Definition.
Frames – Refers to the display of two or more web pages or media elements displayed side-by-side
within the same browser window.
HTML/XHTML – HyperText Markup Language is a markup language for web pages.
Masthead – A graphic image or text title at the top of a webpage that identifies the website. In
addition to the name of the website, a masthead could include other elements such as images, text,
or navigational links.
Metadata –Data that describes data.
Orphan page – A web page that is not linked to any other part of a website.
PDF – A Portable Document Format file.
Sans-serif – A typeface that does not have the small projecting features called "serifs" at the end of
strokes
Scripts – This can refer to any scripting language used in relation to a website, e.g. PHP, JavaScript or
Java.
Usability – Web usability is an approach to make websites easy to use for an end-user, without the
requirement that any specialized training be undertaken.
WCAG 2.0 – Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of
recommendations for making Web content more accessible.
Web document – A collection of individual web pages that form an online document e.g. an annual
report spread across multiple pages.
17