The fantabulous Colour Contrast Analyser 1.1 has been updated is now out and available for download.

This tiny (319 kb) tool sits on your desktop, not only a perfect tool for checking foreground & background colour combinations to ensure that they provide good colour visibility, it now has sliders so that creating colour schemes is as easy as pie.

Brilliant.

• Comments (the best bit) aren’t included, can I add an rss feed for these? Need to find out.
• You can sign up with Talkr.com and subscribe to feeds of blogs that simply have an rss feed (they don’t have to be signed up with Talkr podcast).
• The plugin has added the Talkr icon to every post but only recent and future posts will be available. Need to fix that.
• Accessibility issues.

The main reason I installed Talkr was to get (the lazy man’s) idea of blog posts as they are read by screenreaders. It’s not a true version of course, I’m betting (hoping!) that Jaws and other softwares are more sophisticated than this. But it has immediately highlighted a few issues that we bloggers should start thinking about.

I’m racing against the clock now, we’re off to a birthday party tonight (full of musicians who jam at the drop of a hat, hooray!) and I need to bath, wash hair and find something slinky to adorn my sylph-like silhouette so I’ll just jot down a few notes and come back to it later. Oh and somewhere in the drafts folder I’ve a post about basic steps we bloggers can take to improve accessibility, will someone nag me into publishing it, please?

Back to accessibility. I hate to “pick on” Pam, (especially since she’s one of the funniest bloggers on the planet), it’s just that her blog was the first I subscribed to. Here is the spoken version of the first post that appears in her feed:

This story from beancounters is entitled based on a true story and was published on March 16 2006. The original story included an image with the caption ode at this point.

Eh? The written post is indeed entitled based on a true story but it contains a single image, a cartoon strip. Pam named the graphic ode.gif and uploaded it. TypePad then automatically used the graphic name as the alt attribute, giving us a useless “description” of the picture.

Oh and it’s not just Pam, my archives are full of badly presented graphics that I’m slowly trying to fix.

It really highlights a big issue that we bloggers ignore, mostly? partly? because of the blogging/cms softwares we all use. Why don’t they prompt bloggers to type in an alt attribute when uploading images? I know that WordPress does, Blogsome does but what about others? TypePad didn’t (has that changed?).

Anyway. Here’s the deal as I understand it. All images (apart from decorative ones such as icons that can be placed in the css and ignored by screenreaders) should have an accompaning alt attribute. Alt being short for alternative. That is, alternative text to describe pictures for those than cannot see them. If you’ve just posted a picture of, say, George Cloooney (mmm, yes please!), why not add a few words to describe the picture. Let your imagination run riot! I’m the world’s worst at finding ways to describe pictures but something is better than nothing.

And besides, if you’re interested in getting hits, you know what? Google will love you for it.

I’ll add more links later but Roger Johansson’s article, HTML tags vs. elements vs. attributes is a great place to start.

Back to Pam’s post. I couldn’t have picked a worst one to explain (well, I didn’t pick it, it was the first one I listened to). Not only is the text a bit wacky, it’s written in a fake French accent. My head is about to explode!

So let’s make this a team effort – what could Pam have written as an alternative text to the cartoon strip?

I realise the irony in asking for these suggestions – the image is invisible to non sighted readers so here is the text. A young girl is talking to a bird.

Eef I water, ze crab grass, she grow
Eef I do not water, ze dirt, she show
Ze conundrum, she ees brewing
Alors, Neighbour Bob,
What am I to be doing?

Wait, how about a prize? The best alt attribute text for Pam’s post gets a surprise gift.

The prize and the *ahem* lucky judge to be announced later. Sod it, is that the time? I have to run!

[tags]Talkr, podcast, accessibility, alt, attribute[/tags]

Ever wondered how punctuation marks, separator characters and unicode characters such as bullets sound when spoken aloud in a screenreader such as Jaws?

Peter Krantz’s article The Sound of the Accessible Title Tag Separator sums it all up.

Anyway, a bit of tinkering under the hood took place last night and if you’re reading this with Internet Explorer you can now resize the text by clicking the “View” button on the top menu bar of the browser window, choose Text Size then Larger or Largest.

For your commenting pleasure, we now have live preview (via this plugin), with the option to add title attributes to your links – hooray!

Not sure about title attributes?

Let’s say you wanted to leave a comment on a discussion about books. We’re all recommending our favourite books and you would like to add your twopenorth (that’s around 2 cents for our American cousins) but rather than just type the author and title of the book, you’d like to link to a specific version of the book on, say, the Amazon website.

