quirm.net » Articles

XHTML: Common Validation Errors

rich — Thu, 02 Oct 2008 13:16:27 +0000

Unescaped Ampersand ("&")

Example:
...

Possible Validator Report: Unknown entity…

Solution: Always use & in place of &.

Correct Syntax:
...

Incorrect Nesting of Elements

Example:
...

Possible Validator Report: Missing tag

Solution: Elements in XHTML must be closed in the reverse order that they were opened in.

Correct Syntax:
...

Lowercase DOCTYPE

Example:

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >

Possible Validator Report: Missing DOCTYPE

Solution: The DOCTYPE is case-sensitive so use the correct case.

Correct Syntax::

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Missing closing " /"

Example:

Possible Validator Report: Missing closing tag

Solution: So-called "empty elements", such as img,
require a trailing space followed by a "/".

Correct Syntax::

Upper case tags

Example:
...

Possible Validator Report: There is no such element…

Solution: Use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. and are different tags.

Correct Syntax::
...

Unquoted attribute values

Example:

Possible Validator Report: Missing " "

Solution: All attribute values must be quoted, even those which appear to be numeric.

Correct Syntax::

CSS Selectors

rich — Thu, 02 Oct 2008 13:13:42 +0000

In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns are called selectors and may range from simple element names to complex patterns. If all conditions in the pattern are true for a certain element, the selector matches the element and the appropriate style will be applied when the element is rendered in a CSS-capable browser.

Summary of CSS2 Selector Syntax

Pattern Meaning Selector Type

* Matches any element. Universal selector

E Matches any E element (eg h2,span) Type selector

E F Matches any F element that is a descendant of an E element Descendant selector

E > F Matches any F element that is a child of an element E Child selector

E + F Matches any F element immediately preceded by an element E Adjacent selector

E[foo] Matches any E element with the “foo” attribute set (whatever the value) Attribute selector

E[foo="warning"] Matches any E element whose “foo” attribute value is exactly equal to “warning” Attribute selector

E[foo~="warning"] Matches any E element whose “foo” attribute value is a list of space-separated values, one of
which is exactly equal to “warning” Attribute selector

E[lang|="en"] Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. Attribute selector

DIV.warning The same as DIV[class~="warning"] Class selector

E#myid Matches any E element ID equal to “myid”. ID selector

E:first-child ^[1] Matches element E when E is the first child of its parent Pseudo-class

:first-line ^[1] Applies style to the first formatted line of a paragraph Pseudo-class

:first-letter ^[1] May be used for “initial caps” and “drop caps”, which are common typographical effects Pseudo-class

E:active
E:hover
E:focus Matches E during certain user actions Dynamic pseudo-class

:before ^[2]
:after ^[2] Can be used to insert generated content before or after an element’s content Dynamic pseudo-class

E:link
E:visited Matches element E if E is the source
anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) Link pseudo-class

E:lang(c) Matches element of type E if it is in (human) language ‘c’ (the document language specifies how language is determined) :lang() pseudo-class

Not currently supported by most browsers.

Not supported by Internet Explorer 6.

CSS Syntax

rich — Thu, 02 Oct 2008 13:00:43 +0000

Selectors, properties & values

CSS syntax is made up of three parts:

selector (often the HTML element you wish to style)

property (the attribute you wish to change eg. background colour)

value (eg. the colour you want your background to be)

The way in which these are used is:

selector {property: value;}

You don’t have to have each property/value pair on a separate line but it does increase readability – especially in long, complex style sheets.

For example, to set a black background, you would use:

