Docstoc

Style Directive Explanatory Notes

Document Sample
Style Directive Explanatory Notes Powered By Docstoc
					Version control
Date
12 January 06 24 January 06 28 January 06 10 April 06 11 April 06 12 April 06 3 June 06 5 June 06 12 July 06 31 July 06 01 Sept 06 20 Sept 06 19 Oct 06 26 Oct 06

Author
Consortium Consortium Consortium Consortium Consortium Consortium Consortium Consortium Consortium PTG Global PTG Global PTG Global PTG Global PTG Global

Version
0.1 0.2 0.21 0.3 0.31 0.32 0.4 1.0 1.2 2.0 3.0 4.0 4.1 5.0

Description
Draft release to Marilyn Livesley Reformatted to single column and released to Marilyn Livesley Review and re-release to Commerce Incorporated feedback from the Reference Group Separated the Style Directive from the Guidelines document. Re-release to Commerce Converted to PDF. Re-release to Commerce Incorporated feedback from the Reference Group Release to Marilyn Livesley Updates based on changes to Style Directive Release to Marilyn Livesley Updates Final updates Separated the Structuring information chapter from the Explanatory notes document. Re-release to Commerce Final release

NSW Government Website Style Directive Explanatory Notes

2

Contents
Version control .....................................................................................................................................2 Contents ..............................................................................................................................................3 1. Introduction .................................................................................................................................5 1.1. Overview ..............................................................................................................................5 1.2. Benefits of the NSW Government Website Style Directive and NSW Government Website Style Directive Explanatory Notes ................................................................................................................6 1.3. 2. 2.1. 2.2. 3. 3.1. 3.2. 3.3. 3.4. 3.5. 4. 4.1. 4.2. 4.3. 4.4. 4.5. 4.6. 4.7. 4.8. 4.9. 4.10. 5. 5.1. 5.2. 5.3. 5.4. 5.5. 5.6. 5.7. 5.8. 5.9. 5.10. 5.11. 6. 6.1. 6.2. 6.3. 6.4. The NSW Government Website Style Directive Explanatory Notes ..............................................6 What is user experience and why it is so important ..................................................................7 General usability design guidelines..........................................................................................7 What is disability and who is affected......................................................................................9 How people with disabilities use the Web ..............................................................................11 The Legal Position ...............................................................................................................11 WCAG and what it means ....................................................................................................12 Conclusion ..........................................................................................................................13 About navigation .................................................................................................................14 Navigation models...............................................................................................................14 Display of navigation ...........................................................................................................18 Navigation labels .................................................................................................................21 Breadcrumbs ......................................................................................................................23 Links ..................................................................................................................................24 Links in content...................................................................................................................27 Skip to content link..............................................................................................................28 Mailto links .........................................................................................................................29 Navigation alternatives ........................................................................................................30 Encourage scanning – writing for the web .............................................................................32 Writing style .......................................................................................................................34 Writing layout .....................................................................................................................35 Correct language, spelling and grammar ...............................................................................35 Page length ........................................................................................................................36 Capitalisation ......................................................................................................................37 Abbreviations and acronyms.................................................................................................38 Italics, underlining and bold / emphasis ................................................................................39 Animation and moving text ..................................................................................................39 Print friendly views ..............................................................................................................40 Legal Statements: Privacy, Copyright, Disclaimer, Terms and Conditions ..................................43 Error handling .....................................................................................................................44 System status .....................................................................................................................46 Uniform Resource Locators (URLs) and page titles .................................................................47 Tables ................................................................................................................................48 User Experience and Usability ........................................................................................................7

Accessibility ..................................................................................................................................9

Navigation ..................................................................................................................................14

Content formatting......................................................................................................................32

Page and application components.................................................................................................44

NSW Government Website Style Directive Explanatory Notes

3

6.5. 6.6. 6.7. 6.8. 6.9. 6.10. 7. 7.1. 7.2. 7.3. 7.4. 8. 8.1. 8.2. 8.3. 8.4. 8.5. 9. 9.1. 9.2. 9.3. 9.4. 9.5. 9.6. 9.7. 9.8. 9.9. 9.10. 9.11. 9.12. 9.13. 9.14. 9.15. 9.16. 9.17. 9.18. 10. 11.

Form design........................................................................................................................50 Login..................................................................................................................................53 Distinguish buttons and links ................................................................................................53 Reset buttons .....................................................................................................................54 Search................................................................................................................................55 Syndication feeds (Really Simple Syndication)........................................................................58 Font ...................................................................................................................................59 Text colour .........................................................................................................................60 Heading styles and text sizes................................................................................................63 Graphics vs. HTML (text) .....................................................................................................65 Images size ........................................................................................................................66 Image format......................................................................................................................67 Integrity of images ..............................................................................................................68 Use of imagery....................................................................................................................69 Alt text - Graphics/Images/Photographs ................................................................................69 Screen resolution ................................................................................................................71 Browser specifications .........................................................................................................73 Frames...............................................................................................................................76 Pop-up windows (JavaScript based) ......................................................................................76 Metadata ............................................................................................................................77 Cookies & Platforms for Privacy Principles (P3P).....................................................................78 Cascading Style Sheets (CSS) ...............................................................................................79 HTML & XHTML...................................................................................................................80 Appropriate use of GET and POST ........................................................................................81 HTML techniques for forms ..................................................................................................84 HTML techniques for tables ..................................................................................................87 HTML techniques for links ....................................................................................................91 HTML techniques for images ................................................................................................92 JavaScript...........................................................................................................................93 HTTPS – Creating secure connections ...................................................................................97 Downloads and plug-ins.......................................................................................................98 Use of flash ........................................................................................................................99 Use of Portable Document Format (PDF) ...............................................................................99

Typography ................................................................................................................................59

Graphics/Images/Photographs......................................................................................................66

Technical standards.....................................................................................................................71

References ............................................................................................................................... 102 End notes................................................................................................................................. 106

NSW Government Website Style Directive Explanatory Notes

4

1.
1.1.

Introduction
Overview

With the endorsement by the Chief Executive Committee in November 2004, a recommendation was made for the development of a consistent and seamless experience for the clients of the NSW Government. This recommendation has been made to satisfy the following objectives: • Promote community trust in content by identifying the site as an official NSW Government site. • Make it easier to search for information and navigation within and across NSW Government websites. • Minimise the costs of website development and design. In response to the so called “common look and feel” initiative, two documents have been produced: The NSW Website Style Directive for public facing websites and the NSW Government Website Style Directive Explanatory Notes; a supporting document for the implementation and maintenance of public facing websites. The objective is to encourage a consistent look and feel across all NSW government websites that is based on best practice and user requirements, without compromising the unique identity of each agency and the communication of the intended message. A consistent look and feel will result in a consistent and seamless user experience as the user moves from one NSW Government website to another.

The NSW Government Website Style Directive
The NSW Government Website Style Directive is written for public facing websites, particularly informationbased websites provided by the NSW Government, and contains specifications on the required elements for all such websites.

The NSW Government Website Style Directive Explanatory Notes
The purpose of the NSW Government Website Style Directive Explanatory Notes is to provide additional information pertaining to the recommended solutions adopted by the NSW Government Website Style Directive. This document compliments a suite of Website and Internet Guidelines found on the GCIO website at http://www.gcio.nsw.gov.au/pages.asp?CAT=764&ID=797

NSW Government Website Style Directive Explanatory Notes

5

1.2.

Benefits of the NSW Government Website Style Directive and NSW Government Website Style Directive Explanatory Notes

A well documented NSW Government Website Style Directive provides a number of benefits to each of the stakeholder groups. These are summarised by Gale (1996)1 in the following table. End Users Reduced errors Developers Maintain control over look and feel Minimise re-invention Capitalise on learning Enable production of reusable software Reduce development time Reduce arbitrary design decisions Business Teams Produce usable systems that reduce support costs and increase user satisfaction Increase market awareness Increase product awareness Reduce training costs Improve staff retention Increase user acceptance of new systems

Reduced frustration Increased morale Improved efficiency Increased confidence Reduced resistance to new technology

1.3.

The NSW Government Website Style Directive Explanatory Notes

The NSW Government Website Style Directive Explanatory Notes offer advice on best practice rather than stipulating how elements must be implemented. Some examples are given to demonstrate best practice (as well as common errors). The topics covered in this document include: • User experience and usability • Accessibility • Navigation • Content formatting • Page and application elements • Typography • Graphics/Images/Photographs • Technical standards

NSW Government Website Style Directive Explanatory Notes

6

2.
2.1.

User Experience and Usability
What is user experience and why it is so important

Usability, according to ISO 9241 (Part 11: Guidance on Usability)2, is defined as ‘the effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.’ Benefits of highly usable sites include: • Decreased learning time • Decreased error rates • Increased efficiency • Reduced cost of servicing customers • Increased user satisfaction and trust • Increased customer retention and sales • Increased conversion rate • Improved strength of brand and positive perception of an organisation.

2.2.

General usability design guidelines

Jakob Nielsen has produced and refined a set of usability heuristics that highlight some of the key issues to consider when building software, including websites. The heuristics were first developed by Jakob Nielsen and Rolf Molich in the early 1990s (Molich and Nielsen 19903; Nielsen and Molich 19904), and have been refined overtime through research and factor analysis of usability problems (Nielsen 1994a5; Nielsen 1994b6). The 10 usability heuristics are as follows: 1. Visibility of system status Users find it helpful if they can see what is going on when interacting with a website. For example, when submitting a form, there is often a waiting period. It is important to know if the system is processing the form, or if the system has crashed in some way. Users find a system much easier to understand if concepts and words are familiar. Users can often feel helpless, so it is useful to give them a sense of control. This ranges from being able to skip to the next stage or cancel a particular action. Users should not have to wonder whether different words, situations, or actions mean the same thing. A good design overcomes the likelihood of making errors by clearly indicating the next steps Write error messages that explain the situation in a simple and clear manner as well as explaining the options available.

2. Match between system and the real world 3. User control and freedom

4. Consistency and standards

5. Error prevention 6. Help users recognize, diagnose, and recover from errors

NSW Government Website Style Directive Explanatory Notes

7

7. Recognition rather than recall

Try to keep as many options as visible as possible. People find it much easier to recognise the correct option if it is visible rather than remember where an item is. It is important to cater for novice and expert users. Therefore, allow quick access to important actions/information. Try to make sure that the design focuses the user on the tasks at hand and doesn’t distract them from key information. While good design should avoid the need for help, it is sometimes useful for complicated procedures or tasks that people are unfamiliar with. However, provide the help where the issue is instead of taking the user away from it.

8. Flexibility and efficiency of use

9. Aesthetic and minimalist design

10. Help and documentation

NSW Government Website Style Directive Explanatory Notes

8

3.

Accessibility

Accessibility, as it relates to the web, is about people with disabilities and impairments being able to access online information and services as effectively as people without disabilities.

3.1.

What is disability and who is affected

The World Health Organisation has defined disability in the context of health experience as: 'any restriction or lack (resulting from an impairment) of ability to perform an action in the manner or within the range considered normal for a human being'. Because it is dependent on respondent perceptions, disability is a difficult concept to measure, even through special in-depth surveys involving personal interviews and a large number of questions.7 According to the Australian Bureau of Statistics, 20% of Australians have a disability. It is further estimated that at least half of these Australians have a disability that specifically affects their use of information and communication technologies. The ABS also estimates that around another 20% of the population have a long-term health condition affecting their daily living and that, of the 17% of the population aged over 60 years, 51% had a reported disability. The ABS has very tight definitions of what constitutes disability - that they have a limitation, restriction or impairment, which has lasted, or is likely to last, for at least six months and restricts everyday activities.8 The ABS definition includes people suffering: • • • • • • • • • • • • • • • • • loss of sight (not corrected by glasses or contact lenses) loss of hearing where communication is restricted, or an aid to assist with, or substitute for, hearing is used speech difficulties shortness of breath or breathing difficulties causing restriction chronic or recurrent pain or discomfort causing restriction blackouts, fits, or loss of consciousness difficulty learning or understanding incomplete use of arms or fingers difficulty gripping or holding things incomplete use of feet or legs nervous or emotional condition causing restriction restriction in physical activities or in doing physical work disfigurement or deformity mental illness or condition requiring help or supervision long-term effects of head injury, stroke or other brain damage causing restriction restrictions from any other long-term conditions or ailments, despite receiving treatment or medication any other long-term conditions resulting in a restriction.

Groups not included in the ABS statistics include people suffering from colour-blindness (8% of the male population9), people whose hearing is corrected with a hearing aid, people whose sight is corrected with reading glasses, and people suffering from dyslexia or other reading or learning disabilities. Furthermore, the Print Disability Roundtable estimates that 17% of Australia’s population has a print disability due to vision problems, physical difficulties handling paper and books, or cognitive impairments such as dyslexia and reading difficulties. The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) defines web accessibility as:

NSW Government Website Style Directive Explanatory Notes

9

Web accessibility means that the Web (including intranets) is designed so that people with disabilities and impairments can perceive, understand, navigate, and interact with it effectively, as well as create and contribute content.
The introduction of the word “impairment” by the W3C is important, as many people have permanent or temporary impairments that may affect their efficient use of a computer, but not fall into the ABS definition. In fact, a study undertaken by Forrester for Microsoft in 2003 showed that 57% of working age Americans using computers were likely or very likely to benefit from accessibility. 10

Additional Beneficiaries
Like the curb-cuts in the footpath that benefit delivery men, mothers with prams, kids on skateboards, business people with wheel-able cases, it is not just people with disabilities and impairments that benefit from accessible design. As well as benefiting people in wheelchairs, accessible web design can also have benefits for a larger range of people. Some of the additional people who will benefit in some way from accessible web design include: • People with poor communications infrastructure – these people are looking for fast sites and many of them browse with the graphics turned off 11 • People with old equipment – they will have slow machines and maybe older browsers and plugins • People with temporary impairments – estimated at 15% of the population12 • Older people – often with impairments, if not disabilities; maybe with older ‘cast-off’ computers • New users and casual users of the web – unfamiliar with the way the web can work • People using PDAs, web phones etc. – slow connectivity and small screen size, maybe also without a mouse, and maybe without graphics • People working in restricted access environments – unable to update the browser and plugins; often with scripting and plugins disabled for security • People coping with environmental distractions – needing to get to information quickly and efficiently • The website owner – by having a site that is easier to maintain, doesn’t waste bandwidth, and reduces the legal risk of complaint The W3C has produced a document that summarises many of the issues that might form a business case for accessibility13 under the headings of ‘social factors’, ‘technical factors’, ‘financial factors’, and ‘legal & policy factors’.

NSW Government Website Style Directive Explanatory Notes

10

3.2.

How people with disabilities use the Web

Many documents exist that explain how people with a disability use computers and browse websites, even though they may not be able to see the screen and/or use a mouse, or even a keyboard 14,15. Some of these users will: • Make changes to the operating system settings (colour schemes, fonts used and text size) • Make changes to the browser settings (colour schemes, fonts used and text size) • Use the keyboard or a switch device instead of a mouse • Use a screen magnifier to enlarge a portion of the screen • Use a screen reader to have the screen read out to them or sent to a refreshable Braille device • Use speech recognition software for input rather than a mouse and/or keyboard • Use other assistive technologies such as modified keyboards, mice and trackballs Descriptions of assistive technologies are available from several sources16,17

3.3.

The Legal Position

In Australia the Disability Discrimination of 1992 (DDA) is the relevant legislation concerning the provision of online services. Effectively this legislation states that it is illegal to discriminate against a person on the basis of their disability. The Human Rights and Equal Opportunity Commission makes it clear that this applies both to public websites and to any employment situation18,19,20. While the DDA doesn’t make explicit mention of the Web, in Australia we have a clear legal precedent set during the Sydney Olympic Games.21 In 2000, the Online Council of Ministers agreed on the adoption of the W3C Web Content Accessibility Guidelines 1.0 (WCAG 1.0) as the for web accessibility in Australian Government. All the States and Territories have complimentary policies in place in support of an accessible web, and promoting the use of WCAG 1.0.22,23

NSW Government Website Style Directive Explanatory Notes

11

3.4.

WCAG and what it means

The Web Content Accessibility Guidelines 1.024 were released in May 1999 (there is a new version being drafted for release in late 2006). WCAG 1.0 contains 14 Guidelines and 65 Checkpoints 25.The Guidelines state: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Provide equivalent alternatives to auditory and visual content Don't rely on colour alone Use markup and style sheets and do so properly Clarify natural language usage Create tables that transform gracefully Ensure that pages featuring new technologies transform gracefully Ensure user control of time-sensitive content changes Ensure direct accessibility of embedded user interfaces Design for device-independence Use interim solutions (so that assistive technologies and older browsers will operate correctly) Use W3C technologies and guidelines Provide context and orientation information Provide clear navigation mechanisms

14. Ensure that documents are clear and simple The W3C provide some guidance as to the importance of the checkpoints under each Guideline – they assign each checkpoint a Priority level of “1”, “2” or “3” giving a three possible conformance levels (“A”, “AA” and “AAA”). However, the nature of the web has changed significantly since the WCAG 1.0 was released and it is no longer sufficient to only adopt the basic level of accessibility (Level Single-A). For a practical level of accessibility it is necessary to conform with WCAG 1.0 at a level of “AA” and include some important checkpoints from Priority 3. The Checkpoints from WCAG 1.0 are not described in detail here with implementation recommendations as they have been incorporated into the relevant sections of these Guidelines so that NSW Government web developers can address accessibility as an everyday issue during site development.

NSW Government Website Style Directive Explanatory Notes

12

3.5.

Conclusion

Accessibility is primarily about making websites usable by people with disabilities and impairments. This entails ensuring that the site has adopted a user-centred design approach and then making sure that some specific accessibility requirements are also addressed. In essence, accessibility is experiential – a person with a disability or impairment needs to be able to use data, information and services as effectively as someone without a disability. As a result, compliance with technical rules is necessary, but not sufficient. If a website is not usable and readable, then people with disabilities will have even more difficulty than others using the site. An unusable site will result in people continuing to use the conventional methods of accessing information and services, namely the telephone, the counter and the post. This section of the NSW Government Website Style Directive Explanatory Notes serves to introduce accessibility as an issue, however, the solutions to accessibility are contained across the remainder of the Guidelines in the all the relevant sections dealing with website design. Additional information: Lang, T. (2003). Comparing website accessibility evaluation methods and learnings from usability evaluation methods. Retrieved 8 June, from http://www.peakusability.com.au/articles/index.htm In addition to this document, GCIO has developed the following resources that are available to agencies: • WCAG 1 & 2 Checklist (http://www.gcio.nsw.gov.au/docs/WCAG1and2Checklist.pdf) • WCAG P 1&2 Descriptions (http://www.gcio.nsw.gov.au/docs/WCAG_P_1and2_Descriptions.pdf) • Accessible Forms (http://www.gcio.nsw.gov.au/docs/AccessibleForms.pdf) • Accessible Tables (http://www.gcio.nsw.gov.au/docs/AccessibleTables.pdf) • Accessible Transactions (http://www.gcio.nsw.gov.au/docs/AccessibleTransactions.pdf) • Flash Accessibility (http://www.gcio.nsw.gov.au/docs/FlashAccessibility.pdf) • PDF And Accessibility (http://www.gcio.nsw.gov.au/docs/PDFAndAccessibility.pdf)

