...

View Full Version : WCAG Review Required



Acid
10-13-2004, 05:13 PM
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

bradyj
10-13-2004, 06:37 PM
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:


<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:

Acid
10-13-2004, 09:50 PM
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

bradyj
10-13-2004, 09:54 PM
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/

Acid
10-13-2004, 09:54 PM
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. ;)

Acid
10-14-2004, 12:03 PM
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.

bradyj
10-14-2004, 06:21 PM
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:


font-size: 100%;


Then you can code your stuff in em's by 0.0 scale:


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:


<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:


<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:


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:)

bcarl314
10-14-2004, 08:13 PM
Looks good and looking at the code I'm curious about this...



<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>???

bradyj
10-14-2004, 08:33 PM
Did you miss my last post BCarl314?:)

bcarl314
10-14-2004, 08:37 PM
D'oh

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

brothercake
10-14-2004, 09:11 PM
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".

bradyj
10-14-2004, 10:40 PM
Really? No access keys at all? That's a shame...

mindlessLemming
10-15-2004, 02:27 AM
I don't have time for the fine tooth comb approach, but the first thing I noticed disqualifies you from even an A rating :rolleyes:
--Don't rely on colour alone (http://www.w3.org/TR/WCAG10/#gl-color)-- 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! (http://www.w3.org/TR/WCAG10/#gl-complex-elements)--
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 :D
--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.



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...

Really? No accesskeys at all?
Just wait for the access (http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-hyperAttributes.html#adef_hyperAttributes_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 :cool:

Acid
10-15-2004, 01:30 PM
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.

Acid
10-15-2004, 07:59 PM
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.

bradyj
10-15-2004, 09:38 PM
Looking good! Some little points:
1) Your header logo could be an h1
2) <div class="title">County Durham and Darlington Priority Services</div> could be an h2
3) id=menutitle could be an h3

The reason for this is to divide up your code into an outline form much better, and to get rid of all those extra divs. Case example:


<div id="menu">
<ul>
<li><a href="index.php" title="Site home">Main</a></li>
<li><a href="index.php?id=archive" title="View previous news items">News Archive</a></li>
<li><a href="aims.php" title="Aims &amp; objectives">Aims</a></li>
<li><a href="services.php" title="Our services">Services</a></li>
<li><a href="services.php?id=pals" title="Patient Advice &amp; Liason Service">PALS</a></li>
<li><a href="westpark.php" title="Information on the new West Park hospital">West Park Hospital</a></li>
<li><a href="services.php?id=equality" title="The Trust's race equality scheme">Race Equality Scheme</a></li>
<li><a href="index.php?id=aboutus" title="About the Trust">About Us</a></li>
<li><a href="employment.php" title="Employment oppurtunities">Employment</a></li>
<li><a href="employment.php?id=vacancies" title="Latest job vacancies">Job Vacancies</a></li>
<li><a href="services.php?id=volunteers" title="Information on voluntary services">Volunteers</a></li>
<li><a href="index.php?id=contact" title="Contact information">Contact</a></li>
<li><a href="index.php?id=links" title="Useful links">Links</a></li>
<li><a href="index.php?id=freedomact" title="Freedom of information act 2000 - Trust publication scheme">Freedom Of Information Act</a></li>
</ul>
</div>

Is beautiful, but why not just do:


<ul id="menu">
<li><a href="index.php" title="Site home">Main</a></li>
<li><a href="index.php?id=archive" title="View previous news items">News Archive</a></li>
<li><a href="aims.php" title="Aims &amp; objectives">Aims</a></li>
<li><a href="services.php" title="Our services">Services</a></li>
<li><a href="services.php?id=pals" title="Patient Advice &amp; Liason Service">PALS</a></li>
<li><a href="westpark.php" title="Information on the new West Park hospital">West Park Hospital</a></li>
<li><a href="services.php?id=equality" title="The Trust's race equality scheme">Race Equality Scheme</a></li>
<li><a href="index.php?id=aboutus" title="About the Trust">About Us</a></li>
<li><a href="employment.php" title="Employment oppurtunities">Employment</a></li>
<li><a href="employment.php?id=vacancies" title="Latest job vacancies">Job Vacancies</a></li>
<li><a href="services.php?id=volunteers" title="Information on voluntary services">Volunteers</a></li>
<li><a href="index.php?id=contact" title="Contact information">Contact</a></li>
<li><a href="index.php?id=links" title="Useful links">Links</a></li>
<li><a href="index.php?id=freedomact" title="Freedom of information act 2000 - Trust publication scheme">Freedom Of Information Act</a></li>
</ul>


