www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 32

Thread: Help with accessibility!

  1. #1
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859

    Exclamation Help with accessibility!

    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.

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    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:

    Code:
    <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.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859
    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.

  4. #4
    Join Date
    Aug 2003
    Posts
    1,576
    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

  5. #5
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859
    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!

  6. #6
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    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.
    Every fight is a food fight when you’re a cannibal.

  7. #7
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    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.
    Last edited by Robert Wellock; 04-28-2004 at 09:22 AM.

  8. #8
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    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.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  9. #9
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859
    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!

  10. #10
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    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.

  11. #11
    Join Date
    Jul 2003
    Location
    Wales
    Posts
    1,382
    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.
    Cheers,

    Ryan Jones.

  12. #12
    Join Date
    Feb 2003
    Location
    Aberdeen, Washington, USA
    Posts
    1,859
    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.

  13. #13
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    I thought that this one was sorted.

    Code:
    #top {
    	padding: 0;
    	margin: 0;
    	height: 6px;
    	font-size:1px;
    	border: 0 none inherit;
    	background-image: url('images/top.jpg');
    }
    Every fight is a food fight when you’re a cannibal.

  14. #14
    Join Date
    Jul 2003
    Location
    Wales
    Posts
    1,382
    Originally posted by lavalamp
    I thought that this one was sorted.

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

    Thanks, added
    Cheers,

    Ryan Jones.

  15. #15
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    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:

    Code:
    div.nav {
    	background-image: url('images/mid.jpg');
    	margin: 0;
    	padding: 0 18px;
    	line-height: 18px;
    }
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles