17 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

After nearly eight years of working in Internet-related roles, I've finally decided I've got enough skills under my belt to go into the web design business (yeah, I know - another one :roll: ). I'm still going to be doing my normal 8-5 job (which is mostly print design), but this will be something I do in my spare time and we'll see how it goes from there.
Anyway, URL is www.tyssendesign.com.au.
Everything validates and I've checked it out in FF 1.0.6, IE6 & Opera 8.0.2 and I think it's OK.
There's a few small issues with Opera (labels not lining up with checkboxes and <button> not picking up style on the Contact page; z-index on background images not working on Services page), so if anyone has any clues about those, I'd appreciate hearing about them.
I'd also appreciate comments from Mac users as I don't have access to any.
And comments about accessibility issues are also welcome cos I've made a concerted effort to make the site as accessible as I understand the concept to be but would appreciate those who know more about this than I do giving me an idea of what sort of rating it would get.
And of course, anyone else who has a comment, feel free to fire away.

Thanks
John

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 30 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

My new business site

Hi

That looks lovely - love the little wooden man! Really nice attention to detail.

Looks good in FF/IE6 windows and Safari/FF Mac. Only slight hitch on the Mac in Safari is there's a slight line underneath the nav images presumably where the very top of the image is repeating. It doesn't look terrible - you wouldn't notice it if you hadn't seen it in other packages.

The page took 45 seconds to download on a 56kbps modem which is I guess on the slow side...

Only other thing is the skip link seems to be skipping to the first link within the main contents section rather than the top of the contents - if you see what I mean - not sure if this is what you want it to do.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

My new business site

John, you're in print design and don't have access to a Mac? Oh well, I'm at work today and don't have access to my Mac at home :?. One comment though, Why the paragraph indentation and spacing. Shouldn't it be one or the other? Myself, I would go with the spacing and nix the indent creating a more solid alignment. And I would even move them left a little to align with the logo. Just my $.02

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

My new business site

John
Congratulations on going for your own web development business.

You've produced a good looking and innovative design.
I've only looked at the Home Page in detail(assuming the others to be in line) and, in terms of accessibility, it is good for screen-reader and keyboard users. I see HellsBells' skip link point in Firefox1.0.6/Win, but in IE6/Win it seems to be OK.

It's a bit of a to-do with images turned off, however, because the text for the top navigation and the headings for Services and Contact is off-screen.