So then you're talking:


<div id="header">
<h1><a href="http://www.cddps.nhs.uk" accesskey="1"><img src="images/nhslogo.gif" width="49" height="20" alt="County Durham and Darlington Priority Services NHS Trust" /></a></h1>
<ul class="navlinks accesslinks">
<li><a href="#skipnav" accesskey="s" class="link" title="Skip navigation links">Skip Navigation</a> | </li>
<li><a href="index.php?id=accessibility" accesskey="0" class="link" title="Information on how to improve your access to the site">Accessibility</a> | </li>
<li><a href="index.php?id=sitemap" accesskey="3" class="link" title="View a list of every page of this site">Site Map</a><li></ul>
<h2>County Durham and Darlington Priority Services</h2>
<cite>www.cddps.nhs.uk</cite>
</div>
<!-- END HEADER -->

<!-- START SIDE MENU -->
<div id="side">
<h3>&nbsp;&nbsp;Site Navigation:</h3>
<ul id="menu">
<li><a href="index.php" title="Site home">Main</a></li>
<li><a href="index.php?id=archive" title="View previous news items">News Archive</a></li>
<li><a href="aims.php" title="Aims &amp; objectives">Aims</a></li>
<li><a href="services.php" title="Our services">Services</a></li>
<li><a href="services.php?id=pals" title="Patient Advice &amp; Liason Service">PALS</a></li>
<li><a href="westpark.php" title="Information on the new West Park hospital">West Park Hospital</a></li>
<li><a href="services.php?id=equality" title="The Trust's race equality scheme">Race Equality Scheme</a></li>
<li><a href="index.php?id=aboutus" title="About the Trust">About Us</a></li>
<li><a href="employment.php" title="Employment oppurtunities">Employment</a></li>
<li><a href="employment.php?id=vacancies" title="Latest job vacancies">Job Vacancies</a></li>
<li><a href="services.php?id=volunteers" title="Information on voluntary services">Volunteers</a></li>
<li><a href="index.php?id=contact" title="Contact information">Contact</a></li>
<li><a href="index.php?id=links" title="Useful links">Links</a></li>
<li><a href="index.php?id=freedomact" title="Freedom of information act 2000 - Trust publication scheme">Freedom Of Information Act</a></li>
</ul>
</div>

<!-- START W3C ICONS -->
<ul id="w3c">
<li><a href="http://www.w3.org/WAI/WCAG1AAA-Conformance"><img src="http://www.w3.org/WAI/wcag1AAA" alt="Level Triple-A Conformance, W3C-WAI Web Content Accessibility Guidelines 1.0" width="88" height="32" style="border:0;" /></a></li>
<li><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" width="88" height="31" style="border:0;" /></a></li>
<li><a href="http://jigsaw.w3.org/css-validator"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" width="88" height="31" style="border:0;" /></a></li>
</ul>
<!-- END W3C ICONS -->

<!-- END SIDE MENU -->

<!-- START PAGE CONTENT -->

<h4>&nbsp;&nbsp;Welcome to the County Durham and Darlington Priority Services website.</h4>
<div id="content">
<h5 class="red">Caring for 500,000 people in town and country.</h5>
<p>We provide a range of services and facilities for people with mental health problems or learning disabilities in County Durham and Darlington.</p>
<h5>Our Mission statement:</h5>
<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>
<h5>News:</h5>
<p><strong>17th August 2004</strong></p>
<h5 class="red">Special ceremony marks opening of new hospital.</h5>
<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>


text sitting in an empty div is not semantic -- so those are important. By dividing out it into more of a structure, you can ease some coding and now you can have divs just for elements that really need to be divided up.

Your improvements are excellent, this will help you get closer to AAA compliance.

...and, yes, you have some closing divs and stuff in your code that is extra, but I know that's because you're working on it still:)

