I’m just going to switch styles (and if you thought sludge was bad, wait ’til you see pastel hell I’m about to unleash). Done! Panic ye not, it’s just a way of keeping the sections outlined in different (and admittedly hideous) colours while I start again on the redesign.

Well it’s past one a.m. so I’m going to call it a day. These pastels aren’t bad are they? Well I like the pale blue. How about duck egg blue and chocolate brown to match the bedroom? Maybe not. In the meantime, huge thank yous for all the advice and offers of additional help. I’m hoping to go solo for as much of the actual coding as I can because that’s the best way to learn but fitting it in late at night makes for slooooow brain activity so it’ll take a while longer than anticipated.

Anyway, that’s it for today, tomorrow night I’m back to bloghopping because it’s been too long since I visited you all then I’ll pick it up again on Friday night.

Oh a question – I’ve got the original .eps of the daisy graphic but what I’d like to do is give it a transparent (?) background so that I can place it on non-white backgrounds. And I need to do this on that version and on cropped (stemless) and reduced size versions. What’s the best way to do that? Is that even what you need to do? Should the css settings be changed instead? Pfft, me go bed.

Night, night.

To summarise: I know nuffink.

Not only am I having to go back and revise the css I thought I knew, there’s also all sorts of accessibility challenges to resolve – throw in most of the day/evening with no internet connection and you’ve got a recipe for pissed-offness. But in a good way.

What else? Oh, I haven’t deleted the blogrolls, just moved them temporarily here. Well, they’ve been there since last year, I just haven’t got round to finishing that page (are we seeing a pattern yet?) so um, there we go. If your blog was on the blogroll and you’re not on the new blogroll, please let me know – it’s definitely incompetence on my part rather than delinking. Honest guv.

Thanks for your comments, nay, fascination with the delightful mushroom colour sludge, I am going to change it, just need some spare time. And Katherine, yes there will be a purty picture coming to a header near you soon :-0)

So I’ve used a basic two column TypePad template to start out with. The right hand column contains all the sidebar information, including the navigation (although I’m also adding a horizonal navigation bar across the top).

When I view this page without css, the right hand column content appears toward the bottom of the page – here’s a screenshot of the top half of the page and here’s a screenshot of the bottom half of the page.

Question: should I switch the sidebar to the left hand side and should I ensure that navigation information etc. appears before the main content?

So what resources are available to help us choose a color scheme? After just 15 minutes of browsing I’m ready to throw my teddy out of the pram and yell for mama, there’s just too much information out there!

Okay, Let’s start by reading the following:

Guideline 2.1 of the Web Content Accessibility Guidelines 1.0:

Ensure that all information conveyed with color is also available without color, for example from context or markup.

I’m not sure how to put that into practise yet but let’s move on to Guideline 2.2 of the same document which states that we need to:

Ensure that text and graphics are understandable when viewed without color.

If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.

Okay, so how can we check that the colours we use as the basis for a new scheme follow the above guidelines?

There’s more:

Use numbers, not names, for colors.

Use these CSS properties to specify colors:

• ‘color’, for foreground text color.
• ‘background-color’, for background colors.
• ‘border-color’, ‘outline-color’ for border colors.
• For link colors, refer to the :link, :visited, and :active pseudo-classes.

Ensure that foreground and background colors contrast well. If specifying a foreground color, always specify a background color as well (and vice versa).

Right, let’s take these one by one:

• Use numbers, not names, for colors.
  Check. The default css provided with this template [link now invalid] contains no named colours such as H1 {color: red}.
• Use these CSS properties to specify colors
  Okay on the background-color but I need to change the link colors. Now, can I go back to using the highlight style links of the previous layout, an example of which is here? I’m thinking that as long as the color contrast is strong enough, I should be okay but if you know differerently, please shout out.

Hmm, as I write this I’m aware that I might be breaking all sorts of rules about alternative descriptions, text descriptions of all graphics but forgive me for a while. There’s only so much this brain can hold at any one time. As far as I know, the TypePad interface [see example here] for uploading pictures and other files does not contain any option for including such markup so I’ll need to edit each one manually (not a problem!) but let’s get the color issues resolved first.
It also occurs to me that I might have to change the way I write about links. Until today I would have written something like:

…using the highlight style links of the previous layout

but I’m not clearly indicating an external link there am? I’m putting this subject off to another day but any advice on that in the meantime would be greatly appreciated.

So it the first (and most easily achieved step) is to ensure a good colour contrast. I’m starting to get rather fond of these template colours but that orange [#FF9900] has to go. Much as I liked the red and gold of yesterday, I’d like to get the pink daisy back in (eagle eyed readers will have spotted that I never quite got round to changing the favicon) but let’s look at what we can find online to help us check that a particular colour scheme has enough contrast – bring on the Colour Contrast Analyser 1.0. I’ve just downloaded the tool (tiny file, no install) and entered in the template colours – here’s a screenshot of the results:

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 265.

So – do I lighten the background colour and darken the text colour? That’s okay, I’ve taken up far too much of your time already so I’ll have a play with the colours and report back.

I’m just about to put most of this post in an extended post and again I’m stopping to wonder if that’s a good thing. I’ll carry on doing it until I learn differently.

Summary of topics raised in this post:

1. Colour contrast – understood, now to find a good colour scheme and implement it.
2. Ensure that all information conveyed with color is also available without color, for example from context or markup – find more information, report back here.
3. Writing content so that external links are clearly indicated – to be researched
4. Alternative text for graphics – next topic when color/links are sorted
5. Extended posts – to be researched

Blimey, and that’s just day one…

[Written while this site was hosted at TypePad.]

So this is it. Starting today, I’m going to do my best to make this site not only validate but, more importantly, make it as accessible as possible. I’ve taken a basic 2 column template from the TypePad offerings, converted it to an advanced template set and I’m now going to start adding back in some of the sidebar stuff from the old layout.

I thought about using a test blog –getting it all spiffy and complete before launching– but this way I reckon I can get feedback and much needed help from you lot – and since I’m betting that I’m not the only one with a TypePad/Movable Type site wanting to follow accessibility guidelines but finding the reams of available information a bit overwhelming [and conflicting], going public means that (fingers crossed) we all learn more. Besides, I’ll be less likely to procrastinate if the main blog looks like shite…

* a catchphrase from a popular British tv sitcom called Dad’s Army following the adventures of a group of men who for one reason or another couldn’t join the regular army from the Local Defence Volunteers, more commonly known as the Dad’s Army.
p.s. It’s pronounced Mannering. Yes I know.

[Written while this site was hosted at TypePad.]

Just added two new links to the Accessibility section, both are tools for checking foreground & background colour combinations to determine if they provide good colour visibility – the Colour Contrast Analyser and Juicy Studio’s analyser (no download needed for this one). [Both via the WSG.]

I’m reading a superb Andy Budd presentation on accessibility.

I know that this site breaks a lot of the rules but in the spirit of “one thing at a time, Gungadin”, I’m practising on a site elsewhere and will implement changes here in a short while.

Meanwhile Real Life continues apace, deadlines abound, more later.

[Written while this site was hosted at TypePad.]