I was in Brazil recently giving a seminar at the annual Como Montar um Blog (How to Start a Blog) Conference, when I was asked by a blind attendee how to make a blog accessible to the visually handicapped. I told her I would have to research the issue. It seems that many blind Internet users employ screen readers to listen to website contents. I discovered that some simple changes can increase your screen reader’s usefulness. Here is what I found out:
- Images: Always describe your images. In HTML, use the “alt=” tag to put in your description. Keep it brief, informative and composed to accentuate the most important aspect of the image. If the image contains text, repeat it in the alt tag. Verify your spelling and avoid abbreviations – misspelled words will be mispronounced by a screen reader.
- Service Choice: Use a service that doesn’t inconvenience the blind. For example, if it makes you “enter the characters you see in this picture”, try another service.
- Avoid “Click Here”: Blind readers typically tab from link to link to get a feel for a website. Therefore, make your link instructions meaningful, such as “Click to start creating your own blog” rather than “Click here”, which is mystifying. Another pitfall is when a site teases the first sentence of a blog followed by a link labeled “more”. If there are multiple links of this kind of page, a blind reader may ask “more what?”. Use a blogging tool to make the label friendlier, and as a bonus, allow webcrawlers to more easily index your page. If you must use image links, ensure that the alt text describes where the link will take you.
- Blogroll: Put your blogroll (list of links to blog posts) on the right-hand side, so that a screen reader doesn’t always start off by reading a list of links. This is very tiresome to blind readers, but happens whenever the linking structure is placed on the top or left-hand side of the page.
- Comment Form: Use the <label for> tag to describe the purpose of each text field in a comment form. Otherwise, the screen reader may unhelpfully tell you the field is “edit” or “radio button not checked”, etc.
- Font Size: For readers with partial vision, a large font is useful. If you specify your font in relative rather than absolute sizes, it is easy for users to increase the font size.
- Windows: If you link specifies target=”new”, a new window will open when the link is clicked. This can be confusing to blind users, and it also resets the back button, so avoid this option.