Copy and paste the text from just above the comment box, it’ll look like this:

<a href="" title="">

Between the first set of double quotation marks, add the url of the site you want to link to.

<a href="http://www.amazon.co.uk/etc." title="">

Then between the second set of double quotation marks add a descriptive title of the link you’re using, in this case you might write

<a href="http://www.amazon.co.uk/etc." title="Amazon listing for Nevil Shute's book A Town Like Alice">

You’ll then produce a link like this:

Nevil Shute, A Town Like Alice

Now, I’m still on the learning curve with title adding. I’ve a feeling that you should avoid using single quotation marks and I’m very unsure about the duplication in the example above but I’ll research it further. Contributions are, as always, welcomed.

It’s also really helpful to use title attributes on links within your blog posts – not only are they read out by screenreaders (with the option switched on?), sighted readers can hover over the link to find out more about the url you’re sending them to.

Later

I’m also unsure about omitting the title attribute if the link text itself is self-explanatory. For example, the link in the new first paragraph:

Roger Johansson’s article, HTML tags vs. elements vs. attributes

I’ve used the author’s name and the title of the article so I would lean toward not adding a title attribute here but I’m wondering if that’s correct. More research to be done!

First up, why is it a problem? Well, the W3C Web Content Accessibility Guidelines (WCAG) state that

If more than one link on a page shares the same link text, all those links should point to the same resource. Such consistency will help page design as well as accessibility.

If a page on this blog has, say, 10 posts and two or more of those posts contain extended text, then two or more of those posts will have a “more” link leading to two different places.

Reading Bruce Lawson‘s post, “WordPress PHP help wanted“, a comment from Derek Featherstone led me to try this method and by jingo it works.

In the index file (index.php) you’ll see some code like this:

<div class="entry">
<?php the_content('<br /><br />[more...]'); ?>
</div>

It might vary slightly, depending on the theme you’re using but you want to change the content of the php statement, i.e. everything except:

<?php

at the start and
?>

at the end (these are the opening and closing tags, just like, for example, the <h1> and </h1> tags of html.

You replace that with:

the_content("Continue reading " . the_title('','',false), 0);

And your finished line is now:

<?php the_content("Continue reading " . the_title('','',false), 0); ?>

I’ve had to put spaces in the code above so that it’s visible but you can see screenshots of the code as follows:

the old code
the new code

If you’re not confident about editing the index.php file, ask a friendly neighbourhood php geek and make a copy of the file before you start!

Next question: what’s the best way to display code (php, html, css) here without having to add spaces? I tried installing CodeSnippet a little while ago but not had much success. Maybe I’ll look at it again tomorrow. For now, to bed!

Update: thanks to Ian‘s suggestion, I’ve encoded the above as entities with the WordPress encoder widget.

But I’ve been thinking a lot about how to go about the accessible blog templates idea and jotted down a few notes. Thoughts, ideas, criticisms all welcomed!

Hosting:
I’ve plenty spare.

Name ideas:
accessibleblogs.net
equalweb
blogaccess
accessblog
blogaccessibility
opensauce (taken dammit!)
I’m betting that you lot can come up with better than these!

Logo:
Ideas please! (when we’ve got the name sorted)
Include a button for linking back to spread the word.

Format:
How about a blog format where all participants have logins.

* The main section is devoted to the templates and would follow a set pattern
- a small screenshot of the template (link to larger shot)
- the code zipped (with any graphics)
- install notes, etc.
- name of the author, link to site
- terms of use [or link to terms of use page]

* Categories for 1, 2, 3 column template and for blogging software [so that visitors can sort by Blogger, MT, WordPress, etc.]

* Create a gallery of thumbnails sorted by 1, 2, 3 columns? Later, if necessary?

* Each post would have open comments to allow questions and discussion on the template

* In the FAQ or a seperate “How to” page we would need to explain exactly how to “install” the templates

* We could also have a sideblog for links to useful news items, articles, etc. all participants encouraged to post regularly.

* Rather than a blogroll have a categorised links page full of useful sites, articles (permalinks), forum discussions etc..

* Big commitment not necessary, invite people to design templates

About page:
What do people mean when they say a site needs to be accessible and why should you care? If you’re on this page, hopefully you have an interest in making your blog available to anyone who stops by.

Who’s involved? [So far...]
Pixeldiva
Eliza from Fembat
Clair
Anyone else?

FAQ
A good, basic introduction to accessibility, links to good tutorial(s) and a small steps section, e.g. if you don’t feel ready to add a new template to your blog you can start small by… blah, blah.

Are these templates free to use?
Yes they are! If you’d like to link back to this site so that others can learn about accessibility issues, that would be lovely, thank you!

Maintenance costs:
My hosting plan should cover it but we could think about adding a tip jar and/or google ads for donations to RNID, RNIB, etc. Are any charities working directly with web accessibility issues?

What else is out there?
Hmm. I’m sure that there are plenty of templates that meet accessibility standards but they aren’t being marketed as such. Or maybe I’ve not spent enough time googling. There’s the Bauhaus template and general (but very useful) articles such as
How to Make Your Blog Accessible to Blind Readers but no central resource as far as I can see.

And there is a need for it.

So: your thoughts, ideas, criticisms are all welcomed!

I’ve been thinking. Much of the popularisation of web standards and accessibility comes from bloggers or via the blogging medium, yes?

Do you know what would be a good idea? If someone were to build a site offering free basic templates that follow accessibility standards for the most popular blogging softwares (Blogger, WordPress, Moveable Type, etc.) along with easy to follow guides on implementation plus tips for not then borking them (as I do but am about to change) with missing alt tags and so on. And a forum with knowledgeable members and moderators.

If I knew more I’d do it. Now there’s motivation. Just need the time. But dammit it’s a good idea. Anyone interested in joining in?

Also, it would do A Big Corporation (IBM? Microsoft?) no end of good if they made available a low priced/free screen reading software for testing (maybe following the browsercam model?). Those of us who have never seen one in action would benefit greatly when starting out on the accessibility trail. I know that Apple have built VoiceOver into the new OS, I wonder if Microsoft will do something similar in Longhorn. But that’s too far away.

Update/correction: thanks to a reminder from Neil, Windows XP does have accessibility tools (Start -> All Programs -> Accessories -> Accessibility -> Narrator). I don’t often get the chance to use XP (I work on a Windows 2000 setup, Martyn hogs XP one) but I’ve added it to the list of resources to check out. If you have any thoughts, let us know!

It’s late, I’m tired, I might rewrite this in English tomorrow.

Turning to web stuff, how about a new blog on using Eyetools to measure eye tracking activity on websites.

Owen Winkler‘s I like your colors! lets you enter the url of a website to view the colours used. Great for inspiration (or tracking stray purples…) while Kubrickr lets you use images from Flickr “to replace that big blue blob header in your WordPress 1.5 Default theme”.

Best find today though is the Delorie Lynx Viewer which gives you a good approximation of how your website will look when viewed with the text-mode web browser Lynx. I’m quite pleased at how the new look appears in Lynx (still a long way to go I know) but the immediate reminder was to put the pink daisy graphic that accompanies each post title tucked away in the style sheet.

Revamping for accessibility has taken a bit of back seat this week, I’m very busy running away from the camera at work and at home but in spare moments I’m revising css with Max Design‘s excellent tutorials: Selectutorial, Floatutorial and Listutorial.

And finally… shall we walk or take the lift? [via Graeme]

1. < li > in the sidebar
2. Posts aren’t displaying any dates. Goodness knows what I did there.
   – Thanks Jann.
3. The text “Posted by Daisy at 10:52 PM in” is still a funny grey
   – thanks Em.
4. There’s a purple-ish border showing around the banner in IE6.

Anything else broken?

In the meantime, a quick link: She blocked me by Bob Ricci.

I’m taking all of your help on board (thank you!) and I’m beginning to see that pixeldiva‘s advice to put as much presentational content in the style sheet as possible will mean really changing the TypePad template. Gulp. For example, the banner information is all in the main index page but I’m guessing that I should move that to the stylesheet.

One thing I can’t work out how to do (and I think this is a question specifically for TypePad users rather than MT users) is how to add some text to the comment box – just a line saying something like “Basic html tags can be used: < b >, < i >“. Does anyone know how to do that? Done! You need to add the code to the Individual Archives rather than the main index archive. Duh.

. . .

In other news: I’m still shuddering at this “interesting” kitchen product via Adrian but chuffed to bits with ExplorerXP, a tabbed file browser [via Gordon and Hanni]. The only thing I’d like to add is the ability to view thumbnails but I guess we’ve got other tools for that. Basically it’s what Windows Explorer should be but never will be. Oh and it’s free. Wheee! Also just bookmarked PIE‘s Common Coding Problems with HTML and CSS

And how many hours is it now to the start of the Wales v France game? :-0)