Web Guidelines


Application


The University Web standard (Web standard) and its supporting guidelines apply to all units of the University and apply to all official University websites.

Purpose


These guidelines are designed to support the implementation of the Web standard. The Web standard is designed to ensure that all new websites and web applications enhance the accessibility and quality of the University’s web presence.

Additional resources and links


Subject

Resource

Link

Alternative text

WCAG 2.0 Guideline:

http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Browser

Compatibility

http://browsershots.org/

Display colour

Irish National Disability Authority

W3C

Snook colour contrast

www.nda.ie

 

www.w3.org/WAI/wcag-curric/gid3-0.htm and www.w3.org/WAI/wcag-curric/sam25-0.htm

http://snook.ca/technical/colour_contrast/colour.html

Display contrast

Vision Australia:

http://www.visionaustralia.org.au/info.aspx?page=628

Display colour blindness support

Online tool to check colour contrast acceptability and for colour blindness

Colour blindness simulation tool

www.vischeck.com/vischeck/vischeckURL.php

 

 

 

colorfilter.wickline.org/

Dynamic content

W3C

 

 

WebAim

University of Wisconsin

WCAG 2.0 Guideline

www.w3.org/TR/WCAG10-TECHS/#alt-page-note www.w3.org/WAI/wcag-curric/sam21-0.htm www.w3.org/WAI/wcag-curric/sam22-0.htm

www.webaim.org/techniques/javascript/summary

http://www.doit.wisc.edu/accessibility/online-course/standards/multimedia.htm

http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html

Forms

WCAG 2.0 Guideline

http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html

Images –height and width

W3C

www.w3.org/MarkUp/html3/img.html

 

Keyboard access

WCAG 2.0 Guideline

http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-keyboard-operable

Language codes

W3C (including tips for validation):

 

 

 

Internet Assigned Numbers Authority

List of all completed specifications and drafts by W3C

www.w3.org/WAI/wcag-curric/sam29-0.htm validator.w3.org/

jigsaw.w3.org/css-validator/ validator.w3.org/feed/

www.w3.org/TR/xhtml1/

http://www.iana.org/assignments/language-subtag-registry

WGhttp://www.w3.org/Style/CSS/current-work.en.html

Māori Language

Unicode:

www.unicode.org/

Metadata

Web Style Guide

 

W3C

https://policies.auckland.ac.nz/policy-display-register/web-style-guide.pdf 

http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-meta

Mark up language

Irish National Disability Authority

W3C

www.nda.ie

 

 

www.w3.org/WAI/wcag-curric/sam33-0.htm

Navigation keys

IRD

www.ird.govt.nz/help/accessibility/help-accessibility.html

 

Page auto re-directing

W3C

www.w3.org/WAI/wcag-curric/sam64-0.htm

PDF publishing

WebAim

NZ Government Standards v1

www.webaim.org/techniques/acrobat/

http://www.menace.co.nz/egovt/4.html

Printable format

A List Apart article

http://www.alistapart.com/articles/printtopreview

Web accessibility

W3C

www.w3.org/WAI/intro/accessibility.php

Web style

Web style guide

uoa/policy-display-register/web-style-guide.pdf

Web usability

ISO/ NZ gvmt standards

https://webtoolkit.govt.nz/

 

W3C technologies

W3C

www.w3.org/WAI/

www.w3.org/WAI/wcag-curric/sam83-0.htm www.w3.org/WAI/wcag-curric/sam86-0.htm www.w3.org/TR/

Alternative text


All non-text content that is presented to the user must have a text alternative that serves the equivalent purpose, except for the situations listed below:

  • Controls, input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
  • Time-based media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.
  • Decoration, formatting, invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to visitors, then it is implemented in a way that it can be ignored by assistive technology.

Browsers, screen resolutions - wide usability


The aim is to make websites as fully functional for as many visitors as possible across a wide range of browsers, devices and operating systems, without negatively affecting the performance or experience of that visitor.  As such website content must be viewable, and page design degrades gracefully, depending on how well the visitor’s browser/platform adheres to common web standards.

The minimum compatibility listed in the standard and their corresponding version(s) combinations, is derived from those that make up 5% or more of the total types/versions used by visitors accessing the University’s central website (www.auckland.ac.nz) over the 6-month period prior to the Web Standards review.  This list is then evaluated by ITS against the performance and security benchmarks set for the University’s website.

Display


Use of colour:

Visually-impaired visitors, including colour blindness, may not perceive differences in colour. Visitors with computers that do not support colour well will also be disadvantaged Information conveyed with colour must be available without colour:

  • Ensure that all information conveyed with colour is also available without colour. This applies principally to navigation labels and error messages.
  • Red text, which is often used for important messages, may not be as prominent for a colour-blind person or someone using a black and white monitor. In this case, you must reinforce the message by emphasis <em> or a symbol like “*”.
    Contrast between foreground and background colours