mindlessLemming
10-16-2004, 01:22 AM
Obviously you're dedicated to getting this site as truly accessible as possible, I'll have a bit of a better look under the hood this time...
I see this as somewhat of a fundemental issue in your approach to CSS postioning -- almost everything has an assigned height and width, when usually, (from an accessibility viewpoint) you're better off not assigning either.
Instead of absolutely positioning everything and assigning them heights, widths and z-indexes; apply padding, margins and floats to your elements and allow them to flow naturally -- thereby allowing the resizing of text without breaking the layout. At the moment the header layout breaks immedietly on text increase, something that doesn't need to/shouldn't happen.
Also, if you strongly prefer absolute positioning; assign your element heights and top:...; values in 'em' -- containers will then grow in height relative to the font size. Sizing with em's is referred to as an 'elastic layout', which while being a little harder to code at first is far more friendly to large font sizes. Here's an example (http://nav-aust.leftjustified.net/) of an elastic/'AAA' (almost ;)) layout I did in college. Have a good look through the style sheet - I don't think there is a single instance of position:absolute;, so you should be able to get some alternative positioning ideas from there.

As Brady has already stated, your code is pretty lacking in semantic detail...
eg:
<div class="title">County Durham and Darlington Priority Services</div>
<div class="url">www.cddps.nhs.uk</div>

would make more sense as


<h1>County Durham and Darlington Priority Services</h1>
<a href="www.cddps.nhs.uk" title="County Durham home page" id="header-home">www.cddps.nhs.uk</a>


This--

<div id="menutitle"><ul><li>&nbsp;&nbsp;Site Navigation:</li></ul></div>
<div id="menu">

...is as bad as using font tags, tables and spacer gifs combined! :eek:


<div id="menu">
<h3>Site Navigation</h3>

...then in your stylesheet...


#menu h3 {
padding:3px 3px 3px 14px;
background:blue url(my-bullet.gif) no-repeat left center;
}


I could keep going on finding single things to point out, but that won't really help you in the long run. Accessibility isn't like validation -- you can't just follow a set of written rules and run it through a validator, you have to study what you're trying achieve, not just the techniques to get their. Basically, the 'why' is of more importance than the 'how'.
I strongly recommend you have a good read of Joe Clarke's Building Accessible Websites (http://www.joeclark.org/book/sashay/serialization/), and also check out Derek's (http://boxofchocolates.ca) articles at WATS.ca (http://wats.ca/).

Oh, and for the record -- the fact your header/menu 'breaks' with 'em' sized fonts excludes you from anything higher than WAI-A. Scalable text isn't a choice you get to make in accessible design -- it's all or nothing ;)

That's about all I've got the time/energy for atm.
Good Luck :thumbsup:

AaronW
10-16-2004, 02:01 PM
I noticed, on the first page:


<h5>News:</h5>

Yet you don't have any <h4> elements. Headers must'n't be skipped. Sizes can be controlled with CSS.

brothercake
10-16-2004, 06:53 PM
As for access keys, no as a regulation of both the W3C and NHS Identity Guidelines i HAVE to make use of access keys.
No - your responsibility is not to guidelines or authorities, your responsibility is to try to improve access. Using accesskeys reduces access - so you mustn't use them.

There are, undoubtedly, aspects of accessibility which are the users' consideration, but this is not one of those - nobody can remove your accesskey assignments with their browser, like they can colors and fonts - if you use them and somebody is negatively affected, there's nothing they can do.

Acid
10-16-2004, 09:01 PM
Cheers for the points, since my mate hogs the broadband connection like all the time i hardly get to use it here at home but i've booked it for the whole day tomorrow so i can work through this site.

As for the access keys points, you dont need to persuade me because i already agree myself, the point still remains however that i do HAVE to include them as if i dont i violate the identity guidelines set by the NHS, which means i just get a bollocing from work for it. While i could continue to contest the point that the set out government standard of the access keys are not the most suitable ones to use, i still have to include them until the regulations change. You said it yourself, i have a responsibility to provide and acccessible website. i'm going to have difficulty doin that if i lose my job for not following the regulations. Don't get me wrong i aint having a go at you or anything, far from it as like i said i agree with what you're saying, but at present i cant do much about it the "powers that be" are demanding the access keys are present so until the guidelines are amended i have to use them and i have to follow the government standard for them, regardless of how much i disagree with it.

As for the point about the divs for the side menu instead of adding the id diectly into the ul tag, well i did that at first but for some strange reason it didn't actually correctly affect the menu list until i placed it within a div, i'll have a bit more work on the css tomorrow to fix it and adjust the thigns for headers etc.

If anyone spots any other problems with the site, no matter how small please let me know as i want this site to be perfect or as close to it as possible.

bradyj
10-16-2004, 09:17 PM
if applying the id did not work directly for the ul (it should), make sure your doing all your sub properly:


