All Access Blogging

CAPTCHAs, for those who don't know, are those squiggly letters you have to type in to prove you're a human and not a spammer. They're often used in signup processes on websites, and when you're trying to comment on blogs. Often the response to people who can't manage a CAPTCHA, including some people with learning disabilities as well as those with visual impairments, is that they should just get a friend to help them.

I was cleaning out my web bookmarks on accessibility a while ago and came across this gem from Nickie of Nickie's Nook, in a post from a couple of years ago called Accessible social media: It's not just for fun anymore, on the topic of how it feels to be a visually impaired user confronted with a visual CAPTCHA:

It's kind of like saying "People can come here in wheelchairs, as long as they have friends to carry them up the stairs."

I've interviewed Nickie on this blog, she's no slouch when it comes to technology. But she also has a very busy life, and she doesn't need to hit roadblocks like CAPTCHAs when she's trying to get things done online.

I've just checked to make sure that the tip Fight Comment Spam Without Locking Out Your Readers is updated (I hope!). So if you haven't seen it before, head on over and check it out.

One of the first tips I wrote for this site was about how (and why) to add alternative text to your images. Knowing when and how to use good alternative text for an image, and when to use the "blank" alternative, is one of the most important things you can do to make your web page more accessible and less annoying for your visitors who have visual disabilities or who find it easier to use browsers without images showing - such as mobile phone users who are trying to limit their bandwidth charges!

But whenever I discuss alternative text, stored in a bit of code known as the "alt attribute," someone invariably asks about the different between the alt attribute and the title attribute. In the code for an image, you can put one of each, and often people are left wondering what the difference is and how to use them both effectively.

So let's start from the beginning. Here is some image code with both an alt and a title attribute:


<img src="http://www.lizardkingdom.org/archives/2005/04/bluecarpos.jpg" alt="Movie Poster for Blue Car" title="totally awesome movie, I really enjoyed it" />


The alt= part says what the picture is, the title= part is extra comments.

Repeat after me:

Alt means alternative.

Title is for extra information.

The alt attribute for an image should be whatever is needed to replace the image if it were to disappear. It needs to be fairly short, and the important information needs to be up front so it doesn't hold the reader hostage to a long, drawn-out explanation. If the image is a link, the alt text needs to say so, and where the link goes. Every image that's not a background image should have an alt attribute, either with some text, or blank if the image is purely decorative.

The title attribute is for any additional information, often displayed in a popup box by some browsers when you mouse over the image. You don't want to put any critical information here. It's often not accessible to people who use a keyboard instead of a mouse, it may not be resizable for people who need larger text to see it, and it only stays up for a short time which means it may be difficult for people with any reading difficulties. The number of images that really need title attributes are probably few and far between, and it's okay to leave it off.

So when you're thinking about accessibility, the alt attribute is where you should focus.

What's a bad way to use the alt attribute?

Stuffing it full of keywords hoping to increase your page's search engine rankings.

Seriously, people, I know you love some Google ranking, but when you use the alt attribute on an image to cram keywords at the expense of its actual function, you're essentially telling people who need it that you care more about your page rank than about whether they can even understand what's going on with your blog.

That's bad karma, yes?

Sources and further reading are after the jump, if you're viewing this post on the home page.

Glenda Watson Hyatt, for those of you who don't know yet, is a woman on a mission: helping bloggers understand web accessibility. Yes, our armies are gathering strength!

Glenda recently had the opportunity to present at SOBCon: Biz School for Bloggers, and apparently it went quite well! You can read more about her presentation, or make sure you download her e-book on blog accessibility.

I find Glenda's success heartening, for a couple of reasons. First, she had an opportunity to present to a large number of bloggers who were fairly new to the topic. I think many people who have presented on accessibility would agree that if you advertise a session on accessibility or web standards, a smaller number of people show up than would be there if you advertised a session on "web design tips" or "search engine optimization." Also, attendees at an accessibility session are generally people who already know something about the subject. I'm not sure how SOBCon works, but it sounds from the feedback around the web that Glenda managed to reach a large number of "accessibility newbies" and their eyes were really opened.

Second, it's great to see the commenters on Glenda's post mentioning that they are trying to improve the accessibility of their blogs in concrete ways based on her presentation. It's good to open people's eyes, but to create change, they have to take action.

So hurray for accessibility outreach to bloggers! If you haven't checked out Glenda's e-book yet, make sure you do!

A few weeks ago, one of my friends mentioned All Access Blogging on her blog and described it as a site with tips on making your blog more accessible to visually impaired readers. Ouch! Although I always try to point out the benefits of the accessibility tips here for people with motor and cognitive disabilities as well as visual disabilities, apparently I'm not doing my best at communicating my purpose here!

So today I thought I'd present a tip that's primarily helpful to people with motor disabilities. There are many people with various motor disabilities who navigate the web without using a mouse. No, it's true! You can get a lot done with a keyboard.

To make your blog more usable for these folks, you can make sure that your links have a "focus" state, which means a visual change when someone has selected the link. If you're a mouse user, you see what's called the hover state when you "mouse over" a link. Sometimes the link changes color, is highlighted, or some other change. For keyboard users, the focus state is the critical piece because it tells that person where they are on the page as they tab through - when the link is "selected," not hovered over with a mouse cursor. If you imagine counting the number of links on a page, and then trying to tab to link number 49, you can imagine how it might come in handy to have a visual reminder of how far you've gotten... unless you're the kind of person who would never lose track of where they were when doing such things, which I am definitely not!

As discussed in the tip about choosing your blog's link colors for accessibility, text color alone isn't really enough to ensure a positive experience for all of your blog's readers. Some readers have color blindness, visual impairments, or may have lost a little of their color sensitivity as they have gotten older. So I would encourage you to use something other than just a color change to indicate the focus state.

For more on this tip and how to implement it on your blog, head on over to Give Your Links a Focus State, a new section of How to Make Your Blog Accessible. And as always, let me know if you have any thoughts, comments, or suggestions.

I've been of two minds about blogs where music plays automatically when your visitor arrives. On the one hand, I desperately hate it. A lot. I often listen to music when I'm online, so then your music is clashing with my music and it's annoying. I also sometimes open sites in five or six tabs, so when music starts up, I have to hunt for which blog it is and often scroll down pretty far to find the button to turn it off. And don't even get me started about when I used to read blogs while holding a sleeping infant and music would start up...

The only reason I didn't reject it utterly was that I once saw someone take a poll of their readers, and most of them liked the music. So in an attempt to be open-minded, I thought that in some cases it was an issue of knowing your audience, and if they liked it, then perhaps it was okay.

While going through research material the other day, though, I came across this tidbit in Improving accessibility for motor impaired users over at Webcredible:

Some motor impaired web users utilise voice recognition software to navigate through web pages. If pages on your website start to play audio without users knowing about this in advance then this can severely conflict with the voice recognition software.

There's nothing wrong with using audio but do make sure that it doesn't start by default when users arrive at the page. Instead, provide a link/button that users can select to start the audio.

Oops.

My frustration at hearing two different kinds of music overlap is likely minimal compared to the experience of someone who actually can't navigate the page because they can't hear their software. Whether the person is motor impaired or visually impaired, if they depend on audio cues for their software in order to read your blog, automatic music - or automatically playing a video with sound - is quite a roadblock.

My frustration at having to click through tabs and scroll down on blogs to figure out where to click to make the music stop is also likely minimal compared to the work required of someone with a visual impairment to even find the source of the noise.

So bloggers, let's be kind, and make our music and other audio opt in.