Ensure that foreground and background colour combinations provide sufficient contrast for navigation, text and informational elements.

Contrast:

  • Ensure that background colours contrast with text colours.
  • White text must not be used on a light colour background and must print if background colours are ignored.
  • Avoid patterned backgrounds that make text difficult to read.

Domain names, web aliases, structure and redirects


Domain names and web aliases

Domain names and web aliases create a readable name to help visitors remember how to get to a website. They also make it easier to type the URL into a browser.

The format for the readable name is www.name.auckland.ac.nz, for example www.uacel.auckland.ac.nz. The readable name can also be after the main URL, for example www.education.auckland.ac.nz/uacel

Names which are more than one word must be meaningful and, where possible, the words separated by a dash (-). The use of underscores (_) is discouraged as they are difficult to detect in a web address bar.

Following sections of the University website may have Auckland.ac.nz web aliases:Schools

  • Student-related services or faculty, business units
  • Centres and Research Units
  • University’s Conference website
  • Internal or secure websites

Valid domain names:

Domain names must support both the ‘www’ and ‘non-www’ versions. However it’s recommended that only one must be official, the other must redirect to it.

Domain name structure - examples


The following structure applies depending on the relationship of the site to a faculty or service division:

  • www.<facultyname>.auckland.ac.nz – distinct sites with their own identity

Example: www.education.auckland.ac.nz

  • www.<facultyname>.auckland.ac.nz/<something> – subsections of an existing site (friendly or short URLs for marketing or reference purposes)

Example: www.education.auckland.ac.nz/apply or www.auckland.ac.nz/apply

  • www.<something>.<facultyname>.auckland.ac.nz – distinct site within a faculty or service division (with their own identity).  Also include web applications associated with that faculty or service division.

Example: www.scholarships.education.auckland.ac.nz

  • www.ecommerce.auckland.ac.nz/ - secure transactional site

Downloadable objects


When downloadable objects such as documents or multimedia files are presented for download, visitors need to know if the object downloaded is going to be accessible and usable to them.

Presenting information including the document size and format enables the user to make a decision to download the document.  They may chose not to download it for a number of reasons, such as determining they may not obtain a successful download with their current connection type, the download may take too long or they may not have the necessary tools/software to access the document.

Dynamic content


Dynamic presentation can cause problems for screen readers and other screen scanning devices.

Ensuring dynamic content is accessible:

  • Provide an alternative presentation or page, and ensure that equivalents for dynamic content are updated when the dynamic content changes
  • Web pages must not contain any blinking or scrolling text, or flashing objects. Visitors with cognitive or visual disabilities may not be able to read moving text or may be distracted by it. Flashing or blinking can trigger seizures in some visitors
  • Minimise movement in pages. Until user agents allow visitors to pause or minimize moving content on a page
  • Text description of visual track of a multimedia presentation. Provide a text equivalent or alternatively an audio track to accompany a multimedia presentation, which describes important information presented in the visual track. If possible, attempt to have the text and/or audio track synchronised with the presentation
  •  Captions must be provided for all prerecorded audio and video, except when the media is a media alternative for text and is clearly labeled as such 

Forms


Forms are used in University website in order to get information from web visitors.

To help visitors avoid and correct mistakes when completing an online form:

  • Introduction message must be in plain English, with step by step instruction.
  • Compulsory fields must be clearly identifiable by “*” symbol. The “*” symbol must be explained in the beginning of the form.
  • An inline form validation method must be used for those compulsory fields.
  • Similar questions must be grouped together.
  • Form label must be used for each tag. For example label for=”age”>Age</label>.

Form input and help:

  • Form labels and instructions must be provided when content requires user input.
  • If an input error is automatically detected, the item that is in error must be identified and the error is described to the user in text.
  • Context-sensitive help must be available.

Images - height and width attributes


The dimensions applied must be the actual dimensions of the image.  Visitors who have slow connections can still obtain most of the textual content in a requested page before all the images have been downloaded, as opposed to having to wait for all content of the page to be rendered.

Māori language


Whilst it is not mandatory to provide websites in Māori, Te Taura Whiri i te Reo Māori (The Māori Language Commission) recommends use of the macron to mark long Māori vowels.

Unicode is a recommended standard that allows characters from a wide variety of languages to be encoded electronically, including the Māori macronised vowels. To reliably render Unicode-encoded documents in browsers the web server must be configured to modify the HTTP header, but can also be done with the “charset” parameter in the content-type declaration at the beginning of the document.

There must be a way to view the site without macrons for those who cannot see the macron rendered correctly.

