Please review my css based site about website accessibility.

[sandpetra]

I've created a site about accessible website design so I'd appreciate your views and comments on how to improve the site, especially any website accessibility issues that may be present, or better ways to use the code involved.

Please be kind....:)

http://www.accessibility101.org.uk

[Single Paradox]

I think it is kind of hypocritical when your page doesn't validate, yet you are maintaining a accessibility site. Also, it looks a little too white. Try breaking it up with different shades of green. Maybe try a zebra class thing . :)

[sandpetra]

Whoops! I've fixed that error - it was an extra tag.

Cheers for spotting it - I know the site's got to be whiter than white if I'm seen to be 'preaching' accessible website deign techniques - but in reality it's a resource born out of a passion of mine.

I'm learning all the time - but I'm not an expert!

Thanks again for your constructive criticism.

[Single Paradox]

Anytime :thumbsup:

[ubik]

Hey sandpetra I like the color scheme. I dont think there's too much white. I only have 1 problem.. On Firefox 1.5 and Opera 8.5 browsing at 800x600 resolution your Google Ads cut into the right side container. This does not happen in internet explorer nor when I browse it at 1024x768 resolution. Here's a screenshot so you can see what i mean, I sized the image down a little and compressed it for online viewing:

http://xs69.xs.to/pics/06080/scrsht1.jpg

[TheShaner]

Just a few things I wanted to point out.

1) It bothers me that the google ads are to the left of your resource sites. Those positions should be reversed. The ads should be on the far right.

2) On your tests page, the quick comment box up top looks out of place. Maybe it's the positioning in the banner, or maybe because it's so big. I don't know. It just looks out of place.

3) On your test and contact page, I think there should be some padding in between the solid borders of the content and the vertical dotted line.

4) On pages where the banner is empty, it's just that.. empty. It needs something. A logo. Some text. Something so that it's not just that design.

5) I don't care for how the links on the bottom go from an underline to an overline on hover.

Other than that, I really like the fluid layout. It seems to flow very nice. Everything seems to scale well too when adjusting text size. Good job!

-Shane

[rmedek]

Hey sandpetra,

Overall I like the layout—it's clean, easy to read, and looks great. But I don't think it's really as accessible as you can (should) make it if it's going to be about accessibility.

One thing is the navigation. Although the clickable area is large enough, there's really not enough visual clue to let a user know it's safe to click. The white to yellow text rollover just isn't enough, in my opinion; try making more of a "big fat button" type of effect.

Another quick point along those lines—the light green headers and light green (non-underlined) links might be a bit hard to spot. At least add a underline.

Shane is right about the resources area being to the far right of the Google ads. I actually have ads blocked, so all I noticed was a huge space to travel before I got to the resources area.

A good example of a site built with accessibility in mind is 456 Berea St (http://www.456bereastreet.com/). There are visible links to skip to content and navigation, big, clickable links everywhere, and an alternate, high-contrast stylesheet.

I figure your target audience isn't those who need an accessible website but rather those who need to build one, but still, it's good to practice what you preach, IMO.

Hope this helps…

[sandpetra]

I m thrilled with your comments. Thanks for all the constructive criticisms - I'm hoping to spend a little time over the coming months to improve the site and I will be refering back here.

Thanks again from sunny Scotland!

[mark87]

I like a lot, but the one thing that I really don't like about it, TheShaner has already posted...

1) It bothers me that the google ads are to the left of your resource sites. Those positions should be reversed. The ads should be on the far right.

The ads seem to stand out even more than your actual site content does!

[NickPresta]

Dreamweaver Template, ew.

It looks fine with minimum font-size removed, colors, images and CSS off.

It's fine. Just make it more semantic FTW!

[slushy77]

Ran it through lynx and it came out ok, so it should be ok running it through a screen reader.
Images need alt content describing what they are, especially as they have text in them. Dont be afraid of the title attribute either.
client side scripts also need alternative content

where it is necessary to use images for text (custom font scenario), usually a header, there are a couple of methods worth considering
this:
<h1><img alt="insert h1 text here" src="header.png" title="image representing h1" /></h1> or this one which is far better as it keeps the code lean: (use a css image replacement routine)

<h1>insert h1 text here</h1>