 |
WEB DESIGN SKILLSModule Study Guide
|
Session 12
Validation and accessibility
On this page:
Validation
When composing a web page, particularly in raw HTML, you want to know whether the page will work properly when your viewers look at it on the web. The easiest way to do this, of course, is to stick it into a browser and see what it looks like. Unfortunately, this is not the whole story. Just because your web page looks fine in one browser, it does not mean it will work in others. Even different versions of the same browser may give different results. Some browsers will allow and display HTML pages which are actually 'incorrect' (e.g. have opening tags with missing end tags) by making an educated guess as to what the code should have been. This is a good thing if you are just using the browser for looking at other people's pages, but if you are developing your own, it can mask the fact that you may have some serious technical problems.
Validation is a way of checking the syntax of your web page against a universal 'standard' that should tell you whether or not your page is correct (i.e. 'valid') HTML. Note that this is just checking the technical aspects of the page - it won't tell you whether the page looks any good, or even whether it will display at all!
The Worldwide Web Consortium run a free service for checking your web page, which will give you results within a few seconds telling you if your page is 'valid'. You can either check pages which have already been put on the web, by telling them the full URL, or you can simply locate the file on your machine and upload it to them. Whichever way you choose, you get the results back in a matter of moments.
Find the validator at: http://validator.w3.org
If your page is already on the web, use the 'validate by URL' box to enter the URL, then click 'Check'. (You can also use this to check other web pages, to see how good other designers are at sticking to the standard!) If your page is still on your machine only, use the 'Validate by File Upload' box to choose the file you want to check, then click 'Check '.
[Note: There does seem to be an issue with uploading files using some versions of Internet Explorer. If you can't get any sensible results this way, either put the file up on a web server somewhere and try that way, or use a different browser.]
'Doctypes'
At the top of every valid web page, in the HTML code, you will find a line such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The reason for this line is that there are a number of versions of HTML and its successor, XHTML, in existence, and the validator (and browsers) need to know which one you are using. The doctype line above is the one used for XHTML 1.0. Others can be found at www.w3.org/QA/2002/04/valid-dtd-list.html
Feedback from the validator
When you validate your page, you get some feedback from the validation service. If the page was valid HTML, it will tell you so, and give you a piece of code which you can add to the bottom of your page to tell others that you have successfully validated the page. If the code is not valid, you will get some clues as to what you can do to correct it. Sometimes these clues are not easy to interpret. Some of the most common problems are listed below:
- Line xx, column yy: end tag for "H1" omitted, but its declaration does not permit this
- You have omitted an end tag (
</h1>in this case). The feedback tells you in which line and column the error occurred, but beware - when something is omitted the validator can only guess at where it should have been; it might not be right! This error can also occur if nested tags are closed in the wrong order e.g.<em><strong>emphasised strong text</em></strong> - Line xx, column yy: element "HBI" undefined
- You have used an unrecognised tag (
<hbi>). If you are programming in HTML code directly, this is probably a simple typing error. - Line xx, column yy: required attribute "ALT" not specified
- A very common error. All
<img>tags are required to have an "alt" attribute to define the text which will appear if the image does not show. - Line xx, column yy: there is no attribute "GSS"
- In this case an unrecognised attribute has been used.
- Line xx, column yy: start tag for "LI" omitted, but its declaration does not permit this
- The validator is expecting a particular tag (in this case
<li>) which has not appeared.
Sometimes a single mistake can trigger a whole series of errors in the feedback. If you do not understand some of the feedback, try correcting the errors you do understand and then revalidate. You may find that the others have disappeared anyway.
Accessibility
Accessibility is the term used generally to describe how useable ('accessible') various services are to disabled people. It applies not only to web pages, but also to shops, banking services, libraries, buses and so on. Since the recent Disability Discrimination Act in the UK (1995, 2005. See http://www.opsi.gov.uk/acts/acts2005/20050013.htm) there is a requirement for designers of public web sites to improve accessibility wherever possible. Of course, there are many types of disability, and their requirements are not always the same. On the other hand, some of the recommendations for improving accessibility can also benefit non-disabled users, as we shall see.
Again, the Worldwide Web Consortium are at the forefront of developments in this area, and although they are principally an American organisation, and so subject to different legislation, the principles for access to web pages are transferable. Much of the material on this page is derived from their pages under the Web Accessibility Initiative (see http://www.w3.org/WAI).
Some common scenarios
Colour blindness
The inability to distinguish between various colours affects about 7% of males and 0.4% of females (http://www.hhmi.org/senses/b130.html). Red/green blindness is the most common, but there are other forms.
To make your pages readable by viewers suffering from colour blindness:
- Use colours with adequate contrast to be identifiable irrespective of colour.
- Where differences are indicated by colour (e.g. "Click on the red button"), provide an alternative means of identification (e.g. "Click on the red button [left]").
- Colour of text and background should be contained in a separate style sheet, which browsers can turn off.
Repetitive Strain Injury (RSI)
(Also applies to users with various other motor control difficulties.) Many users have problems using a mouse, and prefer to operate with either standard or specially adapted keyboards. Using the 'accesskey' attribute it is possible to allow users to focus on key links or 'form' elements by using the keyboard. (See http://www.w3.org/TR/WCAG10-HTML-TECHS/#link-accesskey for an example.)
Blindness
This is obviously one of the most difficult disabilities to cater for. Blind computer users use a variety of technologies to allow them to interact with their machine. One of the principal methods is to employ a screen reader, which will read out to them the text from a web page. As a designer, you can help screen readers to work better by:
- Providing clear text for navigation links (not just "Click here").
- In tables, identifying row and column headers by using the
<th>tag. - Using CSS rather than tables to control layout, and ordering the sequence of 'cells' sensibly.
- Always providing a sensible '
alt' text for each image. - Expanding acronyms and abbreviations the first time they are used on a
page. This can be done using the
<acronym>or<abbr>tags. - Providing alternatives for 'Flash' pages, or other pages where information is contained in multimedia content.
Dyslexia
(And other similar disabilities). Seriously dyslexic users also use text-to-speech software, so many of the techniques applicable to blind users also apply here. Dyslexic users are also distracted by on-screen movement, so keep animations to a minimum (i.e. don't use animated GIFs gratuitously) . In the future, browsers may include the ability to turn off or freeze animated content.
Poor eyesight
Strategies for dealing with these users include:
- Using scaleable text so that users can enlarge it if necessary (use 'em' or '%' to define text size rather than absolute units such as 'px' or 'cm').
- Defining the text size in a separate style sheet which may be overridden locally.
Cognitive disabilities (Learning difficulties)
This covers a very wide range of disorders, but in general you can help users by:
- Using consistent design across your site, especially in the appearance and placement of links.
- Using clear English instead of jargon wherever possible, especially in explaining how to use the site.
- Using pictorial representations rather than plain text. (This conflicts somewhat with design advice for blind users, but there is no reason why a combination cannot be used.)
Other general guidelines
- Identify changes in the language of a document with the 'lang' attribute. (This helps screen readers.)
- If frames are used, identify each frame with a 'title', rather than just a 'name'.
- Pages should still be readable if scripting is turned off.
- If images are used to convey information (as opposed to just being decorative) find alternative ways to display this information (not instead of, but as well as).
- Inform the user when a link will open a new window.
Some tools to help you
- Accessibility Wizard (http://www.binaryblue.com.au/access_wizard)
- Semi-automatic. Prompts you with suggestions as to how to make your pages comply with accessibility guidelines.
- Cynthia Says (http://www.cynthiasays.com)
- An online single page checking system.
Exercises
- Look at the source code of one of your pages and check it has a suitable doctype.
- Use http://validator.w3.org to validate the page. Check the error messages and correct your HTML, so that it will validate.
- Optionally, you can now add the Valid HTML logo .
- Were your errors caused by the software you used to write the web page?
- Validate your stylesheet.
- Use 'Cynthia Says' to check one or more of the pages you have produced during this module, and try to make them as accessible as possible.
Links
- http://www.w3.org/ - The Worldwide Web Consortium
- http://validator.w3.org - Online validation page
- http://jigsaw.w3.org/css-validator/ - CSS validation
- http://www.binaryblue.com.au/access_wizard - Accessibility wizard
- http://www.cynthiasays.com - Cynthia Says accessibility check
- http://www.w3.org/WAI - Web Accessibility Initiative
