September 2008 Archives

Go to your blog's home page and look at the top of your browser. Look up, up, up. That blue bar at the top? OK, maybe it's not blue, but it's up there. It shows what's called the page title. Different blogs are set up to show one or more pieces of information there: the blog's name, the blog's tagline, the post title, the archives title, whatever.

If you include more than one item and you separate them with a colon, a dash, a pipe (|), or something else, do you know what it sounds like?

Yep, there are some people who listen to your blog instead of reading it with their eyes. Visitors to your blog who rely on special software to do this, called screen reader software, hear the page title first. It helps them figure out where they are and what to expect from the page content.

In his post Document titles and title separators, Roger Johansson had this to say:

As for title separators, whatever you choose to use, read it out loud to get some feel for what screen reader users will hear. I know I wouldn’t want to listen to "page title minus colon colon minus section title minus colon colon minus site name" or the result of some similar fancy separators made up of several characters.

The folks at the blog Standards-Schmandards did him one better and actually tested out how one popular screen reader "pronounced" many of the popular separators. I hate to rely on it as gospel, since it's four years old, but here were the basic conclusions:

• The right double angle bracket character (») was the worst.
• Pick a separator which is pronounced as a word that's unlikely to appear as part of the text in the title. Do not use the bullet character if you write about guns and ammunition or a pipe (a.k.a. "vertical bar") if you often write about bars.
• Regardless of the character you pick, surround it with whitespace so it doesn't get lumped in with your text.

There's a table in their blog post showing what the screen reader says out loud when it encounters each symbol.

I know we use separator characters to make things look pretty, but now I'm wondering if the best option isn't to just use words. "Name of post" at "name of blog" seems pretty self-explanatory to me.

I posted about making blog quizzes friendly to your blog's readers who have disabilities. Related to that topic, I do need to mention one more thing:

NINJAS!

The Ninja Text Generator really cracks me up.

Remember what we learned about blog quizzes? The "alt" label in the code for images is often not so helpful to people using screen readers to listen to your blog.

The default code for the image above just says "Ninja!" While amusing, it doesn't reflect the text of the image, which is actually "Accessibility."

So I turned this:

alt="Ninja!"

Into this:

alt="Accessibility! Make your own animated ninja text."

It says what the image says, and it says where the link goes. Accessible ninjas for everyone!

We've all seen those blogs where you have to squint to tell the text from the background color. Or maybe squinting doesn't even help. Black and fuschia might be your favorite color combination for clothing or interior design, but when it comes to legibility, it leaves something to be desired.

Is your blog your own personal space to express your aesthetics? Of course! But if you're interested in having anybody else reading it, then you might want to think about how your text and background colors interact with each other.

People who may have trouble when you combine certain colors include:

• Older people
• People with vision impairment due to illness or injury
• People with color blindness
• Mobile users
• Everyone else who isn't 21 years old with vision so good that they're being studied by the government

So take a step back from your monitor and ask yourself honestly whether your blog's look says "look at me" or "look really, really, really hard at me and you might be able to read my writing."

For a more in-depth discussion, I've added a section to the How To Make Your Blog Accessible guide that talks about how to check your blog's colors and how to make changes if needed. It's called Choose Text and Background Colors That Everyone Can Read, and it's a work in progress, so let me know if you have any feedback!

We all know that visual CAPTCHAs (those squiggly letters) are barriers to participation for people who can't see at all or can't see very well. Many of us also know that adding an audio CAPTCHA option, while better than nothing, leaves a lot to be desired for accessibility.

But did you know there are companies that pay people to break CAPTCHAs?

The blogging companies who rely on CAPTCHAs to protect their users from comment spam need to find some new tools.