[thelist] Site Check (Clattco)

[Ian Anderson]

Jay Gilmore wrote:

> I would like to know if I have made any huge gaffes with this site 
> (http://www.smashingred.com/clientspace/clattco/). Nearly complete and 
> just requires copywriting completion.

Well, I like it. Apart from the name  - in Scotland, "clatty" is 
something unpleasant, excessively sticky or a combination thereof. 
Clattco therefore sounds like a joke name, but that's life.

When checking accessibility, one of my favourite things to do is turn 
off the CSS and see how usable the site is, and I thought initially 
yours was really good as far as this goes.

I then noticed that you use H1 for the main page heading but also for 
the company name and the strapline on each page.

This is not good practice for accessibility, IMO.

I also noticed that the page title doesn't seem to change as you go 
through the site - this is also a bad thing.

In my opinion, when considering the needs of screen reader users in 
particular, it is vital that:

a. There is only one H1 on the page, and that the headings are used from 
that point on in the correct order and without skipping a level

b. The page title should be the same as the main heading for the page, 
or as similar as possible. (e.g. "Clattco | Renovations" would be fine, 
for example)

c. Ideally, the page title and the main heading on the page should both 
agree with the link text for the link that they clicked to come there.

In screen readers, the document title is the first thing read. Then the 
user should be able to press "H", "1" or the equivalent key in their 
screen reader to go straight to the main heading for the page. On the 
Clattco site, they need to dig through several layers of non-primary 
content before they get to the real main heading. Having seen the visual 
layout of the page, I can tell that the first few chunks of content are 
actually secondary, but the screen reader user has no clue that this is 
the case.

What is likely to happen is that many users will think that they haven't 
changed page at all, a common problem when the MSAA buffer hasn't been 
properly cleared after following a link, and it sends the screen reader 
user into a loop of refreshing, backtracking and following links that 
lead back to where they are now - all because the initial content is 
repeated or overly similar from page to page

I have a similar heading structure problem on my snippetz.net site, 
where the image replaced banner is actually an H1. Having just done a 
round of accessibility testing for a client, I have realised anew just 
how damaging inappropriate use of headings can be, and I think the way 
you have used them (while as well-meaning as can be) could well be 
frustrating for some screen reader users.

Personally, I'll be changing the way I code such things in the future so 
that the only H1 will be the real page title.

I also think you should perhaps reconsider the content order within the 
content block, so that the ancillary or secondary content comes after 
the primary content in the same way as you have done with the navigation.

Finally on an accessibility issue, when the CSS is turned off there is 
*no* bold text in the content form, apart from the bit that tells the 
user to look for the bold text... You should probably use strong within 
the form labels too, and/or even better for everyone, put the word 
"Required" in parentheses within the label tag for each form element, 
then hide it using CSS absolute positioning.

e.g.

<label for="foo">Name: <em>(Required)</em></label>
<input id="foo"...etc>

form label em {
	position: absolute;
	left: -2000px;
	width: 1000px;
}



Hope this helps

Cheers

Ian

PS: It also needs a spellcheck - "Rejuvinate" on the home page, for example.

PPS: The visual appearance of the main navigation links rather lets down 
the elegant look that you've established - it's just a rather 
unfavourable weight and size for Arial, and looks undesigned. The other 
sizes and weights in your design work well in default settings on IE6 
WinXP. I would try and fiddle with that bit a little more, personally.


-- 
_________________________________________________
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net BETA - Online code library
File, manage and re-use your code snippets online
http://snippetz.net