How to Make Your Blog Accessible to Blind Readers

Quick Tips for Bloggers

So you have a blog, and you're worried that it might not be accessible to people with disabilities? Don't worry! A few simple changes can increase your blog's potential readership.

1. Choose an Accessible Service
2. Describe Your Images
3. Avoid the Dreaded "Click Here" or "More..."!
4. Put Your Blogroll on the Right-Hand Side
5. Check the Comment Form—Is It Labeled Properly?
6. Use Flexible Font Sizes
7. Don't Force Links to Open in New Windows

1. Choose an Accessible Service

If you haven't chosen a service yet, why not support one that doesn't put up obstacles to blind bloggers like the need to "enter the characters seen in this picture"?

Some services confront users with the instruction to complete their registration by "entering the words they see in the picture." An accessible alternative is sometimes offered, but it is considered the "advanced setup" option and therefore requires highly technical information from the user.

See Is Blogging Accessible to People with Vision Loss? The American Foundation for the Blind Answers for more detail on the differences between services.

2. Describe Your Images

Provide descriptive text for any images you post, including those that are part of your template. In HTML, you can provide alternative text for images by adding alt="your description of the image" within the image tag. Here is an example of a properly alt-tagged image:

<img src="images/picture.gif" width="30" height="30" alt="description goes here">

Tips for Writing Effective Image Descriptions

• Brief is better.
• The usual rule is to be informative, not poetic. But it's your blog, so feel free to let your personality come through in the alt text, as well.
• If the graphic includes text, put all of the words in the alt text.
• Put the most important information first. For example, "Acme Logo: Sun rising over white sand dunes" is better than "Sun rising over white sand dunes: Acme Logo."
• Check your spelling and try to avoid abbreviations. Screen readers will mispronounce words that are misspelled.

3. Avoid the Dreaded "Click Here" or "More..."!

People who use a screen reader to visit web sites will often tab from link to link, skipping over your carefully crafted explanatory text. It's a quick way to scan the page and get a sense of what the options are. "Click here" is purely mystifying, especially when heard over and over again. "Create your own blog" is self-explanatory, and lets the reader know what to expect.

Some blogging services allow you to display the opening sentences of a long post and then link to the whole post with an automated link that reads "(more...)". If there is more than one such link on the page, you can see the problem: more what? Most blogging tools allow you to customize that link to provide more information to the user, which will make your site more accessible. An additional bonus: Descriptive links make it easier for search engines to find your content.

Try to avoid using image links, which are hard for people with low vision to decipher, but definitely provide alt text if you do. In this case, the alt text should tell users where they are going.

4. Put Your Blogroll on the Right-Hand Side

Blind users find top and left-hand navigation bars annoying because the screen reader starts at the top of the page and reads from left to right. It is very time-consuming to listen to the same list of links every time you visit a page. You can get people right to your latest post by putting your navigation links on the right-hand side.

If you are wedded to left-hand navigation, then place a tiny "skip link" at the top, so blind users can jump to the new content. Just don't forget the anchor! Learn more about how to implement skip links on your site.

5. Check the Comment Form—Is It Labeled Properly?

Do you want to make sure that users who are blind can comment on your blog? For users who access your site using screen readers, it can be extremely difficult to know what is required in forms. A user moving through an incorrectly marked up form may hear no more than "Edit, edit, edit, radio button not checked, submit button."

But there is an easy fix. Check the comment form to see if it includes <label for> tags. Every element in a form should have its own label.

Here is a sample of a text field that has been labeled correctly:

<label for="email">E-mail:</label> <input type="text" name="email" id="email" size="20">

Note that the ID and LABEL FOR must be equal to the same value.

Learn more about designing accessible web forms.

6. Use Flexible Font Sizes

Blogs are usually stylesheet-driven, which is great news for readers with low vision. If you use relative font sizes (expressed in percentages or ems), rather than absolute font sizes (expressed in points or pixels), then users will be able to make the text larger or smaller as desired—an important feature for users with low vision.

7. Don't Force Links to Open in New Windows

Coding your links so that they automatically open up a new window can be very disorienting for a visually impaired user. Only the most recent versions of screen readers give blind users any indication that a new window has been opened. Popping open a new window also resets the back button, effectively "breaking" it. Avoid the use of target="new" in your links.

Conclusion

If you describe your images, supply informative text for links, put navigation links on the right-hand side, use relative font sizes, and have a properly labeled comment form, then congratulations! You are well on your way to an accessible blog.

Related Announcements

• AFB and DCMP Present the Description Key: Guidelines for the Description of Educational Media
• Be Among the First to Test New Prototypes, Products and Services
• View all announcements