W3C Accessibility standards

[Grantspad69]

Hi,

I've just been given the task of translating an existing web page design into code that is accessible according to the W3C Accessibility standards.

For this reason I have decided to eliminate the use of tables and use divs with CSS positioning - somthing I am trying for te first time.

I've managed to get the site to be XHTML 1.0 Transitional validated, and got it to look ok on 800*600 and above screen resolution on IE, but get a couple of errors on Firefox and Netscape Navigator.

The footer bar is out of place and goes across the top just beneath the header. And there is a bit of text next to the News image/subsection that appears benaeth the image rather than next to it.

Does anybody have any ideas on how I could fix these problems?

Any help will be appreciated.

The html: http://www.hewitson.me.uk/bishopauck...accessible.asp

The CSS(messy at the moment):
http://www.hewitson.me.uk/bishopauckland3/CSS/main3.css

[2kool2]

Hi Grant,

ok on 800*600 and above screen resolution on IE, but get a couple of errors on Firefox and Netscape Navigator.

It's more likely that the errors are in IE and that you've corrected them and now NS & FF are broke.

Don't code for IE. Code fo FF or Moz and then add repairs for IE.

Couldn't see much of a problem with the page FF or IE though thte headers behaviour is a little irratic.

Try adding a clear:both to the div containing the menu.

Please get rid of the tabindex - no point and they'll make your site less accessible. Put accesskey details on the accessibility page.

Why is there a h1 around the logo placeholder?
Is the image really supposed to be an advert placeholder?

I'd separate the divs if I were you. A bit like this:

<div>access options...</div>
<div>banner...</div>
<div>menu...</div>
<div>search...</div>
<div>whitebar</div>

No point in banding them together.
But to fix the problem immediately just put clear:both in the CSS #medium.

Please consider coding the menu like this

<div id="menu">
<ul>
<li><a href="">werwerwe</a></li>
...
</ul>
</div> <!-- id="menu" -->

Then
#menu ul {} - refers to only the ul inside the menu div.
#menu li {} - as above but li
#menu a {} - only the links inside menu.
This method will remove most of the classes cluttering the code.

Please don't use title tags just to repeat the link text. there's no point.

I'd also suggest simplifying your accesskey strategy or removing them completely. Nobody actually uses them. If you must, stick to a few to jump to the major locations on the page. e.g. search, navigation, quick links, footer.

I know that was a bit stiff.
Sorry got carried away while looking at the code.
If this is your first CSS design well done, keep it up you're doing okay.

p.s. you can see why I won't do a site critique