The Welsh Assembly is redeveloping its website. A check of the new homepage shows that:
All of these problems can be fixed quite easily — although some need a little more thought than others — but how they crept through testing I can’t imagine.
The HTML is invalid
It’s a basic accessibility requirement that a document’s HTML should be valid.
- the HTML or XHTML version should be declared
- a DTD should be used
- the page should conform to the declared grammar
For example, this page you’re reading is XHTML 1.0 (Strict) and says so at the very top of the document like this:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
[See : the W3C WCAG on !DOCTYPE]
Checking validity is free and easy. The W3C has an HTML validator so it’s a simple matter to check a document is valid. Validity checks would usually be part of factory acceptance testing by website developers and site acceptance testing by the customer.
The Assembly’s HTML doesn’t validate.
The most obvious problem is the repeated value of an id attribute in the alphabetic navigation device. It looks like this:
The underlying code just gets it wrong:
<span id=\"letter\"><a href=\"…
<span id=\"letter\"><a href=\"…
<span id=\"letter\"><a href=\"…
<span id=\"letter\"><a href=\"…
‘id’ values should be unique in a document. You aren’t supposed to repeat any single id value. It seems the developers are confused by id and the class attribute, whose value may be repeated within a document.
While the letter value of id is repeated, the page can’t pass a validity test and so can’t pass a basic accessibility test. It’s suprising it was written like this in the first place — and that it passed any testing regime at all — but it’s a simple thing to correct.
Top Of Article
The CSS is invalid
Like the HTML, the CSS doesn’t validate. As with the HTML, the CSS can be validated automatically and validation should form a part of development and acceptance testing.
Check the
Welsh Assembly’s CSS.
The problem with the CSS seems to be that Macromedia’s Dreamweaver has been used with incorrect settings and it has inserted this invalid
CSS:
layer-background-image: url(../images/headercontent_top_bar.gif);
layer-background-image has never been supported by CSS, it’s never been supported in Internet Explorer, it’s never been supported in Opera and it’s only been supported in Netscape versions 4 and 6. While this stays the CSS can’t validate.
Top Of Article
alt text for accessible images is completely misunderstood
A very basic accessibility requirement, this, and it’s not too difficult to understand. A blind person who browses the web with a screen reader or a refreshable Braille display relies on the alt value of an image (and perhaps the title and the longdesc too) to understand what the image is. All images should have ALT text, period.
But that’s not the whole story. Website designers often use images to provide decoration, or to force gaps between page elements (so-called ‘spacer’ gifs). In these instances the image alt value should be null
— or a screen reader will read out every little structurally significant but semantically meaningless image’s alttext. This is how semantically redundant images should be marked-up:
<img src="blah” alt=”" width=”{x}” height=”{y}” />
A page can be tested in a text-based browser. Lynx is a free donwload that developers often use.
How not to do it
The Assembly’s website gets it wrong and the homepage will sound like, or read like, a pile of gibberish to a blind person. Like this:
spacer graphic
header curve graphic Cymraeg spacer graphic Home | Help | Contacts |
Site Map | Search header curve graphic
spacer graphic
spacer graphic shadow graphic spacer graphic
curve graphic curve graphic
Croeso - Cynulliad Cenedlaethol Cymru
Welcome - National Assembly for Wales
spacer graphic
Top Of Article
semantic markup isn’t used effectively
From Mark Pilgrim’s
essay on semantic markup:
Blind people can’t just scan the whole page at once; they need to accomplish the same thing in other ways, and the assistive technology they use relies on (among other things) good semantic markup to mimic the things we can do at a glance.
– and the new homepage of the Welsh Assembly Government manages to get this wrong, too. Take a look at this:
The white-on-red text, ‘National Assembly for Wales’, is clearly a heading, semantically. So too is the title of the news item, ‘British Deaf Association and RNID Cymru to visit the Assembly’. To a sighted visitor the semantics stand out because of their color and font weight. A blind user, though, wouldn’t be able to deduce the semantics of the page available to a sighted user because the text isn’t marked up with <hn> tags.
Top Of Article
The page’s language is not declared correctly
Managing bilingual websites is a politically sensitive issue in Wales. The new homepage has a language-selector that takes you from the default (English) to the alternative (Welsh, or Cymraeg).
There’s a cute touch in taking you to a new domain name, cymru.gov.uk but it’s a bit beside the point as ‘.gov’ and ‘.uk’ can’t be translated.
The language declaration in the HTML source of the Welsh-language page looks like this:
<HTML lang="en">
which is just wrong. The language of this page is notEnglish but Welsh (Cymraeg). The language declaration should read:
<HTML lang="cy">
Top Of Article