#menu {}
#menu li {}


If you find it still doesn't apply, then give:


#menu ul {}


a try. The first should work, but if it doesn't post up and we'll have a look:)

brothercake
10-16-2004, 10:20 PM
You said it yourself, i have a responsibility to provide and acccessible website. i'm going to have difficulty doin that if i lose my job for not following the regulations.
Yes but ... you know that what the regulations say on this point harms accessibility, yet the regulations exist to improve accessibility. There's a vicious circle - right there.

Do what's right - if they sack you for that you can sue them for constructive dismissal ;)

Acid
10-17-2004, 03:14 PM
LOL yeah prolly could do that if they did sack me for not following the dientity guidelines. I'll have a read through the link posted before about better recommendations for access keys once i get some of this code out the way as i think tomorrow when im back at work i'll see if i can contest the point about the government standard of access keys to use ones which are less likely to be setup already by the user, like using 2 instead o S for skip navigation. I doubt i'll be able to argue not using them completely. Anyway i'm gonna make a start on that code changes i'll post again once they're done.

Acid
10-17-2004, 08:29 PM
OK all the above mentioned changes have been made here's a list of what's been done now:

Changed NHS Logo div into h1.
Changed access links div into h2.
Changed title text div into h3.
Changed site address text div into h4.
Changed height and and position values to ems.
Removed fixed widths of header elemtents.
Changed header background from no repeat to repeat y (so white text is visible when text increased on elastic header).
Changed menu title and page title bullet lists to h5.
Changed h5 page titles to h6.
Updated aural.css to include new header entries.

I know i prolly still have to make some adjustments for different browsers but i cant do that till tomorrow as i have all the other browsers on my work computer and im on my mates comp at the minute. If anyone spots anything else wrong though please let me know.

brothercake
10-18-2004, 04:19 AM
Nice :) But I don't agree with the heading structure: "NHS" is not the title of that page, the title of the page is "County Durham and Darlington Priority Services", so that should be your <h1>, with the logo just a paragraph that comes before it (H1 is semantically the main heading, but that doesn't mean it has to come first)

Your accesslinks are not a heading either, they're a list - I'd put them before the logo, with separate "navigation" and "content" skip links, like this:


<ul id="accesslinks">
<li><a href="~">Skip to content</a></li>
<li><a href="~">Skip to navigation</a></li>
<li><a href="~">Accessibility</a></li>
<li><a href="~">Site Map</a></li>
</ul>

<p id="logo">
<img ... />
</p>

<h1>County Durham and Darlington Priority Services</h1>

And get rid of that "AAA" button .. it isn't "AAA" :)

Acid
10-18-2004, 10:11 AM
As for having the logo as h1, well i did that as it was recommended by more than one person. You're right about the access links though.

As for the AAA button, no that's staying put, it might not be AAA yet but it's going to be.

Also forgot to mentioned yesterday, i removed the <div id="menu"> from the sidebar however, when the div was removed the list forced the menu to expand further than it should and no longer properly contained the list of links, they contains fine, even when text is increased, provided they remain contained within the div, so unless there is another way to prevent the menu from expanding in width that div will need to stay in place.

Acid
10-18-2004, 12:04 PM
OK now this bit is just annoying, I started testing the site in my other browsers to make it cross browser compatible, Opera displayed fine, however Firefox and Netscape didn't, for them they incorrectly calculated the ems for the position of the header elements so i made use of the first-child hack to give them their own position values for those elements seens as how Opera and IE aren't meant to recognise the first-child hack and thus, not parse it. But no Opera 6 and below don't recognise it, but of course Opera 7 does. So now i have a site that displays fine in every browser except Opera 7. So to compensate for this i added in a be nice to Opera hack to apply extra padding to the elements for Opera to compensate for the loss in position of the elements. But no it can't be that straightforward as for some dumbass reason Firefox and Netscape both recognise that hack and parse the rule so they lose their positions again, which is just stupid since it's meant to be a be nice to Opera hack, not a be nice to every browser except IE hack.

This is the code i've used for the title element so far:


.title {
font-weight: bold;
font-size: 1.4em;
top: 0.95em;
left: 0.6em;
vertical-align: bottom;
color: #ffffff;
position: absolute;
height: 1.4em;
}

head:first-child+body .title {
top: 0.01em;
}

html>body .title {
padding-top: 0.94em;
}

