Recently in Tips for Your Blog Category

Every page on your blog, whether it's the home page, the individual post page, or an archives page, has what's called a title element. Depending on how your blog is set up, this information probably displays at the top of the browser, and in the tab where you have that page open if your browser does tabbed browsing. As someone who often has a lot of tabs open at once, I really appreciate being able to see which tab is which because of the page titles.

To make your blog more accessible, though, are there any special considerations for what should be in the title? I've blogged before about how special characters in the page title sound when read by screen readers, but what about the content?

The page title is the first thing that screen reader users hear when they get to a page, so it's great if it actually tells them what the page is. If every page on your blog has just the name of the home page, that's not so helpful and could even be disorienting if a reader goes from your home page to one of your posts, or vice versa. If the page title is your blog's name, then the tagline, then the name of the post, that's a whole lot to listen to before knowing exactly where you are.

For more on page titles and how to change yours on your blog, check out Make Your Page Titles Do Their Jobs, a new tip in the Guide to Making Your Blog Accessible. And as always, feedback and corrections are very appreciated.

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.