Everyone Should Be Reading Your Blog! (a.k.a. Making Your Blog Accessible)

How do you make your blog more accessible? This post contains some advice and specific instructions, related to a presentation that I am giving at BlogHer 2006.

The following information is culled from multiple sources. Big hat tips to Knowbility, an organization promoting barrier-free IT; to Mark Pilgrim for Dive into Accessibility; to the American Foundation for the Blind for their articles on blogging; and to Crabby Old Lady for her post Blogging for Older Readers on Time Goes By.

If you have any corrections, questions, or other feedback, leave a comment.

Break Up Your Post into Paragraphs

This one is easy. Just break long blog posts into paragraphs, and make sure white space shows up between paragraphs. It helps people with low vision, concentration difficulties, and many older people (whose eyes may tire out more easily) read all the way through what you have to say.

If you don't listen to me, you should listen to your elders. Crabby Old Lady says:

Crabby is sure you know that screens flicker and eyes, even young ones, tire faster reading on a screen than on a paper page. It is impossible to read paragraphs that go on and on without breaks.

Crabby first realized this when she was managing editor at cbsnews.com in 1996 and early on, she made a New Rule: no paragraphs longer than six or seven lines for ease of reading. She would be a less crabby blog reader if she could as easily enforce this rule for the entire blogosphere.

Make Your Link Text More Explanatory

Good example: I love this blog about vegan cooking.

Bad example: I've seen several articles about this.

Many people with disabilities who use screen reader software or text-only browsers either extract a list of links from a web page or tab through the links to get a sense of what's on the page. "Click here" is just not that informative. When the words you use as links are really small, it can be hard for users with mobility impairments (or anyone else) to click on the links. Blogs already have a lot of repetitive link text - comments and permalink, for example - so why add to the clutter?

In general, it takes a little more work for users with some disabilities to open a new link or back out of an unwanted page. It helps them to know if it's really something they're interested in before they go to that effort.

Sometimes it's fun to do a link like How Beautiful! or What a Jackass! and create a little mystery for your readers. Just don't overdo it.

Don't Open New Windows Without Warning People

The Back button is your friend. The Back button is always there, it doesn't move around, and it always does the same thing. It's big, which makes it easy to click on. So don't "break" it by opening new windows without warning people! A new window doesn't let you go backwards, which can be confusing. People with mobility impairments have to work to close an unwanted new window. Low-vision folks may have the screen zoomed to another area and not even know a new window has opened. For people who are blind, only the most recent versions of screen reader software gives any indication that a new window has been opened.

So warn them! And while you're at it, warn them if the link goes to any content that isn't just another web page, such as a Quicktime movie, PDF, or a YouTube video of your hamster in its little plastic hamster ball.

Further Reading: Give Back the Back Button and Dive Into Accessibility Day 16: Not Opening New Windows

Change the Style of Visited Links

A link should look different after you've followed it and come back to the original page. Users with short-term memory problems may have trouble remembering what they've clicked without a visual representation. Think about big collections of links like Blog Carnivals - if your boss walked by and you had to close your browser, would you really want to rely solely on your memory to pick up where you left off?

You can bold it, not bold it, underline it, highlight it, not highlight it, whatever. Just make sure people can tell them apart. But if you're thinking "Hey, I know, I'll just change the color!" then check out the next section.

Further Reading: Links That Don't Change Color When Visited

Use More Than Color Cues for Links

If your links are only designated by using a different color than your text, people who have trouble distinguishing colors may not be able to tell what's a link. Most common is red-green color blindness, which means the person sees green and red as greyish and can't tell them apart. Elders may also have difficulty distinguishing colors.

Further Reading: Dive Into Accessibility Day 12: Using Color Safely

Fun Tool: Colorblind Web Page Filter lets you plug in your website and see what it would look like to someone who is color blind.

Use Color and Value Contrast

We've all seen the sites that must have been designed by 21 year olds who eat a lot of carrots. Grey text on a black background just isn't legible to the rest of us. Use colors that are easily distinguishable from each other for the background and text of your site.

P.S. I hate to tell you this, but dark background with light text is just not as easy to read as the reverse. It's true. Yes, it's a bummer, and it doesn't mean you can't do it, but consider your audience before you decide on a color scheme.

Fun Tool: Juicy Studio Colour Contrast Analyzer lets you plug in the text and background colors for your blog and get an idea of how much they contrast.

Label Your Images

If you're using an image to tell a story or replace text, you need to add an "alt attribute" to label the image. Then users with screen readers or who browse with the images turned off can see the label you've created and they know what's going on.

The alt attribute is a part of the HTML code for your image. Depending on your blogging tool (see below), you will need to add it in or change the default. The text typed into the alt attribute inside a set of quotes is called "alt text."

Your alt text should be brief, but informative. If an image is being used to replace text, put all of the words in the alt text. Check your spelling, since screen readers will misread a word that is misspelled. Some people also use the title attribute to convey verbal information about an image, but not all screen readers provide the title to the user.

If an image is being used for purely decorative purposes, you can not enter any words. If it's a photo gallery or an artistic image, it's your call on whether to use words or not. But include the alt attibute itself anyway, because if it's missing, screen reader software will read the filename of the image, and that's not pretty. Just put in the quotes with nothing in between them and your image will become "silent."

To learn how to add or change alt attributes:

• Describe Your Image
• Dive Into Accessibility Day 23: Providing text equivalents for images
• Dive Into Accessibility Day 21: Ignoring Spacer Images

Blog Tool Specific Instructions:

• If you're using Movable Type, there isn't a field in File Upload for alt text. Edit your image tag once it's placed in your post.
• If you're using TypePad, upload your image into your post and then switch into the HTML tab. The alt attribute will be filled in with the photo's filename, so find that and replace it with your alt text.
• If you're using Blogger, upload your image into your post, then switch to the Edit HTML tab. The alt attribute will be there but blank, so if you don't need a label you can leave it alone. Or fill in your label in between the quotes.
• If you're using WordPress, "when you upload an image through the WordPress interface, there is a field to add a description - this comes through into the code as the alt text." (Thanks for explaining this, Candace!)

Resist Visual CAPTCHAS

CAPTCHA stands for Completely Automated Public Turing Test to Tell Computers and Humans Apart. Visual CAPTCHAs are those little boxes with the squiggly text you can barely read, and they are impossible to solve for people with vision impairment or those using text-only web browsers, and may be frustrating or impossible for people with dyslexia. Use all the other comment spam control tools your blogging tool offers before resorting to visual CAPTCHAs.

Put Your Sidebar/Navigation on the Right

If you don't care whether your sidebar goes on the right or left, put it on the right! Otherwise, people using screen readers may have to listen to everything in your sidebar (recent posts, blogroll) before they get to your main content.

OR, Add a Skip Navigation Link

Or, you can add a "skip navigation" link attached to a small transparent image which screen reader users and Braille output users can select to jump to your latest post. This requires editing your template a little, but it's not too hard.

For instructions, see #7 - Provide Skip Links and Using Skip Nav Links.

Use Relative Font Sizes

When you select View > Text Size in Internet Explorer 6, it does not let you make the text larger if the stylesheet has the text set in pixels (px). Users of other browsers are fine, but this is a very popular browser. Set your font sizes using percentages, ems, or keywords instead.

Blogger folks are fine, yours are already like that. For everyone else, this probably requires getting down and dirty with your templates. MT/TypePad/LJ users can adapt or borrow from the Miniml style from The Style Contest, which is in percentages.

For a little help on this tip, check out Dan Cederholm's Bulletproof Web Design for a method using keyword and percentages.

Tags: BlogHer | BlogHer06