Recently in Tips for Your Blog Category

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.

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.

A group called WebAIM recently did a survey of screen reader users - people who use software that reads a computer screen aloud for them. Out of 1100 screen reader users who responded, 76% of them said they always or often used headings to find the information they were looking for on a web page.

This is good news if you want to make your blog more welcoming for people with disabilities who use a screen reader, which includes some people with movement-related disabilities and learning disabilities as well as people with visual impairments. There are probably already some headings built into your template. Chances are, the titles of your posts are already marked as headings, making it easier for people using screen reader software to jump from post to post. Some people with certain disabilities find it easier to use text-only browsers, and they benefit from headings as well.

Your sidebars may also have some headings if you have titles for different sections or widgets; see Keep Your Sidebars Organized for more information on that topic. Within your posts, you can also use headings to organize your information or break up long posts. If you're writing a personal essay, it may not make sense to break up your posts into sections, although it can be used for effect. If you're writing an informational blog post with distinct sections, like a Top 5 post or a step by step tutorial, you may want to think about using headings.

The trick is to make sure you're using proper heading code instead of just making the heading bigger and bolder than your regular text by changing its appearance. Unfortunately, screen reader software can't really tell that you're made it purple. It just takes a quick tweak behind the scenes to add the right code. Search engines also look at text that is marked as a heading and they give it a little more weight when they're figuring out what the page is about.

I've added a section to the guide on How to Make Your Blog Accessible that walks through how to use heading code in your posts.

Take a look and let me know what you think.