© Heretic Press and Tim Anderson 2007. Page created 11th April 2007. Last updated 13th June 2007. Related pages comparing .gov sites Survey Australian .gov.au UK .gov.uk and USA .gov websites. .edu.au websites. Survey Results The Editor's email.
doctypes The important document type declaration DTD <script type="text/javascript"> </script> noscript For non-Javascript usersemail addresses Hiding email addresses from bad botswin-1252 Character encoding setsem and %. pt and px embed Embedding media filesxml:lang="en" Language definitions& The ubiquitious ampersand errorlongdesc Long descriptions of imagescontent="Thu, 26 Apr 2007" International datingtitle elements for rollover, onfocus or hover.tabIndex was used at only one University Chinese page Canberra University.color and bgcolor should be in the stylesheet rules, not the page html.
A general comment about the Dublin Core Meta Tag schemata and dates used in International webpages.
The Australian Government AGLS states that dates must be in the format specified by the W3C, but this document dates from 1997.
A readable date such as May 7, 2007 can be read by humans and screen readers such as JAWS™ You could not use the American date formatting for the abbr element but only international dates.
W3C recommend using ISO8601 dating. An author might specify a date in the (ambiguous) format "10-9-07"; does this mean 9 October 2007 or 10 September 2007? The Dublin Core DC. standard used by Australian Universities does not resolve the ambiguous dates which can be read as a numerical string by Jaws™.
W3C recommendations META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT" Internationalisation of dates and meta tags is recommended in Internationalization Best Practices.
Date: Wed, 05 Nov 2003 10:46:04 GMT
The Australian Government standards for metadata. AGIMO state that date is Mandatory, but AGIMO use American format dates in all their meta tags. AGIMO seem to be out of touch with reality, for example some of the AGIMO award winning sites.
USA dates 2006-06-28 should be changed to international dating eg. <meta name="Date.Modified" content="Thu, 19 Apr 2007" />
Why do some sites use the windows character set windows-1252? Windows software or CMS systems which should still use iso standards for text encoding?
One specific problem with the win 1252 character set may be more relevant to European websites a possible error producing the € sign. There are other risky characters which might produce blanks with with a windows-1252 characters set.
Stylesheets can specifiy absolute font sizes such as points pt used in traditional hard copy publishing, or pixels px which are used as the basic element of computer screens.
Some Internet Explorer users cannot resize content that has been set in pixels and points which are not consistently supported. Both pt and px can be more difficult to scale up to larger text sizes.
Using relative size fonts is recommended in WCAG Checkpoint 3.4. The flexible way to specify fonts is with relative sizes (xx-small, x-small, small, medium, large, x-large, xx-large) em and percentage sizes. Fonts should be specified in percentages or em. The brief definition of an em is the width of a capital M in a particular typeface.
Relative fonts sizing allows the user's browser settings to take precedence. If a user has specified in their browser to increase text size, then that will be the basic size of an em relative to that browser's setting. If a user has specified large text but webpage fonts are set by a stylesheet as 10 points or 10 pixels, then they might not be able to read the page content.
<noscript> element
The <noscript> element is meant to provide an alternative to information available with Javascript. This noscript element seems inadequate:
<noscript>This website requires JavaScript.</noscript>
This is the antithesis of the reason why a noscript element should be provided. What can a blind student using a screen reader like Jaws do? This noscript element should at least provide a list of navigation links that Javascript users can access.
For an example of using the <noscript> to provide alternative content, see the Griffith University homepage which provides a comprehensive <noscript> alternative to Javascript navigation.
The embed tag can add errors to load a flash file. It is possible to embed a shockwave file into the page with no errors, but you should also use the tag <noembed> to give alternative visual and text information for anyone who cannot use the plugin for Macromedia™ Flash movies.
Bye Bye Embed
The old html 3.2 pre stylesheet solution was to separate links by using tiny spacer.gif files between them. CSS allows you to visually put links next to each other on a page by using a hidden html element to separate links. In this page the html code is <a class="noshow">:</a> . In the stylesheet for the noshow class, the CSS rule declares .noshow{ display:none;}
A browser with stylesheets turned off will display : separating the links.
One Melbourne University, staff member and member of the Web standards Group WSG stated to me that Melbourne University and Griffith university had systems that did not recognise & in
links. Ampersand "&" has to be written as &. The Melbourne University homepage has validated for at least the last year and the Griffith homepage page has also solved the & problem as of 5th May 2007.
A lot of websites do not protect their staff very well from spam emails. One clever use of the ASCII character is to encode the email addresses which hides them a bit from spambots collecting email addresses.
This code renders in the browser window in English as something like:
mailto:managerBiwsn.edu.au
This example is much better than unprotected email addresses like: mailto:fred452@swinburne.edu.au
You can protect email addresses a little further, by adding javascript at the cost of some accessibility, if users have javascript turned off. If you put Javascript in the email you need to add some email contact information in the <noscript> element. This Swinburne page already needs the <noscript> element warning if javascript is turned off.
You can combine both methods to make a difficult mess for most web bots to decipher. An example of using javascript with ASCII codes to hide the email addresses. This verbose javascript combined with ascii characters renders on the screen as a normal email address, but search engines and spambots do not generally follow Javascript, so it is protected, a little from spam email harvesters and even from visual inspection of the page source, by a novice html user.
<a href="#" onclick="JavaScript:window.location='&m'+'ail'+'to:'+'&g&cd&jeh'+'@'+'dmvkti^ghe'+'ss.com'"> Email</a> the administration.
I use a few other methods to combat spam bots collecting emails. Endless looping pages and new changing fake email addresses. You need to hide the URL to such pages so good bots like the Google or Yahoo bot, do not fall into the bogtrap. In the css set display to hidden and specify in the page html link rel="nofollow" which the good bots will obey as well as the robots.txt file which should tell bots to keep out. You should monitor server logs for bad bots who access areas they should not. In these example you have to paste the URL into your browser to see the example so that there are no live links to the bogtraps on this page.
<a rel="nofollow" href="http://www.hereticpress.com/Private/members.foo" title="Endless loop pages emails"
>http://www.hereticpress.com/Private/members.foo</a>
<a rel="nofollow" href="http://www.hereticpress.com/Private/index.html" title="Junk email addresses"
>http://www.hereticpress.com/Private/index.html</a>
!DOCTYPE declaration DTD
Strict document types are less tolerant of outdated html and include all elements and attributes that have not been deprecated. Strict document guidelines are harder to comply with. Transitional document types allow everything in the strict DTD plus deprecated elements and attributes and older style html to be inserted in a document. For example, a Strict document does not allow target="_blank" to open new windows, but target is valid in a transitional document.
An important error to correct in any webpage. The DOCTYPE Declaration was not recognized or is missing.
<html xmlns="http://www.w3.org/1999/xhtml"> is not a correct document declaration.
There are three main types of xhtml that a document might be declared as, the one used for this page is Strict xhtml which can be declared as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
xml:lang="en" error
Sites who rely on foreign visitors should take extra care to ensure that their document language is specified as English.
The Ballarat University homepage for example declares a doctype missing the language tag en: <html xmlns="http://www.w3.org/1999/xhtml">
It should read:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
If you have these language tags correct, pages can be translated into most languages on the fly by Google. It may take a few seconds with a page this size! Every Heretic Press page has different colours attached to language tags in English from the Stylesheets, however, when the page is translated it only uses the stylesheet specified language colour and ignores all others in the linked CSS. The translated page is visually monotonous in a monochrome colour.
Some translations of this page; German, Spanish, French, Italian or Portuguese
A Glossary of foreign words used in Patrick Hanrahan's novel Nunc looks more visually appealing with many different languages font tags in the page text as well as the en document language tag.
There is no en English language tag and graphics are used to display text information, the Ballarat University homepage cannot be completely translated, even when you provide the language tag en for the translation, an attempt to translate it into German partially fails, as pictures are used to convey English language information the picture tag alt="University of Ballarat logo" remains in English. Perhaps the Google translations do not process images alt text information? The Ballarat University homepage in German.
Pages with many different languages in the one document can also be translated from Italian French Spanish Russian and German language tags.
HTML and xhtml uses the word "title" in two ways, the first is in the head
<head ><title>Common website W3S validity and WCAG accessibility errors</title></head>
This <head> title shows up above the browser window. Documents missing this type of title tag could be filed with tens of millions of other untitled documents and be difficult to find without supporting page text content.
Another important potential use for title in the header is to put descriptions of links, stylesheets and meta tags which some screen readers can use from the document head. For example this page has sibling pages in the same directory.
<link rel="Sibling" href="AustWeb.html" title="Aust. Validity and accessibility tests Howard Centrelink Defence Police Bracks." />
<link rel="Sibling" href="AustUni.html" title="Australian University sites tested for validity and accessibility" />
<link rel="alternate stylesheet" href="../SSheets/NuncStyle1.css" media="screen" type="text/css"title="Black Gold" />
Adding keywords relevant to the destination link adds credibility to your title elements as potential search engine optimisation features. Google does some testing for keyword relevance to calculate page rank and also to prevent the stuffing of the title tag with content irrelevant to the destination link.
Heretic Press also makes extensive use of title in the body of the document using title=" " which can be inserted in any link or image as title="Any descriptive text" to give users more information on where links go or what they provide.
title is activated by a mouseover, or a keyboard onfocus or a stylesheet onhover event. Some or these title elements are not read by screen reading software, but they can provide a lot more information for keyboard or mouse users browsing a site.
To be useful for users, the title must add some extra information not usually visible and not necessary in the page, extra information for anyone considering following that link, it could be about the page size or a few keywords related to the new content.
It should not just repeat the link text phrase.
Almost all Heretic Press links and pictures provide extra information in the title tag on that link or graphic.
Title is also important for images as Internet Explorer will display the alt text on mouseover if there is no title text. The Firefox and Opera browsers only display the title text on mouseover and do not use the alt tag for this purpose. If you want the alt tag text visible on mouseover, the title tag is also necessary.
Only two Australian Universities used the title tag, both on the left hand side only of their homepage VUT and title was also used by Deakin University. In both cases however title just repeated the same link text adding no new information for someone considering following that link.
Heretic Press uses the longdesc tag to link to long descriptions of images.
<img longdesc="../Access/index.html#heretictic">
this tags links to information on WCAG Priority level logos. This is an addition to the alt which should be a short description of the image or link, you can link to a whole page of text on an image with longdesc.
Another difference to note is that Heretic Press uses a relative directory structure, it is quicker to load a partial URL like index.html than the full file pathway to that file which includes the domain name eg. http://www.yourdomain/index.html.
Relative directories also make the site easier to move to a new domain name and with a few minor modifications, the entire site will run off a CD. If a browser or screen reader gets to any page, the meta tags provide a link to all child and parent pages in that directory, as well as links to important pages like search, home and the accessibility statement. Getting to any page in a relative directory which uses title tags in the header allows easy access to that entire site not just the page found.
In your browser menu items, Select View Source or View Page Source to see the extensive set of meta tags, even providing a title element for related pages which some screen readers can read.
<base href="http://www.hereticpress.com/Dogstar/Publishing/AustUni.html" /"> is needed as all the URLs in the page are partial pathways. <base href> is needed where documents are structured in directories relative to each other. One advantage of this is that it is easier to create a mirror copy of the site. This also has a security downside, in that your files can be easier to reproduce in the same directory stucture on another site. The Heretic Press relative directory structure is mirrored by the National Library of Australia Pandora archive in the same relative directory structure.
Contact Heretic Press for an accessibility review of your website. We can provide you with an accessible validated template for your homepage. Ask me the author and editor of hereticpress.com for a quote for large projects editing web page code or forcing CMS software, by hook or by crook (inc. html, css and accessibility know-how) to make CMS write valid accessible code. My Freelance html editing rates. Audits will help you identify current accessibility problems and provide guidance for compliance with international standards and best practice.
The validation errors are mainly caused by the ubiquitous & encoding. HTML Character entity errors are common and are often caused by the character for ampersand "&" which has to be written as &.
Pay particular attention to URLs that include &. For example, your document should contain http://www.csu.edu.au?class=guest&name=user, rather than http://www.csu.edu.au?class=guest&name=user.
Two minor errors stop this page passing the highest level accessibility test. A link uses the same text twice, Anchor Element at Line: 127, Column: 23 and the element: img has the deprecated attribute: border which also prevent it passing the Priority three checklists.
Two minor changes. Well done Charles Sturt University. You could still make many improvements though like keyboard shortcuts, more meta tags, add the noscript element, a large text option etc.
tabIndex
One very good place to use tabindex is in forms, it allows the keyboard to give focus to any form elements and can be used to select form textfields and buttons.
For example in this search page, a tabIndex gives an easy keyboard selection of the text entry field and the Search submit button. Removing the tabIndex makes keyboard browsing completely miss the form fields and buttons.
UK, USA and Australian legal obligations
Australian Commonwealth and state laws.
The Heretic Press Accessibility statement and summary of legal obligations not to discriminate in the UK, the USA and the Australian Diability Discrimination Act 1992.
In almost all cases in Australia, the minimum website standard is WCAG Priority One level.
WCAG 1.0 Specifications. W3C Recommendation 5-May-1999
Draft WCAG 2.0 Working Draft only 27 April 2006. Criticism abounds
WCAG 2.0 Judy Brewer
Privacy Laws
Defamation actions
American 2006. Target being sued by National Federation of the Blind.
Sydney Olympics case notes
Target sued in America
"Web site isn't a place of public accommodation covered by the Americans with Disabilities Act because it isn't a "place".
Internet not a place
Disability discrimination Australian Act
Sydney Olympics case
"In considering a disability discrimination complaint about Worldwide Web accessibility, HREOC would take into consideration the extent to which the best available advice on accessibility had been obtained and followed."
UK legal firm
Sydney Website sued
Heretic Press editing rates validated and accessible HTML $185 Australian dollars an hour.
Maguire v Sydney Organising Committee for the Olympic Games in 2000 clearly demonstrated that the Australian Disability Discrimination Act 1992 applies in the online world.
Canadian site study
Dutch accessibility study
eGovernment Site Credibility: Comparing Speed, Accessibility, Typos, and Validity eGovernment Site Credibility
University of Minnesota A huge list of resources
Web Testing Tools Web Accessibility Initiatiave list of tools
Draft WCAG version 2.0 A draft copy of new guidelines which may change. If you want to learn about accessibility, all the information you need is on the internet in the Web Content Accessibility Guidelines 2.0.
Webstandards A grassroots coalition fighting for standards.
WebAim Utah State University and The Center for Persons with disabilities.
Universal Access Middlesex University international accessibility research project.
The Group of Eight The Group of Eight represents Australia's leading universities.
University rankings World rankings of Australian Universities.
Australian university libraries They fail the standard usability tests for use by the visually disabled.
UN Report United Nations global audit of web accessibility 97% failed.
50 US sites "Neither the mandate nor the motivation"
Andy King eGovernment Site Credibility
EU assessment of Web accessibility and technical standards conformance in four EU states.
University website Usability and meeting the needs of educational Web site users.
Web Page Accessibility: Research Studies.
Web Accessibility Survey Site Jim Ellison A study of 50 US sites.
David Hark's resource links General Web Accessibility Resources.
If you do not like the coloured text on a black background, you can view this page in six other styles. Allow a few seconds for the page to reformat itself using a different stylesheet. 1 : 2 : 3 : 4 : 5 : 6 : 7:
I would prefer that you do not waste trees and paper printing this page, but if you wish, select stylesheet 7. It will take a few seconds to reformat this large page for printing. Each University review has a page break before the H2 heading tag, so you should be able to just print the pages of interest to you.
© : Timothy John Anderson and Heretic Press 2007. Return to top of page