NSW Government Website Style Directive Explanatory Notes

13

4.
4.1.

Navigation
About navigation

Navigation refers to the ways in which users move and find their way around the site. In real world navigation, we rely heavily on surrounding cues like landmarks, signposts or maps to avoid getting lost. In the online environment users can move between pages with the click of a mouse. Since there are no natural landmarks on the web, a well-designed navigation system is crucial to the success of a website. A good navigation framework answers the following questions: • Where am I? • What can I do? • Where can I go? • How will I get there? • Where did I come from? Note: Navigation refers to the way in which a site’s information architecture is presented or expressed in menus, tabs, links, and other artefacts. For guidelines on grouping items, see the supporting document Structuring Information for Interaction - Information Architecture. (http://www.gcio.nsw.gov.au/pages.asp?CAT=764&ID=797).

4.2.

Navigation models

Guideline:
The Style Directive for public-facing websites stipulates the following navigation models for NSW Government websites: • • The L-Shape navigation model, or The Vertical navigation model.

When selecting a navigation model, consider the amount of information and services to be accessed. For websites with more than four levels of navigation, the L-Shape navigation model may be preferable. This model displays first-level navigation items in a horizontal navigation bar across the top of the screen, while second and third-level items are presented in a Vertical navigation rail on the far left-hand side of the screen. For websites with less than four levels of navigation, the Vertical navigation model is recommended. This model positions first-level navigation items in a column on the left-hand side of the screen and expands to display level two items when corresponding level-one items are selected. These two navigation models have been selected because they have been found to be effective in facilitating ease of navigation. For sites with a large volume of information, the L-Shape navigation model allows users to view four levels of navigation, allowing greater visibility of the site. The Vertical navigation model, however, is useful for smaller amounts of information, again allowing users to view all available options.

NSW Government Website Style Directive Explanatory Notes

14

Table 1: Two acceptable types of navigation models for NSW Government websites
Navigation model L-Shape What An L-Shape navigation model has the first-level navigation items presented in a horizontal navigation bar across the top of the screen. Second, third and fourth level items are presented in a vertical navigation rail on the far left-hand side of the screen. When to use A public facing Government website that targets more than 4 distinct audience groups, where audience groups require distinctively different sets of information and transactional functionality. The first level items will serve to identify the user, with subsequent levels representing the information available to that user. All public facing Government websites with up to 3 levels of information architecture.

Vertical (see the Style Directive)

The Vertical navigation model positions first-level navigation items in a column on the left-hand side of the screen. The navigation panel expands to display level two items when the corresponding level-one item are selected. When a level two item is selected, the panel expands to display the subsequent level 3 items (if any).

Implementation notes:
When implementing an L-Shape navigation model, the vertical navigation bar displaying second-level items is only visible after users’ first selection of a first-level item (i.e., the vertical navigation bar is not visible from the homepage/landing page) or from a drop down menu coming from the first-level tabs. On selection of a first-level item, all corresponding second-level items should be visible in the vertical navigation bar. Similarly, third-level items should only be visible on selection of their corresponding second-level items, and should appear indented from second-level items on the vertical navigation bar.

Level 1: Level 2:

NSW Government Website Style Directive Explanatory Notes

15

On mouse off, the menu persists for 1 to 1.5 seconds to allow for users with fine motor control issues. The user can click on the level 1 menu item or a level 2 menu item. When a selection has been made, the left hand menu shows the same second level menu items as shown in the drop down menu. When a level 1 menu item is selected, that item is highlighted and the left hand menu updates accordingly with the associated level 2 menu items. The page associated to the selected level 1 item will be displayed.

When a level 2 menu item is selected from the drop down, the left hand menu is updated with the level 2 menu items relevant to that first level menu. The selected level 2 menu item will be highlighted and the associated page displayed.

When selecting a level 2 menu item with level 3 menu items, the first level 3 item is highlighted and the associated page displayed.

Use this icon ► to indicate there are lower level items belonging to the menu item; use this icon ▼ to indicate the menu item has been expanded and the lower level items are displayed. If the user does not have JavaScript enabled, they must click the required Level 1 menu item from the top horizontal bar, the left hand menu is updated, highlighted and the associated page is displayed. Other behaviour is then identical to using JavaScript for the drop down menu. The vertical navigation model does not require JavaScript. When implementing the Vertical Navigation model, second-level navigation items are indented and only visible on selection of their corresponding first-level items. Only one second-level section is shown at a time. The behaviour of menu items is consistent with the navigation in the left hand menu described previously.

NSW Government Website Style Directive Explanatory Notes

16

L-Shape navigation model from generic template

Vertical navigation model from generic template

NSW Government Website Style Directive Explanatory Notes

17

4.3.

Display of navigation

Guideline
Provide a navigation that reflects the main areas of the website and is available from every page. Provide visual cues to currently selected navigation items for the users, for example, highlight the selected item by making the text label bold and changing the back and foreground colours. Furthermore, make sure that each level is clearly connected to the level above through the use of highlighting. Fly-out menus are not recommended.

Rationale
Good navigation provides users with a good idea of the information and actions available to them. Making the first-level navigation available from every page of the site allows users to move easily from one key area of content to another. Key content areas within the first-level navigation may contain multiple pages or documents. Each of these areas becomes in effect a sub-site of the overall site, making it necessary to provide a second-level navigation within each key content area26. A visible second-level navigation provides users with quick access to the contents of a site. Static navigation rails allow users to view their options without having to construct elaborate mental maps27, while mouse overs provide just-in-time information delivery. When used sparingly, mouse overs also help reduce screen clutter while still supplying all necessary information28.

Implementation notes
Navigation behaviour
When implementing LShape navigation models, the second level menu items should drop down on mouse over, allowing for users to scan the contents of each Level 1 item before selection as shown below. On mouse off, the menu persists for 1 to 1.5 seconds to allow for users with fine motor control issues.

Level 1: Level 2:

NSW Government Website Style Directive Explanatory Notes

18

The user can click on the level 1 menu item or a level 2 menu item. When a selection has been made, the left hand menu shows the same second level menu items as shown in the drop down menu. When a level 1 menu item is selected, that item is highlighted and the left hand menu updates accordingly with the associated level 2 menu items. The first level 2 menu item is highlighted and the associated page displayed.
Label 4.1 Label 4.2 Label 4.3 Label 4.4 Label 4.5 Label 4.6 ► ► ► ►

When a level 2 menu item is selected from the drop down, the left hand menu is updated with the level 2 menu items that appeared with mouse over of the first level items. The selected level 2 menu item will be highlighted and the associated page displayed.
Label 4.1 Label 4.2 Label 4.3 Label 4.4 Label 4.5 Label 4.6 ► ► ► ►

When selecting a level 2 menu item with level 3 menu items, the first level 3 item is highlighted and the associated page displayed.
Label 4.1 Label 4.2 Label 4.3 Label 4.4 Label 4.5 Label 4.5.1 Label 4.5.2 Label 4.5.3 Label 4.5.4 Label 4.6 ► ► ► ▼

Use this icon ► to indicate there are lower level items belonging to the menu item; use this icon ▼ to indicate the menu item has been expanded and the lower level items are displayed. If the user does not have JavaScript enabled, they must click the required level 1 menu item from the top horizontal bar, the left hand menu is updated, highlighted and the associated page is displayed. Other behaviour is then identical to using JavaScript for the drop down menu. The vertical navigation model does not require JavaScript. When implementing the Vertical Navigation model, the behaviour of menu items is consistent with the navigation in the left hand menu described previously.

NSW Government Website Style Directive Explanatory Notes

19

Appearance
Provide visual cues such as a contrast colour and different font size or style to indicate the 'on state'. The image below shows the minimum padding for each of the level 1 menu items in the L Shape Navigation model – above and below is 4 pixels. Using padding that is less than 4 pixels may result in the user having difficulty visually distinguishing the navigation label from its border. Horizontal navigation labels should be centred to promote readability. Aligning labels to the left or right may result in a run-on effect between labels.

The image below shows the minimum padding for the Vertical Navigation model and level 2 items in the L Shape Navigation model - above, below and to its left - is 4 pixels. The minimum padding for the next level item is 10 pixels. Increased padding for lower level items helps visually distinguish them from higher level items. Vertical navigation labels should be left aligned since they appear stacked rather than next to each other (like horizontal navigation labels), precluding the possibility of a run-on effect. This promotes a cleaner visual design as labels start within a fixed width of each other.

NSW Government Website Style Directive Explanatory Notes

20

Examples:
Differentiating second-level navigation (Roads and Traffic Authority, NSW, www.rta.nsw.gov.au)

Second and third level navigation menus are indented and presented against a different colour background

4.4.

Navigation labels

Guideline:
Navigation labels should match the main heading of the page they link to and be as descriptive as possible to show what options are available to the user. Navigation labels should be brief and succinct, but acronyms and abbreviations are to be avoided. To reduce errors in the interpretation of navigation labels that may be ascribed more than one meaning, more detailed descriptions can be achieved by attaching ALT-tags to the labels.

Rationale:
When a user selects a navigation link, the match between the link label and the resulting page provides feedback to the user helping them confirm the outcome and appropriateness of their choice. Using descriptive but succinct labels helps reduce the complexity of a site and prevent user overload29. Menus are important forms of navigation that display a website’s structure (information architecture) without the user having to go beyond the page they are currently on.

NSW Government Website Style Directive Explanatory Notes

21

Implementation notes:
When designing menus, ensure that: • The clickable target area for the menu link is not too small • Vertical menu links are sufficiently spaced • Menu groupings are distinguished with separators. Quick links are recommended for popular pages, which lie below the first level of a website’s structure. If quick links are implemented via a drop-down list, then the resulting HTML form requires a ‘go’ button, rather than just taking the user directly there on a mouse click30. Acronyms and abbreviations that have become widely used and have replaced the full term, such as CD, DVD and NSW, may be used as navigation labels.

Examples:
Ambiguous navigation labels
In the example below, the label ‘Apply’ provides no context for users and assumes the user knows what the link will let them apply for. It is not readily apparent whether this link refers to application for membership, a grant, or employment. Furthermore, the label ‘Apply’ is a subset of the label ‘Grant’, making it ambiguous to users which link to select. Do not correct these writing mistakes by adding alt-text or link-titles; rewrite the link’s text to make it meaningful.

Descriptive navigation labels
In contrast, the example below uses more specific navigation labels such as ‘Online Payments’, which indicate to users the actions available to them.

(NSW Maritime Authority, http://www.maritime.nsw.gov.au/index.html )

NSW Government Website Style Directive Explanatory Notes

22

4.5.

Breadcrumbs

Guideline:
• Breadcrumbs show the user's current position and where this sits hierarchically within the site. • Each item, except the current item, is a hyperlink, allowing users to navigate up the hierarchy. • The breadcrumb should consist of the full path from ‘Home’. • The symbol “>” (greater than) is used as a separator between areas listed in the breadcrumb navigation. • The first item in the breadcrumbs is ‘Home’. • The last item in the breadcrumbs reflects the heading of the current page and should appear in black text with no hyperlink. • Acronyms, abbreviations or ampersands should not be used in breadcrumbs. • The breadcrumb should be positioned directly above the in-page heading.

Rationale:
Breadcrumbs are navigational links which provide a hierarchical path that can assist users in orienting themselves within a site. They do this by providing users with additional context about the placement of the page they are on, within the framework of the website. The crumbs also allow the user to easily navigate ‘up’ one or multiple levels in the site. There are three types of breadcrumbs used in websites: 1. Path - displays the exact pathway the user has taken through the site. The trails are dynamic in that any given page will show a different breadcrumb trail based on how the user reached the page. (e.g. Home > About Us > Emergency management > Electronic Services > Channel NSW) 2. Attribute - displays meta information showing many different trails representing several possible paths to reach the page. 3. Position – display a textual representation of a site’s structure. This representation of information allows users to link to major categories of information along a continuum of sequential order. On a furniture website, for example, regardless of how users arrive at a webpage for leather chairs, the breadcrumb trail displayed allows them to see that this webpage is located within ‘Chairs’. (e.g., Home > Chairs > Leather Chairs). The more commonly adopted breadcrumbs is the ‘Position’ breadcrumb which has the advantage of providing the users with a better sense of the site as whole.

NSW Government Website Style Directive Explanatory Notes

23

4.6.

Links

Guideline:
Links need to clearly and succinctly explain the destination page/area they are referring to without any need for accompanying text. Links should not be defined by colour alone, with further emphasis such as underlining. Distinguish between visited links and unvisited links through the use of colour. Visited links should default to appear in purple, and unvisited links in blue, however, users should be able to override these default colours and select alternative colours on their browser.

Rationale:
Link names need to be meaningful as many users scan for links31. By defining a difference between links and body text, through the use of an underline and colour, the user can easily distinguish between the two, allowing for greater ease in navigating through the site. A study conducted by Neilson and Tahir32 found that users look for coloured text when working out what to do on a page. Changing the colour of visited links was one of the primary ways users understood where they had been on a site, and reduced them going back to pages they had already visited. If links in the page body are not a different colour AND underlined, many readers will miss them due to poor contrast differences on their monitors or due to failing eye-sight.

Implementation notes:
• Links should be underlined and their colour controlled by users’ browser settings. Browser settings are usually set to display unvisited links in blue, and previously visited links in purple33. • Where non-W3C formats are used (e.g., PDF, Shockwave, audio, video) a link needs to be provided to an equivalent alternative page that is reachable. • Ensure that the mouse cursor changes when hovering over a link. Many users rely on the cursor change for positioning the cursor. • Ensure that the styles set for defining a link remain consistent throughout the site.

Additional information:
See Sections 4.7 Links in content and 9.12 HTML techniques for links.

NSW Government Website Style Directive Explanatory Notes

24

Examples:
Presentation of links on a page (Australia Day Council NSW, www.australiaday.com.au)

Links are underlined and indicative of target pages

Ineffective link

In the above example, it is not clear where the Application Forms link is (it is presented mid-sentence). Links that are labeled appropriately, underlined, and differentiated from surrounding text invite users to click them and do not require specific instructions that clutter and confuse. This sentence and the link could have been reworded as: Application forms are available online.

NSW Government Website Style Directive Explanatory Notes

25

Effective link

Link is underlined and differentiated from surrounding text in colour

Sample of a custom unvisited link style

Sample of a custom visited link style

NSW Government Website Style Directive Explanatory Notes

26

4.7.

Links in content

Guideline:
Make sure links embedded in content highlight key information without making the content unreadable. Clearly identify the target of each link34 - links should be unique and meaningful in the absence of surrounding text. Be sure links include keywords as some users only scan for relevant links and avoid all other text.

Rationale:
• Links in content are useful for giving users the option to view additional or related information, while keeping information concise and relevant. It also avoids the need for repetition. • Users tend to scan content looking for links with keywords that match what they are looking for. If links are not well named, users often fail to find what they are looking for. • When making navigation decisions and deciding where to click, it has been shown that users make less errors and complete tasks faster when they are provided with supporting text35. • Screen reader users often access links in a list format. While doing so, only the text of the link ("link text") is read, not the surrounding text. As a result, it is important that link text make sense when not contextualized by the text around it. Hence, link names such as ‘click here’ or ‘more information’ are often meaningless.

Implementation notes:
• When calling the user to action, use a brief but meaningful link text that: • • • • Provides some information when read out of context Explains what the link offers and where it will take the user Do not use “Click here to …”, instead, front load the link with the destination. Do not use “More” at the end of a section. If you have to use “More” then say what the link will provide more about, e.g. “More news”

• All links must make sense out of context of the surrounding text:

• Deep link directly to the relevant content, don’t just link to the homepage of the site that contains the content. • Provide a title attribute for all links. Title attributes should not, however, be relied upon to convey the link’s meaning as they are not visible (or audible) by all devices. • If you linking to a file (e.g. a PDF copy of a report) include the file type and size within the linked text e.g., ‘Annual Report 2003-04 (PDF, 1.2Mb)’.

NSW Government Website Style Directive Explanatory Notes

27

Additional Information:
Do not use "click here" as link text http://www.w3.org/QA/Tips/noClickHere Ojakaar, E. (2001). Users Decide First; Move Second Available in User Interface Engineering. http://www.uie.com/articles/users_decide_first/ Baker, Bernard and Riley, (2002). Reading Online News: A Comparison of Three Presentation Formats in Usability News 4.2 2002 http://psychology.wichita.edu/surl/usabilitynews/42/depth.htm Also see Sections 4.7 Links in content and 9.12 HTML techniques for links.

Examples:
Good: For further information and contact details go to the website of the Student Associations Click here for more information about the Student Association.

• Bad:

4.8.

Skip to content link

Guideline:
A "Skip to content" link is to be placed in the top banner to assist users with adaptive technology to quickly navigate to the content. The link will be right-aligned in the top right hand side of the top banner. Skip links should be clearly visible. Do not use CSS or JavaScript to hide the skip navigation.

Rationale:
If users do not have access to a mouse or other pointing device it can be tedious having to tab through the main navigation on each page in order to reach the content. Skip links provide these users with a quick and easy way to reach to the core information on the page. This issue does not only apply to visually impaired users who are using a screen reader - there are many other scenarios preventing users from using a mouse for navigation.

Implementation notes:
• When content is placed after a significant amount of navigational code, provide skip links at the top of the page to allow users to easily jump to the page content. • Ensure that skip links are visible to the user.

Additional information:
• Dive Into Accessibility: Skipping over navigation links http://diveintoaccessibility.org/day_11_skipping_over_navigation_links.html • Building Accessible Websites: Navigation http://www.joeclark.org/book/sashay/serialization/Chapter08.html

NSW Government Website Style Directive Explanatory Notes

28

• Usability Concerns of Hidden Skip Links http://juicystudio.com/article/skiplinks.php#usabilityskiplinks • Basic Web Standards Workshop: Skip links http://webboy.net/presentation/workshop/slide16.cfm • Also see Sections 4.7 Links in content and 9.12 HTML techniques for links.

Examples:
www.monash.edu.au <div id="accessibility"> <a href="#content" accesskey="5">Skip to content</a> | </div> www.trainandemploy.qld.gov.au/ <div id="access"> <a href="#nav">Skip to secondary navigation</a> | <a href="#content">Skip to content</a> | <a href="#footer">Skip to footer</a> | </div>

4.9.

Mailto links

Guideline:
Display the destination email address to the user when creating mailto links.

Rationale:
Mailto links require the user to have correctly configured the relationship between their browser and their preferred email client. If this is not set up correctly the user will be presented with an error when clicking on a mailto link. If the email address is displayed, the user can copy and paste it into their email program.

Examples:
• Good: • Bad: For more information please email mabc@xyz.nsw.gov.au For more information please Email us

NSW Government Website Style Directive Explanatory Notes

29

4.10. Navigation alternatives
Guideline:
Provide navigational alternatives such as site maps, tables of content, A-Z indices, and search engines, to help users find their way around the site.

Rationale:
Implementing additional navigational aids provides users with alternative access to the basic structure of the website. They should not, however, be used to compensate for a poor information architecture or navigation system. Site maps are a graphical representation of the web site. A site map should provide an overview of the hierarchal structure of the site enabling a user to see the location of each page in relation to other pages. Site maps display the Information Architecture to a level of at least three pages deep if they are to be useful to the visitor. A table of contents can be useful for sites with a strong hierarchy as they present the content of the site by category and subcategory. Alternatively, if a site lacks a strong hierarchical structure, a site index listing the categories alphabetically may be more appropriate. Tables of contents should be provided for any report on the site that spans multiple pages, effectively providing mini-site navigation. Finally, implementing a well-indexed search facility will allow users to find information in a site by entering key words or phrases. Great care should be taken when designing or choosing a search engine. Poorly designed search input components and incomplete index databases can make it very difficult, if not impossible, for users to obtain the results they want. This can often lead users to believing the material they seek is not available on a site when, in fact, it is36.

Examples:
Site map (Office of Financial Management, NSW Treasury, http://www.treasury.nsw.gov.au/ )

NSW Government Website Style Directive Explanatory Notes

30

NSW Government Website Style Directive Explanatory Notes

31

5.
5.1.

Content formatting
Encourage scanning – writing for the web

Guidelines:
Text is more likely to be read if it is presented in a concise manner and “chunked” into smaller pieces of information.

Rationale:
• People don’t ‘read’ web pages in the same way they read printed documents. They rely heavily on skimming and scanning techniques to find areas of interest quickly37. • Reading from computer screens is about 25% slower than reading from paper38. • Many users, including visually impaired users with screen readers, often just read headings. • Users do not tend to read text until they have navigated to an area of interest, which is typically one or two levels down.

Implementation notes:
This section of the style guide should be distributed to all authors and business owners contributing content to an agency website. Consider the use of content producers or online editors to ensure content is written following these guidelines and appropriately edited. Try to use no more than 50% of the text you would have used in an equivalent hardcopy publication. Put as much important content as close to the top of the page as possible - above the fold (as some users do not scroll). If content falls below the fold, make sure it is obvious to users to scroll i.e. no large white space before the next piece of content. • Write sentences with 20 or fewer words and keep paragraphs short with fewer than five sentences. • Use bulleted lists to break up long sentences that contain several points or ideas. • Use short, clear and descriptive headings and subheadings. • Use highlighting and emphasis sparingly to attract attention to important words. • Use text on the homepage as sparingly as possible, instead use sentences or labels as hyperlinks to further information.

Additional information:
Dey Alexander - Writing for the Web: http://deyalexander.com/resources/writing-web.html Jakob Nielsen article “Be succinct: Writing for the Web” at www.useit.com/alertbox/9703b.html Krug, Steve (2000). Don’t make me think. Indianapolis: Cue Publishing. Nielsen, Jakob (2000). Chapter 3: Content Design in Designing Web Usability. Indianapolis: New Riders. pp.98-160.

NSW Government Website Style Directive Explanatory Notes

32

Example:
Formatting content
Don’t do this – Long sentences and long paragraphs which are difficult to scan. Heading one
Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text.

Do this – Fewer words, short sentences, bullet points, heading and sub-headings all help users more easily scan. Heading one
Heading level two
Paragraph and body text. Paragraph and body text.: • • • • Bullet point text Bullet point text Bullet point text Bullet point text

Heading level two
Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph and body text. Paragraph.

NSW Government Website Style Directive Explanatory Notes

33

5.2.

Writing style

Guideline:
Ensure writing style is tailored to your audience.

Rationale:
Approximately 6.2 million Australians have poor literacy and numeracy skills of which over a third (2.6 million) have very poor skills (often associated with learning disorders such as dyslexia). This affects their ability to complete work and daily tasks due to the considerable difficulty they experience with written materials39.

Implementation notes:
Readability tests measure those features of a text that can be analysed mathematically, for example the average number of words in a sentence or the number of syllables in the words. The results are used to indicate how easy or difficult a document is to read and usually provide an estimate of the reading grade or age required to understand the content. A variety of readability tests or formulas are available to determine the reading level of content on web pages such as the online Juicy Studio Readability Test at http://www.juicystudio.com/fog/ Understand who will be reading the content and adjust your writing style accordingly. e.g., ‘influenza’ if writing for doctors or health professionals or ‘cold and flu’ for general public. Content written for the general public should be written in plain English and aimed at a 6th grader. Use simple, commonly understood words to present each idea or concept in separate short sentences.

Additional information:
Nielsen, Jakob (2000). Chapter 3: Content Design in Designing Web Usability. Indianapolis: New Riders. Vassallo, S. (2003). Enabling the Internet for People with Dyslexia. Retrieved 9 June, 2005, from http://ebility.com/articles/dyslexia.shtml For tips and tricks on writing plain language see the United States Federal Government - plain language quick reference http://plainlanguage.gov/howto/quickreference/index.cfm

NSW Government Website Style Directive Explanatory Notes

34

5.3.

Writing layout

Guideline:
Use left justified text rather than fully justified text or right justified text.

Rationale:
Left justified text with even spacing between words is easier to read for all users but especially users with learning disorders such as dyslexia40. By having a constant starting point for text on each line and constant spacing between words, it is easier for the eye to scan and users can thus read much faster41.

5.4.

Correct language, spelling and grammar

Guideline:
Make sure all content is spelt correctly and is grammatically correct.

Rationale:
Spelling and grammatical mistakes diminish the integrity of a website and the content it presents. Care should be taken to ensure the correct use of words. Users may not be confident relying on the information if it does not appear credible or accurate.

Implementation notes:
• Proof read web page text rather than relying solely on automated spell-checking programs. Preferably get another person to proof-read your pages, as you often see what you think you typed and do not necessarily identify your own mistakes. • Use non-discriminatory language, taking care not to cause any controversy or offence to any section of the community. • Use correct spellings for common words. • Use Australian English rather than American English spelling.

Examples:
Commonly misused words
• Advice - guidance received (noun). Advise - to provide information or guidance (verb). • License - to grant permission or authorise (verb). Licence - the certificate or formal permission to do something (noun). • Compliment - an expression of praise (noun); congratulate (verb). Complement - that which completes (noun); counterpart (noun); add to (verb). • Its - singular ownership (where gender is unknown) e.g. “A website is the public presentation of an agency and its activities”. It’s - abbreviated version of “it is”.

NSW Government Website Style Directive Explanatory Notes

35

English Australian spelling examples
• Use “ise” instead of “ize” for verbs, eg. organise, harmonise. • Use “our” instead of “or”, eg. harbour, colour, favour. • Do not drop the leading “e” from “ment” words, eg. judgement, lodgement. • Use “program” instead of “programme”

5.5.

Page length

Guideline:
Page lengths should be appropriate to the page type and will depend on the purpose of the page.

Rationale:
It used to be argued that longer pages were frustrating or confusing for novice users who may not know how to scroll and who may lose their sense of context once they scroll down and lose sight of the navigation42. However, more recent research suggests that users are now more used to scrolling and actually take significantly longer to read the passages that are broken up over a number of small pages instead of one longer page43. This research is supported by recent feedback to the authors by users of government websites. This feedback suggests that users can find it frustrating when they have to individually navigate to and print a number of smaller pages once they have reached the information they are looking for. This is especially true if they have poor bandwidth and have to wait for each page to load.

Implementation notes
Try to understand how users are likely to use the information when determining how much content to put on one page. That is, is the page a navigation page to help the user get to the content they are looking for or is it a final destination page? Use shorter pages with minimal or no scrolling for: • Home pages and all navigation pages with lots of links to lower areas of the website, • Pages that need to be quickly browsed and/or read online, and • Pages with lots of graphics, as one long page with lots of graphics may take too long to load. Use longer pages with more content on the one page to: • Facilitate quicker reading of detailed information, • Align with the structure of a paper counterpart, and • Make pages more convenient to download, print, bookmark and share with other users Include a short table-of-contents to assist understanding of the page content and to aid navigation Include “Back to top” links or buttons on long pages at appropriate intervals.

NSW Government Website Style Directive Explanatory Notes

36

Examples:
Viewing options
The issue of printing multi page documents can be overcome by providing an option to view the document as a single page. The example below shows how this can be done.

Note: the page length is roughly equivalent to an A4 page with paragraphs set to 3 point spacing before and after.

Additional information:
Baker, R. (2003). The Impact of Paging vs. Scrolling on Reading Online Text Passages in Usability News 5.1 2003 published by Software Usability Research Laboratory (SURL) Wichita State University. Retrieved 26 June, from http://psychology.wichita.edu/surl/usabilitynews/51/paging_scrolling.htm Lynch, P. and Horton, S. (1999). Web Style Guide: Basic Design Principles for creating Web Sites. London: Yale University Press. pp.59-61. Lynch, P. and Horton, S. (2002), Web Style Guide (2nd Edition). New Haven, CO: Yale University Press. Retrieved 26 June, from http://www.webstyleguide.com/page/length.html

5.6.

Capitalisation

Guideline:
Avoid using uppercase for headings, menu labels and body text. Use lowercase and capitalise the first letter only.

Rationale:
Users read about 10% slower when reading in capitals44. The general consensus from literature is that lowercase is easier to read than uppercase because users do not read each individual letter but rather look at the overall shape of the word. For instance, PIE and TIE look very similar in capitals but can be more easily distinguished in lowercase: pie and tie. If the initial letter is larger than the other letters, there is also evidence to suggest the word will be read more quickly45.

NSW Government Website Style Directive Explanatory Notes

37

5.7.

Abbreviations and acronyms

Guideline:
Avoid the use of abbreviations and acronyms unless they are widely understood by your users e.g. NSW.

Rationale:
Government agencies often use abbreviations or acronyms that are widely understood within the agency or government but not widely understood by users of government sites. Whilst it is widely accepted practice for print publications to state the term in full in the first instance followed by the acronym in brackets, i.e. New South Wales (NSW), with websites, users may not always have the opportunity to read the first instance and may land at a page deep within a website from a search engine. Even if the acronym is defined at the top of each page, users may not notice it as they typically scan the page in no particular order and do not read all the content from top to bottom.

Examples:
Government abbreviations and acronyms that users are less familiar with
Acronyms to describe industry terms e.g. VET for ‘Vocational education and training’ Acronyms to describe NSW government agencies e.g. DADHC, DAA and DLG Where acronyms are used due to a perceived common understanding of them, there will still be some visitors who do not understand them (this is the World Wide Web after all), so the use of the “acronym” attribute is recommended. (E.g. <acronym title = “New South Wales”>NSW</acronym>)

NSW Government Website Style Directive Explanatory Notes

38

5.8.

Italics, underlining and bold / emphasis

Guideline:
The use of italics and underlining to emphasise text is best avoided. Bold or colour can be used in moderation to differentiate small amounts of text.

Rationale:
The use of an italic style is difficult to read on screen because there are not enough pixels to render italics legibly. Underlining text is not a useful way to emphasise text as it is easily confused with hyperlinks. Any text underlined will appear as a link regardless of colour, typeface or other formatting46.

5.9.

Animation and moving text

Guideline:
Avoid animation, blinking or moving text to attract attention.

Rationale:
According to Nielsen47, the use of animated words actually encourages users to ignore the text because users believe that anything containing moving or blinking words is likely to be an advertisement. Static text is easier to read for everyone but especially some user groups with disabilities, learning disorders and/or low literacy48. Text that is moving, flashing or scrolling may be inaccessible to some users with cognitive disabilities or learning disorders such as Attention-Deficit/Hyperactivity Disorder (ADHD) and dyslexia who may have difficulty focussing their attention to the task at hand49. Web Content Accessibility Guideline 7 (W3C, 1999): “Guideline 7. Ensure user control of time-sensitive content changes.

Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped. Some people with cognitive or visual disabilities are unable to read moving text quickly enough or at all. Movement can also cause such a distraction that the rest of the page becomes unreadable for people with cognitive disabilities. Screen readers are unable to read moving text. People with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects.”
If you must have animation, then stop the movement after one or two cycles.

NSW Government Website Style Directive Explanatory Notes

39

Additional information:
Bohman, P. (2004a). Cognitive Disabilities Part 1: We Still Know Too Little, and We Do Even Less in WebAIM. Retrieved 9 June from http://www.webaim.org/techniques/articles/cognitive_too_little Bohman, P. (2004b). Cognitive Disabilities Part 2: Conceptualizing Design Considerations in WebAIM. Retrieved 9 June from http://www.webaim.org/techniques/articles/cognitive_too_little Vassallo, S. (2003). Enabling the Internet for People with Dyslexia. Retrieved 9 June, 2005, from http://ebility.com/articles/dyslexia.shtml W3C. (1999). Web Content Accessibility Guidelines 1.0 W3C Recommendation 5-May-1999 Retrieved 26 June, 2005, from http://www.w3.org/TR/WCAG10/wai-pageauth.html#toc

5.10. Print friendly views
Guideline:
Ensure all relevant content has a print friendly option.

Rationale:
Because it is slower for users to read large amounts of text from a computer screen, users will often choose to print out information and read it offline. They may also wish to store the information and refer to it later. Note that a print friendly version of a long document does not print unnecessary page elements such as headers, left menus, feature boxes etc50.

Implementation notes:
Print friendly versions of pages can easily be achieved using CSS. If a page has not been built using CSS, then it is helpful to provide a print friendly button or link located within the ‘in-page tools’ area which points users to a print friendly page (with menus and headers removed). A print-friendly icon should appear on the right-hand side of the page, below the navigation, as illustrated in the example below:

NSW Government Website Style Directive Explanatory Notes

40

When dealing with multi-page articles, make sure there is a print friendly icon on each page that presents the whole article in its entirety and not just the current page. Previously it was necessary to generate and maintain 2 versions of all long web documents in order to provide a print friendly version. However, you can create and maintain one version of content and use CSS to present different versions of the same content.

Additional information:
Nielsen, Jakob (2000). Chapter 2: Page Design in Designing Web Usability. Indianapolis: New Riders. pp.9496. Creating printer friendly pages using CSS http://javascriptkit.com/dhtmltutors/cssmedia2.shtml Printer friendly pages using CSS (there is some material relating to this at “A List Apart”) http://www.designplace.org/tutorials.php?page=1&c_id=27 –

NSW Government Website Style Directive Explanatory Notes

41

Examples:
Print friendly icon
The icon informs users that the site has automatic print friendly pages.

Creating a print friendly page
Use a print style sheet in addition to a simple style sheet to create a print friendly page. Simple CSS <!—- Link to Simple CSS --> <link rel="stylesheet" media="screen" href="simple.css" type="text/css">

Print CSS <!—- Link to Print CSS --> <link rel="stylesheet" media="print" href="print.css" type="text/css">

NSW Government Website Style Directive Explanatory Notes

42

5.11. Legal Statements: Privacy, Copyright, Disclaimer, Terms and Conditions
Guideline:
All NSW Government agency sites will include the following legal statements as hyperlinks in the footer on every page: • • • • Privacy Copyright Disclaimer Terms and Conditions (if applicable)

Rationale:
Privacy, copyright, disclaimer and terms and condition information must appear on websites to inform users that permission has been obtained to publish the material that appears on the website, including photos, graphics and text. Agencies should ensure that they are either the owners of the material, or have permission to use the material that they are planning to display on their site. Provision of these statements is consistent with the legal requirements of providing information and services on the internet.

Additional information:
Australian Copyright Council's Online Information Centre http://www.copyright.org.au/ IP Australia http://www.ipaustralia.gov.au/ The Privacy and Personal Information Protection Guideline (http://www.gcio.nsw.gov.au/pages.asp?CAT=764&ID=790) The Information Management Copyright Guideline (http://www.gcio.nsw.gov.au/pages.asp?CAT=764&ID=784)

NSW Government Website Style Directive Explanatory Notes

43

6.
6.1.

Page and application components
Error handling

Guideline:
An error message needs to succinctly identify the problem to the user and explain what they need to do to fix it.

Rationale:
When errors occur, users become confused and do not understand the problem. Novice users often blame themselves instead of the technology and feel they don’t have control. Good error messages help all users recover as quickly as possible and enable users to get on with what they were doing. According to Baxley (2003, p.298) error alerts are best be reported in the context in which they occurred. When users are presented with error messages on different pages (e.g., in a pop up message box) it expects users to remember, locate and correct the errors reported once they return to the original page.

Implementation notes:
Error Context Users tend to treat a pop up error message as an alert and often close it without reading it. Therefore error messages are best displayed in the context in which they occur. Users need to easily be able to identify the cause of the error and how to recover from it. This can often be achieved by providing an example of how to correctly enter the data. Wording Error messages need to be written in an easy to understand language that constructively states the problem without criticising the user. System error codes should not be presented to the user. Implementation Error handling should not rely on client side scripting (such as JavaScript), as this may not always be present or available in the user’s browser. Wherever possible try to incorporate error prevention into the design of an interface. Validation to catch errors when they occur is essentially a second line of defence. When error checking a form, check all fields and present all errors at once. Do not use sequential error checking where you check the first form, present it back to fix, and then check for another error in another field, and so on. This is very frustrating for users. Colour Don’t use colour alone to indicate the areas where the error(s) occur; some users will not be able to see your colour coding. Use colour in conjunction with some other indicator, such as bold face text, or a box around the fields where there is an error.

NSW Government Website Style Directive Explanatory Notes

44

Examples:
Contextual error messages

Showing the error in the context in which it occurs

Clear, helpful error messages Initial form state

After a blank entry

After an invalid entry

NSW Government Website Style Directive Explanatory Notes

45

6.2.

System status

Guideline:
Always provide a clear indication about the state of a system, especially when a user has performed an action.

Rationale:
Users often abort or exit from a site or application if they cannot see anything happening as they assume that the site has crashed. Users are more tolerant of delays if they perceive that something is happening. According to Perfetti 51, there is not always a clear correlation between actual download speeds and the perceived speeds reported by users. Users who feel that they are making progress towards achieving their goal may perceive waiting times to be shorter.

Implementation notes:
When completing a multi-step process If a form is multi-part, then indicate to the user that they are at part “X of Y pages”. While processing a function • Inform users if a process is likely to take more than a few seconds (e.g., credit card verification). • If possible try to present the users with some indication that progress is being made52. This may be achieved via the use of waiting pages informing users of the system status. • It is also good practice to give users something to read whilst they are waiting, as this lowers their perceived waiting time and improves the user experience. Most importantly, this also stops them closing a window before a transaction has been processed. When a function has been performed For processes that take a considerably longer time or require formal confirmation, such as enquiries or orders, provide an option to print a receipt verifying the transaction and consider keeping the user notified as to its status via email. Confirmation messages need to be as specific as possible, that is, they need to provide more than just a generic “Thank you” message. Try to provide a summary of what has taken place, what its current status is and what the next steps will be.

Additional information:
• Quality is in the Eye of the Beholder: Meeting Users' Requirements for Internet Quality of Service, http://www.hpl.hp.com/techreports/2000/HPL-2000-4.html • The Truth about Download Time, http://www.uie.com/articles/download_time/

NSW Government Website Style Directive Explanatory Notes

46

Examples:
Informing users of current system status

6.3.

Uniform Resource Locators (URLs) and page titles

Guideline:
URLs • Site URL should be less than 75 characters so that users can easily email URL to a friend without it wrapping. • Site URLs should be as logical and descriptive as possible. • URLs containing long sequences of characters or numbers should be avoided if possible. Page titles • Pages should have unique page titles and should allow users to quickly and easily find the site and relevant page in their list of favourites. • The page heading of the current web page, followed by the full name of the Agency will be used as the HTML page title that appears on the Window page title.

Rationale:
Well formed, intuitive URLs and thoughtful, relevant titles make pages easier to find and help users to quickly work out where they are on a website. When users receive an email with a URL greater than 75 characters, the email address is likely to wrap over 2 lines and the second line may appear as black text. Novice users may not realise they need to cut and paste the two halves of the URL into their browser address field. URL’s can be useful in showing users the context of the content they are looking at. For example http://police.nsw.gov.au/recruitment/police_training_and_education/college_intormation is far more intuitive than http://someagency.nsw.gov.au/?id=A55B6B43-E24F-4EA3-A93E-40C0EC4F68E5.

NSW Government Website Style Directive Explanatory Notes

47

When changing a URL scheme or moving a document to a new location, leaving placeholders in the old location which performs an HTTP 301 redirect to this new location has a number of advantages. Firstly users who have bookmarked the old location will automatically and transparently be taken to the new location by their browser. Secondly search engines will rapidly update their records to point to the new location and will also transfer any ranking information they have from the old location to the new location. Page titles should include the agency name at the beginning followed by the page heading of the current web page or its purpose. This allows users to scan their list of favourites and quickly identify the agency and relevant page they wish to return to. This will also help with search engine optimisation as search engine robots look through page titles for keywords that match users’ search words.

Implementation notes:
• Follow the naming conventions for government websites53. • Site URLs should not change. If they must change the appropriate HTTP headers should be used to indicate the new location. “This page has moved. Please update your bookmarks” messages should be avoided. • Sites should be easily bookmarked and page titles should be unique and clearly identifiable. Avoid generic metadata page titles such as “Welcome to ABC site” as users often scan the first few keywords of their favourites list when they want to return to a site.

Additional information:
• Cool URL’s don’t change: Berners-Lee, Tim (1998) http://www.w3.org/Provider/Style/URI.html • Hypertext Transfer Protocol -- HTTP/1.1: The Internet Society (1999) HTTP 301 Moved Permanently http://www.w3.org/Protocols/rfc2616/rfc2616sec10.html#sec10.3.2

6.4.

Tables

Guideline:
Introduce tables with summary text, clearly define table headings and include padding with in table cell. If a table is long, use alternate colours in the table rows. Using tables for layout has accessibility issues, particularly for users with screen readers. As such, try to avoid the use of tables for layout unless it is absolutely necessary..

Rationale:
Introducing tables with summary text tells the user what information is about to be conveyed. Applying table headings to the layout helps a user interpret the information more easily. It can also help break up and define content between titles. Applying padding to a table creates white space in the individual table cell and makes the table less cluttered and easier to read.

NSW Government Website Style Directive Explanatory Notes

48

Using alternate colours in table rows for longer tables allows the user to have a visual reference point for where they are on the table. Again this makes a table easier to read.

Implementation notes:
Include your summary text at the beginning of the table. Give a brief description of what the table represents and any other special notes that may be required. Apply stronger colours to the table headers as this helps draw the user’s attention and works as a grounding point for the eye. You may also want to apply an increased font size and/or bold as this is a heading style and the same rules apply here to headings as they do when creating headings for content. Remember when applying colour to the table headings that the same rules apply to that of ‘text colour’ discussed earlier in this chapter. Give enough contrast between the colours allowing the title to be easily interpreted. Use colour related to the website colour palette. When applying colour to alternate table rows, it is suggested that you use a tint from the overall website colour palette. Remember not to make the tint too strong as this will make it hard for the user to read the content within each row. The same rules apply here again, when using colour with text, mentioned in the ‘text colour’ topic. Add table padding of roughly 3-5 pixels on each side of a cell. This will create enough white space around the text content and the table border making the content easier to read. As a general rule, when choosing colours for your table, remember to use colour from the website palette or colours that complement the website. As per Priority 2 W3C Web Content Accessibility Guideline V1.0, tables should not be used for layout unless the table makes sense when made linear. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linear version). If a table is used for layout, do not use any structural markup for the purpose of visual formatting.54

Additional information:
Note: When talking about tables in this topic, we are talking the displaying of tabular data and how to visually lay these out, not the use of tables in general to control webpage layout. Tables should not generally be used to control layout – use Cascading Style Sheets instead.

NSW Government Website Style Directive Explanatory Notes

49

Examples:
Table layout
This graphic illustrates a table layout with: • Table headings, dark green background with white bold text • Padding around each cell • Alternate row colouring • Also displayed are links within the table.

6.5.

Form design

Guidelines:
Forms can be made significantly more usable and accessible with the use of some simple techniques. Always take into consideration the fact that not all your users will be using a modern visual browser and a mouse, and design your forms accordingly.

Rationale:
Forms can often cause significant difficulties for a range of users including those with vision or mobility impairments, those with cognitive disabilities and those who do not use a mouse or pointing device as their primary means of navigation. The FIELDSET element allows developers to break their form elements into logical groups or steps. The LEGEND element allows developers to semantically apply a caption to each group of fields. This allows both visual and non-visual user agents to semantically associate a description or some instructional text with a set of data input fields. The LABEL element allows developers to create a formal relationship between some text and a form control. This allows non-visual user agents to be able to read the correct text for each form control and visual user agents can make the content within the LABEL element clickable, enhancing the usability for the form.

NSW Government Website Style Directive Explanatory Notes

50

Dropdown lists are more difficult to use as the user cannot see all the values without clicking on the list. Drop down lists are also more difficult to use for people with disabilities e.g., vision impairment and motor skill impairment.

Implementation Notes:
Group logically related form elements semantically and visually. Use appropriate syntax in your HTML code to formally express these groupings. Ensure labels are associated with their associated fields. Use appropriate syntax in your HTML code to associate label text with fields. Ensure that the tab order of your form is logical. Users should be able to easily navigate a form with their keyboard alone. Clearly distinguish between required and optional fields. Bear in mind that this distinction must be clear to the visually impaired, so colour alone is not sufficient55 . Provide contextual help to explain the meanings of specific field labels and help users complete the form. Provide examples close to the field to indicate to the users the required format to enter the data. Use the appropriate form inputs for data input fields to minimise input errors and maximise ease of use. For example use radio buttons to allow users to select one item from a small set of mutually exclusive options and have the most common value set as the default. Use checkboxes to allow users to easily select multiple items from a list. Consider using dropdown menus when dealing with five or more items or if there is limited space. However, use a list box when providing more options. Avoid the use of Reset or Cancel buttons on forms where users submit data. If you have to design a web application that absolutely requires a cancel button to help prevent user error consider: • Making the cancel button smaller than the next/submit/continue button and position it in a less prominent location (e.g., on the next line); or • Providing a clear "Exit" link or button at the top of the screen (where it won't accidentally be clicked) Ensure that users can ‘cancel’ a form by navigating away from the form.

Additional information:
• Dive Into Accessibility: Pilgrim, M (2002) Labelling form elements http://diveintoaccessibility.org/day_28_labeling_form_elements.html • Creating Accessible Forms: WebAIM (1998) http://www.webaim.org/techniques/forms/ • HTML 4.01 Specification: W3C (1999) • The Label element http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9.1 • Adding structure to forms: the FIELDSET and LEGEND elements http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 • HTML for forms (see Chapter 5 - technical section)

NSW Government Website Style Directive Explanatory Notes

51

Examples:
Form design

NSW Government Website Style Directive Explanatory Notes

52

6.6.

Login

Guideline:
If the Agency website has a secure online self service function, provide the login functionality on the lefthand side of the webpage below the Coat of Arms. This link will direct users to a secured page (https) where they can register for access to the secured website area, enter login details, or undertake other tasks such as password reminders. Ensure the password field replaces all characters with an asterisk. Provide a link on the left-hand side of the toolbar as in the NSW Government Website Style Directive. The link labelled ‘login’ will link to a secured page (https) where the user can enter their login details.

Rationale:
Logon credentials can enhance the user experience by providing security and personalisation. However users will often forget their login details and so steps should be taken to help users to remember this information and to allow them to recover it if it is lost. Overly restrictive password policies are often counter productive. Forcing users to constantly change their passwords and forcing them to use excessively complex passwords can often lead to passwords being written down carelessly on post it notes. Allowing users to have a fair chance of being able to memorise their passwords and to recover or reset lost passwords results in a higher rate of user success and lower levels of frustration.

Implementation notes:
Provide a means for users to obtain their forgotten password in real time. Alternatively ask for an email address (if an email address has been collected) so that a new password can be sent. Provide a register button for new users if appropriate. Allow users to change their passwords once logged on. Avoid forcing users to change their password too often or forcing users to select overly long and complex passwords 56.

Additional information:
The Centre for Password Sanity http://www.smat.us/sanity/

6.7.

Distinguish buttons and links

Guideline:
Links and buttons should be consistently implemented throughout the site. Links should be used for navigation purposes; that is to take the user to a page, document or other type of resource. Buttons should be used to execute a function or complete a task. The appearance of links and buttons should also be consistent and visually distinct from each other.

NSW Government Website Style Directive Explanatory Notes

53

Rationale:
This is one of the most inconsistently implemented guidelines on the internet due to a general lack of understanding of the difference between navigation (links) and functional execution (buttons) at the user interface level (since they are essentially both functions at a code level). A consistent implementation of links and buttons will provide visual clues and minimise the mental effort required by users to understand the context and purpose of each of these.

Implementation notes:
The exact method of differentiation will depend heavily on the site’s context and branding, however, the following are common methods: • Give the button a raised or 3 dimensional appearance. • Underline links and make them blue. Visited links should be purple. • Use an alternate background colour for buttons, but keep the foreground colour consistent with the rest of the site. • Retain the normal background colour for links, but provide an alternate foreground colour. • It is important that the link and button styles chosen for a particular site are used consistently. • Do not place the Cancel or Reset button before the Submit button. Users should be able to press the tab key on the last field in a form and expect to be taken to the default action (submit) rather than to a cancel action.

Additional information:
Galitz, W. (2002). The Essential guide to User Interface Design. New York: John Wiley & Sons, 406. Nielsen, J. (2000). Reset and Cancel Buttons. Retrieved 8 June, from http://www.useit.com/alertbox/20000416.html

6.8.

Reset buttons

Guideline:
Implement reset buttons with care. Consider the value of implementing the button to users in completing their tasks.

Rationale:
Reset and Cancel buttons are used in search functions and on online forms to clear all the information that has been entered into text fields. This means that a user does not have to manually clear all fields. Reset and Cancel buttons will invariably lead to user error as users often click on these accidentally instead of the submit button (Nielsen, 2000). This causes significant frustration for users who may not bother reentering the data, for example, if they have just written a long enquiry on a ‘contact us’ form. If users do not want to submit data they will generally click on the back or refresh button. If they are really worried about deleting sensitive data they have entered, novice users can always manually clear the fields.

NSW Government Website Style Directive Explanatory Notes

54

Implementation notes:
Avoid the use of Reset or Cancel buttons on forms where users submit data. If you have to design a web application that absolutely requires a cancel button to help prevent user error, consider: • Making the cancel button smaller than the next/submit/continue button and position it in a less prominent location (e.g. on the next line); or • Providing a clear "Exit" link or button at the top of the screen (where it won't accidentally be clicked); or • Providing a more explanatory link rather than providing a prominent "Cancel" button e.g., "Cancel my application". Do not place the Cancel or Reset button before the Submit button. Users should be able to press the tab key on the last field in a form and expect to be taken to the default action (submit) rather than to a cancel action.

Additional information:
Nielsen, J. (2000). Reset and Cancel Buttons. Retrieved 8 June, from http://www.useit.com/alertbox/20000416.html

6.9.

Search

Guideline:
Implement a search function supported with appropriate metadata that allows for keyword or inexact searches. There are two options in displaying the search functionality: • A ‘search’ link on the toolbar that links to the search page. • A keyword search field where users can enter the search criteria and click ‘go’ to initiate the search function, as illustrated below. This does not apply if an ‘advanced search’ function is implemented. Provide an advanced search for information rich sites where filters such as date range and publication type are useful. Provide access to the advanced search page through a link on the search page. Search results should include: • Status message indicating number of results found • Title hyperlinked to the page found • A short description • Document type and size (if not HTML). Consider also showing the date updated, alternate spellings, a relevance indicator, the document’s URL and breadcrumbs if this is possible with the search software being implemented.

Rationale:
The URL displayed in the search results can help advanced users determine the relevancy of the search result, especially if they are regular users familiar with the site structure.

NSW Government Website Style Directive Explanatory Notes

55

Additional information:
Search vs Browse: Schaffer, E. (2005). The answer you're searching for... is "Browse" in UI Design Newsletter – January, 2005. Retrieved 9 June 2005 from, http://www.humanfactors.com/downloads/jan05.asp

Examples:
Search link on the toolbar

Keyword search field on the toolbar

NSW Government Website Style Directive Explanatory Notes

56

Search results
Status message indication number of results found

Title hyperlinked to the page found

Short description

Document type indicated

Document size indicated

NSW Government Website Style Directive Explanatory Notes

57

6.10. Syndication feeds (Really Simple Syndication)
Guideline:
Sections of a web site that are regularly changing can provide syndication feeds (via RSS, a scripting language which groups information from a website into a single document) to allow users to stay up-to-date with changes. Appropriate uses include news, press releases, publications and policy documents.

Rationale:
The syndication of web content is an area of the internet which is growing rapidly57. The technology involved is not new (it is in fact simple and very similar to HTML publishing), however, the integration of this technology into mainstream tools and software 58 59 60 is rapidly increasing the usefulness of this approach.

Additional information:
Web Syndication http://en.wikipedia.org/wiki/Web_syndication What is RSS/XML/Atom/Syndication? by Dave Shea http://www.mezzoblue.com/archives/2004/05/19/what_is_rssx/

Examples:
• The Australia Bureau of Statistics http://www.abs.gov.au/websitedbs/D3310114.nsf/home/rss%20help • The National Archives of Australia http://www.naa.gov.au/rss_feed.htm • The Parliamentary Library http://www.aph.gov.au/library/rssinfo.htm • The Australian Broadcasting Corporation http://www.abc.net.au/services/rss.htm

NSW Government Website Style Directive Explanatory Notes

58

7.
7.1.

Typography
Font

Guideline:
Verdana will be used as body copy throughout all Government websites. It can be used in standard weight as well as bold. Alternative fonts should be provided in cases where users do not have Verdana on their operating system. Alternate fonts are Arial, Helvetica or other san-serif (without tails) fonts which are designed to be more legible on screen.

Rationale:
Some typefaces are more legible on screen than others; this is due to a number of characteristics such as spacing, letter height and screen resolution. Traditional serif fonts such as Times are more legible for print. When displayed on screen, serif fonts are harder to read because the computer screen’s resolution can not display it with full detail. Verdana was designed specifically for screen use and are clear and easy to read.

Additional information:
Web Style Guide, choosing the right type face: http://www.webstyleguide.com/type/face.html More information about the origin of the typeface Verdana: http://www.microsoft.com/typography/css/gallery/spec1.htm A list of common system font across the different Microsoft platform: http://www.kayskreations.net/fonts/fonttb.html University of Minnesota Duluth: Web Design References http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html

NSW Government Website Style Directive Explanatory Notes

59

Examples:
Screen fonts
Sample of acceptable screen font Verdana.

Sample of acceptable screen font Arial.

Sample of unacceptable screen font.

7.2.

Text colour

Guideline:
The body text should be in a high contrast colour to the background. Black coloured text with a white background is recommended. Body text is best read when it is black on a white background or in a dark colour with a high contrast to the white background. Avoid using type and background colours with the same or similar tonal value.

Rationale:
1 in 12 people have some sort of colour deficiency - about 8% of men and 0.4% of women.61 According to Lighthouse International, a US based organisation helping vision impaired people worldwide, “Partial sight, aging and congenital color deficits all produce changes in perception that reduce the visual effectiveness of certain color combinations. Two colors that contrast sharply to someone with normal vision may be far less distinguishable to someone with a visual disorder. It is important to appreciate that it is the contrast of colors one against another that makes them more or less discernible rather than the individual colors themselves.”62 The key point is to ensure that there is enough contrast between the background colour and the font colour. Checkpoint 2.2 of the WCAG 1.0 requires that “foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen." [Priority 2 for images, Priority 3 for text].63 Some studies64 65 suggest that black text on a white background generally produces results which are equal to or better than white on black, although the outcome depends on exact circumstances. Visual Experts summarises the following factors favouring black on white:

NSW Government Website Style Directive Explanatory Notes

60

• •

• • • •

The higher mean luminance level produces higher viewer adaptation level which produces better acuity. Reading smallish text depends on fine visual acuity. The higher brightness level causes the pupil to shrink, resulting in two beneficial effects. First, it improves retinal image quality by reducing spherical aberration - misfocus due to small refractive errors in the lens and cornea. Second, as all photographers know, the smaller light aperture increases depth-of-field. This means that the print stays in focus over a greater range of viewing distances. There is much less screen reflection of glare sources with a white background. Try turning the computer off and note that you are likely see reflections from other light sources in the room. The white screen washes out and often eliminates reflections. In offices and other well illuminated environments, there is less change in viewer adaptation level when looking away and then back to the screen. Black print on white background is more familiar because it simulates the text presentation in books and newspapers. Black objects on white background are slightly more visible than are white objects on a black background.”

Implementation notes:
When working with coloured backgrounds, (especially when the design requires a dark/strong coloured background) make sure there is enough contrast between the font and background colours used. Avoid using type and background colours with the same or similar tonal value. If your design does require light text on a dark background, consider increasing the font size to make the text easier to read. Some studies66 claim that when users are dealing with highly visible objects, secondary issues such as contrast polarity and colour are not as critical in determining visibility. Link colours need to be able to be defined by user specified or default browser settings (see guideline on link colours). If a custom link colour is required, it is best to use a different colour than that of the body copy so that the link may be easily defined. Do not use colour alone to differentiate a text link or indicate a changed state. Use bold face text or a box to emphasise an important artefact on the screen. Apply the following guidelines when using colour in headings: • Ensure the text is displayed in a high contrast colour to the background • Avoid using headings in default link colours • Include colours that are complementary to the overall design palette and do not clash with the primary colours of the design. (Colours from the 216 colour web safe palette can be used.)

NSW Government Website Style Directive Explanatory Notes

61

Additional information:
Visit Vischeck www.vischeck.com to see what an image or website looks like to a person with a variety of colour blindness conditions. Colour blindness – Basic information, design tools, corrective tools and tips – See STC Usability and User Centred Design site - http://www.stcsig.org/usability/topics/colorblind.html Can colour-blind users see your site? http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dn_voices_hess/html/hess10092000.asp Use the AIS Colour Contrast Analyser to check your colours for contrast; available from: http://www.visionaustralia.org.au/info.aspx?page=628

Examples:
Text and background colour combinations
On the left some recommended combinations of text colour are illustrated, whilst on the right the text examples shown are not recommended as it makes it difficult for the user to read.

Black and White:

Colour image:

Colour background:

NSW Government Website Style Directive Explanatory Notes

62

7.3. Heading styles and text sizes
Guideline:
Always use ems or percentages to set font sizes. Font size should be able to be controlled by the viewer; this gives greater flexibility for the user in setting font sizes suitable for their visual acuity. With the use of CSS, headings should be created with a hierarchy of size and not be defined by colour alone. Four type styles for headings are illustrated in the example Heading structure below. It is best to avoid using graphics as headings as this can cause problems with screen readers and text only browsers.

Rationale:
Having a fixed font size can restrict the flexibility of the user and cause problems when displaying on portable or small screened devices. Creating a hierarchy of size allows the user to define blocks of content and where they are within a page layout. Using colour alone to differentiate headings may mean that headings are not recognised by users relying on screen readers (or other devices that do not translate colour), or users who are colour impaired and unable to define between the contrasts of different colours. Difficulty identifying headings can make it difficult for users to understand how the page is structured.

Implementation notes:
• Leaving control of font size in the hands of the user allows people to have control over how they wish to view a site. The recommended unit for setting type is “em” or “%” which in context of the web is the same as font height • If graphic headings need to be used, make sure to accompany the title with ALT text. This will allow the title to be read by screen readers and will also be picked up in text only browsers. • Define the main heading style (H1) as the largest font size within the content. You can use a different colour to the body copy, but it is not necessary. As you define the heading styles H2, H3, H4, reduce the heading size. Remember to keep the colour in style with the website colour palette. • No line space is required after the headings 2, 3 and 4 etc, and before the paragraph text. Use tag margins in CSS to define the margins for heading styles. Sample: <style type="text/css"> h2,h3,h4,h5,h6 {margin:auto 0 0 0} p {margin:0 auto} </style>

NSW Government Website Style Directive Explanatory Notes

63

• At least one line space is required after the final paragraph and before the next heading. • Make sure that your lowest heading style can be differentiated from the standard body copy. This can be achieved with a different colour or typeface.

Additional information:
W3C, notes on colour in headings: http://www.w3.org/TR/WAI-WEBCONTENT/#tech-color-convey Web Style Guide, Hierarchy structure: http://www.webstyleguide.com/page/hierarchy.html Web Style Guide, Type size: http://www.webstyleguide.com/type/size.html W3C, Care with Font size: http://www.w3.org/QA/Tips/font-size

Examples:
Heading structure

NSW Government Website Style Directive Explanatory Notes

64

7.4.

Graphics vs. HTML (text)

Guideline:
Always provide an appropriate ALT-tag attribute for every graphic.

Rationale:
Images are effective as they can enhance the visual attractiveness of the page and support the content. People are naturally drawn to pictures, but a mismatched or irrelevant image will distract them from the critical content. When using images you have a greater flexibility in terms of what is presented in the layout. You have greater use of fonts, as they will be rendered as a graphic and do not require to be installed on the system. Images and text can be overlaid in a composition to add aesthetics to the page or entice the user to click (call to action). Remember, when creating images for your website, to keep them in style with the rest of the layout and design. Images can be used for call to actions like buttons, key slogans and as general images to enhance the overall user experience. Remember that images increase the file size and can delay a page in loading. Try and find a balance between images and HTML. Consider the type of connection speed your users have and keep the page weight down, accordingly. Another drawback to images is that they are not accessible to everyone such as people who are vision impaired, using screen readers and text only browsers. Always offer text alternatives such as the ALT text so you do not disadvantage anyone viewing the site.

NSW Government Website Style Directive Explanatory Notes

65

8.
8.1.

Graphics/Images/Photographs
Images size

Guideline:
Use graphics to illustrate content or the brand, but ensure the file size of the page is not too large as this will make it slow to load. Remember that most users come to government sites to retrieve information. Large amounts of imagery should not be used if it adds no value.

Rationale:
Users will often abandon a page if it takes too long to download and may leave the website altogether especially if they come to the site from a search engine. Optimising graphics to decrease page download size will help avoid this. If an image needs to be a certain size for clarity, and it is therefore very large in size, consider using a thumbnail of the image with the user clicking the thumbnail to view the larger version of the image. This allows the users to get an idea of the image and give them the option to view the larger version if they require.

Implementation notes:
When saving an image for the web, take into account what the image is being used for. For example, if the image can illustrate the desired topic or theme at a reduced size, this will save on file size and will allow for faster page load. The smaller an image that conveys the message can be, the less effect it will have on the overall page size. When saving images for the web try not to exceed 10-15KB per image. Larger images maybe used for the homepage although, as a general rule, try to keep the overall page size between 40-90kb, with the smaller size being reserved more for homepages.

Additional information:
Download speeds on images over different bandwidth speeds: http://www.webstyleguide.com/graphics/bandwidth.html Are We There Yet? Effects of Delay on User Perceptions of Web Sites: http://www.humanfactors.com/downloads/aug032.htm

NSW Government Website Style Directive Explanatory Notes

66

8.2.

Image format

Guideline:
The standard image format supported by most web browsers is GIF, PNG and JPG or JPEG. Other image formats such as TIF, PSD, BMP, EPS need to be converted to either a GIF or JPG before they can be viewed through a web browser.

Rationale:
GIF, PNG and JPG enable images to be compressed in file size allowing for faster loading on the web. GIF: (Graphic Interchange Format) web based format used for line art and flat colour. GIF images need to be saved in indexed colour mode. PNG: (Portable Network Graphics) is intended to be a single-image format only. It has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). In most cases, PNG also compresses around 5% to 25% better than GIF. JPG or JPEG: (Joint Photographic Experts Group) is a versatile format used for its low file size, as JPEG is a compressed file format with the ability to display millions of colours, best used for images with blending colours, such as photographs.

Implementation notes:
When working with GIF and JPG format avoid resizing as the format is already compressed and the quality of the image will suffer. Use the original high-resolution version and save it to the required size. When working with images such as logos, icons and widgets that have few colours and flat areas of colour with minimum colour bleed, it is best to save the image as a GIF. This will allow for greater reduction of file size and quality for this format. When working with images such as photographs, image montages and images that contain large amounts of colour with gradient and colour bleeds it is best to use the JPG format as this format has a better ability to compress this style and will result in better quality of the image compression. When saving GIFs and JPGs, the image needs to be saved at 72dpi. This is the most common screen resolution for most monitors. You will also need to make sure the JPG is in RGB (Red Green Blue) mode. If the JPG is saved as CMYK (Cyan, Magenta, Yellow, Black) the image will not display in the browser. RGB is the colour mode display for computer monitors, while CMYK is the colour format used for printing.

Additional information:
Working with GIFs on the web http://www.webstyleguide.com/graphics/gifs.html Working with JPGs on the web http://www.webstyleguide.com/graphics/jpegs.html

NSW Government Website Style Directive Explanatory Notes

67

Examples:
Image suited to GIF format
Sample of an image best suited for GIF, as the image has flat areas of colour with no colours bleeding.

Image suited to JPG format
Sample of an image best suited for JPG, as it contains bleeds, gradients and is a photo.

8.3.

Integrity of images

Guideline:
Text content, images and graphics should always be tasteful and take into consideration users from different cultures, religious and social groups. Always seek permission or guidance when using content in relation to different cultures and groups.

Rationale:
Some aboriginal cultures, for example, may find it offensive to display names and images of deceased people. One thing that might be acceptable in one culture or religion might be offensive in another.

Implementation notes:
Be sure to research your information first if dealing with culturally or socially sensitive issues. You can use the web to help with this – an embassy or cultural website for country or a group is a good place to start .

Additional information:
An example of implementing a statement on the displaying images of the deceased: “Please be advised that this section of the site contains names and images of people who are now deceased.”

NSW Government Website Style Directive Explanatory Notes

68

Taken from CBOnline (http://www.cbonline.org.au/index.cfm?pageId=43,0,26,0)

Dealing with Aboriginal cultural issues: http://www.daa.nsw.gov.au/publications/gettingitright.pdf

8.4.

Use of imagery

Guideline:
Be consistent with the formatting in which graphics and images are delivered.

Rationale:
Creating consistent design elements will enhance the user experience, create a better overall balance in the design and will allow for greater intake of information by the user.

Implementation notes:
Graphic treatment should be consistent throughout the site. For example, if you are applying a blue 2 pixel border to images, where possible this should be kept consistent through the site. Avoid scaling of images through HTML as this adds unnecessary weight to the file size (e.g., using a large size and scaling it down). If images require resizing, this should be done from the original through a graphics application such as Adobe Photoshop or Adobe Fireworks (formerly known as Macromedia Fireworks). Some website images provide meaningful content to users, however, a significant proportion of images used on the web only serve a decorative purpose. Try to separate out these two types of images by setting decorative images as background images (in your CSS) and content image elements (<img>) within your HTML. Placing ‘content images’ such as an illustrative photos, diagrams, company logos (which may act as the home button, in the header) within your HTML document will allow greater accessibility through the use of ‘Alternate text’ and ensure image data (via ALT text) remains visible to search engines.

8.5.

Alt text - Graphics/Images/Photographs

Guideline:
All informational images and graphics should include a short and meaningful text alternative for the image. Blank ALT text should also be present for decorative images and for those used as layout spacer elements graphics e.g., spacer GIFs.

NSW Government Website Style Directive Explanatory Notes

69

Rationale:
This is a Web Content Accessibility Guideline (W3C Guidelines). It also accommodates users in regional areas with poor bandwidth that may disable images to help pages load faster.

Implementation notes:
blank alt text (alt=" "). It contains a space between the quotes. If the IE bug that reveals a rectangle on mouse over offends the designer, then a title attribute with no space between the quotes can be added to decorative and spacer graphics.

Additional information:
GCIO Guidelines: Alternatives for Images for detailed information and implementation notes.

Examples:

Source: GCIO Guidelines: Alternatives for Images

NSW Government Website Style Directive Explanatory Notes

70

9.
9.1.

Technical standards
Screen resolution

Guideline:
The issue of which screen resolution to design for is a complex one without a single clear answer. The range of screen resolutions used to access web sites is diverging as both mobile devices and LCD screens become more popular. While there is no single best-practice method of dealing with this issue at this time, there are a number of techniques which can be implemented to help optimise a design for a range of screen resolutions. Which techniques are most appropriate on a particular site depends on a range of issues including: • Purpose and content (text heavy vs. graphical/experiential) • Site design • Target audience • Existing user base

Rationale:
With the proliferation of laptops and flat screens in Australia, the percentage of users in Australia using 800 X 600 has declined significantly over the last 2 years. A number of public sources report approximately one third of internet users are still using an 800 X 600 resolution.

See The Counter.com http://thecounter.com/stats/2005/April/res.php
Increased usage of handheld and mobile devices to access the internet introduces a growing audience with much smaller screens that must be catered for. Often fluid designs offer greater flexibility across a range of screen resolutions, however, very wide lines of text can make content harder to read (i.e. on widescreen displays).

Implementation Notes:
Min/max width: Two CSS properties; min-width and max-width are useful in dealing with the issue of variable screen resolution as they allow you to achieve a “liquid” effect within the constraints of a minimum and maximum width. The downside of this approach is that it is not supported by all browsers, particularly MS Internet Explorer. Various JavaScript based approaches have been created to work around this issue. Media-handheld: The CSS Specification67 outlines a specific media type for handheld devices. In theory this allows developers to write a style sheet for normal screens and an alternate style sheet for handheld devices. Unfortunately this approach is also impeded by poor browser support. Dual width layouts: Dual width layouts use JavaScript to detect the user’s screen resolution when the page loads. A different CSS file will be loaded in depending on the user’s screen resolution. The disadvantage of this solution is that the developer must spend the time creating the required CSS code for each of the target screen resolutions. Zoom layouts: The term ‘Zoom Layouts’ was coined by accessibility expert Joe Clark. This technique also involves offering users an alternative style sheet, but rather than targeting a different screen resolution it

NSW Government Website Style Directive Explanatory Notes

71

targets low vision users. The alternate style sheet strips out the bulk of the design elements and presents users with a high contrast version of the core content. Give users the choice: If you have the appropriate server side functionality in place, you can provide users with a mechanism to select from a range of styles. The actual functionality can be implemented by applying classes and IDs to the body element, or by serving different CSS files. This can take some effort to set up, but often provides an optimal solution to a range of issues, including screen resolution. Obviously a pragmatic approach must be taken. Specifically targeting a large number of different configurations is time consuming and often impractical. When addressing these issues focus should remain on audience and purpose.

Additional information:
CSS 2.1 Specification Minimum and maximum widths: 'min-width' and 'max-width': http://www.w3.org/TR/2005/WD-CSS2120050613/visudet.html#min-max-widthsb Recognized media types http://www.w3.org/TR/2005/WD-CSS21-20050613/media.html#media-types Max-width in Internet Explorer http://www.svendtofte.com/code/max_width_in_ie/ Let Users Control Font Size http://www.useit.com/alertbox/20020819.html The Effects of Line Length on Children and Adults’ Online Reading Performance http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm Ideal line length for content http://www.maxdesign.com.au/presentation/em/ Stylesheets for handheld devices http://css-discuss.incutio.com/?page=HandheldStylesheets Zoom the Web http://www.joeclark.org/atmedia/atmedia-NOTES-2.html Big, Stark & Chunky http://www.alistapart.com/articles/lowvision/

Example:
Giving users the choice

NSW Government Website Style Directive Explanatory Notes

72

9.2.

Browser specifications

Guideline:
In general, code to modern, best practice standards, but ensure that your site degrades gracefully in the absence of styles, scripts, images and colour, across a range of browsers and devices.

Rationale:
It is often difficult to develop best practice websites while maintaining consistent presentation across older browsers. By focusing on two main concerns, that the site is optimised for the vast majority of your target audience and that the site is accessible to 100% of your target audience, a satisfactory balance can be achieved.

Implementation notes:
Ideally three levels of browser compatibility should be identified, addressed and tested: Optimal: Degraded: Baseline: True to original design Most branding retained and all meaning and structure retained Layout and branding are severely degraded or not retained at all. Users should still be able to perform all actions and access all content. Look closely at your site usage statistics for the previous 12 months. Separate out the browser versions and sort them from the browsers with the most hits to those with the least hits. These browsers should then be grouped into the three categories listed above. For example:

NSW Government Website Style Directive Explanatory Notes

73

Optimal: Degraded: Baseline:

Internet Explorer 5.2 & above, Opera 7 & above, Firefox, Safari, Mozilla 1.2 & above, Netscape 7 & above Internet Explorer 4 & 5, Netscape 4 & 6 Lynx, Jaws

Test your site in a range of browsers, covering each of these three groups, to ensure that all users are able to view your content, navigate their way around the site and perform any of the functions your site provides. Attempting to force users to upgrade their browsers before being able to access your website is not an appropriate solution to this problem as often users will not have the choice of upgrading, for example, due to insufficient bandwidth to download a large browser installation file. It is worth periodically re-evaluating your browser lists, as usage patterns are likely change over time. Although there are bound to be exceptions, it is generally recommended that web developers avoid the use of browser sniffing techniques. Serving different content or styles to different browsers can rapidly become a maintenance headache. If web statistics are not available on the website, refer to GCIO for the web statistics on NSW government websites such as www.nsw.gov.au.

Additional information:
http://www.w3schools.com/browsers/browsers_stats.asp http://www.websidestory.com/products/web-analytics/datainsights/spotlight/05-102005.html?lpos=Promotions&lid=Promotions+-+Position+3 http://www.digital-web.com/articles/fluid_thinking/ http://hesketh.com/publications/inclusive_web_design_for_the_future/ http://www.webaim.org/techniques/css/3

Examples:
Browser levels
<!—- basic stylesheet for older browsers --> <link rel="stylesheet" href="/global_styles_basic.css" type="text/css"> <!—- more advanced stylesheet for modern browers --> <style type="text/css"> @import url(/global_styles_advanced.css); </style>

NSW Government Website Style Directive Explanatory Notes

74

Optimal

Degraded

Baseline

NSW Government Website Style Directive Explanatory Notes

75

9.3.

Frames

Guideline:
Generally, frames are not to be implemented on NSW Government websites.

Rationale:
• Frames can cause accessibility problems for some users with screen readers. • Frames can be confusing to users and yield unexpected results. • Frames make it difficult for users to print a page, particularly if the frame requires scrolling to see all the content. • Frames make it difficult to add pages to browser favourites and return back to that specific page. The problems occur when linking from an external source to a page of content within a frameset. • Search engines will link to the document that contains the content which best matches the users search, regardless of whether this document was originally in a frameset or not. This may result in users being taken to a piece of content that lacks any header, branding or navigational elements.

Implementation notes:
Frames should be used sparingly. If they must be used, the appropriate accessibility guidelines should be adhered to.

Additional information:
Why Frames Suck (Most of the Time) http://www.useit.com/alertbox/9612.html WCAG 1.0: Frames http://www.w3.org/TR/WCAG10-HTML-TECHS/#frames

9.4.

Pop-up windows (JavaScript based)

Guideline:
The use of JavaScript pop-up windows should generally be avoided. However, there are some instances where they may be appropriate. Carefully examine alternatives before settling on pop-up windows as a solution to your particular problem. If you do implement pop-up windows make sure that you code them in an accessible way.

Rationale:
Pure JavaScript pop-up windows breach Web Content Accessibility Guidelines - checkpoint 10.1. "Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user" 68. Some designers prefer to use pop-ups windows so users can easily return to their site. However, in numerous usability tests performed by the authors, we have witnessed the opposite. Novice users actually have trouble returning to the original site as they do not realise a new window has opened and they cannot click on the browser ‘Back’ button. Users have also been observed accidentally using the scroll bar & browser

NSW Government Website Style Directive Explanatory Notes

76

navigation on the window behind and then getting very confused when the window they are interacting with suddenly disappears. Many browsers and toolbars block some types of pop-ups, thus preventing users from seeing the content in these windows altogether. In addition users who do not have JavaScript available will also miss out on content provided in JavaScript based pop-up windows alone. If users want to open a new window both novice and experienced users have other ways they can easily achieve this. E.g., right click link > Open in new window.

Implementation notes:
If pop ups must be used for whatever reason, ensure that users who do not have JavaScript are still able to access the content. Indicate the fact that a new window will open via the use of an icon or instructional text.

Additional information:
Accessible Pop-up Links http://www.alistapart.com/articles/popuplinks/ Caroline's Corner: A Farewell to Pop-Ups http://www.usabilitynews.com/news/article1673.asp

Examples:
Below is an example of an accessible pop-up from http://www.alistapart.com/articles/popuplinks/. If JavaScript is enabled the link_popup() function is triggered, return false prevents any further actions being triggered by the link. In the absence of JavaScript the href/target combination will be triggered. <a href="http://example.com" target="_blank" onclick="link_popup(this); return false">pop me up</a>

9.5.

Metadata

Guideline:
For guidelines concerning metadata please refer to AGLS, Dublin Core and Victorian Government standards. Also refer to State records information.

Additional information:
NSW Recordkeeping Metadata Standard (NRKMS) http://www.records.nsw.gov.au/publicsector/erk/metadata/rkmetadata.htm National Archives of Australia – Recordkeeping AGLS Metadata Standard http://www.naa.gov.au/recordkeeping/gov_online/agls/summary.html Dublin Core Metadata Initiative http://dublincore.org/

NSW Government Website Style Directive Explanatory Notes

77

9.6.

Cookies & Platforms for Privacy Principles (P3P)

Guideline:
Cookies can provide an improved browsing experience to end users, allowing applications to track sessions and remember user preferences. However cookies should be used judiciously and care should be taken to ensure that you are not locking out users or compromising user data. Remember to always clearly state why you are using cookies and what information you are tracking.

Rationale:
Cookies can be very useful in many situations and while they do not in themselves constitute a threat to users’ privacy, many users are wary of sites leaving cookies on their computers. A clearly written privacy policy allows users to make informed choices.

Implementation notes:
Cookies may be used to store non-sensitive information limited to 50-150 bytes. There should be a clear and identifiable benefit to the user, such as to save them having to re-enter the same data in the future. Where possible, the user should be given the option of using a cookie via ‘remember me’ functionality or checkbox. Sensitive data should not be stored in cookies as cookie data is stored in plain text on the users’ computer (i.e. it is not encrypted). This becomes even more pertinent when the user is on a shared computer such as in a library or internet cafe. Due to browser settings and security preferences, some users may not be able to use cookies. If at all possible, avoid making cookies a requirement for using your websites. Make an effort to clearly communicate the purpose of your cookies in your privacy policy and by conforming to the Platform for Privacy Preferences (P3P - http://www.w3.org/P3P/). Platform for Privacy Preferences P3P requires you to explicitly communicate four things to your users: • Entity - who you are and how a user can contact you • Disclosure - where your written policy is on your site • Assurances - what third party or law ensures that you are doing what you say you are doing • Data Collection and Purpose - what Data Elements you are collecting and how you are using them. This information is stored in a specific format and location on your web site, allowing P3P aware software to read it and either accept or reject cookies based on the users’ preferences. For example the “High” setting in the Privacy options in Internet Explorer results in all cookies being rejected unless the site trying to send the cookie has a valid P3P privacy policy.

Additional information:
Platform for Privacy Preferences (P3P) Project: W3C http://www.w3.org/P3P P3P Toolbox http://p3ptoolbox.org/guide/

NSW Government Website Style Directive Explanatory Notes

78

9.7.

Cascading Style Sheets (CSS)

Guideline:
Use Cascading Style Sheets (CSS) to control the presentational aspect of your website. Avoid embedding formatting in your HTML code.

Rationale:
A CSS offers a clean way to separate your structure and data (HTML, content, etc…) from the presentation (fonts, colours, layout, etc…). This has some very significant benefits to both developers and end users including: For developers: • More flexible. Much easier to perform site wide changes. • Cleaner code. Easier to maintain content. For end users: • Less to download. External CSS files are cached by the browser, so they only have to be downloaded once. • Greater potential for customisation. From style switchers to user style sheets, the user has more choice over how content is accessed. • Targeted to specific devices. Print and mobile style sheets can provide optimal presentation for the medium.

Implementation notes:
Wherever possible keep your CSS in an external file. Use of the style=”” attribute and the <style> element negates many of the benefits of CSS because it embeds presentation information within the structure and data of a site. Wherever possible, use HTML based selectors (type selectors) rather than class or id selectors. Classes and ids serve a purely presentational rather than a semantic purpose and again fall into the trap of embedding presentational information in HTML. A useful way to do a quick “sanity-check” on classes and ids is to check if they describe how something looks (e.g., left-panel or red-border) rather than what it means in the context of the document (e.g., main-navigation or footer). “Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and authordefined classes may not.” - http://www.w3.org/TR/CSS21/selector.html#class-html Different browsers and devices have varying levels of CSS support so make sure you test your CSS in a range of browsers and ensure that it degrades gracefully. Please refer to Browser specifications for more information. A similar technique, known as progressive enhancement can also be used to provide additional functionality to browsers that support it. An example of this is the use of the min-width and max-width properties, which are supported by some browsers, but ignored by those that don’t have support for CSS 2. Some website images provide meaningful content to users, however, a significant proportion of images used on the web only serve a decorative purpose. Try to separate out these two types of images by keeping decorative images as background images in your CSS and content images in <img> elements in your HTML.

NSW Government Website Style Directive Explanatory Notes

79

Additional information:
Max Design Web standards checklist http://www.maxdesign.com.au/presentation/checklist.cfm Progressive Enhancement using CSS http://css-discuss.incutio.com/?page=ProgressiveEnhancement W3C: Separation of semantic and presentational markup, to the extent possible, is architecturally sound http://www.w3.org/2001/tag/doc/contentPresentation-26.html W3C Working draft: Cascading style sheets, level 2 revision 1 http://www.w3.org/TR/CSS21/

9.8.

HTML & XHTML

Guideline:
HTML is a descriptive, rather than presentational language – carefully consider the meaning of your documents and their parts and mark them up appropriately. XHTML is a combination of XML and HTML. XML is a scripting language which describes the structure and format of information, rather than how this information is displayed (for example, documents can be structured so as to generate HTML, Word or PDF documents). Combined with HTML, XHTML is designed to display and structure data. Select an HTML version and use it in a consistent and valid manner.

Rationale:
One of the most fundamental questions about HTML is which version to use. There is no ‘correct’ version of HTML; all versions of HTML (from HTML 2.0 to XHTML 1.1) are perfectly useful and this is not likely to change in the foreseeable future. The most commonly used versions are HTML 4.01 and XHTML 1.1, each of these have advantages and disadvantages. HTML 4.01 is the last of the non-XML branch of HTML versions and is the most widely implemented HTML version. XHTML 1.1 is the most current HTML specification and is rapidly being adopted by developers. As the ‘X’ implies, XHTML is based on the XML language. This brings with it some notable advantages and disadvantages. Advantages: • Interoperability with XML tools • Greater support for a wide range of languages/character sets • Stricter syntax – due to the relation between XHTML and XML, syntax must be correct in order to access an XML library. Disadvantages: • Limited support among authoring tools and browsers • Most XHTML is parsed as HTML anyway (http://hixie.ch/advocacy/xhtml) • Stricter syntax, in that tags must be syntactically correct, while HTML allows for a lot more leniency.

NSW Government Website Style Directive Explanatory Notes

80

The fact that ‘Stricter syntax’ appears in both lists is no mistake. Depending on the authoring tools used and the level of knowledge and care developers take in creating their content, strict syntax can either be a great enabler or a huge burden. The most important point is that whatever version you choose, you implement it correctly and create valid HTML documents. Semantics HTML is a language whose primary purpose is to markup the meaning of a document. Blocks of content should be wrapped in the tags that most accurately describe what the content means. This logic also applies to the structure of the document and the nesting of HTML tags within one another. Using semantic markup can have tangible benefits across a range of browsers, assistive technologies (such as screen readers) and even search engines.

Implementation notes:
A range of tools exist for validating HTML documents. Online validation tools: • the W3C’s Markup Validation Service • the WDG HTML Validator Installable validation tools: • HTML Tidy • HTML Validator (Firefox Extension)

Additional information:
Brainstorms & Raves: Semantics, HTML, XHTML, and Structure http://brainstormsandraves.com/articles/semantics/structure/ W3C: Hypertext Markup Language (HTML) Home page http://www.w3.org/MarkUp/

9.9.

Appropriate use of GET and POST

Guideline:
Use the HTTP GET method when performing actions that don’t result in a significant change of data and that are likely to always return the same information. Use the HTTP POST method for when performing actions that result in significant data being changed on the server.

Rationale:
A number of browser plug-ins have caused a stir because they silently pre-fetch all links in any document visited by the user. The idea behind this is to cache this data before the user requests it and offer the user a faster browsing experience. The trouble starts when one of those links says “Delete my user profile”, “Sign

NSW Government Website Style Directive Explanatory Notes

81

me up” or “Add to cart”. The fact is that these plug-ins are obeying the HTTP specification, the real problem is using the HTTP GET method to perform actions that have side effects. GET also has limitations on the volume and character set encoding of data being sent to the server, making POST a more viable alternative for many forms.

Implementation notes:
• The GET method is useful on forms that have no side effects. Searches are a great example of forms that benefit from the use of GET as they allow users to bookmark the results page. • Sign up, contact and order forms should always use the POST method as they have an effect on the server. • A useful sanity-check is to ask yourself: ‘what would happen if someone bookmarked this link?’

Additional information:
W3C Recommendations: Forms in HTML documents http://www.w3.org/TR/html4/interact/forms.html#submit-format W3C Hypertext Transfer Protocol – HTTP/1.1 http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.1.1 Universal Resource Identifiers – Axioms of Web architecture http://www.w3.org/DesignIssues/Axioms#state XML.com:When to use GET? http://www.xml.com/pub/a/2002/04/24/deviant.html Methods GET and POST in HTML forms – What’s the difference? http://www.cs.tut.fi/~jkorpela/forms/methods.html Designing Forms in HTML: Get vs. Post http://medstat.med.utah.edu/kw/advhtml/forms/form3.html Google Web Accelerator: Hey, not so fast - an alert for web app designers http://www.37signals.com/svn/archives2/google_web_accelerator_hey_not_so_fast_an_alert_for_web_app_ designers.php

NSW Government Website Style Directive Explanatory Notes

82

Examples:
A sign-up form is an appropriate use of the POST method

A search form is an appropriate use of the GET method

NSW Government Website Style Directive Explanatory Notes

83

9.10. HTML techniques for forms
Guideline:
With the use of some simple HTML techniques, forms can be made significantly more usable and accessible. Always take into consideration the fact that not all your users will be using a modern visual browser and a mouse and code your forms accordingly.

Rationale:
• Forms can often cause significant difficulties for a range of users including those with vision or mobility impairments, those with cognitive disabilities and those who do not use a mouse or pointing device as their primary means of navigation. • Users of assistive technologies, such as aural browsers, can benefit significantly from the use of HTML elements such as fieldset, legend and label, as these elements help to group fields with relevant contextual information. • Users who navigate without the aid of a pointing device, such as a mouse, move through HTML content in a linear way, from the top left to the bottom right (or from the start of the HTML code to the end). This can result in two problems: • • If labels are not positioned next to their respective inputs it can be very disorienting for these users, and If the sequence of input fields in the HTML code does not follow the logical order of the form, the user will end up moving around the form in order than does not make sense.

All forms should be accessible via a keyboard alone and should not contain functionality that depends on the presence of a pointing device or JavaScript. Using JavaScript to manipulate the form by setting focus, showing/hiding form elements or submitting the form can cause considerable difficulties. For example, using a ‘select-and-go’ drop down box as a navigational widget can cause problems for users without access to a mouse, as the form will submit each time an option is selected.

Implementation notes:
HTML elements The label element allows developers to explicitly link a field’s label with the field itself. The label element uses the for= attribute to point to the id= attribute of a specific form control. This allows non-visual user agents to read the correct text for each input and visual user agents will make the content within the label element clickable, enhancing the usability for the form. On larger forms it can be useful to group related fields together using the fieldset and legend elements. The fieldset element surrounds the group of elements and the legend element will contain some text describing the group. For more information please refer to the example titled “Fixing an inaccessible form” below. Sequence If at all possible, layout the HTML code for your form in a sequence that relates to the purpose of the fields. However, this is not always possible. For example, if you are retrofitting a legacy form, you may not always

NSW Government Website Style Directive Explanatory Notes

84

have the option of recoding the entire layout. In these exceptional cases it may be necessary to apply a fixed tab index to your form. A common misconception is that a tab index needs to start at 1 and be made of a sequential numbers. However the tab index can contain any number from 1 through to about 32,000 and only needs to be in ascending numerical order. In other words you can have gaps in your tab index, your browser will just look for the next highest number. Because of this is can be useful to start at a number like 100 and then proceed in lots of 10 so that elements can easily be inserted in future without having to recode the entire sequence. For more information please refer to the example titled “Fixing an inaccessible form” below.

Additional information:
Web Accessibility in Mind: Creating Accessible Forms http://www.webaim.org/techniques/forms/ HTMLdog.com: Accessible forms http://www.htmldog.com/guides/htmladvanced/forms.php Web Usability: Accessible Forms http://www.usability.com.au/resources/forms.cfm W3C Recommendation: Forms http://www.w3.org/TR/REC-html40/interact/forms.html The Accessibility Institute: Accessible Forms http://www.utexas.edu/research/accessibility/resource/how_to/form/radio_buttons/radio_buttons.html

Examples:
Fixing an inaccessible form 1. Initial HTML code: The main problem here is that the field labels are not in context with their respective fields.

2. Initial rendering:

This would be read by JAWS (a popular screen reader) as:

“First name, Last name, Email address, Edit (hypertext), Edit (hypertext), Edit (hypertext)”
As you can see it is difficult to discern which labels relate to which inputs.

NSW Government Website Style Directive Explanatory Notes

85

3. Adding <label>s: The for= attribute value of the <label> element should match the id= value of the relevant field.

4. Adding a <fieldset> and <legend>:

5. Improved rendering:

This would be read by JAWS (a popular screen reader) as:

“First name edit, Last name edit, Email address edit”
This is a considerable improvement, but can still cause problem with assistive technologies that do not support the label element. 6. Making the form linear: The form code is now in a logical, sequential order with each label being followed by the relevant input.

7. Final rendering:

NSW Government Website Style Directive Explanatory Notes

86

Specifying a tab order for a nonlinear form

9.11. HTML techniques for tables
Guideline:
Where data tables are required, use semantic HTML code with the appropriate accessibility hooks to help users of assistive technologies understand the table data. Use CSS rather than tables for page layout wherever possible.

Rationale:
Using tables for layout purposes can cause significant accessibility problems and negates many of the benefits of CSS. “Using markup improperly -- not according to specification -- hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it.” http://www.w3.org/TR/WAI-WEBCONTENT/#gl-structure-presentation Data tables are easily understood by sighted users, as they are quickly able to grasp the overall context and layout before looking for specific information. Unsighted users, on the other hand, have significant troubles with gaining the initial, ‘big-picture’ impression of how the table is structured and this makes it much more difficult for them to understand the data that is being read out to them.

Implementation notes:
The caption element and summary attribute Titles for data tables should be explicitly linked to the tables themselves. This is best achieved through the use of the caption element. The caption element is generally rendered above the table (but this can be changed using CSS) and semantically links the title with the table. Another useful accessibility technique that can be used to describe a table is the summary= attribute. The summary attribute should describe the purpose and overall structure of the table. This allows assistive

NSW Government Website Style Directive Explanatory Notes

87

technologies such as aural browsers to read this content prior to diving into the table itself, giving nonsighted users an idea of what is to come. This can considerably aid non-sighted users in understanding table content. The <th> element Data tables will usually contain header fields and data fields. While there are several ways to differentiate between these two types of cells in HTML, the simplest and most flexible method is by using the <th> (table header) element. Visual user agents may present header cell text with a bold font; however you can also use the <th> element as a hook for applying specific CSS styles. Speech synthesizers may render header information with a distinct voice inflection. Complex data tables There are a range of other HTML techniques that can be used to make complex data tables (tables with multiple levels of headings) more accessible. These techniques have been thoroughly documented by Roger Hudson in his excellent article ‘Accessible Data Tables’ which is available at http://www.usability.com.au/resources/tables.cfm.

Additional information:
W3C Recommendations: Tables in HTML documents http://www.w3.org/TR/REC-html40/struct/tables.html Web Accessibility in Mind: Creating accessible tables http://www.webaim.org/techniques/tables/ JimThatcher.com: Accessible Tables http://www.jimthatcher.com/webcourse9.htm Techniques for Accessible HTML Tables http://www.ferg.org/section508/accessible_tables.html

NSW Government Website Style Directive Explanatory Notes

88

Examples:
Retrofitting an existing data table 1. The initial table

2. Adding th elements

NSW Government Website Style Directive Explanatory Notes

89

3. Adding a summary and caption

4. Adding id and headers attributes and some finishing touches

NSW Government Website Style Directive Explanatory Notes

90

9.12. HTML techniques for links
Guideline:
The markup used for links can have an immediate impact on the usability and accessibility of a site. If the link text alone is not enough to describe the purpose and target of a link, supplement the link text with a title attribute. If using JavaScript for popup windows and other link affects, ensure the link continues to work in the absence of JavaScript. Place spacers between adjacent links, or markup sets of adjacent links using relevant markup such as lists.

Rationale:
Hyperlinks are one of the core building blocks of the internet and are a fundamental part of any website. Because of this, extra care should be taken in marking up a site’s hyperlinks so that all users get maximum benefit.

Implementation notes:
Title attribute The title attribute can be applied to links (and a wide range of other HTML elements) to augment the onscreen text. The title attribute will generally be rendered as a tool tip in visual browsers and aural browsers will often read out the contents of the title attribute along with the link.

‘…if you read the link text by itself, out of context, and can't figure out what it points to, add a title.’ http://diveintoaccessibility.org/day_14_adding_titles_to_links.html

However, ensure the link itself is meaningful out of context, rather than relying solely on a Link Title attribute. JavaScript When using JavaScript to enhance a website, it is vital that your code degrades gracefully when JavaScript is not present. A simple method is to provide a valid value in the href attribute. This allows users without JavaScript to still access the content on the link. Placing “return false” after your JavaScript function will cause JavaScript enabled browsers to stop processing before they reach the href attribute. Another useful accessibility technique with JavaScript based links is to provide an onkeypress event in addition to the normal onclick event. This means that a JavaScript window can be opened via either a mouse click (onclick), or a keyboard key press (onkeypress). Most modern browsers will trigger an onclick event even when the keyboard is used, but the onkeypress guarantees your script will run when users are not using a mouse. The difference between onkeypress and onclick is simply the medium by which the user accesses the JavaScript linked information.

Additional information:
W3C Recommendation: Tables in HTML documents http://diveintoaccessibility.org/day_14_adding_titles_to_links.html Useit.com: Link titles help users predict where they are going (Alertbox Jan 1998) http://www.useit.com/alertbox/980111.html W3C Recommendation: Links in HTML documents http://www.w3.org/TR/REC-html40/struct/links.html

NSW Government Website Style Directive Explanatory Notes

91

htmldog.com: Accessible Links http://www.htmldog.com/guides/htmladvanced/links/ Also see sections 4.8 Skip to content link,

Examples:
Code sample

This code sample demonstrates three key aspects of good linking; firstly the title attribute is providing additional context for the link, secondly both the onclick and onkeypress JavaScript events are present and thirdly the return false; and href are working together to ensure the link will work with or without JavaScript.

9.13. HTML techniques for images
Guideline:
Text equivalents must always be provided for images. Users of aural browsers and users who browse with images turned off are two key groups who benefit greatly from correctly coded images.

Rationale:
Providing text equivalents for images is a Priority 1 checkpoint in the Web Content Accessibility Guidelines. This essentially means that it is mandatory across all NSW government websites.

‘Guideline 1. Provide equivalent alternatives to auditory and visual content.’ - http://www.w3.org/TR/WAIWEBCONTENT/#gl-provide-equivalents

Implementation notes:
Content images If the images you are using are core to your website content and are there to communicate information to your users it is vital that good ALT text is written for each image. There are a number of common traps that developers fall into when writing ALT text – the bulk of the confusion stems from the fact that people forget that the ALT attribute is there to provide alternative and equivalent content to users when the image is not visible. These common traps include: • Using the ALT attribute to render a tool tip. Tool tips generally provide additional information, rather than equivalent information. Internet Explorer incorrectly renders ALT text as a tool tip, however, ALT text should only be presented when the image is not visible. If you want to create tool tips use the title attribute instead. • Entering the filename in the ALT text. The filename is not usually relevant to the user and is certainly not equivalent information to the file itself. • Using the ALT text to tell users to turn images on.

NSW Government Website Style Directive Explanatory Notes

92

• Using ALT text to describe appearance rather than purpose. Think carefully about the information you are trying to convey with the each image. Try to write a short, meaningful sentence or two that accurately describes the purpose of the image. Decorative images Some images on websites are there purely for decorative purposes, marking these images up with ALT text such as “Flowery heading background” doesn’t really help the user understand what the image is conveying. However, omitting the ALT attribute entirely does not help users who are unable to view images because most aural and text based browsers will present the filename instead. In these cases it is better to use an empty or NULL ALT attribute (do not put a space in the ALT attribute) as this allows the user agents to pass over these images silently. An even better solution for decorative images is to include them as background images in your CSS.

Additional information:
Web Usability: Text alternatives for Images http://www.usability.com.au/resources/image-text.cfm Web Accessibility in Mind: Creating accessible Images http://www.webaim.org/techniques/images/ University of Wisconsin-Madison: Creating Accessible Images http://www.doit.wisc.edu/accessibility/online-course/standards/images.htm Dive into Accessibility: Ignoring spacer images http://diveintoaccessibility.org/day_21_ignoring_spacer_images.html Dive into Accessibility: Providing text equivalents for images http://diveintoaccessibility.org/day_23_providing_text_equivalents_for_images.html W3C Recommendation: Guideline 1: Provide equivalent alternatives to auditory and visual content http://www.w3.org/TR/WAI-WEBCONTENT/#gl-provide-equivalents

9.14. JavaScript
Guideline:
JavaScript is a valuable tool that can be used to greatly enhance the browsing experience of most users. However it is important to remember two things when using JavaScript: • • All functionality that is provided with JavaScript, must be available to users who do not have scripting enabled. The fundamental navigation features of the web should be respected.

Rationale:
There are ways in which judicious use of JavaScript can greatly enhance the user experience of a website. Since the popularisation of techniques such as AJAX (Asynchronous JavaScript And XML) there has been a

NSW Government Website Style Directive Explanatory Notes

93

great deal of innovation in this area and interactions that were previously considered ‘desktop-only’ have been widely implemented on web sites and web applications such as GMail, Flickr and Google Maps. However JavaScript does have its downsides, foremost of which is the fact that a significant number of users across a range of user groups are not able to run JavaScript. The W3C Web Content Accessibility Guidelines states that all functionality provided by scripts must be available to users who do not have scripting enabled and provides some suggestions as to how this can be done (http://www.w3.org/TR/WCAG10-TECHS/#glnew-technologies). Mandating JavaScript is effectively excluding significant portions of your potential audience and is, therefore, breaking the whole premise of accessibility. Another common mistake is to attempt to make web sites and applications behave so much like desktop applications that fundamental web behaviours are broken. Users understand navigational features such as hyperlinks, URL, and their browser history and make use of these features by bookmarking, emailing links to one another and using their back button. Breaking this functionality is often detracts from the usability of a web interface rather than enhancing it.

Implementation notes:
Progressive enhancement A useful approach when implementing JavaScript on a website is to start without any scripts and ensure that the site functions correctly. Scripts can then be added to enhance the user experience. These scripts can then be used to rewrite portions of the interface and inject additional functionality. Refer to the Flickr example below for a depiction of this process. Detecting script and providing alternate content When the progressive enhancement method is not feasible, an alternate approach is to provide two complete distinct versions of your application; one that works ‘script-free’ and one that relies on JavaScript. This method often requires more work, but can provide more creative freedom. If you do take this approach make sure that you concentrate on the accessible version of your application first, then if time allows develop your enhanced application – tacking on an accessible version of an application as an after thought is not recommended. CSS rollovers and drop downs Often there are good alternatives to using JavaScript to create a certain effect. Two good examples are rollovers and drop down menus; recently developed techniques using CSS allow developers to achieve the traditional rollover and drop down menu affects, without depending on JavaScript. Further, these techniques generally result in lighter, clearer and more semantically correct code. There are a couple of techniques for using CSS instead of JavaScript for rollovers that have significant advantages. Both techniques use the :hover pseudo class to effect the image swap, but the difference is that one repositions a single background image (http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html, http://wellstyled.com/css-nopreload-rollovers.html) while the other takes the more traditional approach of swapping one image for another (http://www.projectseven.com/tutorials/css/uberlinks/). The Suckerfish technique for dropdown menus allows developers to use CSS to style single level and nested HTML lists into elegant and flexible dropdown menus that degrade gracefully in the absence of adequate CSS support. For full details please refer to http://www.htmldog.com/articles/suckerfish/dropdowns/.

NSW Government Website Style Directive Explanatory Notes

94

Server side validation Relying on JavaScript alone for form validation is not recommended. Not only do users without Javascript miss out on the usability benefits provided by the validation, the application itself can be compromised by the validation not taking place and data can be corrupted.

Additional information:
Useit.com: The Top Ten Web Design Mistakes of 1999 http://www.useit.com/alertbox/990530.html A List Apart: Scripting http://www.alistapart.com/topics/code/scripting/ Canadian Heritage Information Network: Internet Accessibility http://www.chin.gc.ca/English/Digital_Content/Tip_Sheets/Accessibility_CHIN/java.html Web Accessibility in Mind: Overview of Creating Accessible JavaScript http://www.webaim.org/techniques/javascript/

Examples:
Progressive enhancement

NSW Government Website Style Directive Explanatory Notes

95

With JavaScript enabled, clicking on the title allows editing inline using AJAX to transform the page content and handle the browser/server communication.

Without JavaScript the editing tools are still available via a standard HTML form.

NSW Government Website Style Directive Explanatory Notes

96

9.15. HTTPS – Creating secure connections
Guideline:
When you are requesting confidential or personal information from users or providing such information to users, ensure the information is secured in transit by using the HTTPS protocol.

Rationale:
It is good web etiquette for web developers to ensure that users’ data and privacy is respected and secured. Failing to do so can result in loss of user confidence and worse. The Department of the Treasury’s Building Consumer Sovereignty in Electronic Commerce states:

44.2 provide security appropriate for protecting consumers’ personal and payment information; 44.3 provide security appropriate for identification and authentication mechanisms to be used by consumers;
http://www.ecommerce.treasury.gov.au/publications/BuildingConsumerSovereigntyInElectronicCommerceABestPracticeModelForBusiness/context.htm#security

Implementation notes:
The HTTPS protocol uses the Secure Sockets Layer (SSL) protocol to encrypt all HTTP communications between a user’s web browser and the server. This prevents malicious users from intercepting, tampering or eavesdropping on information such as passwords or credit card details being passed between the user and the server. In addition to encryption, SSL provides endpoint authentication, meaning that the user can be sure of the identity of the server they are communicating with. This helps protect against the type of web page spoofing attacks that have been used with increasing frequency against many banks and their customers.

Additional information:
Wikipedia: HTTP: URI Scheme http://en.wikipedia.org/wiki/HTTPS Wikipedia: Transport Layer Security http://en.wikipedia.org/wiki/Secure_Socket_Layer Wikipedia: Spoofing attack http://en.wikipedia.org/wiki/Spoofing_attack Microsoft TechNet: Configure SSL Host Headers(IIS6.0) http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/596b9108-b1a7-494d-885df8941b07554c.mspx Sitepoint: Securing your apache 2 server with SSL http://www.sitepoint.com/article/securing-apache-2-server-ssl

NSW Government Website Style Directive Explanatory Notes

97

9.16. Downloads and plug-ins
Guideline:
Where possible the electronic delivery of goods and services should be achieved without specialised software or hardware. If video footage is provided, an alternative text version or captioning should be provided.

Rationale:
Users with hearing impairments require captioning to understand (i.e. hear) video footage. In regards to other plug-ins, whilst some of these come standard with new computers and Internet Explorer (e.g., Flash), many novice users with older computers may not have the required software and are unlikely to download the software to view the content. In addition, users with poor bandwidth may wish to view alternate versions of the content rather than waiting for a large video file to download.

Implementation notes:
When providing non-HTML content it is generally useful to provide users with the information regarding the file format and size, along with the link, so that they are able to make an informed decision before triggering a download.

Additional information:
W3C Note: Guideline 3: Use markup and style sheets and do so properly http://www.w3.org/TR/WCAG10-TECHS/#tech-synchronize-equivalents Whole of Victorian Government Web site guidelines http://www.dpc.vic.gov.au/CA256D800027B102/Lookup/WebsiteGuidelinesPDF/$file/WOVG_WebSite_Guideli nes_v1-1_2002mar.pdf

Examples:

Allowing users to make an informed decision before downloading.

NSW Government Website Style Directive Explanatory Notes

98

9.17. Use of flash
Guideline:
If Flash is used, provide an HTML alternative that is automatically presented to users if they do not have Flash installed. The use of Flash should generally be avoided unless there is significant user value e.g., house banner, demonstrations, training materials, tours to demonstrate new interactive functionality.

Rationale:
A Flash Player Penetration Survey conducted by NPD Research (see Macromedia website http://www.macromedia.com/software/flash/survey/) showed 97.3% of web users have Macromedia Flash pre-installed. However the rate of penetration remains questionable in the community of web designers and developers. See http://www.andyjeffries.co.uk/documents/flash_penetration.php. Many users are concerned to download plug-ins such as Macromedia Flash and may not be able to view the content and achieve their tasks if this is the only option available. As such, it is essential that an HTML alternative is provided. Further, depending on how it is implemented, Flash content may not be accessible to some users with disabilities.

Implementation notes:
Use auto-detection code to determine if users have Flash or not.

Additional information:
GCIO Guidelines: Flash Accessibility (http://www.gcio.nsw.gov.au/docs/FlashAccessibility.pdf) Accessibility and Macromedia Flash MX 2004 http://www.macromedia.com/macromedia/accessibility/features/flash/ Creating Accessible Macromedia Flash Content - http://www.webaim.org/techniques/flash/ Accessible Flash Whitepaper http://www.markme.com/accessibility/files/Best%20Practices%20for%20Accessible%20Flash%20Design.pdf http://www.usability.com.au/resources/flash.cfm

9.18. Use of Portable Document Format (PDF)
Guideline:
• Most information should be presented in a normal HTML web page. Presenting it as a PDF document should be a secondary consideration, or an alternative delivery method. • Size should generally be restricted to a maximum of 500kb. Larger documents may be split into smaller documents, each under 500kb, with the full document made available for those with greater bandwidth. • All downloadable files must be virus scanned before being made publicly available.

NSW Government Website Style Directive Explanatory Notes

99

• Links to documents in PDF format should always indicate to users that the file is a PDF and the size of the PDF document (e.g., MB, KB), including the time to download on a 56k speed connection. • Wherever there is a link to a PDF document, there should always be a link to the Adobe site where users can download Adobe Acrobat Reader. • Wherever possible, use relevant ‘optimised for web’ option in your PDF generation tool. Consider providing a “Help with PDF” link close to the place where you have links to PDF documents (as novice users will be reluctant to visit Adobe site and download without more information). PDFs should only be used to publish information that is: • legislation or quasi-legal information, including documents that require the content or layout to be retained (uneditable) for legal reasons e.g., a form; • documents whose primary purpose is for downloading and printing and not intended to be read on screen e.g., a fact sheet for agency partners to hand to customers; • image-based files such as maps, where there is no appropriate alternative format for displaying the resource.

Rationale:
Whilst Adobe has made a commitment to improving the accessibility of PDFs, content in PDF format may still not accessible for visually impaired users with screen readers or users in regional areas with limited bandwidth e.g. 19.2kBps. The general opinion of the accessibility community worldwide is that the use of PDFs on websites still presents a significant barrier for people with disabilities. The Australian Human Rights and Equal Opportunity Commission have also made the following statement regarding PDF documents: “The Portable Document Format (PDF) file system developed by Adobe has become widely used for making documents available on web pages. Despite considerable work done by Adobe, PDF remains a relatively inaccessible format to people who are blind or vision-impaired. Software exists to provide some access to the text of some PDF documents, but for a PDF document to be accessible to this software, it must be prepared in accordance with the guidelines that Adobe have developed. Even when these guidelines are followed, the resulting document will only be accessible to those people who have the required software and the skills to use it. The Commission's view is that organisations who distribute content only in PDF format, and who do not also make this content available in another format such as RTF, HTML, or plain text, are liable for complaints under the DDA. Where an alternative file format is provided, care should be taken to ensure that it is the same version of the content as the PDF version, and that it is downloadable by the user as a single document, just as the PDF version is downloaded as a single file.” (HREOC, 2002) 69

Additional information:
GCIO Guidelines: PDF and Accessibility (http://www.gcio.nsw.gov.au/docs/PDFAndAccessibility.pdf) Adobe Accessibility Centre http://www.adobe.com/enterprise/accessibility/main.html Adobe Acrobat Accessibility Techniques http://www.webaim.org/techniques/acrobat/ Web Usability: PDF and Accessibility http://www.usability.com.au/resources/pdf.cfm

NSW Government Website Style Directive Explanatory Notes

100

Examples:
Representing PDF documents
File name (PDF, 32kb)
Need Adobe Acrobat Reader

Example page with “Help with PDF” link http://www.trainandemploy.qld.gov.au/partners/factsheets/appships_tships/atoz.htm Example help page – ‘Help with PDF (Portable Document Format) and Adobe Acrobat Reader’ http://www.trainandemploy.qld.gov.au/tools/pdf_help.htm

NSW Government Website Style Directive Explanatory Notes

101

10.

References

Adkisson, H. P, (2005). Web Design Practices, Examining Current Design Practices on the web, http://www.webdesignpractices.com/index.html Accessibility and Macromedia Flash MX (2004) http://www.macromedia.com/macromedia/accessibility/features/flash/ Adobe Systems Incorporated (2005). Adobe Accessibility Centre http://www.adobe.com/enterprise/accessibility/main.html Andreoni, Screen size for web development http://www.andreoni.com/articles/publish/screen_size.shtml Australian Bureau of Statistics (ABS) (1998) ABS survey shows one Australian in five has a disability. Retrieved June 22, 2005, from http://www.abs.gov.au/ausstats/abs@.nsf/5e3ac7411e37881aca2568b0007afd16/81a21b2987d05d49ca256 8a90013631f!OpenDocument&Highlight=0,disability Baker, Bernard and Riley, (2002). Reading Online News: A Comparison of Three Presentation Formats in Usability News 4.2 2002 http://psychology.wichita.edu/surl/usabilitynews/42/depth.htm Baker, R. (2003). The Impact of Paging vs. Scrolling on Reading Online Text Passages in Usability News 5.1 2003 published by Software Usability Research Laboratory (SURL) Wichita State University. Retrieved 26 June, from http://psychology.wichita.edu/surl/usabilitynews/51/paging_scrolling.htm Baxley, B. (2003). Making the Web Work. Designing Effective Web Applications. Indianapolis: New Riders. Bayles, M. (2000). Just How 'Blind' Are We to Advertising Banners on the Web? In Usability News 2.2 2000. Retrieved 9 June from, http://psychology.wichita.edu/surl/usabilitynews/2S/banners.htm Benway, J. & Lane, D. (1998). Banner Blindness: Web Searchers Often Miss "Obvious" Links in Internetworking December 1998 1.3. Retrieved 9 June from, http://www.internettg.org/newsletter/dec98/banner_blindness.html Bernard, M & Hamblin, C. (2003). Cascading versus Indexed Menu Design in Usability News 5.1 Retrieved 5 June 2005, from http://psychology.wichita.edu/surl/usabilitynews/51/menu.htm Bernard, M.L., Mills, M., Peterson, M., & Storrer, K. (2001). A comparison of popular online fonts: Which is best and when? Usability News, 3.2. Retrieved 2 June 2005, from http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm Bernes-Lee, Tim (1998) Cool URI’s don’t change: http://www.w3.org/Provider/Style/URI.html Bohman, P. (2004a). Cognitive Disabilities Part 1: We Still Know Too Little, and We Do Even Less in WebAIM. Retrieved 9 June from http://www.webaim.org/techniques/articles/cognitive_too_little Bohman, P. (2004b). Cognitive Disabilities Part 2: Conceptualizing Design Considerations in WebAIM. Retrieved 9 June from http://www.webaim.org/techniques/articles/cognitive_too_little Bouch, A., Kuchinsky, A. & Bhatti, N. (2000). Quality is in the eye of the beholder: Meeting users’ requirements for internet quality of service. Proceedings of CHI 2000. 297-304. British HCI Group (2001). Caroline's Corner: A Farewell to Pop-Ups http://www.usabilitynews.com/news/article1673.asp Click Z Networks, Solutions for Marketers (2005). Browser stats (Global): http://www.clickz.com/stats/sectors/traffic_patterns/article.phpr/3500691#table Consumer Reports Webwatch Guidelines – 5. Privacy http://www.consumerwebwatch.org/consumer-reportswebwatch-guidelines.cfm DCITA (2004). The current state of play 2004. Department of Communications, Information Technology and the Arts. Retrieved 5 June 2005, from http://www.dcita.gov.au/__data/assets/pdf_file/23426/CSP_2004.pdf Dey Alexander - Writing for the Web: http://deyalexander.com/resources/writing-web.html Gale, S. (1996). A Collaborative Approach to Developing Style Guides. Conference proceedings on Human Factors in Computer Systems April 13 – 18, 1996, Vancouver: ACM Press, 362–367. Galitz, W. (2002). The Essential guide to User Interface Design. New York: John Wiley & Sons, 406. Garrett, J. J. (2000). The Elements of User Experience, http://www.jjg.net/elements/pdf/elements.pdf,. Happy Cog Studios, A List Apart (1998), http://www.alistapart.com/articles/popuplinks/

NSW Website Style Directive Explanatory Notes

HREOC (2002). World Wide Web Access: Disability Discrimination Act Advisory Notes Version 3.2 August 2002 Retrieved 8 June 2005, from http://www.hreoc.gov.au/disability_rights/standards/www_3/www_3.html HTML 4.01 Specification: W3C (1999) Johnson-Laird, P.N., Legrenzi, P., Girotto, V., Legrenzi, M., and Caverni, J-P. (1998). Mental models: A Gentle Guide for Outsiders, http://www.si.umich.edu/ICOS/gentleintro.html Jupiter Web Networks, (2005). Screen resolution statistics - http://thecounter.com/stats/2005/April/res.php Kenney, S. (2001), Do not use frames or navigational pop-ups http://www.seankenney.com/publications/2001-04/index.php?page=7 Keynote NetMechanic, Power Tools for your Site (1996-2005), http://www.netmechanic.com/browserindex.htm Krug, Steve (2000). Don’t make me think. Indianapolis: Cue Publishing. p. 21. Lang, T. (2003). Comparing website accessibility evaluation methods and learnings from usability evaluation methods. Retrieved 8 June, from http://www.peakusability.com.au/articles/index.htm Lynch, P. and Horton, S. (1999). Web Style Guide: Basic Design Principles for creating Web Sites. London: Yale University Press. pp.59-61. Lynch, P. and Horton, S. (2002), Web Style Guide (2nd Edition). New Haven, CO: Yale University Press. Retrieved 26 June, from http://www.webstyleguide.com/page/length.html Maurer, D., & Warfel, T. (2004). Card sorting: A Definitive Guide in, boxesand arrows.com, http://www.boxesandarrows.com/archives/card_sorting_a_definitive_guide.php Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications of the ACM 33, 3 (March), 338-348. Nielsen, J. (1994a). Ten Usability Heuristics. Retrieved 26 June, from http://www.useit.com/papers/heuristic/heuristic_list.html Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R. (Eds.), Usability Inspection Methods, New York: John Wiley & Sons. Nielsen, J, (1996). The Rise of the Subsite, Alertbox in, useit.com, http://www.useit.com/alertbox/9609.html Nielsen, J. (1997). Be Succinct! (Writing for the Web) in Jakob Nielsen's Alertbox, March 15, 1997. Retrieved 22 June, from http://www.useit.com/alertbox/9703b.html Nielsen, J. (2000). Designing Web Usability. Indianapolis: New Riders. Nielsen, J. (2000). Reset and Cancel Buttons in Jakob Nielsen's Alertbox, April 16, 2000. Retrieved 8 June, from http://www.useit.com/alertbox/20000416.html Nielsen, J. (2000). Reset and Cancel Buttons. Retrieved 8 June, from http://www.useit.com/alertbox/20000416.html Nielsen, J. (2002). Flash and Web-Based Applications in Jakob Nielsen's Alertbox, November 25, 2002. Retrieved 8 June, from http://www.useit.com/alertbox/20021125.html Nielsen, J. (2005). Lower-literacy Users in Jakob Nielsen's Alertbox, March 14, 2005. Retrieved 22 June, from http://www.useit.com/alertbox/20050314.html Nielson, J. (1996). Why Frames Suck (Most of the Time) http://www.useit.com/alertbox/9612.html Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. Seattle, WA, 1-5 April, 249-256. Nielsen , J & Tahir, M. (2002). Homepage Usability, New Riders Publishing, USA. North Sydney TAFE Campus Association, (2004). Student Association Website, http://www.studentassociations.info/ Ojakaar, E. (2001). Users Decide First; Move Second Available in User Interface Engineering. Retrieved 26 June, 2005, from http://www.uie.com/articles/users_decide_first/ P3P Toolbox (1996). The P3P Implemenation Guide, P3P Toolbox http://p3ptoolbox.org/guide/ Pagendarm, M. & Schaumburg, H. (2001). Why Are Users Banner-Blind? The Impact of Navigation Style on the Perception of Web Banners in Journal of Digital Information, Volume 2 Issue 1 Article No. 47, 2001-0824. Retrieved 9 June from, http://jodi.tamu.edu/Articles/v02/i01/Pagendarm/ Perfetti, C. (2001). The Truth About Download Time. Retrieved 10 June from, http://www.uie.com/articles/download_time/

NSW Website Style Directive Explanatory Notes

Pilgrim, M (2002) Dive Into Accessibility: Labelling form elements, http://diveintoaccessibility.org/day_28_labeling_form_elements.html Preece, J, Rogers, Y, Sharp, H, Benyon, D, Holland, S, & Carey, T. (1994). Human-Computer Interaction Addison Wesley, Great Britain Queensland Department of Employment and Training website Rosenfel, R. (2004). Information Architecture Heuristics in, Louisrosenfeld.com, http://louisrosenfeld.com/home/bloug_archive/000286.html Rosenfeld, L., & Morville, P. (1998). Information Architecture for the World Wide Web. Sanders,M. & McCormick,E. (1992) Human Factors in Engineering and Design. New York: McGraw-Hill. Schaffer, E. (2005). The answer you're searching for... is "Browse" in UI Design Newsletter – January, 2005. Retrieved 9 June 2005 from, http://www.humanfactors.com/downloads/jan05.asp Schaffer, E. (2005).Search vs Browse: The answer you're searching for... is "Browse" in UI Design Newsletter – January, 2005. Retrieved 9 June 2005 from, http://www.humanfactors.com/downloads/jan05.asp Selvidge, P. (2003) Examining Tolerance for Online Delays in Usability News http://psychology.wichita.edu/surl/usabilitynews/51/delaytime.htm Selvidge, P. (2003). Examining Tolerance for Online Delays in Usability News 5.1 Retrieved 5 June 2005, from http://psychology.wichita.edu/surl/usabilitynews/51/delaytime.htm Smith, N. & Wallace, A. Plain English at a glance in Plain language.gov. Retrieved 24 June, from http://plainlanguage.gov/howto/quickreference/glance.cfm Snyder, C (2005). Concepts of security vs. privacy in Seven tricks that Web users don't know Retrieved 22 June, from http://www.snyderconsulting.net/article_7tricks.htm Software Usability Research Laboratory (SURL) Wichita State University, News 5.1 (2003). Retrieved 26 June, from http://psychology.wichita.edu/surl/usabilitynews/51/paging_scrolling.htm Swartz, Aaron (2001) Do not use "click here" as link text: http://www.w3.org/QA/Tips/noClickHere The Internet Society (1999) Hypertext Transfer Protocol -- HTTP/1.1:HTTP 301 Moved Permanently http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3.2 Tognazzini, B, (2000). OSX: A First Look in, Interaction Design Solutions for the Real World, http://www.asktog.com/columns/034OSX-FirstLook.html UI Wizards Inc, Product Usability Consulting, (2002). Web blooper - Fixed-Width Layout http://www.uiwizards.com/wBloop23.html US Department of Health and Human Services, (2003). Research-based Web Design and Usability Guidelines, http://usability.gov/pdfs/chapter7.pdf US Department of Health and Community Services, (2003). Research-based Web Design and Usability Guidelines, http://usability.gov/pdfs/chapter16.pdf UsabilityNet (2003), International standards for HCI and usability. Retrieved 3 July, 2005, from http://www.hostserver150.com/usabilit/tools/r_international.htm Vassallo, S. (2003). Enabling the Internet for People with Dyslexia. Retrieved 9 June, 2005, from http://ebility.com/articles/dyslexia.shtml w3c (2005). Platform for Privacy Preferences (P3P) Project: W3C http://www.w3.org/P3P W3C Recommendation (1999), HTML 4.01 Specification, Adding structure to forms: the FIELDSET and LEGEND elements http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 W3C Recommendation (1999), HTML 4.01 Specification, The Label element http://www.w3.org/TR/REChtml40/interact/forms.html#h-17.9.1 W3C. (1999). Web Content Accessibility Guidelines 1.0 W3C Recommendation 5-May-1999 Retrieved 26 June, 2005, from http://www.w3.org/TR/WCAG10/wai-pageauth.html#toc WebAIM (1998), Creating Accessible Forms, http://www.webaim.org/techniques/forms/ WebAim (1998). Adobe Acrobat Accessibility Techniques http://www.webaim.org/techniques/acrobat/ WebAim (1998). Creating Accessible Macromedia Flash Content - http://www.webaim.org/techniques/flash/ Webside Story, (2005), Website TORY, Active Marketing, http://www.websidestory.com/products/webanalytics/datainsights/spotlight/05-10-2005.html?lpos=Promotions&lid=Promotions+-+Position+3 Welie, M. (2005). Web Design Patterns, in www.welie.com…Patterns in Interaction Design, http://www.welie.com/patterns/index.html

NSW Website Style Directive Explanatory Notes

Wilson, R. (2001). HTML E-Mail: Text Font Readability Study in Web Marketing Today March 1, 2001. Retrieved 2 June 2005, from http://www.wilsonweb.com/wmt6/html-email-fonts.htm WS Schools, The Best Things in Life are Free (1999), http://www.w3schools.com/browsers/browsers_stats.asp

NSW Website Style Directive Explanatory Notes

11.

End notes

1 Gale, S. (1996). A Collaborative Approach to Developing Style Guides. Conference proceedings on Human Factors in Computer Systems April 13 – 18, 1996, Vancouver: ACM Press, 362–367. 2 ISO 9241-11:1998 Ergonomic requirements for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability. 3 Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications of the ACM 33, 3 (March), 338-348. 4 Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI'90 Conf. Seattle, WA, 1-5 April, 249-256. 5 Nielsen, J. (1994a). Ten Usability Heuristics. Retrieved 26 June, from http://www.useit.com/papers/heuristic/heuristic_list.html 6 Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R. (Eds.), Usability Inspection Methods, New York: John Wiley & Sons. 7 Australian Bureau of Statistics (2002), Census Paper 02/02 - Report on Testing of Disability Questions for Inclusion in the 2001 Census, 2001, Cat. No. 2952.0 8 Australia Bureau of Statistics (2003), Disability, Ageing and Carers, Australia: Summary of Findings, Cat. No. 4430.0 9 Royal ANZ College of Ophthalmologists, (undated) Colour Defective Vision www.ranzco.edu/aboutus/faq/colourblindness/ (Viewed April 2006) 10 Microsoft (2003), The Market for Accessible Technology—The Wide Range of Abilities and Its Impact on Computer Use, www.microsoft.com/enable/research/default.aspx (viewed April 2006) 11 Jim Groves (2000), Web Sites for Rural Australia, a Report for the Rural Industries Research and Development Corporation, RIRDC Publication No. 00/13 12 Access Audits Australia (undated), Good Access is Good Business (produced for the City of Greater Bendigo) 13 W3C (2005), Developing a Web Accessibility Business Case for Your Organization: Overview, www.w3.org/WAI/bcase/Overview.html (sighted April 2006) 14 W3C (draft 2004), How People with Disabilities Use the Web, www.w3.org/WAI/EO/Drafts/PWD-UseWeb/Overview.html (sighted April 2006) 15 WebAIM (undated), Concepts of how people with disabilities use the Web (sighted April 2006): • Visual Disabilities - www.webaim.org/techniques/visual/ • Hearing Disabilities - www.webaim.org/techniques/hearing/ • Motor Disabilities - www.webaim.org/techniques/motor/ Cognitive Disabilities - www.webaim.org/techniques/cognitive/ 16 University of Toronto (undated), Adaptive Technology Resource Centre – Technical Glossary, www.utoronto.ca/atrc/reference/tech/techgloss.html (sighted April 2006) 17 Microsoft (2005), Assistive Technology Products, www.microsoft.com/enable/at/default.aspx (sighted April 2006) 18 Disability Discrimination Act 1992, www.austlii.edu.au/au/legis/cth/consol_act/dda1992264/ (sighted April 2006) 19 Human Rights and Equal Opportunity Commission (undated), A brief guide to the Disability Discrimination Act, www.hreoc.gov.au/disability_rights/dda_guide/dda_guide.htm (sighted April 2006) 20 Human Rights and Equal Opportunity Commission (2002), World Wide Web Access: Disability Discrimination Act Advisory Notes, www.hreoc.gov.au/disability_rights/standards/www_3/www_3.html (sighted April 2006) 21 Tom Worthington (2000), Olympic Failure: A Case for Making the Web Accessible, www.tomw.net.au/2000/bat.html (sighted April 2006) 22 Vision Australia (undated), Australian Web Accessibility Policies and Guidelines, www.visionaustralia.org.au/info.aspx?page=639 (sighted April 2006)

NSW Website Style Directive Explanatory Notes

106

23 Government Chief Information Office (undated), Web Usability and Accessibility Guide www.oit.nsw.gov.au/pages.asp?CAT=805&ID=992 (sighted April 2006) 24 W3C (1999), Web Content Accessibility Guidelines 1.0, http://www.w3.org/TR/WAI-WEBCONTENT/ (sighted April 2006) 25 W3C (1999), Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0, www.w3.org/TR/WAIWEBCONTENT/full-checklist.html (sighted April 2006) 26 Nielsen, J, (1996). The Rise of the Subsite, Alertbox in, useit.com, http://www.useit.com/alertbox/9609.html 27 Nielsen, J, (1999), op. cit. 28 Tognazzini, B, (2000). OSX: A First Look in, Interaction Design Solutions for the Real World, http://www.asktog.com/columns/034OSX-FirstLook.html 29 Nielsen , J & Tahir, M. (2002). Homepage Usability, New Riders Publishing, USA. 30 This will ensure the QuickLinks are usable by non-mouse users. 31 Nielsen, J. (1997). Be Succinct! (Writing for the Web) in Jakob Nielsen's Alertbox, http://www.useit.com/alertbox/9703b.html ; Vassallo, S. (2003). Enabling the Internet for People with Dyslexia, http://e-bility.com/articles/dyslexia.shtml 32 Nielsen, J & Tahir, M,(2002), op cit 33 Nielsen, J & Tahir, M,(2002), op cit 34 W3C (2000) HTML Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-text 35 Ojakaar, E. (2001). Users Decide First; Move Second Available in User Interface Engineering. Retrieved 26 June, 2005, from http://www.uie.com/articles/users_decide_first/ 36 Tognazzini, B, (1998). Scaling Information Access in, Interaction Design Solutions for the Real World, http://www.asktog.com/columns/008scaledinfo.html 37 Nielsen, J. (2000). Designing Web Usability. Indianapolis: New Riders, p104 38 Nielsen, J. (1997). Be Succinct! (Writing for the Web) in Jakob Nielsen's Alertbox, March 15, 1997. Retrieved 22 June, from http://www.useit.com/alertbox/9703b.html 39 Australian Bureau of Statistics (ABS) (1998) ABS survey shows one Australian in five has a disability. Retrieved June 22, 2005, from http://www.abs.gov.au/ausstats/abs@.nsf/5e3ac7411e37881aca2568b0007afd16/81a21b2987d05d49ca2 568a90013631f!OpenDocument&Highlight=0,disability 40 Vassallo, S. (2003). Enabling the Internet for People with Dyslexia. Retrieved 9 June, 2005, from http://e-bility.com/articles/dyslexia.shtml 41 Nielsen, J. (2000). op. cit, p126 42 Lynch, P. and Horton, S. (1999). Web Style Guide: Basic Design Principles for creating Web Sites. London: Yale University Press. p59 43 Baker, R. (2003). The Impact of Paging vs. Scrolling on Reading Online Text Passages in Usability News 5.1 2003 published by Software Usability Research Laboratory (SURL) 44 Nielsen, J. (2000). op. cit, p126 45 Sanders,M. & McCormick,E. (1992) Human Factors in Engineering and Design. New York: McGraw-Hill, p108 46 Baxley, B. (2003). Making the Web Work. Designing Effective Web Applications. Indianapolis: New Riders, p354. 47 Nielsen, J. (2000). op. cit 48 Nielsen, J. (2005). Lower-literacy Users in Jakob Nielsen's Alertbox, March 14, 2005. Retrieved 22 June, from http://www.useit.com/alertbox/20050314.html 49 Vassallo, S, op. cit. 50 Nielsen, J. (2000), op. cit., p94. 51 Perfetti, C (2001) The Truth About Download Time, http://www.uie.com/articles/download_time/ 52 Bouch et al. (2000): Quality is in the Eye of the Beholder: Meeting Requirements for Internet Quality of Service http://www.hpl.hp.com/techreports/2000/HPL-2000-4.html 53 http://www.domainname.gov.au/guidelines.php

NSW Website Style Directive Explanatory Notes

107

54 W3C (2000) HTML Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout 55 W3C (1999) Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WAI-WEBCONTENT/#glcolor 56 Smith, R (2002) The Strong Password Dilemma http://www.smat.us/sanity/pwdilemma.html 57 EWeek (2005) RSS Sets Its Sights on the Enterprise http://www.eweek.com/article2/0,1759,1818594,00.asp#RSS_Sets_Its_Sights 58 RSS Features in IE 7 for XP and Windows Vista Beta 1 http://blogs.msdn.com/ie/archive/2005/08/02/446280.aspx 59 Safari RSS http://www.apple.com/macosx/features/safari/ 60 Live Bookmarks http://www.mozilla.org/products/firefox/live-bookmarks 61 Blind Citizens Australia (2003) Colour Vision The Bulletin, No 14, 15 August, 2003 http://www.iamcal.com/toys/colors/stats.php 62 Lighthouse International (2005) Effective Color Contrast http://www.lighthouse.org/color_contrast.htm 63 W3C (2000) Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WAIWEBCONTENT-TECHS/#tech-color-contrast 64 Sanders, P. and Bernecker, C. (1990) Uniform veiling luminance and display polarity affect VDU user performance. Journal of the illuminating engineering Society, 19, 113-123. 65 Bernecker, C., Sanders, P. and Mitrick, R. (1994) Proceedings of the 1994 Conference of the Illuminating Engineering Society, 481-499. 66 Legge, G., Rubin, G., and Schleske, M. (1986) Contrast-polarity effects in low vision reading. In Low Vision (G. Woo, ed.). Springer Verlag. 67 W3C (2005) CSS 2.1 Specification http://www.w3.org/TR/2005/WD-CSS21-20050613/cover.html 68 W3C (2000) HTML Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-TECHS/#tech-avoid-pop-ups 69 HREOC (2002) World Wide Web Access: Disability Discrimination Act Advisory Notes Version 3.2 August 2002 http://www.hreoc.gov.au/disability_rights/standards/www_3/www_3.html

NSW Website Style Directive Explanatory Notes

108


				
DOCUMENT INFO
Shared By:
Stats:
views:949
posted:2/6/2008
language:English
pages:108
user002 user002
About