Can anyone think of any other hack that could sort this out, preferrably something that ONLY Opera 7 will parse and no other browser as that would sort it.

EDIT: Going to avoid a triple post, have made more changes to the site now:

Changed NHS logo from h1 to p.
Changed access links from h2 to p.
Changed site title from h3 to h1.
Changed site url from h4 to h2.
Changed menu title from h5 to h3.
Changed page title from h5 to h4.
Changed body titles from h6 to h5.
Tidied up xhtml and css code a bit more.

Acid
10-20-2004, 12:37 PM
Since there's been no new replies does that mean no one else can spot anything else wrong?

Also made more changes since last post:

Added feedback form page.
Changed site url from h2 to cite.
Changed menu title from h3 to h2.
Changed page title from h4 to h2.
Changed body titles from h5 to h3.
Fixed large white space bug on text resize that was on some pages.
Added underlinement to abbreviations.
Corrected bug with feedback page when viewed with Win2K and IE6.
Added active and visited colours for hyperlinks.


EDIT: New Change: Upgraded site from XHTML 1.0 Strict to XHTML 1.1

bradyj
10-20-2004, 06:51 PM
Nope -- everything looks 100x better under the hood! I see your issue you spoke of with the links, and I believe it's because of IE's handling the box model wrong -- there are work arounds, but it is nothing major, and I don't see it as something to work too much with.

Opera, also, has it's own issues with handling CSS 100% accurately, and I would focus on Firefox/IE/Safari handling everything properly, and let Opera have slight bugs if need be -- that's Opera.

As for any other suggestions -- the only thing I have in mind, and this would be nit picking, is to turn this:


<p id="accesslinks"><a href="#skipnav" accesskey="s" class="link" title="Skip navigation links">Skip Navigation</a> | <a href="index.php?id=accessibility" accesskey="0" class="link" title="Information on how to improve your access to the site">Accessibility</a> | <a href="index.php?id=feedback" accesskey="9" class="link" title="Submit your feedback to the webmaster">Feedback</a> | <a href="index.php?id=sitemap" accesskey="3" class="link" title="View a list of every page of this site">Site Map</a></p>


Into this:


<ul id="accesslinks">
<li><a href="#skipnav" accesskey="s" class="link" title="Skip navigation links">Skip Navigation</a> | </li>
<li><a href="index.php?id=accessibility" accesskey="0" class="link" title="Information on how to improve your access to the site">Accessibility</a> | </li>
<li><a href="index.php?id=feedback" accesskey="9" class="link" title="Submit your feedback to the webmaster">Feedback</a> | </li>
<li><a href="index.php?id=sitemap" accesskey="3" class="link" title="View a list of every page of this site">Site Map</a></li>
</ul>


To make your list elements ride next to each other like you have visually, you'd give the li this css:


display: inline;


That makes it more semantic -- but that is a questionable change, and so far the page looks drastically better than before, fantastic!

the only other thing that may help you out is shorthanding your font css, so it's easier for you to work on later, and makes the CSS smaller in size:


h2#menutitle {
font-size: 0.8em;
font-weight: bold;
line-height: 1.85em;
font-family: helvetica, arial, verdana, sans-serif;
}


turns into:


h2#menutitle {
font-size: bold 0.8em/1.85 em helvetica, arial, verdana, sans-serif;
}


That's just for your sake, and not needed -- as I think you've gotten pretty darn close. The next step might be to ask the guys over at accessify.com to check and see if they notice issues we may not.

brothercake
10-21-2004, 02:06 AM
As for the AAA button, no that's staying put, it might not be AAA yet but it's going to be.
Oh really? So what are you doing about checkpoint 14.2?

New Change: Upgraded site from XHTML 1.0 Strict to XHTML 1.1
But by doing that you've introduced a new accessibility problem - XHTML 1.1 has no "lang" attribute, so non-XML-aware browsers will not know what language the document is supposed to be in. I think it's better to stick with 1.0 Strict.

bradyj
10-21-2004, 05:16 AM
Here's the question of 14.2:
http://www.autisticcuckoo.net/archive.php?id=2004/07/12/checkpoint-14-2

There is the link at the accessify forum as well debating the issue.

Acid
10-21-2004, 10:46 AM
Oh really? So what are you doing about checkpoint 14.2?
Technically I'm already complying with that point, the W3C specifies text supplements being:

A chart of complex data, such as sales figures of a business for the past fiscal year.
A translation of the text into a Sign Language movie clip. Sign Language is a very different language than spoken languages. For example, some people who may communicate via American Sign Language may not be able to read American English.
Pre-recorded audio of music, spoken language, or sound effects may also help non-readers who can perceive audio presentations. Although text may be generated as speech through speech synthesis, changes in a recorded speaker's voice can convey information that is lost through synthesis.

Now to break them down:

"A chart of complex data, such as sales figures of a business for the past fiscal year."
Yes I'm already doing that, prime example: http://www.cddps.nhs.uk/dev/aims.php?id=decisions

"A translation of the text into a Sign Language movie clip. Sign Language is a very different language than spoken languages. For example, some people who may communicate via American Sign Language may not be able to read American English."
OK no I don't have that, but on the other hand can you name any site that does? One point raised in the link brady posted was that it is unlikely that those who are deaf and use sign language as a primary language would be unable to read, yes it is possible, but then it is also possible to have an issue of someone being both blind, deaf and has no sense of touch, would AAA conformance be denied because information would be almost impossible to convery to that user? No. Infact the W3C essenitally even backs this point up themselves by stating clearly in their definition of conformance that:

"The Web Content Accessibility Guidelines 1.0 explain how to make Web content accessible to people with disabilities. Conformance to these Guidelines will help make the Web more accessible to users with disabilities and will benefit all users."

People can claim that AAA conformance is almost impossible, which may be correct but having a site 100% accessibile to absolutely everyone regardless of disabilities IS impossible and also not a priority for AAA compliance, granted if it were possible to do that i would, but realistically it isn't, the checkpoints are that to set realistic targets for helping to make the information on the site as accessible as possible to the majority population which is precisely what i'm doing.

You also have to take into account the fact of usability, a perfectly accessible site is no good if it isn't usable, which is why the W3C strongly recommends dveelopers don't use Flash in their websites. mainyo as not everyone has support for it, can delay load times of pages, etc etc. You also have to take into account that there are people on slow internet connections like 56K dialup and below so having media clips with sign alternatives can create usability issues for those users as well. What I can do however is include a seciton in the Accessibility information page that should people require an alternative presentation of the information on the site they can contact regarding this so alternatives can be arranged to be sent to them, thereby satisfying this checkpoint as well as keeping the site usable.

"Pre-recorded audio of music, spoken language, or sound effects may also help non-readers who can perceive audio presentations. Although text may be generated as speech through speech synthesis, changes in a recorded speaker's voice can convey information that is lost through synthesis."
This is also another grey area, for starters i am providing audio equivalents through the use of my aural stylesheet for text to speech screen readers. The W3C description makes a good point about speaker voice possibly being more accurate then synthesis, however not only does this come back to the usability point again but also two other points: Translation and understanding. There is no way you can possibly provide a true spoken voice translation of the text of a website it would only be realistic to do the speakers own primary language, however then users of foreign countries would be left without this alternative method which would be discrimination in itself, you can't truely enforce that point without supplying translations for every possible language, whereas speech synthesis is a different story as programs for that can translate the text themselves.

The other point was understanding, translation is one thing but even if you can safely assume all users of the audio alternative will be speaking the same language you have to take into acocunt accents, what sounds normal to one group of people is difficult to understand for others, i for instance am Scots-Irish, so if i spoke an audio alternative to text on a site it is very unlikely that users in America or even in London would properly understand what i say. That is yet another reason why speech synthesis is actually a safer bet.


But by doing that you've introduced a new accessibility problem - XHTML 1.1 has no "lang" attribute, so non-XML-aware browsers will not know what language the document is supposed to be in. I think it's better to stick with 1.0 Strict.
If that's the case it can be changed back, only takes two seconds so that's no big deal.

One question though? Why the attitude? You seem to be having a go at me for no reason, all I'm doing is trying to make the site AAA conformant so what's the problem?

@bradyj: Cheers for the points, i'll make those changes.

EDIT: Left out the list for the access links for the time being as it's being a pain in the *** and not moving inline.

bradyj
10-21-2004, 06:19 PM
EDIT: Left out the list for the access links for the time being as it's being a pain in the *** and not moving inline.

This is true:)

I've found this helpful when teaching how to handle that:
http://css.maxdesign.com.au/listamatic/

You can also look at the footer and the css on my sites at dotfive.com

