quote:

What do I need to do to make it web accessible?
(currently validates for xhtml & css)

#topnav ul li a:hover{
color:#182C42;
text-decoration:underline;
}

#topnav ul li a:focus, #topnav ul li a:hover, #topnav ul li a:active {
color:#182C42;
text-decoration:underline;
}

quote:

Can't work out why I can't tab to the first nav... odd!

quote:


Anyway, you've got several links in each list item which sort of defeats the purpose of it - you want a single link per list item in the top and bottom navs.

quote:

You've also not used any heading tags which is a problem for search engines and also an accessibility issue as screenreaders etc can navigate a page using the headings - I'd probably be more worried about the search engines though!

quote:


I'd also think about using an image replacement method such as those detailed here: http://www.ryznardesign.com/web_coding/image_replacement/#glrj so that if images aren't present you've at least got a heading in there.

quote:

I'd also add a background colour for the main content box as without images it's harder to read the text against the grey background.

quote:

Very importantly though - don't use PXs to size your fonts as they don't allow resizing in IE. Use % or EMS.

quote:

If you're particularly worried about accessibility then you might want to consider adding skip links at the top of the page.

quote:


I'd stick some top/bottom margins in to your paragraphs and increase the line-height as the text looks too small and a bit cramped up together. You've also got a load of line breaks in there between paragraphs which are redundant as you can just tweak the margins for the paragraphs themselves via the CSS.

<ul>
<li><a href="whatever.html">link 1</a></li>
<li><a href="whatever.html">link 2</a></li>
<li><a href="whatever.html">link 3</a></li>
</ul>

<ul>
<li><a href="whatever.html">link 1</a><a href="whatever.html">link 1</a><a href="whatever.html">link 1</a></li>
<li><a href="whatever.html">link 1</a><a href="whatever.html">link 1</a></li>
</ul>