[thelist] Site Check (Clattco)

Jay Gilmore jay at smashingred.com
Thu Dec 22 12:33:43 CST 2005

Ian Anderson (very thoughtfully) wrote:

>I also noticed that the page title doesn't seem to change as you go 
>through the site - this is also a bad thing.
Not sure what you mean here. The title element is php driven and is set 
at the page top to reflect the content. The title in the title bar shows 
as it should. Please clarify or explain further. :)

>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.
Not clear on this. Are you just suggesting that I place a "skip to 
content" at the top or are you suggesting that I place the sideBar below 
the content in the code? My fear -- and this will show that I am still 
learning -- is that by placing the SideBar (secondary content) after the 
content text it will not position correct as floated. If this is 
incorrect, please let me know?

>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
Um..err what is MSAA is there a reference on how to handle such issues? 
Maybe outside of the scope of this project but I sure want to learn more

>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.
This makes alot of sense.

>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. 

How are you planning to handle the heading levels? Should I be using 
classed divs for content that is not a true section heading? If so, what 
happens when CSS is off? Do I end up with a bunch of plain text with no 
indication of the importance of said text. I am referring to such thins 
as company name, taglines, slogans, etc.

>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.
><label for="foo">Name: <em>(Required)</em></label>
><input id="foo"...etc>
>form label em {
>	position: absolute;
>	left: -2000px;
>	width: 1000px;
This is a great point -- thanks

>Hope this helps
>PS: It also needs a spellcheck - "Rejuvinate" on the home page, for example.
The whole site will get a copy check when I go local to do some batch 
replaces prior to relocation to client server. That part is still in 

>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.
Open to suggestions here. I  didn't want to use Georgia in the menubar 
as it wouldn't differentiate from the headings.
Another note on this is that I will be php scripting an active menu item 
state to control an on or down state to reinforce the main site section 
that is currently being viewed. I found that there are so few pages that 
I don't need crumbs.

Sincerest thanks and all the best,

Jay Gilmore

More information about the thelist mailing list