Click to See Complete Forum and Search --> : Help with accessibility!
Hey guys...
As most of you know I'm currently working on a new design (http://flexible-web-design.no-ip.com/new/) 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. :D
David Harrison
04-27-2004, 07:48 PM
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 (http://www.alistapart.com/articles/relafont/) 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 (http://forums.webdeveloper.com/showthread.php?s=&threadid=33450) 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. :D
Try an elastic (http://www.alistapart.com/articles/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.
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. :)
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 (http://www.hicksdesign.co.uk/articles/css/skip_navigation_links/) for screenreaders
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! :D
David Harrison
04-28-2004, 04:53 AM
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
04-28-2004, 10:15 AM
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
04-28-2004, 10:45 AM
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 (http://www.hicksdesign.co.uk/articles/css/skip_navigation_links/) 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.
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! :D
Robert Wellock
04-28-2004, 02:04 PM
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
04-28-2004, 02:33 PM
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.
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
04-28-2004, 03:28 PM
I thought that this one was sorted. :rolleyes:
#top {
padding: 0;
margin: 0;
height: 6px;
font-size:1px;
border: 0 none inherit;
background-image: url('images/top.jpg');
}
sciguyryan
04-28-2004, 03:41 PM
Originally posted by lavalamp
I thought that this one was sorted. :rolleyes:
#top {
padding: 0;
margin: 0;
height: 6px;
font-size:1px;
border: 0 none inherit;
background-image: url('images/top.jpg');
}
Thanks, added :)
David Harrison
04-28-2004, 04:05 PM
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;
}
Oh yeah I just noticed that a minute ago and repaired it. It's now fixed. Thank you.
One more thing. I have line-height set to 18px in an attempt to make the nav links centered vertically in the nav bar, however it doesn't seem to be centering exactally. It seems to be more towards the bottom instead of center. Does anybody know how I can fix this? I greatly appreciate all the help everybody has provided. :)
David Harrison
04-28-2004, 04:27 PM
Just reduce the line height a bit.
What would be better would be if you were to specify a font-size in em's, then let the browser work out the corresponding line height. Then use top or bottom padding to center it vertically.
Ok I reduced the line-height and it looks good now. Thanks! :D
I also set the font size to em's now instead of pixels. ;)
Now that it is sorted out I can come back to what this post was about. Does anybody have any more suggestions or see anything that needs to be changed/fixed? If so please let me know.
Thank you all for all the help. :)
i tried to resize the text, and this (http://www.medford.k12.or.us/sample/images/mjdimick.jpg) happened
David Harrison
04-28-2004, 05:10 PM
I don't have any more accessibility suggestions at the moment, but dont set the line height, let the browser do that for you. Use padding to vertically center it.
Paul Jr
04-28-2004, 06:06 PM
Originally posted by lavalamp
I don't have any more accessibility suggestions at the moment, but dont set the line height, let the browser do that for you. Use padding to vertically center it.
Why not? If I a menu where the text needs to be centered, I usually set the line-height to the same value as the height of the <a> -- or <li> -- and that centers the text for me. Most times the height is no more than like 1.2em or something.
David Harrison
04-28-2004, 06:11 PM
If you set the line-height and then the font-size is increased then it will look very strange.
Take a look at this relative font size version of mjdimick's site.
Paul Jr
04-28-2004, 06:17 PM
Originally posted by lavalamp
If you set the line-height and then the font-size is increased then it will look very strange.
I've never had any problems with it.
Originally posted by lavalamp
Take a look at this relative font size version of mjdimick's site.
Looks fine to me -- unless that's not the point and I'm missing something here.
David Harrison
04-28-2004, 06:38 PM
Originally posted by Paul Jr
I've never had any problems with it.Take a look at this (http://www.fsg-uk.com/ahome.php) page in Mozilla. Press Ctrl and + a few times and look at the text in the side-bars.
Originally posted by Paul Jr
Looks fine to me -- unless that's not the point and I'm missing something here.The point is that I haven't set a line height (although if I'd have used a relative line-height it wouldn't have mattered I suppose), I've also used em's and no pixel values for the font-sizes and the layout can strech to contain different sizes of text no problem.
I've also set a font-size of 80% in the body to minimise the difference in font-size changes in IE, this ensures that the text stays readable even on "smallest" in IE.
Originally posted by lavalamp
Take a look at this (http://www.fsg-uk.com/ahome.php) page in Mozilla. Press Ctrl and + a few times and look at the text in the side-bars.Hmm... I went to that page and pressed Ctrl and + and nothing happend.
Also I'm kinda lost after all that. Are you saying I should change my stuff to how you have it in that zip file?
David Harrison
04-28-2004, 07:10 PM
What I posted was a more accessible version of your site because it uses relative font sizes. Use it if you want, make your own, or ignore it completely, it's your choice. :)
If you used IE on http://www.fsg-uk.com/ahome.php then nothing will have happened because Ctrl and + is a Mozilla shortcut for increasing the text size. Also, I set the font-size in pixels so IE isn't able to resize the text.
If you want to know how to change the text sizes on different browsers then check out this (http://www11.brinkster.com/hackus/larger.asp) page.
Paul Jr
04-28-2004, 07:46 PM
Originally posted by lavalamp
Take a look at this (http://www.fsg-uk.com/ahome.php) page in Mozilla. Press Ctrl and + a few times and look at the text in the side-bars.
It appears that's because the height of the element that the link is in is fixed. If the height is set to 1.2em, and the line height is set to 1.2em, then the link will resize fine.
David Harrison
04-28-2004, 08:13 PM
It's because of stuff like this:
font:bold 10px/15px "verdana", sans-serif;
I could have used 10px/150% but I didn't because when I made that site I was dead set on making a pixel perfect site, I know better than that now. ;)
The height of the element is set by the line-height of the text in it by the way.
Paul Jr
04-28-2004, 08:36 PM
Originally posted by lavalamp
It's because of stuff like this:
font:bold 10px/15px "verdana", sans-serif;
I could have used 10px/150% but I didn't because when I made that site I was dead set on making a pixel perfect site, I know better than that now. ;)
The height of the element is set by the line-height of the text in it by the way.
Aha, okay. I wasn't sure about that; I kinda sifted through the stylesheet but I'm too lazy to really look at anything. :D
David Harrison
04-28-2004, 08:48 PM
When I wrote that I also used to compile the code I'd written into as smaller space as possible, so it gets a little hard to read.
So do you guys have any more suggestions or do any of you see any current problems or potential problems?
I have changed the height of the nav bar to em's instead of px's so now it seems to be working quite well if you increase the font size in the browsers.
I would greatly appreciate any and all suggestions and comments. I think I got alot of what you guys said but alot of you posted too so I might have missed something. Thanks for the help! :D
David Harrison
04-30-2004, 03:49 AM
In IE if you change the font size to smaller or smallest the text becomes unreadable. It should remain readable on all settings. You can fix that by putting something like:
font-size:80%;
into your body rules. Then specify slightly larger font sizes in em's for the rest of your page. This will minimise the effect of font-size changes that the user makes.
Other than that I can't spot anything else right now.