Metadata


Metadata are used by some search engines and provides contextual information for visitors navigating the site, especially those with screen readers who rely on things such as page titles, structured page headings, and lists.

  • Provide metadata to add semantic information to pages and sites.
  • The meaning of the page title must be clear even when read out of context.
  • Page titles must contain meaningful information in the first 65 characters.

Navigation access keys


Where a New Zealand government standard for an access key exists, the equivalent has been used as appropriate to the University site.

Navigation Access keys are used within the site as follows:

0 = List of access keys
1 = University of Auckland homepage
2 = Site map
3 = Search
4 = Programmes and courses
5 = Faculties, institutes and campuses
6 = Admission and enrolment
7 = Research
8 = Student support services
9 = Contact us
[ = go to beginning of main content
a = A to Z directory
d = Disability services
l = Life at Auckland
m = Campus maps and locations
p = Privacy, copyright and disclaimer
r = Accommodation
s = Scholarships
u = About The University of Auckland

Online payments and transactions


Online transactions

Online transactions collect personal information, and often create additional records that include transaction logs and tracking data. It is good practice to perform a Privacy Impact Assessment (PIA) as part of initial scoping and at key stages during website design and implementation.

Online payments

Online payments in New Zealand are processed via credit card and EFTPOS.

The Financial Services Revenue Collection team must be contacted for assistance regarding the incorporation of online payments facilities into a University website. Revenue Collection will provide advice regarding available University technology solutions that meet the required regulatory standards including the Payment Card Industry (PCI) Security Standards Council’s Data Security Standards (DSS).

All payment solutions must be reviewed and approved by ITS Operational Security before the site goes live. Online payment systems must use the Payment Express (DPS) payment gateway for credit card transactions. Credit card data must never be stored, processed or transmitted on University infrastructure.

University of Auckland websites must never request that credit card details be sent through email for either payment or refunds as the University’s email systems are not designed to be PCI-DSS compliant.

Page auto-redirecting


Do not use mark-up (META or scripting) to automatically redirect pages. Instead, configure the server to perform redirects.  It can be disruptive and frustrating for visitors if a page auto-redirects, as they can get disorientated with the site and feel that they are not in control of navigation within the site.

PDF documents


PDF format has become a de-facto standard however it does have some accessibility issues.  

Printable format


A user can expect to capture any part of a web page in hard copy, without losing any information or significant layout from that experienced in the browser.
Printable format:

  • The main content of a web page must print correctly within the width of a portrait A4 sheet of paper

Content must not be cut off from either side. Where a page requires landscape orientation, or specific print settings (such as adjusted margins) to print correctly, it must be made clear to the user

Site mark-up


When an appropriate mark-up language exists, use mark-up rather than images to convey information. Mark-up is more likely to be "understood" by assistive technologies such as screen readers and Braille displays. This enhances accessibility for visitors who utilise such assistive technologies.

Use elements to convey document structure and use them according to specification. Mark up lists and list items carefully, in accordance with the relevant language.

Web accessibility


As stated by W3C:

“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.”

Accessibility also includes consideration of visitors who may not enjoy the benefits of a modern day online user experience, the reasons being factors such as:

· Having older client technology including older computers, operating systems and/or browsers.
· Slower and/or restricted internet access. This can occur for visitors with dial up connections, in rural and/or remote parts of the country.
· Having certain technologies disabled at the visitors’ computer or internet connection. For example, if the user accesses the website through a kiosk.

WCAG 2.0 is based on four principles that provide the foundation of web accessibility. These four principles are:

· Perceivable: Information and user interface components must be presentable to visitors in ways they can perceive i.e. it can't be invisible to all of their senses.
· Operable: User interface components and navigation must be operable i.e. the interface cannot require interaction that a user cannot perform.
· Understandable: Information and the operation of user interface must be understandable i.e. the content or operation cannot be beyond their understanding.
· Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies i.e. as technologies and user agents evolve, the content must remain accessible.

Web usability


As per the New Zealand e-government standards:

“Usability is the measurement of how a service/product/system performs to meet its intended purpose(s) for the targeted audience(s).”

The International Standards Organisation (ISO) has defined usability to be:

“The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. (ISO 9241-11)”

Definitions


The following definitions apply to these guidelines:

Official University website(s) are websites that have been authorised by the University

Unit(s) refers to an organisational grouping across the University and includes a faculty, or research centre or service division or UniServices

University means the University of Auckland and includes all subsidiaries

Website means a location connected to the Internet that maintains one or more web pages

Web application means any application that uses a web browser as a client

Document management and control



Owner: CIO

Content manager: Web Manager, ITS

Date approved: Nov 2013

Review date: Nov 2016