Help with accessibility!

[Jick]

Hey guys...

As most of you know I'm currently working on a new design for my site. Right now I only have the basic layout and stuff done. Before I add any content I want to make sure it is valid in the area of accessibility. I think if I do it now it will make it easier to keep it valid as I add content. I have tried going through the Bobby validator and the Cynthia one but I just don't understand how to read those or what I need to fix. I was wundering if you guys might be able to help me understand them and get my page valid. I would greatly appreciate it.

[David Harrison]

Well with your navigation, you have empty links:

<a title="Contact Us" accesskey="c" href="contact.php"></a>

You then fill in the gaps with background images which are just solid blocks of colour and text, these could and should be easily replaced with two background colours and some text. The text should also be resizable for partially sighted users.
You should also have variable sized fonts for the whole of your page otherwise the affore-mentioned partially sighted users may not be able to read your site content. This means specifying font-sizes in em's or %'s.

Don't use images for spacers, just use some bottom padding. Also every image should have a proper alt attribute, not just alt="".

You have used lists for your navigational links, but then for your text you have not used paragraphs. Semantic mark-up all the way!

Hide your CSS from older browsers that won't understand it by including it between some <style> tags:

<style type="text/css" media="all">
@import "/new/style.css";
</style>

The last thing that I can spot is try using XHTML 1.1 and send it as application/xhtml+xml, it's better than normal XHTML (for reasons that I've forgotton right now) and it's just as strict, if not more so, that XHTML 1.0 Strict.

I also find irony when you call yourself Flexible Web Design and have a fixed width layout.
Try an elastic layout.

These are just the things that I spotted, I'm sure there are more that I missed but I'm sure that someone else can pick up on those.

[Jick]

Thank you for the reply! I will try to fix my problems. I knew there would be lots, that's why I asked before I got too far into it and then there would be double the problems.

The "Flexible" in "Flexible Web Design" doesn't mean that the site is flexible, rather it means that we are flexible as a company and are always willing to work with the customer and change when needed. I guess the point isn't getting accross as I hoped.

Once again thank you for the reply and I will get to work right away on those problems. I still have alot to learn about accessibility but hopfully making this accessible will give me a better understanding of it.

[Sam]

in general, access key's do very little good if people don't know they are there. Its nice to have something like this:
<li><a title="Home" accesskey="h" href="index.php"><span class="accesskey">H</span>ome</a></li>
then you would highlight/underline it with CSS
It's also nice to provide Skip Navs for screenreaders

[Jick]

Ok, I've been working for hours getting as much as I could fixed. I have done quite a bit. Now I have run into a problem. I changed the image below the nav bar to be in the background of the div instead of a image inside the div and I set the div to the height of the image and now it's wigging out. In IE it looks like it is 5 or 6 pixels too tall and in FF it looks like it is 1 pixel too short. It is supposed to be exactally 6 pixels high. I'm not sure what is causing it but I can't figure it out so I thought I would go ahead and ask. I would greatly appreciate the help!

[David Harrison]

Well your site doesn't seem to be there right now so I'll just take my best guess.

Try setting the font-size in that bottom div to 1px, IE sometimes only allows elements to be as short as the font-size. I can't comment on the FF issue since I don't have it at school and the System Admin has banned me from downloading it again.

[Robert Wellock]

Making CSS inaccessible to various user-agents is that a web accessible attitude it shouldn't be done purely for the sake of hiding, again a 404.

[Vladdy]

Originally posted by samij586
in general, access key's do very little good if people don't know they are there. Its nice to have something like this:
<li><a title="Home" accesskey="h" href="index.php"><span class="accesskey">H</span>ome</a></li>
then you would highlight/underline it with CSS
It's also nice to provide Skip Navs for screenreaders

When you put a letter in a separate tag - you break the word apart and therefore make it inaccessible for SEs.
I would say this is a significant loss when you do it with links because you lose the term-link association.
In most cases (like the example you posted) :first-letter would do the job.

[Jick]

Oh sorry about that guys!

This is currently on my local testing server and I had to shut down my computer for the night. It's back up now if you want to take a look. I greatly appreciate all the help!

[Robert Wellock]

What is it with people using 'charset=windows-1252'? Try UTF-8 I would have also added the title attribute to your header one page is not really enough to get a proper feel for an accessible site.

Also you might want to take your CSS out of your HTML completely and have it all external.

[sciguyryan]

Originally posted by Robert Wellock
What is it with people using 'charset=windows-1252'? Try UTF-8 I would have also added the title attribute to your header one page is not really enough to get a proper feel for an accessible site.

Also you might want to take your CSS out of your HTML completely and have it all external.

Sorted those problems.

[Jick]

Ok I have now put all the CSS into the CSS file and I fixed the UTF-8 thing. I still have that div height problem from before though. Anybody know how to fix it. That has me really stumped.

[David Harrison]

I thought that this one was sorted.

#top {
	padding: 0;
	margin: 0;
	height: 6px;
	font-size:1px;
	border: 0 none inherit;
	background-image: url('images/top.jpg');
}

[sciguyryan]

Originally posted by lavalamp
I thought that this one was sorted.

#top {
	padding: 0;
	margin: 0;
	height: 6px;
	font-size:1px;
	border: 0 none inherit;
	background-image: url('images/top.jpg');
}

Thanks, added

[David Harrison]

You specified the height for your ul as 20px when it is in a div tag of height 18px, IE doesn't care but the standards compliant browsers do, you can fix it by doing this:

div.nav {
	background-image: url('images/mid.jpg');
	margin: 0;
	padding: 0 18px;
	line-height: 18px;
}