body {background: #000000;}

where #000000 is the hexadecimal code for black.

If the value you want to use contains white space multiple words, put quotes around the value:

p {font-family: 'sans serif';}

You can specify more than one property in a given declaration. The example below shows how to define a center aligned paragraph of italicised text.

p {text-align:center; font-style: italic;}

You can group selectors by separate them with commas.

In the example below, all the header elements have been defined as white:

h1,h2,h2,h4,h5,h6 {color: #ffffff;}

However, whenever you do define a text colour, it is advisable to also define a background colour and vice versa. This can ensure that your text remain readable.

h1,h2,h2,h4,h5,h6 {color: #ffffff; background: #000000;}

Now your white header text will always be on a black background – even if the rest of your page
has a white background.

The class selector

With the class selector you can define different styles for the same type of HTML element.

For example, you want two types of paragraphs in your document: one italicised and one bold.

p.italic {font-style: italic;} p.bold{font-weight: bold;}

Now, when you want to use either of the above styles in a web page, you can do the following

This paragraph will be in italics. This paragraph will be bold.

However, you can only use one ‘class’ declaration per HTML element at any one time! The example below is the wrong way of trying to get bold, italicised, text:

This text is bold and italic.

The correct method would be to define a third class selector.

p.bold-italic {font-style: italic; font-weight: bold;}

And then use:

This text is bold and italic.

Or you could use:

This text is bold and italic.

Making selector classes available to multiple HTML elements

If you omit the tag name in a selector, you open it up to be used by any HTML element.

For example, the following class:

.center {text-align: center;}

can be used with any tag as appropriate.

... ... ... ...

can all be used in the same document.

Use class selectors where you think you will need to re-apply the same style more than once in a
given document.

If you think that you will need to use the style with different HTML elements, don’t include any
tag names in the class selector declaration.

The id selector

The id selector is different from the class selector.

While a class selector may be applied to many elements in a given document, an id selector can only be applied to only one element within a given document ie. it must be unique within the document.

The style rule below will match a p element that has the id value ‘para1′:

p#para1 {text-align: center; color: #ff0000; background: #000000;}

The style rule below will match the first element that has the id value ‘green’:

#green {color: 00ff00;background: #000000;}

So you could have:

... ... ...

in the same document.

But having:

... ... ...

would be illegal as you would have attempted to repeat the id selector ‘#green’.

Use id selectors for styles that you are sure you’ll only need once in a given document.

CSS Comments

You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date.

Comments are ignored by the browser and begin with “/*”, and ends with “*/”.

/* This is a comment */ p {text-align: center;} /* This is another comment */ h1 {background: #ffffff; color: #000000;}

CSS Basics

rich — Thu, 02 Oct 2008 12:57:03 +0000

What is CSS?

CSS stands for Cascading Style Sheets.

A style defines how an HTML element is displayed.

Style information can be stored:

In the header of a given HTML page (Internal Style)

Within a given tag (Inline style)

In a separate file which is then linked to the HTML page by a reference in the page header (External style)

Why use CSS?

A web page consists of two basic components – the Content (or information you wish to display) and the Style (the way if which you wish the content to be displayed).

CSS allows you to separate Content from Style. It’s even possible to have more than one style sheet – thus allowing you to have more than one way of displaying a page.

If all of the style information is retained within one external style sheet, it is possible to edit that one file and make sweeping changes (such as changing background and/or text colours) that affect hundreds of related web pages without having to touch a single HTML file

You can define a style for any HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all relevant elements on every page are affected automatically.

Multiple Styles Cascade Into One

Since you can specify CSS information in a number of ways, it is possible to utilise all three CSS methods as required. When you do utilise more than one CSS methodology (eg. using both external and inline style on the one web page), the multiple styles will cascade. This means that they will merge together to form a complete ‘virtual’ set of style instructions.

Generally speaking, styles using the following rules in descending priority:

Inline Style (inside HTML element)

Internal Style Sheet (inside the tag)

External Style Sheet

Browser default style

So, an inline style declaration has the highest priority and will override any declared internal or external style for the same HTML element and any default style properties normally applied by the browser.

XHTML1.0 Elements

rich — Thu, 02 Oct 2008 12:54:04 +0000

Element Strict Transitional Frameset

Yes Yes Yes

!DOCTYPE Yes Yes Yes

a Yes Yes Yes

abbr Yes Yes Yes

acronym Yes Yes Yes

address Yes Yes Yes

applet No Yes Yes

area Yes Yes Yes

b Yes Yes Yes

base Yes Yes Yes

basefont No Yes Yes

bdo Yes Yes Yes

big Yes Yes Yes

blockquote Yes Yes Yes

body Yes Yes No

br Yes Yes Yes

button Yes Yes Yes

caption Yes Yes Yes

center No Yes Yes

cite Yes Yes Yes

code Yes Yes Yes

col Yes Yes Yes

colgroup Yes Yes Yes

dd Yes Yes Yes

del Yes Yes Yes

dfn Yes Yes Yes

dir No Yes Yes

div Yes Yes Yes

dl Yes Yes Yes

dt Yes Yes Yes

em Yes Yes Yes

fieldset Yes Yes Yes

font No Yes Yes

form Yes Yes Yes

frame No No Yes

frameset No No Yes

h1 to h6 Yes Yes Yes

head Yes Yes Yes

hr Yes Yes Yes

html Yes Yes Yes

i Yes Yes Yes

iframe No Yes Yes

img Yes Yes Yes

input Yes Yes Yes

ins Yes Yes Yes

kbd Yes Yes Yes

label Yes Yes Yes

legend Yes Yes Yes

li Yes Yes Yes

link Yes Yes Yes

map Yes Yes Yes

menu No Yes Yes

meta Yes Yes Yes

noframes No No Yes

noscript Yes Yes Yes

object Yes Yes Yes

ol Yes Yes Yes

optgroup Yes Yes Yes

option Yes Yes Yes

p Yes Yes Yes

param Yes Yes Yes

pre Yes Yes Yes

q Yes Yes Yes

s No Yes Yes

samp Yes Yes Yes

script Yes Yes Yes

select Yes Yes Yes

small Yes Yes Yes

span Yes Yes Yes

strike No Yes Yes

strong Yes Yes Yes

style Yes Yes Yes

sub Yes Yes Yes

sup Yes Yes Yes

table Yes Yes Yes

tbody Yes Yes Yes

td Yes Yes Yes

textarea Yes Yes Yes

tfoot Yes Yes Yes

th Yes Yes Yes

thead Yes Yes Yes

title Yes Yes Yes

tr Yes Yes Yes

tt Yes Yes Yes

u No Yes Yes

ul Yes Yes Yes

var Yes Yes Yes

XHTML1.0 Attributes

rich — Thu, 02 Oct 2008 12:51:00 +0000

Name Related Elements Strict Transitional Frameset

abbr td th Yes Yes Yes

acronym td th Yes Yes Yes

accept-charset form Yes Yes Yes

accept form input Yes Yes Yes

accesskey a area button input label legend textarea Yes Yes Yes

action form Yes Yes Yes

align applets Not available Yes Yes

align iframe Not available Not available Yes

align caption div h1-h6 hr img input legend p table No Yes Yes

align col colgroup tbody td tfoot th thead tr Yes Yes Yes

alink body No Yes Yes

alt applet Not available Yes Yes

alt area img input Yes Yes Yes

archive applet Not available Yes Yes

archive object Yes Yes Yes

axis td th Yes Yes Yes

background body No Yes Yes

bgcolor table tr td th body No Yes Yes

border img No Yes Yes

border table Yes Yes Yes

cellpadding table Yes Yes Yes

cellspacing table Yes Yes Yes

char col colgroup tbody td tfoot th thead tr Yes Yes Yes

charoff col colgroup tbody td tfoot th thead tr Yes Yes Yes

charset a link script Yes Yes Yes

checked input Yes Yes Yes

cite blockquote q del ins Yes Yes Yes

class all elements except base basefont head html meta param script style title Yes Yes Yes

classid object Yes Yes Yes

code applet Not available Yes Yes

codebase applet Not available Yes Yes

codebase object Yes Yes Yes

codetype object Yes Yes Yes

color basefont font Not available Yes Yes

cols frameset Not available Not available Yes

cols textarea Yes Yes Yes

colspan td th Yes Yes Yes

compact dir dl menu ol ul Not available Yes Yes

content meta Yes Yes Yes

coords a area Yes Yes Yes

data object Yes Yes Yes

datetime del ins Yes Yes Yes

declare object Yes Yes Yes

defer script Yes Yes Yes

dir apple basefont Not available Yes Yes

dir frame frameset iframe Not available Not available Yes

dir all elements except base br param script Yes Yes Yes

disabled button input optgroup option select textarea Yes Yes Yes

enctype form Yes Yes Yes

face basefont font Not available Yes Yes

for label Yes Yes Yes

frame table Yes Yes Yes

frameborder frame iframe Not available Not available Yes

headers td th Yes Yes Yes

height applet Not available Yes Yes

height iframe Not available Not available Yes

height td th No Yes Yes

height img Yes Yes Yes

href a area link base Yes Yes Yes

hreflang a link Yes Yes Yes

hspace applet Not available Yes Yes

hspace img No Yes Yes

http-equiv meta Yes Yes Yes

id all elements except base head html meta script style title Yes Yes Yes

ismap input No Yes Yes

ismap img Yes Yes Yes

label option optgroup Yes Yes Yes

lang applet basefont Not available Yes Yes

lang frame frameset iframe Not available Not available Yes

lang all elements except base br param script Yes Yes Yes

link body No Yes Yes

longdesc frame iframe Not available Not available Yes

longdesc img Yes Yes Yes

marginheight frame iframe Not available Not available Yes

marginwidth frame iframe Not available Not available Yes

maxlength input Yes Yes Yes

media link style Yes Yes Yes

method form Yes Yes Yes

multiple select Yes Yes Yes

name applet Not available Yes Yes

name frame iframe Not available Not available Yes

name a button input map meta param select textarea Yes Yes Yes

nohref area Yes Yes Yes

noresize frame Not available Not available Yes

noshade hr No Yes Yes

nowrap td th No Yes Yes

object applet Not available Yes Yes

onblur a area button input label select textarea Yes Yes Yes

onchange input select textarea Yes Yes Yes

onclick applet basefont font Not available Yes Yes

onclick frame frameset iframe Not available Not available Yes

onclick all elements but base bdo br head html meta param script style title Yes Yes Yes

ondblclick applet basefont font Not available Yes Yes

ondblclick frame frameset iframe Not available Not available Yes

ondblclick all elements but base bdo br head html meta param script style title Yes Yes Yes

onfocus a area button input label select textarea Yes Yes Yes

onkeydown applet basefont font Not available Yes Yes

onkeydown frame frameset iframe Not available Not available Yes

onkeydown all elements but base bdo br head html meta param script style title Yes Yes Yes

onkeypress applet basefont font Not available Yes Yes

onkeypress frame frameset iframe Not available Not available Yes

onkeypress all elements but base bdo br head html meta param script style title Yes Yes Yes

onkeyup applet basefont font Not available Yes Yes

onkeyup frame frameset iframe Not available Not available Yes

onkeyup all elements but base bdo br head html meta param script style title Yes Yes Yes

onload frameset Not available Not available Yes

onload body Yes Yes Yes

onmousedown applet basefont font Not available Yes Yes

onmousedown frame frameset iframe Not available Not available Yes

onmousedown all elements but base bdo br head html meta param script style title Yes Yes Yes

onmousemove applet basefont font Not available Yes Yes

onmouseout frame frameset iframe Not available Not available Yes

onmouseout all elements except base bdo br head html meta param script style title Yes Yes Yes

onmouseover applet basefont font Not available Yes Yes

onmouseover frame frameset iframe Not available Not available Yes

onmouseover all elements but base bdo br head html meta param script style title Yes Yes Yes

onmouseup applet basefont font Not available Yes Yes

onmouseup frame frameset iframe Not available Not available Yes

onmouseup all elements but base bdo br head html meta param script style title Yes Yes Yes

onreset form Yes Yes Yes

onselect input textarea Yes Yes Yes

onsubmit form Yes Yes Yes

onunload frameset Not available Not available Yes

onunload body Yes Yes Yes

profile head Yes Yes Yes

readonly input textarea Yes Yes Yes

rel a link Yes Yes Yes

rev a link Yes Yes Yes

rows frameset Not available Not available Yes

rows textarea Yes Yes Yes

rowspan td th Yes Yes Yes

rules table Yes Yes Yes

scheme meta Yes Yes Yes

scope td th Yes Yes Yes

scrolling frame iframe Not available Not available Yes

selected option Yes Yes Yes

shape a area Yes Yes Yes

size basefont font Not available Yes Yes

size hr No Yes Yes

size input select Yes Yes Yes

span col colgroup Yes Yes Yes

src frame iframe Not available Not available Yes

src img input script Yes Yes Yes

standby object Yes Yes Yes

start ol No Yes Yes

style basefont Not available Yes Yes

style all elements but base head html meta param script style title Yes Yes Yes

summary table Yes Yes Yes

tabindex a area button input select textarea Yes Yes Yes

target a No Yes Yes

text body No Yes Yes

title basefont Not available Yes Yes

title all elements but base head html meta param script title Yes Yes Yes

type ol ul No Yes Yes

type a button form input link object param script style Yes Yes Yes

usemap img input Yes Yes Yes

valign col colgroup tbody td tfoot th thead tr Yes Yes Yes

value button input option param Yes Yes Yes

valuetype param Yes Yes Yes

version html No Yes Yes

vlink body No Yes Yes

vspace applet Not available Yes Yes

vspace img No Yes Yes

width applet Not available Yes Yes

width iframe Not available Not available Yes

width hr td th No Yes Yes

width col colgroup img table Yes Yes Yes

Real Benefits

rich — Wed, 01 Oct 2008 09:18:07 +0000

If the bigger businesses are going to embrace web accessibility, they’ll need to see clear financial benefits and good returns on their investments. Legal and General’s recent re-design experience provides a solid example of the real business benefits to be gained from developing and accessible web site.

The Legal and General site was re-designed in 2005, with a view to increasing it’s overall accessibility levels following some concern about the old site’s potential for litigation under the UK Disability Discrimination Act. One year following the site’s relaunch, the following ‘indirect’ benefits were noted:

A 30% increase in natural search-engine traffic

A significant improvement in Google rankings for all target keywords

75% reduction in time for pages to load

Cross browser-compatibility increased (not a single complaint since the redesign)

Site now accessible to mobile devices

Time to manage content reduced from average of five days to 0.5 days per job

95% increase in visitors getting a life insurance quote

90% increase in Life insurance sales online

Savings of £200K annually on site maintenance

100% return on investment in less than 12 months.

Clear evidence from a competitive company that increasing overall web accessibility can result in significant business and financial benefits.

Quick Web Accessibility Tips

rich — Wed, 01 Oct 2008 09:13:16 +0000

The following “Quick Tips” summarise some of the key concepts of accessible Web design.

These are not complete guidelines, but should be viewed as “quick ‘n’ dirty” tests for some of the checkpoints from the Web Content Accessibility Guidelines (WCAG) 1.0.

WCAG 1.0 supporting documents include a simplified Checklist and a detailed document describing techniques for implementing the Guidelines that includes references to both HTML techniques and CSS techniques. There is also a multimedia curriculum presentation which explains how to use the guidelines but it should be noted that this presentation is dated March 2000 and, consequently, maybe be somewhat outdated in regard to current browser technology.

The Checks

Images & animations: Use the alt attribute to describe the function of each visual.

One method that has been previously described for checking alt text is to place the cursor over an image, or animation and look for a small tooltip window displaying the contents of the alt attribute. Unfortunately, this only works within Internet Explorer which, incorrectly, displays alt text in this fashion. One, cross-browser, method for checking that alt text is, not only present on appropriate image elements, but is also suitably descriptive, is to check a page within a graphical browser with image display disabled. Even better, try looking at the page using a text-only browser such as Lynx.

If you are using image buttons for navigation, is it still possible to navigate the page, or site, effectively within a text-only browser? If images display important additional information, is that information also available within the alt text?

Finally, imagine reading the page aloud over the telephone. What would you say, upon encountering an image, if you wanted to convey the correct information to the listener?

Image maps. Use the client-side map and text for hotspots.

If you are using image maps, try to use client-side maps rather than server-side maps. As well as providing a description of a map using the alt attribute, ensure that you also provide text links for each hot spot within the map to ensure that users of non-graphical browsers etc. can still navigate effectively.

Multimedia. Provide captioning and transcripts of audio, and descriptions of video.

If you are making use of videos, have you provided alternative text which is synchronised to the video in order to obtain a ‘captioning’ effect? Do the captions convey the same basic information (where possible) as the video itself? Disable the video display. Can you still follow the presentation?

Are you using audio to convey information? If so, turn your speakers off and check that the text transcripts of your audio information convey the same basic information. Wherever possible, use simple language for audio transcripts as many deaf users will, by default, use sign language as their primary method of communication with spoken/written language as a second language.

Hypertext links. Use text that makes sense when read out of context. For example, avoid click here.

Screen reader users may jump from link to link within a given document without reading the intervening text. This is broadly analogous to the way in which sighted users often “scan” large documents looking for keywords or phrases before reading the surrounding text properly. In such a situation, link text along the lines of More information may be meaningless as there is no indication of what information is being referred to. Try reading link text out aloud without referring to the accompanying context. Does it make sense? Would a user be able to broadly understand where such a link was leading to? If not, amend the link text so that it reads, for example, More information on our full product range

Page organisation. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

View your page in a graphical browser with all styling disabled or using a text-only browser. Is the page organisation still clear? Can lists be easily identified? Does the structure of pages vary from one to another? Using a consistent structure within all pages on a site increases the chances that information can be located easily or avoided when necessary. Are your navigation bars, or menus, in the same place on every page? Are page headers and footers structured in a similar manner across the site? Using a random page from your site, is it possible to accurately predict where the main page content will be on any other page before you view it?

Graphs & charts. Summarise or use the longdesc attribute.

Graphs and charts should be treated in a similar manner to other graphics but may require more textual information than is appropriate with a simple photograph. Although WCAG 1.0 mentions the longdesc attribute, browser support for longdesc is currently limited. Try looking at the page using a text-only browser. Does the alt text convey enough information for those users who may be unable to see the chart or graph? If not, consider adding descriptions of such images on a separate page and provide a text link to the description near the graph, or chart, itself.

Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.

Do not rely on client-side technology. Not all users have access to javascript, for example. Does your page still function effectively with javascript switched off? If you’re making use of Flash, test the page out in a browser that doesn’t have the appropriate plug-in. Is the information within the page still accessible? As above, using a text-only browser is an excellent way of checking for these accessibility issues but, be warned, incorporating a no-script alternative that simply suggests that users download the latest plug-in etc, is not an appropriate solution.

Frames. Use the noframes element and meaningful titles.

Whilst the number of older browsers that cannot access frames has undoubtedly fallen, it cannot be assumed that users will always arrive at a framed site by means of its frameset page. Try viewing one of the underlying framed pages without accessing the frameset. Can users still navigate to other areas of the site? Use the no-frames element to provide an alternative navigation mechanisem for those few users who are still using technologies that cannot access frames.

Tables. Make line-by-line reading sensible. Summarise!

Are you using tables? Do they contain data or are they used for layout? If possible, consider CSS for layout instead. Use the caption element to provide short summaries of tabulated data. Some older screen readers access tabulated information by column rather than by row, so ensure that the content still makes sense when read aloud on a column-by-column basis. W3C also provides a table lineariser that can be useful in this respect.

Check your work. Validate. Use tools, checklist, and guidelines.

One of the most basic requirements of an accessible page is that it has been built using compliant HTML techniques. If your page does not validate according to its DOCTYPE, then it may contain elements that cannot be accessed by a range of assistive technologies. Single pages can be validated online using W3C‘s HTML Validation Service. Multiple pages, and even entire sites (up to 100 pages), can also be validated using the Web Design Group’s Validation Service but be warned that some differences have been noticed between the two parsing engines when validating custom DTDs.

Basic online, automated, accessibility checks can be made using Hisoftware’s Cynthia Says portal but this should be supported by manual reference to the WCAG Guidelines.

The Case For Web Accessibility

rich — Wed, 01 Oct 2008 09:09:36 +0000

There are many reasons why it is important to consider, not only how your web site resources operate, but also how easily they can be accessed by those with a disability.

The Legal Case

Firstly there is the legal responsibility embodied in the Disability Discrimination Act 1995 (‘the Act’) that places a responsibility upon providers to ensure that disabled individuals have effective access to services and information.

The Act affects every service provider in the UK whether in the private, public or voluntary sectors and covers “access to and use of information only services”.

For example, under the provisions section 19 of the Act, it is unlawful for a provider of services to discriminate against a disabled person:

(a) in refusing to provide, or deliberately not providing, to the disabled person any service which he provides, or is prepared to provide, to members of the public;

Section 19(3) goes on to provide examples of the services. Sub-section (b) applies to “access to and use of means of communications” and sub-section (c) applies to “access to and use of information services”.

Both of these sub-sections clearly apply to the design and functioning of a web site on the Internet.

Statutory codes of practice are issued by the Disability Rights Commission (DRC) an independent body empowered by the Government to help secure civil rights for disabled people.

The DRC can also fund representation for individuals, where it believes discrimination has occurred and, under the provisions of the Disability Rights Commission Act 1999, it has the power to instigate formal investigations into sectors where it believes that discrimination is taking place.

On 27th March 2003, the DRC began a formal investigation into the accessibility levels offered by 1000 web sites. Whilst the final report from this investigation has yet to be released, it is expected to confirm that the vast majority of web sites fail to provide even the most minimal accessibility provision.

The Technical Issues

For a start, the Act does not include any hard and fast rules for acceptable levels of web accessibility.

Not surprisingly, there are web markup standards that can go a long way to ensuring that sites are developed to serve the largest possible audience using the broadest range of hardware and software platforms, and with the needs of disabled users taken into consideration. These, internationally accepted, standards are produced, and maintained, by the W3C Consortium who also provide validation tools to assist designers in creating markup compliant web sites.

Validating sites against the W3C standards can go a long way towards achieving minimal accessibility levels.

However, the World Wide Web Consortium (W3C) has also compiled a set of guidelines regarding web accessibility levels. Known as the Web Content Accessibility Guidelines (WCAG)1.0, they have been produced under the auspices of the W3C’s Web Accessibility Initiative (WAI) and compliance with them is an obvious demonstration that web accessibility is being taken seriously.
The WCAG guidelines are divided into three Priorities, or Levels:

Priority 1 (Level A): This is considered mandatory for all web sites.

Priority 2 (Level AA): Web sites should actively work towards this level, as part of an ongoing accessibility policy.

Priority 3 (Level AAA): Some web sites may consider compliance with this level in order to maximise site accessibility.

Service providers should, therefore, ensure that their sites comply with Priority 1 (Level A) and seriously consider working towards Priority 2 (Level AA) and possibly even Priority 3 (Level AAA).

Whilst there are some parsing engines that can assess the general accessibility levels of a given web page (e.g. Watchtower’s “Bobby” and the Outreach Project “Cynthia Says”), they can, at best, only give an accessibility estimate that should then be verified by an independent expert.

Remember – the duty is a continuing one as ongoing developments, especially in the field of IT adaptive technology, may improve potential web accessibility. Therefore it may be advisable to adopt a site accessibility policy and to review both this, and the site’s accessibility levels, on a regular basis.

The Business Case

There are approximately 10.5 million people with disabilities in the UK at present, who have a cumulative disposable income of over £50 billion. How many organisations would knowingly disregard such a considerable sector of their potential customer base?

But, most significantly, the effective implementation of good practice in the design of an IT resource or website benefits everyone – whether they have special requirements of access or not. This is because the overall design is concerned with the best implementation of a wide range of elements including colour, graphics, text, multi-media, frames, and dynamic elements. It addresses the many inconsistencies that can arise in the overall experience of each user.

When such a holistic approach is applied, the result is a resource that is easy to use for all – regardless of what technology, specialist or otherwise, is being used to access it.

Is Your Web Site Accessible?

rich — Wed, 01 Oct 2008 09:06:09 +0000

Accessibility, in its broadest sense, means providing the flexibility to accommodate individual service user’s needs and preferences. In an IT context, accessibility refers to adapting computer technology to make it usefully available to more people than would otherwise be the case.

Web accessibility is specifically aimed at opening up resources on the World Wide Web to allow for the participation of people with disabilities.

Web Accessibility

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
(Tim Berners-Lee, W3C Director and inventor of the World Wide Web)

For those unfamiliar with web accessibility issues, consider the fact that many of your site visitors may be operating in contexts very different from those you might expect or assume:

They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.

They may have difficulty reading or comprehending text.

They may not have, or be able, to use a keyboard or mouse.

They may have a text-only screen, a small screen, or a slow Internet connection.

They may not speak or understand fluently the language in which the document is written.

They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

They may be unable to see colours at all. Many people (about 8% of men and 0.5% of women) are unable to distinguish certain colours, such as red and green.

However, many web sites exist that have completely ignored published web standards and sport complex screen layouts without considering the accessibility implications. These sites are aimed at impressing and engaging the mainstream, non-disabled, visitor but they may confuse and alienate people with visual or cognitive impairments. New developments may be inaccessible to a wide range of web users, either because their hardware and software cannot support the new features, or because the feature was not designed with universal accessibility in mind.

For example:

Will a web page offer the same access to information if viewed in a text-only browser compared to a graphical browser?

Does a text-based page use simple language that is understandable by those with cognitive difficulties?

What does an informational page supply in the way of graphical assistance for people with reading difficulties?

Are online forms accessible to users who cannot use a mouse or keyboard?

Nor is it safe to assume that web site visitors will be using “standard technologies”.

On the Web, there is no such thing as a “standard user” let alone a “standard technology”, yet, despite this, too many sites sport the disclaimer:

This site is best viewed using…

If you intend to use such a disclaimer, it should at least be honest and say:

This site is best viewed on my system and my monitor at my house.

For, if you haven’t incorporated a basic level of accessibility into your site design, that is about all you can claim with any conviction.

Pattern	Meaning	Selector Type
*	Matches any element.	Universal selector
E	Matches any E element (eg `h2`,`span`)	Type selector
E F	Matches any F element that is a descendant of an E element	Descendant selector
E > F	Matches any F element that is a child of an element E	Child selector
E + F	Matches any F element immediately preceded by an element E	Adjacent selector
E[foo]	Matches any E element with the “foo” attribute set (whatever the value)	Attribute selector
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”	Attribute selector
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”	Attribute selector
E[lang\|="en"]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.	Attribute selector
DIV.warning	The same as DIV[class~="warning"]	Class selector
E#myid	Matches any E element ID equal to “myid”.	ID selector
E:first-child ^[1]	Matches element E when E is the first child of its parent	Pseudo-class
:first-line ^[1]	Applies style to the first formatted line of a paragraph	Pseudo-class
:first-letter ^[1]	May be used for “initial caps” and “drop caps”, which are common typographical effects	Pseudo-class
E:active E:hover E:focus	Matches E during certain user actions	Dynamic pseudo-class
:before ^[2] :after ^[2]	Can be used to insert generated content before or after an element’s content	Dynamic pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)	Link pseudo-class
E:lang(c)	Matches element of type E if it is in (human) language ‘c’ (the document language specifies how language is determined)	:lang() pseudo-class

Element	Strict	Transitional	Frameset
	Yes	Yes	Yes
!DOCTYPE	Yes	Yes	Yes
a	Yes	Yes	Yes
abbr	Yes	Yes	Yes
acronym	Yes	Yes	Yes
address	Yes	Yes	Yes
applet	No	Yes	Yes
area	Yes	Yes	Yes
b	Yes	Yes	Yes
base	Yes	Yes	Yes
basefont	No	Yes	Yes
bdo	Yes	Yes	Yes
big	Yes	Yes	Yes
blockquote	Yes	Yes	Yes
body	Yes	Yes	No
br	Yes	Yes	Yes
button	Yes	Yes	Yes
caption	Yes	Yes	Yes
center	No	Yes	Yes
cite	Yes	Yes	Yes
code	Yes	Yes	Yes
col	Yes	Yes	Yes
colgroup	Yes	Yes	Yes
dd	Yes	Yes	Yes
del	Yes	Yes	Yes
dfn	Yes	Yes	Yes
dir	No	Yes	Yes
div	Yes	Yes	Yes
dl	Yes	Yes	Yes
dt	Yes	Yes	Yes
em	Yes	Yes	Yes
fieldset	Yes	Yes	Yes
font	No	Yes	Yes
form	Yes	Yes	Yes
frame	No	No	Yes
frameset	No	No	Yes
h1 to h6	Yes	Yes	Yes
head	Yes	Yes	Yes
hr	Yes	Yes	Yes
html	Yes	Yes	Yes
i	Yes	Yes	Yes
iframe	No	Yes	Yes
img	Yes	Yes	Yes
input	Yes	Yes	Yes
ins	Yes	Yes	Yes
kbd	Yes	Yes	Yes
label	Yes	Yes	Yes
legend	Yes	Yes	Yes
li	Yes	Yes	Yes
link	Yes	Yes	Yes
map	Yes	Yes	Yes
menu	No	Yes	Yes
meta	Yes	Yes	Yes
noframes	No	No	Yes
noscript	Yes	Yes	Yes
object	Yes	Yes	Yes
ol	Yes	Yes	Yes
optgroup	Yes	Yes	Yes
option	Yes	Yes	Yes
p	Yes	Yes	Yes
param	Yes	Yes	Yes
pre	Yes	Yes	Yes
q	Yes	Yes	Yes
s	No	Yes	Yes
samp	Yes	Yes	Yes
script	Yes	Yes	Yes
select	Yes	Yes	Yes
small	Yes	Yes	Yes
span	Yes	Yes	Yes
strike	No	Yes	Yes
strong	Yes	Yes	Yes
style	Yes	Yes	Yes
sub	Yes	Yes	Yes
sup	Yes	Yes	Yes
table	Yes	Yes	Yes
tbody	Yes	Yes	Yes
td	Yes	Yes	Yes
textarea	Yes	Yes	Yes
tfoot	Yes	Yes	Yes
th	Yes	Yes	Yes
thead	Yes	Yes	Yes
title	Yes	Yes	Yes
tr	Yes	Yes	Yes
tt	Yes	Yes	Yes
u	No	Yes	Yes
ul	Yes	Yes	Yes
var	Yes	Yes	Yes

Name	Related Elements	Strict	Transitional	Frameset
abbr	td th	Yes	Yes	Yes
acronym	td th	Yes	Yes	Yes
accept-charset	form	Yes	Yes	Yes
accept	form input	Yes	Yes	Yes
accesskey	a area button input label legend textarea	Yes	Yes	Yes
action	form	Yes	Yes	Yes
align	applets	Not available	Yes	Yes
align	iframe	Not available	Not available	Yes
align	caption div h1-h6 hr img input legend p table	No	Yes	Yes
align	col colgroup tbody td tfoot th thead tr	Yes	Yes	Yes
alink	body	No	Yes	Yes
alt	applet	Not available	Yes	Yes
alt	area img input	Yes	Yes	Yes
archive	applet	Not available	Yes	Yes
archive	object	Yes	Yes	Yes
axis	td th	Yes	Yes	Yes
background	body	No	Yes	Yes
bgcolor	table tr td th body	No	Yes	Yes
border	img	No	Yes	Yes
border	table	Yes	Yes	Yes
cellpadding	table	Yes	Yes	Yes
cellspacing	table	Yes	Yes	Yes
char	col colgroup tbody td tfoot th thead tr	Yes	Yes	Yes
charoff	col colgroup tbody td tfoot th thead tr	Yes	Yes	Yes
charset	a link script	Yes	Yes	Yes
checked	input	Yes	Yes	Yes
cite	blockquote q del ins	Yes	Yes	Yes
class	all elements except base basefont head html meta param script style title	Yes	Yes	Yes
classid	object	Yes	Yes	Yes
code	applet	Not available	Yes	Yes
codebase	applet	Not available	Yes	Yes
codebase	object	Yes	Yes	Yes
codetype	object	Yes	Yes	Yes
color	basefont font	Not available	Yes	Yes
cols	frameset	Not available	Not available	Yes
cols	textarea	Yes	Yes	Yes
colspan	td th	Yes	Yes	Yes
compact	dir dl menu ol ul	Not available	Yes	Yes
content	meta	Yes	Yes	Yes
coords	a area	Yes	Yes	Yes
data	object	Yes	Yes	Yes
datetime	del ins	Yes	Yes	Yes
declare	object	Yes	Yes	Yes
defer	script	Yes	Yes	Yes
dir	apple basefont	Not available	Yes	Yes
dir	frame frameset iframe	Not available	Not available	Yes
dir	all elements except base br param script	Yes	Yes	Yes
disabled	button input optgroup option select textarea	Yes	Yes	Yes
enctype	form	Yes	Yes	Yes
face	basefont font	Not available	Yes	Yes
for	label	Yes	Yes	Yes
frame	table	Yes	Yes	Yes
frameborder	frame iframe	Not available	Not available	Yes
headers	td th	Yes	Yes	Yes
height	applet	Not available	Yes	Yes
height	iframe	Not available	Not available	Yes
height	td th	No	Yes	Yes
height	img	Yes	Yes	Yes
href	a area link base	Yes	Yes	Yes
hreflang	a link	Yes	Yes	Yes
hspace	applet	Not available	Yes	Yes
hspace	img	No	Yes	Yes
http-equiv	meta	Yes	Yes	Yes
id	all elements except base head html meta script style title	Yes	Yes	Yes
ismap	input	No	Yes	Yes
ismap	img	Yes	Yes	Yes
label	option optgroup	Yes	Yes	Yes
lang	applet basefont	Not available	Yes	Yes
lang	frame frameset iframe	Not available	Not available	Yes
lang	all elements except base br param script	Yes	Yes	Yes
link	body	No	Yes	Yes
longdesc	frame iframe	Not available	Not available	Yes
longdesc	img	Yes	Yes	Yes
marginheight	frame iframe	Not available	Not available	Yes
marginwidth	frame iframe	Not available	Not available	Yes
maxlength	input	Yes	Yes	Yes
media	link style	Yes	Yes	Yes
method	form	Yes	Yes	Yes
multiple	select	Yes	Yes	Yes
name	applet	Not available	Yes	Yes
name	frame iframe	Not available	Not available	Yes
name	a button input map meta param select textarea	Yes	Yes	Yes
nohref	area	Yes	Yes	Yes
noresize	frame	Not available	Not available	Yes
noshade	hr	No	Yes	Yes
nowrap	td th	No	Yes	Yes
object	applet	Not available	Yes	Yes
onblur	a area button input label select textarea	Yes	Yes	Yes
onchange	input select textarea	Yes	Yes	Yes
onclick	applet basefont font	Not available	Yes	Yes
onclick	frame frameset iframe	Not available	Not available	Yes
onclick	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
ondblclick	applet basefont font	Not available	Yes	Yes
ondblclick	frame frameset iframe	Not available	Not available	Yes
ondblclick	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
onfocus	a area button input label select textarea	Yes	Yes	Yes
onkeydown	applet basefont font	Not available	Yes	Yes
onkeydown	frame frameset iframe	Not available	Not available	Yes
onkeydown	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
onkeypress	applet basefont font	Not available	Yes	Yes
onkeypress	frame frameset iframe	Not available	Not available	Yes
onkeypress	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
onkeyup	applet basefont font	Not available	Yes	Yes
onkeyup	frame frameset iframe	Not available	Not available	Yes
onkeyup	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
onload	frameset	Not available	Not available	Yes
onload	body	Yes	Yes	Yes
onmousedown	applet basefont font	Not available	Yes	Yes
onmousedown	frame frameset iframe	Not available	Not available	Yes
onmousedown	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
onmousemove	applet basefont font	Not available	Yes	Yes
onmouseout	frame frameset iframe	Not available	Not available	Yes
onmouseout	all elements except base bdo br head html meta param script style title	Yes	Yes	Yes
onmouseover	applet basefont font	Not available	Yes	Yes
onmouseover	frame frameset iframe	Not available	Not available	Yes
onmouseover	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
onmouseup	applet basefont font	Not available	Yes	Yes
onmouseup	frame frameset iframe	Not available	Not available	Yes
onmouseup	all elements but base bdo br head html meta param script style title	Yes	Yes	Yes
onreset	form	Yes	Yes	Yes
onselect	input textarea	Yes	Yes	Yes
onsubmit	form	Yes	Yes	Yes
onunload	frameset	Not available	Not available	Yes
onunload	body	Yes	Yes	Yes
profile	head	Yes	Yes	Yes
readonly	input textarea	Yes	Yes	Yes
rel	a link	Yes	Yes	Yes
rev	a link	Yes	Yes	Yes
rows	frameset	Not available	Not available	Yes
rows	textarea	Yes	Yes	Yes
rowspan	td th	Yes	Yes	Yes
rules	table	Yes	Yes	Yes
scheme	meta	Yes	Yes	Yes
scope	td th	Yes	Yes	Yes
scrolling	frame iframe	Not available	Not available	Yes
selected	option	Yes	Yes	Yes
shape	a area	Yes	Yes	Yes
size	basefont font	Not available	Yes	Yes
size	hr	No	Yes	Yes
size	input select	Yes	Yes	Yes
span	col colgroup	Yes	Yes	Yes
src	frame iframe	Not available	Not available	Yes
src	img input script	Yes	Yes	Yes
standby	object	Yes	Yes	Yes
start	ol	No	Yes	Yes
style	basefont	Not available	Yes	Yes
style	all elements but base head html meta param script style title	Yes	Yes	Yes
summary	table	Yes	Yes	Yes
tabindex	a area button input select textarea	Yes	Yes	Yes
target	a	No	Yes	Yes
text	body	No	Yes	Yes
title	basefont	Not available	Yes	Yes
title	all elements but base head html meta param script title	Yes	Yes	Yes
type	ol ul	No	Yes	Yes
type	a button form input link object param script style	Yes	Yes	Yes
usemap	img input	Yes	Yes	Yes
valign	col colgroup tbody td tfoot th thead tr	Yes	Yes	Yes
value	button input option param	Yes	Yes	Yes
valuetype	param	Yes	Yes	Yes
version	html	No	Yes	Yes
vlink	body	No	Yes	Yes
vspace	applet	Not available	Yes	Yes
vspace	img	No	Yes	Yes
width	applet	Not available	Yes	Yes
width	iframe	Not available	Not available	Yes
width	hr td th	No	Yes	Yes
width	col colgroup img table	Yes	Yes	Yes