|
| |
|
|
vision2000
Posts: 530
From: USA
Status: offline
 |
Feedback please - 2/21/2007 20:18:21
Hi,
Please review the new site design for my web design business.
ihost-websites.com/webdesign
Question...
What do I need to do to make it web accessible?
(currently validates for xhtml & css)
Suggestions welcome.
Thank you
_____________________________
Affordable Web Site Design,
Web Hosting and Promotion
http://www.isitebuild.com
|
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Feedback please - 2/22/2007 9:21:18
Can't work out why I can't tab to the first nav... odd!
Anyway, you've got several links in each list item which sort of defeats the purpose of it - you want a single link per list item in the top and bottom navs.
You also want to add in a focus effect for people using keyboard navigation plus you need to finesse it slightly for IE as it's stupid. So where you've got:
#topnav ul li a:hover{
color:#182C42;
text-decoration:underline;
}
Add in:
#topnav ul li a:focus, #topnav ul li a:hover, #topnav ul li a:active {
color:#182C42;
text-decoration:underline;
}
You've also not used any heading tags which is a problem for search engines and also an accessibility issue as screenreaders etc can navigate a page using the headings - I'd probably be more worried about the search engines though!
I'd also think about using an image replacement method such as those detailed here: http://www.ryznardesign.com/web_coding/image_replacement/#glrj so that if images aren't present you've at least got a heading in there.
I'd also add a background colour for the main content box as without images it's harder to read the text against the grey background.
Very importantly though - don't use PXs to size your fonts as they don't allow resizing in IE. Use % or EMS.
If you're particularly worried about accessibility then you might want to consider adding skip links at the top of the page.
I'd stick some top/bottom margins in to your paragraphs and increase the line-height as the text looks too small and a bit cramped up together. You've also got a load of line breaks in there between paragraphs which are redundant as you can just tweak the margins for the paragraphs themselves via the CSS.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Feedback please - 2/22/2007 9:51:45
Don't please! They've got the radio on full blast in the next room to me - there's an archway between rooms which I've sealed up with a dust sheet but that's it. Plus they're whistling to the damn music!!
I CAN'T WORK IN THIS ENVIRONMENT!! (throws general diva-like strop) plus I've got shed-loads of stuff to do....
I tell you how bad it got - this morning I went to Ikea for a walk round just to get out of the house. How bad is it when going to Ikea is an appealing alternative!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
vision2000
Posts: 530
From: USA
Status: offline
|
RE: Feedback please - 2/22/2007 16:39:08
Thanks very much for the invaluable feedback...I learnt alot about accessibility standards.
Please see my answers below:
quote:
Can't work out why I can't tab to the first nav... odd!
Please clarify
quote:
Anyway, you've got several links in each list item which sort of defeats the purpose of it - you want a single link per list item in the top and bottom navs.
Please clarify
quote:
You've also not used any heading tags which is a problem for search engines and also an accessibility issue as screenreaders etc can navigate a page using the headings - I'd probably be more worried about the search engines though!
Edited
quote:
I'd also think about using an image replacement method such as those detailed here: http://www.ryznardesign.com/web_coding/image_replacement/#glrj so that if images aren't present you've at least got a heading in there.
Couldn't figure this one out
quote:
I'd also add a background colour for the main content box as without images it's harder to read the text against the grey background.
Edited
quote:
Very importantly though - don't use PXs to size your fonts as they don't allow resizing in IE. Use % or EMS.
Edited
quote:
If you're particularly worried about accessibility then you might want to consider adding skip links at the top of the page.
How accessible should the site be?
It validates for section 508 and WCAG Priority 1,2 but get a few warnings for
WCAG Priority 3
quote:
I'd stick some top/bottom margins in to your paragraphs and increase the line-height as the text looks too small and a bit cramped up together. You've also got a load of line breaks in there between paragraphs which are redundant as you can just tweak the margins for the paragraphs themselves via the CSS.
edited
Question on form labels
In this example everything is the same ie label firstname id
<LABEL for="firstname">First name:
<INPUT type="text" id="firstname" tabindex="1">
</LABEL>
In my form I have to use YMLPO
<label> Name:<br />
<input name="YMLPO" type="text" id="YMLP0" tabindex="1" size="20" class="text" />
</label>
How can I remedy this?
Thanks for your patience....you folks are great!
_____________________________
Affordable Web Site Design,
Web Hosting and Promotion
http://www.isitebuild.com
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Feedback please - 2/23/2007 3:14:14
Clarification:
link lists should be:
<ul>
<li><a href="whatever.html">link 1</a></li>
<li><a href="whatever.html">link 2</a></li>
<li><a href="whatever.html">link 3</a></li>
</ul>
Not
<ul>
<li><a href="whatever.html">link 1</a><a href="whatever.html">link 1</a><a href="whatever.html">link 1</a></li>
<li><a href="whatever.html">link 1</a><a href="whatever.html">link 1</a></li>
</ul>
Top and bottom navigation.
The "can't get to the top nav" thing was just what I said - I can't use the tab button to get to the top navigation and I couldn't work out why (no obvious reason that I could see). You should be able to use a keyboard to move around a site - not just a mouse.
Far as the label thing goes - add in the name if you have to. It's not valid in XHTML strict which is what I use but I don't know about Transitional. Don't suppose it'd work using the id instead would it?
How accessible should a site be? As accessible as you can make it. These things really aren't hard. If you run into something that you absolutely can't do for a good reason - then don't. Just be aware of the issue - maybe mention it on an accessibility statement.
Don't just follow what those automated accessibility checkers tell you - they're not good judges of accessibility apart from pointing out gross errors. Your site probably passed those checkers without any heading tags at yet having those headings in there really helps accessibility.
Accessibility is more a common sense approach than ticking boxes.
Don't bother using accesskeys they're actually a hindrance not a help
Don't bother using tabindexes (unless you've got a ridiculously complex layout).
Do put labels on forms
Do have useful alt text on all informational images (use alt="" on non-informational images)
Do try your site without images - does it still work?
Do try to navigate your site without a mouse
Do see what your site looks like without CSS enabled
Do try to use semantic markup
Do try to use skip links if you can
Do try to listen to your site if you can
Do have a decent amount of contrast between text and background
Don't use PX or PT etc to size your fonts
Do make sure your site doesn't break with larger font sizing
Do ensure that your site doesn't fail completely without Javascript
Probably not a great list but it'll be a good starting point.
The image replacement thing will just need further study. It's a commonly used method - I use it myself on 90% of my sites. Just perservere I'm sure you'll work it out eventually.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
