Why this a11y stuff?

”Did you test this design?” That’s a question I want to ask sometimes when I get a psd-file for a new web site. Sometimes I do ask. Sometimes I go ahead and make some tests myself. What tests? Well there are many tests you can do to make sure that your design is right. I felt like I couldn’t cover them all in one post. So instead I decided to make an article series. This post is the first one and it’s all about contrast.

Why is contrast important?

First of all, not everyone have your falcon eyes. Yes really. People do have bad eyes, color blindness or other impairments.
Second, not everyone is sitting on your 27” iMac. They might be on a crappy old screen and no, it’s no ok to tell them to get a Mac.

How do I test for contrast?

According to WCAG 2.0: “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)”

Well what’s that ratio stuff? I’m not good with calculating myself so I will not try to go into any deep explanations. But there are some good tools out there to help us.

1. Color Contrast Analyser – A program that you install on your computer. Both Windows and Mac. (YSlow legend Steve Faulkner was involved in this one. Just saying…)
2. Color Contrast Check – A tool made and hosed by designer and developer Jonathan Snooks (quite famous guy as well…)
3. Contrast Checker – Another web based checker.

Do you test for contrast? Do you know other tools?
Let me know!

This was a11y* for designers numero uno and I’m out.

/Ida

*a11y is an abbreviation of the word accessibility where 11 is the number of letters that was left out of the complete word

Coda has a fully featured file browser for your local file system and with just a click you can browse the remote file system on the server. You can easily swap between your local and remote file system by clicking on one of two tabs (one tab for the local file system and one tab for the remote). This is a great feature, it’s by no means groundbraking since a lot of different tools also has this feature but it really works smoothly in Coda.

There’s just one thing that bugs me. They’ve placed a small button on top of the tab for the remote file-system that disconnects the connection to the remote server when you click on it.

It might just be me but it’s been more than one time that I by mistake has disconnected the remote connection when all I wanted to do was to browse the remote file system.

I guess this is where design, once again, has inflicted on user-friendliness. Coda is in a big perspective a great example on really good user-friendly design and this small flaw is perhaps not so bad.

Anyone else that has thought about this or has another example?

/Simon

It figures she was stuck on the word verification were Gmail uses a so called captcha-image. My mum and my aunt are by no way disabled people but even so I tried to make them click on the “wheelchair”-symbol to hear the letters. That didn’t work. My aunt didn’t have any speakers connected. *sigh*
Story ended with me having to create that account for my aunt cause they simply couldn’t get the captcha-image right.

In this article I would just like to present a simple way of getting rid of spam without using captcha. And thus help people like my mum and aunt getting cranky over some weird incomprehensible image. I acknowledge that this is not a good solution for big web apps like Gmail (sorry mum) but for a small site it could be an alternative.

Let me start by pointing out that this is not a new solution. It’s been around for a while but I just felt that not so many people know about it. I have tested this on the form on my own web site and so far I never had a single spam in my inbox.

So what’s the trick?

Most spam-robots fill in every single input-field in a form. The trick here is to have an input-field that should be left empty to validate. That input-field is hidden with css so “ordinary people” with css enabled doesn’t even see the empty field.
Let me put it into code:

<label for="test" class="hide">Don't write anything here!
</label>

<input name="spamtest" id="test" type="text" class="hide" />

As you see in the code I put a label on the input that I’m going to hide. This is to be nice to people with css disabled.
After putting up this code you simply hide the input-field and the label with css by using whatever method that suits you. Here’s an example on how to do it. See the class hide in the code above? Use that one!

.hide{
position:absolute;
left:-9999px;
}

The validating of this is quite simple. An simple if-statement will do the thing. In php it could be something like this:

if($_POST['spamtest']=='')
{
      //Go ahead and submit form
      //(after validating the other input-fields of course!)
}

That’s it. Please try it out yourself and feel free to comment on this. I would also love to hear other solutions to avoid using captcha in a form.

/Ida