brothercake
10-21-2004, 09:31 PM
I'm not having a go at you mate, but when you insist on keeping the AAA badge, even though as you've described what you're doing, you still don't acheive it, then that winds me up.

What is it that really concerns you? Are you tying to make a compliant site, or are you trying to make an accessible site?

Get rid of the badge - it's about not about scoring badges. Perfect accessibility is impossible, yes, and no-one's expecting the impossible. So get rid of the badge.

Acid
10-22-2004, 10:52 AM
Horizontal list for the access links is now done, had to adjust the CSS for the rest of my lists a bit as well as they were conflicting.

@brothercake - well it just seemed like you were but if not then fair enough. As for the AAA logo, you may be right, perfect accessibility is impossible, however AAA isn't, i know of sites that have achieved AAA, even if they missed one or two points they were pretty close so what I intend to do today is go through the W3C guidelines for the three levels of conformance with a fine tooth comb and make that site conform i dont care how long it takes or how much work i'll have to put into it, i'm going to make that site conform. Removing the logo is pointless for now as i may well be able to make it conform and since the site isn't yet publically open it's pointless to remove the button just to add it again later.

It's not like i'm keeping the page without tryign to achieve it, yes i haven't achieved it YET but i'm determined that i'm going to, if while going through the guidelines it becomes apparent that i definitely can't make the site AAA compliant then i'll remove the badge and replace it with the AA one, as i'm pretty sure the site at least conforms to that at the moment.

brothercake
10-23-2004, 12:31 AM
i know of sites that have achieved AAA, even if they missed one or two points they were pretty close.
Yeah but look at what you just said - if they missed one or two points then they didn't acheive AAA. What you really mean is that you've seen lots of sites that claim AAA conformance even though they don't really acheive it. And yeah, so have I, and most of the sites that fly AAA badges are like this - they miss on or two points which they've 'blipped over' on the basis that it's impossible to acheive.

Well that's basically the rub. AAA is almost impossible to acheive - even the WCAG site itself only claims AA. Absolutely do what you're doing - and full respect to you for being prepared to take the time to satisfy as many AAA checkpoints as you can - that's the point of having such high standards to aim for. But don't fly a AAA badge.

I'm starting to think it's better not to fly a badge at all, because it puts emphasis in the wrong place. Either way, I think what we're going to see over the next few years is that "AAA" becomes a badge for "I don't really understand accessibility", because we know it's close to impossible.

Acid
10-23-2004, 01:59 AM
what other points can you see that i've missed as i got through most the WCAG today but got shifted onto a priority task with the intranet and dont really have time to go through them now, if you can point out any that stick out like a whore in a convent please do so i can correct em.

brothercake
10-23-2004, 05:15 AM
I think you've done a very good job - I'm only harping on this lack of AAA conformance because you haven't fully addressed checkpoint 14.2.

Providing site-wide automated TTS is the most practical way of meeting it, but that's not exactly simple to do ... the only way I know of that really works for the majority of people is to use javascript API hooks into the Microsoft Speech API - even then, it's only Windows users who can benefit (once they've installed it, but all XP users or later have it by default; and changed their security settings to allow your site to run unsigned ActiveX, which some may not be prepared to do). Nonetheless you could argue that by providing that facility you have addressed the checkpoint.

What that checkpoint is really about is catering to people with cognitive or learning disabilities, for whom text may be the least accessible form of information. So how do we cater for this group? Speech output is one way, providing our user is not also deaf.

Automatic conversion of text to icongraphy would be another - but how do you that? Not technically - technically there's any number of ways - but how do you come up with an algorithm for dynamically creating comprehensible iconography from text?? I wouldn't know where to start ...

What we're left with is the rather unfortunate acknowledgement that there is very little we can do for some groups of people, given current technology and what we know about their needs. That's a shame, but it also brings us back to where we came in:

AAA implies 100% accessibility, so never use the AAA badge unless you really have covered it all - it doesn't matter [in these terms] that other people are abusing the badge system, if anything that's more of a reason for not flying a badge at all. But if you do, remember that's it's not a statement of intent, it's a statement of acheivement.


btw - sorry if I've been moany. I do play devil's advocate a lot ... if I hadn't seen that you actually cared more than tokenism, I wouldn't have said anything at all :)

Acid
10-24-2004, 09:28 PM
What about Browsealoud (http://www.browsealoud.com/home.asp)? Would using that in addition to what i've already included satisfy 14.2?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum