Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 39
  1. #1
    Regular Coder
    Join Date
    Jun 2004
    Posts
    194
    Thanks
    5
    Thanked 0 Times in 0 Posts

    WCAG Review Required

    Hey, just finished building my site for work and have designed it to be Triple-A compliant. All of it validates as CSS and XHTML Strict and passes the bobby AAA compiancy and 508 tests as well as the AAA and 508 test with A-Prompt. However as everyone is naturally aware that doesn't neccessarily cover everything so I'd appreciate it if people could review the site and code and let me know of any problems that exist or corrections that should be made in order to make the site AAA compliant. Here's the link:

    http://www.cddps.nhs.uk/dev/index.php

    Thanks in advance.
    -Acid

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It was taught to me in the past to use numbers instead of letters for accesskeys -- you've got most of that covered, but the S for skip menu should probably be a 2, or something or other. Most people won't be able to do that, since hitting the command + S will try and save the web page.

    Everything else looks ok via accessibility -- but sometimes I find having these in the header helps:
    Code:
    <link rel="home" title="Home" href="http://www.website.com/index.php" />
    <link rel="prev" title="who we are" href="http://www.website.com/page1.php" />
    <link rel="next" title="what we do" href="http://www.website.com/page2.php" />
    A home + previous + next page links in the head of the document helps.

    Design is straightforward, and your gradient reminds me much of Microsofts old site, the only issue I see in my browser is in safari and Firefox, and regarding the headers:
    Attached Thumbnails Attached Thumbnails WCAG Review Required-countyd.gif  
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Posts
    194
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the comments, about the access keys, i use those ones as they're the actualy government access keys standard, S is meant to be used for the skip navigation as using alt+S doesn't perform any predifined action

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Acid
    Thanks for the comments, about the access keys, i use those ones as they're the actualy government access keys standard, S is meant to be used for the skip navigation as using alt+S doesn't perform any predifined action
    Understood
    ctrl + S is the Mac version, and can cause interference then with most Mac programs - but I thought there were other reasons, that's why Accessibility Guru's have recommended a number and use it that way:
    http://diveintomark.org/about/accessibility/
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #5
    Regular Coder
    Join Date
    Jun 2004
    Posts
    194
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the comments, about the access keys, i use those ones as they're the actualy government access keys standard, S is meant to be used for the skip navigation as using alt+S doesn't perform any predifined action.

    The <link> part is a good point, cheers for that, i'll sort that out tomorrow when i'm back at work. As for the display prob in Safari/Firefox, cheers for the heads up, I managed to test in IE and Opera but don't have netscape, Safari and Firefox at work so couldn't test in those. I'll try and grab a copy of those browsers so i can test the site as i work on a fix for it, prolly just a css hack that only applies to those browsers unless anyone can think of a better one?

    If anyone else spots any issues please let me know.

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    194
    Thanks
    5
    Thanked 0 Times in 0 Posts
    OK the CSS bugs in Firefox/Opera/Netscape have been fixed, the fix I've applied should correct any display problems in Safari as well but as I don't have a Mac I can't test in Safari, can't seem to find a Windows compatible version of that browser if one even exists.

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks fine in Safari, and you're right it's mac only, but it looks great

    On a side note, something I forgot to bring up -- you are using point sizes for you style sheets:
    http://www.cddps.nhs.uk/dev/style.css

    Which will not resize for handicap users on Internet Explorer... much less, you should only be using pts for print styles, not for screen styles (as point is a print measurement, not a monitor measurement). You should be using em's to allow for text to resize -- this is a necessity for handicap accessibility.

    It used to be recommended to use pixels for font sizes -- that way everyone but IE users for PC can resize their text as needed. But there is now a work around which would allow you to use em's properly.

    In the body:
    Code:
    font-size: 100%;
    Then you can code your stuff in em's by 0.0 scale:
    Code:
    font: normal .75em/1.5em helvetica, arial, sans-serif;
    Sorry this is late, I shoulda' looked at your code first. There are other errors as well:
    1) instead of the bold tag, you should be using <strong> since this works for screenreaders as well
    2) All those break tags are useless, and add absolutely zero structure to the site to make it semantic -- especially since there's nothing semantic in this site! No header tags to structure the document, no paragraphs -- this makes it render poorly in text only browsers, and sounds funky in a screenreader (I tested it) -- while you may pass the computer validated test for accessibility, it would not pass a human validation. Case example:
    Code:
    <div id="content">
    <b class="red">Caring for 500,000 people in town and country.</b><br />
    We provide a range of services and facilities for people with mental health problems or learning disabilities in County Durham and Darlington.
    <br /><br />
    <b>Our Mission statement:</b><br />
    To provide accessible, high quality, effective mental health &amp; learning disability services, which promote and improve health and do so in partnership with individuals and other agencies.
    <br /><br />
    <a href="services.php" title="Our services">Click here for information on our services.</a>
    <br /><br />
    <b>News:</b><br />
    <b>17th August 2004</b>
    <br /><br />
    <b class="red">Special ceremony marks opening of new hospital.</b>
    <br /><br />
    A special ceremony took place today to mark the official opening of a new hospital, which provides specialist services for older people with mental health problems.
    <br /><br />
    Following a &pound;7 million redevelopment the former maternity unit in Bishop Auckland was transformed into a modern facility for older people from the Wear Valley and Sedgefield districts.
    <br /><br />
    The new Auckland Park Hospital was opened by Ken Jarrold, Chief Executive of County Durham and Tees Valley Strategic Health Authority.
    <br /><br />
    <a href="index.php?id=archive" title="News archive">More...</a>
    </div>
    Is not semantic AT ALL. That is highly important in accessibility -- and your site would fail just because of that for a human validation. It should look similar to this:
    Code:
    <div id="content">
    <h2>Caring for 500,000 people in town and country.</h2>
    	<p>We provide a range of services and facilities for people with mental health problems 
    	or learning disabilities in County Durham and Darlington.</p>
    <h2>Our Mission statement:</h2>
    	<p>To provide accessible, high quality, effective mental health &amp; learning disability 
    	services, which promote and improve health and do so in partnership with individuals and other agencies.</p>
    	<p><a href="services.php" title="Our services">Click here for information on our services.</a></p>
    <h2>News:</h2>
    <cite>17th August 2004</cite>
    <h3>Special ceremony marks opening of new hospital.</h3>
    	<p>A special ceremony took place today to mark the official opening of a new hospital, which provides 
    	specialist services for older people with mental health problems.</p>
    	<p>Following a &pound;7 million redevelopment the former maternity unit in Bishop Auckland was 
    	transformed into a modern facility for older people from the Wear Valley and Sedgefield districts.</p>
    	<p>The new Auckland Park Hospital was opened by Ken Jarrold, Chief Executive of County Durham and 
    	Tees Valley Strategic Health Authority.</p>
    	<p><a href="index.php?id=archive" title="News archive">More...</a></p>
    </div>
    All those divs could turn into something else, h1 for the main logo, and the rest for others. You've done a good job using lists, but the lack of structure is not accessible -- much less, doing all those extra divs and breaks and b's clutters your code. If you were to do it the semantic way, all you would have to do then is go:
    Code:
    h2 {
    font: bold 1.5em helvetica, arial, verdana, sans-serif;
    padding: 5px 0px 10px 0px;
    margin: 0px;
    }
    p {
    font: bold .75em/1.2em helvetica, arial, verdana, sans-serif;
    padding: 5px 0px 10px 0px;
    margin: 0px;
    ...and then you make CSS for your cite tag, and one for your h3.

    No need for break tags or bolds or classes then, or any extra markup -- and then you can control it all from CSS, and let the screenreaders and the text only versions do their job. Make sense?

    http://www.accessifyforum.com/ is a good resource to ask members about these issues in a more advanced way as well.

    Don't take this as picking on your site -- someone did it to me once, and I just want to help you out to make it even better than it already is. It's 95% Accessible, and almost perfect, more so than most people -- but if you care about accessibility, you would take the above suggestions and apply them to your work. Much less, writing semantic code will make your site smaller in size, faster to update, easier to work with, and more intelligient to the average user -- and it in no way limits your design abilities, as many of us have 100% (or damn close) accessibile sites that don't look that way at all, mine included
    Last edited by bradyj; 10-14-2004 at 06:25 PM.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #8
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    Looks good and looking at the code I'm curious about this...

    Code:
    <b class="red">Caring for 500,000 people in town and country.</b><br />
    We provide a range of services and facilities for people with mental health problems or learning disabilities in County Durham and Darlington.
    <br /><br />
    <b>Our Mission statement:</b><br />
    To provide accessible, high quality, effective mental health &amp; learning disability services, which promote and improve health and do so in partnership with individuals and other agencies.
    <br /><br />
    <a href="services.php" title="Our services">Click here for information on our services.</a>
    
    <br /><br />
    <b>News:</b><br />
    <b>17th August 2004</b>
    <br /><br />
    <b class="red">Special ceremony marks opening of new hospital.</b>
    <br /><br />
    A special ceremony took place today to mark the official opening of a new hospital, which provides specialist services for older people with mental health problems.
    <br /><br />
    Following a &pound;7 million redevelopment the former maternity unit in Bishop Auckland was transformed into a modern facility for older people from the Wear Valley and Sedgefield districts.
    <br /><br />
    The new Auckland Park Hospital was opened by Ken Jarrold, Chief Executive of County Durham and Tees Valley Strategic Health Authority.
    <br /><br />
    <a href="index.php?id=archive" title="News archive">More...</a>
    Looks like alot of <br />s and <b></b>s could be replaces with <h*> and <p></p>???

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you miss my last post BCarl314?
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #10
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    D'oh

    <slaps what="head" with="hand" />

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd recommend not using accesskeys at all - because whatever key combination you choose, someone has their computer set to use those keys for something else, and you risk conflicting or even overriding their preferences. Here's a discussion about it: http://www.accessifyforum.com/viewtopic.php?t=615

    I'd also recommend - stop using Bobby; I can't think of enough bad things to say about bobby. Use the Cynthi says portal instead: http://www.contentquality.com/ But automatic validation is only to show what you might have missed, you really need to go through the guidelines manually, and think about whether you've addressed each point.

    Oh btw - "AAA" compliance is almost impossible. Unless you're providing text-to-speech or text-to-iconography support then you're not "AAA" compliant. Even the WCAG site itself only claims "AA".
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Really? No access keys at all? That's a shame...
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #13
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't have time for the fine tooth comb approach, but the first thing I noticed disqualifies you from even an A rating
    --Don't rely on colour alone-- The only visual clue that your links are links is that they are a different colour than your text. That does not satisfy a priority 1 checkpoint.
    --Your page has no headings!--
    Assistive technologies allow the user to jump from heading to heading in a similar manner to pressing tab on your browser to jump from link to link.
    --Evil CMS?--
    If it's the CMS that is putting all the <br />s into the articles, it should be taken out into a field and shot
    --Title attributes of links should contribute to the actual link text, not duplicate it. On your 'Freedom of Information Act' page menu; you're better off having no title attributes at all than titles that conain the exact link text.

    Quote Originally Posted by brothercake
    Oh btw - "AAA" compliance is almost impossible.
    I know it must be tempting to ignore that, but he's right.
    There is a school of thought that says having an impossibly high standard for AAA (one that current technology can barely provide for) encourages developers to aim as high as possible and continuously re-evaluate their procedures and methods...
    Quote Originally Posted by bradyj
    Really? No accesskeys at all?
    Just wait for the access attribute in xhtml2. We link defined access points to parts of our pages/site, and then the user defines what keys activate those access points. It makes so much sense, I wish they'd done it this way from the beginning
    Last edited by mindlessLemming; 10-15-2004 at 02:38 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #14
    Regular Coder
    Join Date
    Jun 2004
    Posts
    194
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the points, don't worry about offending me, i'm not in the slightest bit offended or anything, infact i much prefer that people "nit pick" the site as if i wanted people to applaud the site i'd of posted it in a forum surrounded by newbies that know less than nothing. I posted it here to get criticism, i'd much rather know what's wrong with the site so I can fix it rather than have people not say because their worried about offending me.

    You're right abut the headers and paragraphs, i'll work on that this afternoon, just been fixing a pain in the *** prob with the server this morning while recovering from a migrain. (i really hate those).

    As for the pt sizes, well for the main body of the text i sized it using the font-size: small; method so it can still be adjusted via the browser, but with the fon-size: 100%; i'll switch it back to ems as before the smallest text size was just impossible to decipher. The pt sizes i've used are for things like the side menu and header area as having those adjust in size f***s up the layout of the site, prolly not the best idea i know, but unless someone can think of a workaround to stop the layout being destroyed then i'll have to leave that part as is.

    As for access keys, no as a regulation of both the W3C and NHS Identity Guidelines i HAVE to make use of access keys. The ones i've chosen are the government standard for access keys so i'm doing my part my providing the functionality, accessibility also comes down to the user, the developer can't do everything for them, the user has to be involved at some level as well.

    As for hyperlinks, didn't think of that really, didn't see that as relying on colour to convey info, i'll adjust the css to add underlinement to hyperlinks.

    As for AAA compliance being almost impossible, well i'm not one to give up, i set out to make that site AAA compliant and i'm damn well going to make it AAA compliant, text to speech is something i missed, but i'll add that in.

  • #15
    Regular Coder
    Join Date
    Jun 2004
    Posts
    194
    Thanks
    5
    Thanked 0 Times in 0 Posts
    OK I've just spent the last seven hours going through the whole site (there's a fair bit of content) and correcting all the probs people listed. Here's a list of what's been changed:

    • Added Headings.
    • Removed Line Breaks.
    • Added Paragraphs.
    • Replaced <b> tags with <strong> tags.
    • Replaced <i> tags with <em> tags.
    • Corrected TITLE attributes for hyperlinks.
    • Added text to speech using aural media style sheet.
    • Changed pt size on "fixed" header and menu text to pixel sizes.
    • Replaced font-size: small; with 0.7em and 120% total size (to fix stupidly small text on smallest text size).
    • Emboldened hyperlinks.


    I haven't had time to do a validation test on every page yet so keep in mind there may be one or two things i've overlooked, i'll work on it some more when i get home ads i have to leave work now before i get locked in.

    Please let me know if anyone spots anything else wrong with the site.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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