SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Grantspad69's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    W3C Accessibility standards

    Hi,

    I've just been given the task of translating an existing web page design into code that is accessible according to the W3C Accessibility standards.

    For this reason I have decided to eliminate the use of tables and use divs with CSS positioning - somthing I am trying for te first time.

    I've managed to get the site to be XHTML 1.0 Transitional validated, and got it to look ok on 800*600 and above screen resolution on IE, but get a couple of errors on Firefox and Netscape Navigator.

    The footer bar is out of place and goes across the top just beneath the header. And there is a bit of text next to the News image/subsection that appears benaeth the image rather than next to it.

    Does anybody have any ideas on how I could fix these problems?

    Any help will be appreciated.

    The html: http://www.hewitson.me.uk/bishopauck...accessible.asp

    The CSS(messy at the moment):
    http://www.hewitson.me.uk/bishopauckland3/CSS/main3.css

  2. #2
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Grant,
    Quote Originally Posted by Grantspad69
    ok on 800*600 and above screen resolution on IE, but get a couple of errors on Firefox and Netscape Navigator.
    It's more likely that the errors are in IE and that you've corrected them and now NS & FF are broke.

    Don't code for IE. Code fo FF or Moz and then add repairs for IE.

    Couldn't see much of a problem with the page FF or IE though thte headers behaviour is a little irratic.

    Try adding a clear:both to the div containing the menu.

    Please get rid of the tabindex - no point and they'll make your site less accessible. Put accesskey details on the accessibility page.

    Why is there a h1 around the logo placeholder?
    Is the image really supposed to be an advert placeholder?

    I'd separate the divs if I were you. A bit like this:
    <div>access options...</div>
    <div>banner...</div>
    <div>menu...</div>
    <div>search...</div>
    <div>whitebar</div>
    No point in banding them together.
    But to fix the problem immediately just put clear:both in the CSS #medium.

    Please consider coding the menu like this

    <div id="menu">
    <ul>
    <li><a href="">werwerwe</a></li>
    ...
    </ul>
    </div> <!-- id="menu" -->

    Then
    #menu ul {} - refers to only the ul inside the menu div.
    #menu li {} - as above but li
    #menu a {} - only the links inside menu.
    This method will remove most of the classes cluttering the code.

    Please don't use title tags just to repeat the link text. there's no point.

    I'd also suggest simplifying your accesskey strategy or removing them completely. Nobody actually uses them. If you must, stick to a few to jump to the major locations on the page. e.g. search, navigation, quick links, footer.

    I know that was a bit stiff.
    Sorry got carried away while looking at the code.
    If this is your first CSS design well done, keep it up you're doing okay.

    p.s. you can see why I won't do a site critique
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>


Bookmarks

Posting Permissions

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