How are we doing with accessibility?

[b3uk]

I work for a (we feel) fairly forward-thinking design agency, and we're looking for some feedback in terms of how we are managing accessibilty in our projects.

I'm currently building a site, JIT Scotland (http://jitscotland.whitespacers.com/) (its not finished, or live yet) following our standard guidelines, and I'd appreciate any comments or suggestions (or perhaps praise! ;) ) that anyone here could volunteer.

So, how does it rate?

[jalarie]

Tidy:
line 55 column 27 - Warning: <a> anchor "content" already defined
line 83 column 7 - Warning: <img> lacks "alt" attribute
line 93 column 27 - Warning: <a> anchor "related" already defined
0 errors / 3 warnings

W3C:
1. Error Line 83 column 94: there is no attribute "align".
2. Error Line 83 column 103: required attribute "alt" not specified.

Errors
URI : http://jitscotland.whitespacers.com/includes/style/main.css

* Line: 85 Context : h2
Invalid number : line-height Parse Error - [empty string]
* Line: 249 Context : div#content div#standardpanel
Invalid number : background-position 10px is not a background-position value : right 10px
* Line: 256 Context : div#content div#standardpanel h1
Invalid number : line-height Parse Error - [empty string]
* Line: 275 Context : div#content div#pulloutpanel h1, div#content div#formpanel h1
Invalid number : line-height Parse Error - [empty string]
a.popup span

[toicontien]

1) The links to jump to page content, navigation, etc, need to have some dilineating character between them, like the pipe character (|). This will enable audio browsers to differentiate between the links.

2) The graphic with the text "Welcome to the JIT (Joint Improvement Team) website" needs only that text in the alt attribute. You can do away with the same text outside of the tag. Search engines do a good job of reading image alt's now. In fact, you can do the same for any image heading on the page.

3) On your interior pages (I checked "About JIT") your headings seem to start at H4. The top heading should always be an H1. An H1 starts a unique topic on the page and the H2 - H6 headings divide that unique topic into sub topics.

4) In Firefox on MacOS X, the links in the grayish blue footer are impossible to read because of the small font size. (See attached GIF screenshot)

5) In your contact form, don't be afraid to use block level elements to separate the form fields. It all comes back to screen readers needing a way to differentiate them. Heck. You can even use tables for forms. I do so on a regular basis, as the form label can be considered a table head cell, and the form input is a table data cell (you just don't know what that data is until you fill it in ;)).

Those are about the only things I can see, and they are all fairly minor at that. Your site seems to be about 90% more accessible that any of the other table based sites out there.

[b3uk]

Brilliant, thanks for the feedback. Not quite perfect yet obviously, but hopefully your advice can get us that final 10%!

Thanks for having a look :)

[dera]

make your font size variable i put the font size up and your divs arnt supporting overflow which is making font unvisible. at least allow scroll bars.