I've been waiting for and have just got an impression from someone quite elderly with poor vision. He found the header/navigation area and the page headings on Services and Contact hard to read - this could be because of the patterned background allied to shadowed text. That's probably just an incidental observation though. However, there is a colour contrast issue with the wooden man captions. The colour contrast between the white background and the "light" text (somewhere around #eaac74) i.e. Confused and frustrated by the Internet will not pass the current W3C algorithm.

I am so glad NOT to see the ubiquitous stylesheet switching for text sizes and colours and I am SO glad to see you have chosen to tell visitors how to customize their browser. If more developers did that, site visitors will go away with a little more knowledge about their computer and can use their own settings on every site they visit. I've been doing that for some time, now - expect criticism - I get it in spades, but maybe you won't get it from Australian developers because, generally, you guys seem to be ahead of the Rest of the World in the accessibility stakes.

Good luck.

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

My new business site

John, I haven't really got anything constructive to say (except a very minor point - very hard to see what page you are currently on as the colour on my machine is very minimal).

but I really liked your site very much. I love the colours and the whole atmosphere.

well done and good luck!

larmyia

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My new business site

Thanks for the comments so far people.

Lorraine wrote:
I see HellsBells' skip link point in Firefox1.0.6/Win, but in IE6/Win it seems to be OK.

Oh yeah, I've just noticed that. It didn't use to do it but then the skip wasn't working properly in IE so I added a width to that div and it worked in IE but now it's doing this. :? Anyone have any ideas why that is?

Lorraine wrote:
It's a bit of a to-do with images turned off, however, because the text for the top navigation and the headings for Services and Contact is off-screen.

I've fixed up Services (Contact is/was OK though) but the reason the stuff against the coloured background uses a different technique is because those graphics have transparency set for the background colours and the image 'cover-up' method doesn't work if the images don't completely cover the image.
I s'pose I could not set transparency and then position the images more carefully. Although I did try using the cover-up method on a similar horizontal nav before and it turned into a bit of a dog's breakfast because I'm using one image for the whole nav (on & off states) and it just wasn't working for me. Maybe need to have another go.

Lorraine wrote:
Confused and frustrated by the Internet will not pass the current W3C algorithm.

So maybe I should rework those? Or do you think it's necessary as those captions aren't really vital content but rather used for decorative purposes?

wolfcry911 wrote:
John, you're in print design and don't have access to a Mac? Oh well, I'm at work today and don't have access to my Mac at home. One comment though, Why the paragraph indentation and spacing.

Haven't used a Mac for about 3 years now. And you're probably right about the indentation/spacing thing.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My new business site

Just ran the site through the cynthia.exe and I got warnings for:

Quote:
9.4 Create a logical tab order through links, form controls, and objects.

* Rule: 9.4.1 - All Anchor, AREA, BUTTON, INPUT, OBJECT, SELECT and TEXTAREA elements are required to use the 'tabindex' attribute.
o Warning - One or more Anchor, AREA, BUTTON, INPUT, OBJECT, SELECT and TEXTAREA elements do not use the 'tabindex' attribute.

9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls.

* Rule: 9.5.1 - All Anchor, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA elements are required to use the 'accesskey' attribute.
o Warning - One or more Anchor, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA elements do not use the 'accesskey' attribute.

Is it absolutely necessary to have a tab index on form elements cos after all, when you tab through my form, it goes in the order that it's s'posed to. Also, you can't have an access key for everything on your site can you? You'd run out of keys.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

My new business site

Now you're moving into the murky realms of Priority 3. It all depends on whether you want to put *any* A's on the site and if you are really aspiring to a "AAA" rating, given that so many acessibility gurus consider triple A is almost impossible to attain. http://www.autisticcuckoo.net/about/site/accessibility.php

Some of the guidelines are very hotly disputed i.e:
4.2 abbr and acronym
If you don't aspire to AAA, you find a way not to use them. For instance, abbrs such as XHTML and CSS could be covered in <span styled with a dotted underline><title="blah, blah"></span>.

9.5 access keys
It is becoming increasingly widely held that these are finished, dead, caput. See http://www.wats.ca/articles/thefutureofaccesskeys/66 and its related articles.
OK the link (in the first para) to a guru's accessibility policy still talks, in a qualified way, about access keys.

10.5 adjacent links
AFAIK all modern browsers[1] do render adjacent links distinctly. I think Cynthia may be pointing to the <spanned> "adjacent" links in the footer "accessibility" and "XHTML" (Watchfire picks up four instances). If so, this is how a screen-reader parses it prior to reading aloud.

Quote:
© Tyssen Design 2005 |
LINK 17: Sitemap |
LINK 18: Accessibility
LINK 19: XHTML
LINK 20: CSS
LINK 21: Get Firefox

The screen-reader says err... linkn Accessibility linkn XHTML

Taking 9.4 literally, disregarding the sub rule, your form does have a logical tab order - it doesn't *need* tabindexing.

It makes more sense (to me) to do what you think is right, even if it means foregoing dreams of AAA. Best to do what you can to comply up to AA as far as it seems correct/reasonable (to you/your site visitors). Increasing numbers of accessible web developers seem to leave off the "A" badges altogether and use the accessibility policy to explain and justify what they have and have not done. At the same time they often ask for feedback if any visitor has experienced difficulties with the site.

[1] edit: I meant assistive technologies/text-browsers.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 12 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

My new business site

Minor Point:

in /contact/

Clicking the text "I am interested in:" checks the first checkbox. Wouldn't it make more sense to have each checkbox become checked only when its associative text was clicked? For instance, clicking on "Print Design" should check its neighboring box. Adding IDs to your checkboxes and making the neighboring text into labels will solve this.

<input type="checkbox" name="interest" id="print" value="Print design" /><label for="print">Print design</label>

Something I like to do, that seems to increase accessability, is to add the following style to my labels.

label { cursor: pointer; } I would urge you to consider the first suggestion, though the second one is more an opinion that serious advice. Overall, you've done a nice job with the site.

- Antibland

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My new business site

Thanks for the explanation Lorraine. Yeah I wasn't really planning on putting any As on my site partly cos I'm not confident enough in my understanding of all the rules/concepts. So I take it if something like Watchfire gives you any warnings for the 3 priority levels that you've not reached the standards of that level or is it only for errors?

antibland wrote:

Adding IDs to your checkboxes and making the neighboring text into labels will solve this.
<input type="checkbox" name="interest" id="print" value="Print design" /><label for="print">Print design</label>

Yeah, I have been thinking about that one but was unsure what to do because for all other form elements the label is the bit to the left (name, address etc.) whereas the checkboxes actually have two sets of labels - one to describe the checkbox group and one for each individual checkbox.
So what do you do? Should 'I am interested in' not be a label? Or are they all labels?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 12 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

My new business site

Tyssen wrote:
Yeah, I have been thinking about that one but was unsure what to do because for all other form elements the label is the bit to the left (name, address etc.) whereas the checkboxes actually have two sets of labels - one to describe the checkbox group and one for each individual checkbox.
So what do you do? Should 'I am interested in' not be a label? Or are they all labels?

I would leave the label on the left the way it is for now and create labels on the right for each checkbox description. Taking away the one on the left would be confusing for certain users, but adding labels for each checkbox description shouldn't damage usability in any way; if anything, it will simply strengthen it.

Also, you have a very small CSS error.

- Antibland

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My new business site

antibland wrote:
I would leave the label on the left the way it is for now and create labels on the right for each checkbox description. Also, you have a very small CSS error.

That's cos I've added a print stylesheet and forgot to check it. :oops:
I'll take your advice on the labels too, thanks.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

My new business site

I think it's important that there be a strong connection between label and form control. For usability's sake, certain conventions should be followed in regard visual tie ins.

I've posted this before, but I think there are good points to be made with the structural markup. Note the nested label/input, and the use of fieldsets and legends to group by purpose the various inputs.

The css has some visual bells and whistles for those who are not browser impaired. Wink I figure that's just incremental enhancement that does not create a barricade to the handicapped and the IE users won't know what they're missing anyway. Lorraine might have something more authoritative to say about my conjecture.

I think your backgrounds have a boldness without distracting, that's good. The use of the model is genius. Talking on the phone is a hoot.

Now the bad.

Like so many print/graphics people (how's that for a broad brush—read my sig buster! Smile), you're in love with the look of small font-sizes. I'll grant they form nice tight blocks that add to the 'look'. Unfortunately, monitors are more difficult to read from than dead trees. There's the flicker, the contrast, and —now wait for it— we don't have the monitor as close as we hold paper when reading (10–15in. with paper, 18–24in. with a screen). That pretty little 9pt type might be ok in a glossy rag, but it's too damned small for the screen. You could help with a better choice of fonts and line spacing. You have what roughly appears to be a 50% aspect ratio (is that what you call it, the ex-height/em-height?) and a 1.4em line-height. A better choice would be Tahoma, Verdana, Geneva (Win, Linux, Mac) at 150% line height for the higher aspect ratio and better line separation. Better still, but I won't hold my breath, would be at least a 10pt/83% font size. Or why not the user's own personal preference? Set font-size to 100% and if the user likes smaller, his settings will already be there.

OK, now the form code;

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta name="generator" 
        content=" 
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" /> 
         
  <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" /> 
 
  <title>Form test</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
<!-- 
 
body { 
    margin: 0px; 
    padding: 0px; 
    background: white; 
    color: #333; 
    font-size: 101%; 
    } 
 
input, select { 
    cursor: pointer; 
    } 
 
input[type="checkbox"] { 
    vertical-align: middle; 
    } 
 
input[type="submit"] { 
    width: 75px; 
    } 
 
input[type="text"], select { 
    vertical-align: top; 
    width: 8em; 
    border: 1px solid #999; 
    } 
 
input[type="text"]:focus { 
    background-color: #ffe; 
    } 
 
h1 { 
    margin: 0; 
    font: 1.6em sans-serif; 
    text-align: center; 
    letter-spacing: .3em; 
    } 
 
form { 
    width: 30em; 
    height: auto; 
    border: 3px solid #999; 
    padding: 10px 10px 0; 
    margin: 0.5em auto; /*not hacked for IE5 stupidity*/ 
    font-size: 0.9em; 
    } 
 
fieldset { 
    position: relative; 
    margin-bottom: 0.5em; 
    padding: 1em; 
    font: 1em/1.2 sans-serif; 
    border: 1px solid #555; 
    } 
 
fieldset p {overflow: hidden; 
    margin: 0; 
    line-height: 1.75; 
    } 
 
legend { 
    font-size: 0.9em; 
    padding: 0.2em 0.5em; 
    background-color: #eee; 
    border: 1px solid #555; 
    -moz-border-radius: 10px; 
    } 
 
label { 
    font-size: 0.9em; 
    font-variant: small-caps; 
    margin-bottom: .25em 0; 
    cursor: pointer; 
    } 
 
label span.req:before { 
    content: "* "; 
    color: red; 
    } 
 
label:hover span.req { 
    color: red; 
    } 
 
label:hover span.req:before { 
    content: " Required "; 
    } 
 
label:hover, 
label:hover input, 
label:hover span { 
    background-color: #eee; 
    } 
 
label span { 
    width: 16em; 
    float: left; 
    text-align: right; 
    margin-right: 1em; 
    } 
 
input, select { 
    width: 8em; 
    border: 1px solid #777; 
    } 
 
.cbxl { 
    width: 48%; 
    float: left; 
    text-align: left; 
    clear: left; 
    } 
 
.cbxl input { 
    width: auto; 
    border: 0 none; 
    } 
 
.cbxr { 
    width: 48%; 
    float: right; 
    clear: right; 
    text-align: left; 
    } 
 
.cbxr input { 
    width: auto; 
    border: 0 none; 
    } 
 
.privacy { 
    font-size: 9px; 
    color: #eee; 
    text-align: center; 
    } 
 
/*** see http://www.positioniseverything.net/easyclearing.html 
   for explanation of Tony Aslett's elegant hack ***/ 
 
.clearing:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-table; 
    } 
 
/* Hides from IE-mac \*/ 
* html .clearing { 
    height: 1%; 
    } 
.clearing { 
    display: block; 
    } 
/* End hide from IE-mac */ 
/*** end clearing hack ***/ 
 
--> 
/*]]>*/ 
</style> 
</head> 
 
<body> 
  <h1>Form Example</h1> 
 
  <form method="get" 
        action="#"> 
    <fieldset> 
      <legend>Contact Info</legend> 
 
      <p style="text-align: center;">* indicates a required field.</p> 
 
      <p><label for="fname"><span class="req">First 
      Name:</span><input type="text" 
             id="fname" 
             value="" /></label></p> 
 
      <p><label for="lname"><span class="req">Last 
      Name:</span><input type="text" 
             id="lname" 
             value="" /></label></p> 
 
      <p><label for="title"><span>Title:</span><input type="text" 
             id="title" 
             value="" /></label></p> 
 
      <p><label for="comp"><span class="req">Company:</span> 
      <input type="text" 
             id="comp" 
             value="" /></label></p> 
 
      <p><label for="addr1"><span class="req">Address Line 1:</span> 
      <input type="text" 
             id="addr1" 
             value="" /></label></p> 
 
      <p><label for="addr2"><span>Address Line 2:</span> <input type=" 
      text" 
             id="addr2" 
             value="" /></label></p> 
 
      <p><label for="city"><span class="req">City:</span> <input type=" 
      text" 
             id="city" 
             value="" /></label></p> 
 
      <p><label for="state" 
             title="pick your state"><span class="req">State:</span> 
             <select name="state" 
              id="state"> 
        <option value=""> 
          ------- 
        </option> 
 
        <option title="Home of Dizzy City West" 
                value="CA"> 
          California 
        </option> 
 
        <option value="NY"> 
          New York 
        </option> 
 
        <option value="TX"> 
          Texas 
        </option> 
 
        <option value="WI"> 
          Wisconsin 
        </option> 
 
      </select></label></p> 
 
      <p><label for="zip"><span class="req">Zip Code (U.S. 
      only):</span> <input type="text" 
             id="zip" 
             value="" /></label></p> 
 
      <p><label for="email"><span>E-Mail:</span> <input type="text" 
             id="email" 
             value="" /></label></p> 
 
      <p><label for="phone"><span>Phone No.(###-###-####):</span> 
      <input type="text" 
             id="phone" 
             value="" /></label></p> 
 
      <p style="font-size: 9px; color: #aaa; text-align: center;">Your 
      personal information will not be sold for any reason other than 
      the offer of certified funds.</p> 
    </fieldset> 
 
    <fieldset class="clearing"> 
      <legend>Reason for Contact——Check all that Apply</legend> 
      <label class="cbxl" 
                for="quote"><input type="checkbox" 
             id="quote" 
             value="quote" />Request for Quotation</label> <label class=" 
             cbxr" 
                for="need"><input type="checkbox" 
             id="need" 
             value="need" />Immediate Need</label> <label class="cbxl" 
                for="future"><input type="checkbox" 
             id="future" 
             value="future" />Future Purchase</label> <label class=" 
             cbxr" 
                for="info"><input type="checkbox" 
             id="info" 
             value="info" />File Information</label> <label class=" 
             cbxl" 
                for="general"><input type="checkbox" 
             id="general" 
             value="general" />General Information</label> 
 
    </fieldset> 
 
    <p><input type="submit" 
           value="Submit" /></p> 
  </form> 
</body> 
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My new business site

Thanks for the form info Gary. Using <legend> instead of another label seems to be a good way to go for the checkboxes. I've used legends in combination with fieldsets before for larger forms that had different sections but as my contact form is fairly basic, I didn't think it was really required here.

kk5st wrote:

Like so many print/graphics people (how's that for a broad brush—read my sig buster! Smile), you're in love with the look of small font-sizes.

While the font's not the biggest you'll find, I didn't think it was that small either. It's certainly no smaller than on A List Apart's new redesign or even CNN for a couple of quick examples, but I'll have a look at how it goes increasing it a bit.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

My new business site

Consider your market. Are they all 25yos with perfect vision, or maybe 40+ and hating to pull out the reading specs? Before bumping the size, change the fonts and line-height. It'll make a big difference. It wouldn't hurt to go to 83.33%, though. That's about 10pt (elite) equivalent with out-of-the-box browser defaults.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My new business site

kk5st wrote:
Consider your market. Are they all 25yos with perfect vision, or maybe 40+ and hating to pull out the reading specs? Before bumping the size, change the fonts and line-height. It'll make a big difference. It wouldn't hurt to go to 83.33%, though. That's about 10pt (elite) equivalent with out-of-the-box browser defaults.

I don't really know what my market's gonna be yet as this is all new to me. I'm going to exercise my right as a print/graphics person not to go with Tahoma, Verdana cos I just don't think they have enough style. Wink
My body's currently set at font-size: 76%; line-height: 140%; so I'm not that far off the figures you're quoting anyway.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My new business site

Lorraine wrote:
The colour contrast between the white background and the "light" text (somewhere around #eaac74) i.e. Confused and frustrated by the Internet will not pass the current W3C algorithm.

As a point of interest, I just ran my site through aDesigner and under the low vision assessment the only things it picked up for foreground and background colours being too close were the header/logo graphic and the tick next to CSS in the footer.
It's the first time I've used aDesigner which leads me to ask how accurate it actually is because I would've thought all the graphics in the header would suffer from the same contrast problem as the logo and that if it's going to pick up one tick, it would pick up on the other too. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

My new business site

Tyssen
aDesigner does not pick up background images - no doubt on their long list of things to do. Until then you could use a colour contrast analyzer such as http://www.nils.org.au/ais/web/resources/contrast_analyser/index.html, which is what I did on the wooden man caption.

At the start, I noticed aDesigner picked up your logo image, so did the colour contrast analyzer, but I decided you probably would not want to hear that Wink

Both aDesigner and the colour contrast analyzer also picked up the visited link colour on sitemap, accessibility, xhtml and css (not the tick beside css). But these are very marginal i.e the colour difference does not pass the W3C algorithm, but it does pass the Hewlett Packard method.

I suspect aDesigner is accurate enough as a mechanical checking tool. After all it gives your site 100% on the layout and voice browser modes in blind visualisation and the top grade on all aspects of low vision. I wouldn't argue against that. Smile