August 2008 Archives

Blog quizzes are fun. When you paste the results into your blog, though, are you causing a problem for people who are visiting your blog using screen reader software? Screen readers are used by people who are blind or have low vision, or even sometimes by people with learning disabilities such as dyslexia.

The biggest problem with quizzes is usually the images. Images need to be labeled behind the scenes in the code for your blog, or people using screen readers may have to listen to the filename of the image while they're reading your blog. (You can read a more in-depth discussion of images in the guide.)

Let's check out a few quizzes and see how they do, then learn how to make any necessary tweaks - which are totally easy, by the way, even if the words "computer programming" make your eyes cross.

What Dog Breed Are You? Gets an A

The What Dog Breed Are You? quiz on Dogster.com is a personality test that matches you with your canine archetype. Apparently, I'm a lab. Here's the result:

What's going on behind the scenes? Here's the code:

<a href='http://www.dogster.com/quizzes/what_dog_breed_are_you'><img src='http://files.dogster.com/images/quizzes/what_dog_breed_are_you/badge_lab.png' alt="What dog breed are you? I'm a Labrador Retriever! Find out at Dogster.com" border='0'/></a>

The image part is the part that begins with "img." When you're checking whether an image is going to cause problems for screen readers, the key is the bit that starts with "alt." Whatever follows alt inside the quotes is basically the label for the image, and it's what a screen reader user will hear.

In this case, it's good news. "What dog breed are you? I'm a Labrador Retriever! Find out at Dogster.com" is great alternative text for this image. It says what type of dog I am, and it says "find out more." This lets the screen reader user know where they'll go if they follow the link, since the entire image is a link to the quiz.

1930s Marital Scale Gets an F

The 1930s Marital Scale is a quiz that tells you how good of a husband or wife you would be according to 1930s ideals for marriage. My attitude must have improved lately, because last time I took this I failed.

42 As a 1930s wife, I am Average Take the test!

Hurray, I'm average! Here's the code:

<center><table width="300px" border="0" cellpadding="2" cellspacing="0" style="border: 1px #000000 solid; color: #000000;background-color: #ffffff;"><tr><td><img src="http://www.magatsu.net/maritaltest/wife.jpg" width="72"height="72"></td><td><p style="text-align: center;"><font size="+3">42</font></p><p style="text-align: center;">As a 1930s wife, I am<br/><strong><font size="+2">Average</font></strong></p><p style="text-align: center;"><small><a href="http://www.magatsu.net/maritaltest/">Take the test!</a></small></p></td></tr></table></center>

It's more involved than the dog breed one, because the creators put the results in the table so they could center it. If you look closely, though, you can find the "img" part that brings us the housewife talking on the phone. Is there an alt? No. So when screen reader folks come to this image, what will they hear?

Best case scenario? Silence, which would actually be fine since this image is purely decorative. Worst case scenario? "http://www.magatsu.net/maritaltest/wife.jpg" or perhaps "wife.jpg." Yuck.

To fix this quiz, just add a tiny bit to the code. Turn this:

img src="http://www.magatsu.net/maritaltest/wife.jpg"

into this:

img src="http://www.magatsu.net/maritaltest/wife.jpg" alt=" "

The "blank" alt means "Nothing to see here, move it along." It's the right thing to do when an image is just used to make things pretty, not to convey any information.

What's My Blog Rated? Gets a D

What's My Blog Rated? is a revised, updated edition of the same quiz that I looked at back in July of 2007. They've made a few changes since then and it's hosted on a different site.

Created by OnePlusYou - Free Dating Sites

Here's the code:

<a href="http://www.oneplusyou.com/bb/blog_rating"><img style="border: none;" src="http://www.oneplusyou.com/q/img/bb_badges/rated_g.jpg" alt="OnePlusYou Quizzes and Widgets" /></a><p>Created by OnePlusYou - <a href="http://www.oneplusyou.com">Free Dating Sites</a></p>

What's the alt? "OnePlusYou Quizzes and Widgets." While that's an improvement over the previous incarnation of the quiz, which said "Online Dating," it's still a FAIL. It tells the listener where they'll go if they click the link, but doesn't convey any of the information that visitors who are looking at the page can clearly see. In this case, that my blog is Rated G.

To fix this quiz, just add a tiny bit to the code. Turn this:

alt="OnePlusYou Quizzes and Widgets"

into this:

alt="This Blog is rated G - Find More OnePlusYou Quizzes and Widgets"

Problem solved.

A few days ago, I posted about adjacent non-underlined links in blog posts and the trouble they can cause for your readers with (and without!) visual disabilities. I've also written a section of How To Make Your Blog Accessible that deals with choosing a link color that your readers can actually distinguish from your text if for some reason you can't stand to underline your links.

The following quote is relevant to both of those topics and I just had to share it. It's by By Joe Clark, from his book Building Accessible Websites

It is bad usability and certainly bad accessibility to force people to scrub the mouse all over the screen until the cursor changes into a link indicator because they have no other way of finding the links on the page.

I couldn't have said it better myself.

I'm in the process of adding more tips to the guide, but we interrupt that process to bring you an important public service announcement.

You know that thing people do, where they write a normal sentence and then pick out a bunch of words in it and make them into different links?

And you know when their blog doesn't underline links in posts until you mouse over them, so as a reader, you have to start mouse-ing over each word and see where the underlining shows up?

Here's an example, from the post Aspiring Skinny Brides, Please Read on the blog Jump Off A Bridge. The last line of the post is this, and I've bolded the part that's linked. (On the blog, it's not bold, it's just red - within purple text, which is an issue for another day.)

I say you should buy another dress! But if you must insist on losing the weight, go read this to get yourself on a better track.

How many links would you say are in that bold section? There are actually three:

• read this
• to get yourself
• on a better track

I would never have known, except that I'm strange and I spend a lot of time mousing over stuff like this when I suspect an accessibility problem.

The other problem with adjacent links like this is that people with disabilities using screen readers to listen to your blog will probably hear the links all mushed together. If they wanted to follow one of the links, they might not be able to. You need to separate your links with either non-linked words or punctuation that's outside the link to create a pause.

Linking like this is one form of mystery meat linkification, which makes it harder for all of your users to figure out what a link is and whether they want to follow it.

So next time you're creating a link, take an extra minute to be a tad more descriptive about what you're linking to - and give your links some room to breathe!