Image links - accessibility issues

[dawn]

I've designed a website for an organisation and have realised that I need to make sure it is accessible.

Website ishere (http://www.gavinandpage.com/arch/index.html)

I've got a lot of the errors sorted out OK but there is one that I just can't seem to fix.

I've designed the main links as image rollovers and when I try to get it validated using 'Bobby' I get the following error:

'Separate adjacent links with more than whitespace.'

I have tried putting brackets [] round the alt tags but this doesn't seem to have fixed my problem and now I've hit a brick wall.

Can any accessibility gurus out there help out at all?

I'm only working on this index page for now to get it all right and then I'll go through the rest of my site.

Also, in the report from Bobby there are also warnings, do these have to be OK'd before I can say it is up to AAA standard?

[brothercake]

'Separate adjacent links with more than whitespace.'
If you structure your navbar as a list, it will take care of that - are you familiar with using lists for navigation?


Also, in the report from Bobby there are also warnings, do these have to be OK'd before I can say it is up to AAA standard?
There's no correlation - validating with Bobby does not mean your site is compliant, so the answer is basicaly "neither yes or no" - what Bobby says means nothing. Frankly, I can't think of the words to sum up my loathing and contempt for Bobby ... Cynthia Says is much better - http://www.contentquality.com/.

But either way, auto validators are just guides, to point out things you might have missed - you really need to go through the WCAG checkpoints manually, and assess your level of conformance based on your estimation of whether you meet each checkpoint. Don't take validator results as evidence of having acheived a particular level.

And be aware - AAA conformance is almost, though not quite, completely impossible.

[dawn]

Thanks for the reply brothercake :thumbsup:

If you structure your navbar as a list, it will take care of that - are you familiar with using lists for navigation?

No, I'm not sure what you mean by this. Do you mean not to use images as links? If so, is there not a way round this?

I'll will also try out using Cynthia instead of Bobby.

[mcdougals4all]

You can keep your images, but use the <ul> element.

Here's some examples:
http://css.maxdesign.com.au/listamatic/

[Kurashu]

http://css.maxdesign.com.au/listamatic/horizontal18.htm

That is the list you want.

[dawn]

Thanks guys :thumbsup:

Those links were a great help. I managed to get it just how I wanted and I now have no errors! Now for the warnings!

[STDestiny]

If i might make one suggestion, make the whole header graphic one image , and put it as a background. Then just place your link/content elements around it using css. That way, screen readers wouldn't have to sift through "unhappy people", arch initiatives logo", "woman on computer", etc.

[dawn]

Yeah thanks STDestiny, I was thinking of doing that to neaten it up a bit. I'm gettig there slowly. At least next time I'll know what to look out for.

Thanks again to everyone.