By Linda Roberts | Senior Member
This column shares information about accessibility requirements and techniques, and introduces standards and policies that might affect your products. If you have feedback, contact Linda Roberts at lerober1@yahoo.com.
The accessibility of blogs is generally determined by the accessibility knowledge of the blogger and the accessibility of the software that is used to create the blog (Shelly & Pezely 2008). While I can't help with the latter, I can give you some tips to enhance your accessibility knowledge. Here are some things to keep in mind when you write a blog. I'll start with two things that should sound familiar.
Include <alt> text for graphics
One of the simplest solutions is to provide a nonvisual representation for your graphics. Include brief and descriptive text to describe the content and function of each graphic in your post. If the graphic you include in your blog also contains text (for example, like a graph with text), then you should also include all the words in the graphic in your <alt> text.
You should also put the most important information first (like the subject of a photo) and the descriptive text after. And if you use graphics for any navigation, then you should also tell people where they are going and what they should expect to find there. If a link will launch a new window or leave the current site, including that tip can help nonvisual users who keep a mental tally of open windows. For instance, “External: STC Accessibility SIG Blog” as alternative text on a graphical link cues the user that a new site will open.
You should also check your spelling and avoid unusual abbreviations. Assistive technologies such as screen readers have a hard time with misspelled words and abbreviations. They can be very confusing (or unintentionally funny) when read aloud.
Include meaningful link text
This tip also should be something you have heard about before as a good writing practice. The text you include for a link should make sense when read out of context. That means that you should avoid “click here” for link text. A contextual reference such as “click here” has little meaning when it is read aloud, presented in a list of links, or landed on while tabbing around.
Use an accessible CAPTCHA
What is a CAPTCHA? Wikipedia says it stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.” It is a security check containing random letters and numbers (that might also be wavy or warped) that you might have to type into a text box before you create your blog site or submit a comment. It is a measure to ensure that you are a human and not a computer that is trying to add spam comments.
CAPTCHAs serve an important purpose, but the visual-only ones leave many users in the dark. If you have visual problems, then you will be unable to perform the task protected by a CAPTCHA. Some sites expect users to have a friend enter the text for them, call a customer service representative to help work them through the issue, or use another site altogether. But each of these options is bothersome for the user.
The author of the Nickie's Nook blog says, “Not everyone has the option of asking a friend or family member or colleague to help them sign up, and that is an insulting option, in my opinion. … It's kind of like saying, ‘People can come here in wheelchairs, as long as they have friends to carry them up the stairs.'”
An accessible CAPTCHA might offer a link to play an audio stream of the obscured text string. A visually impaired person could play the audio to hear what text to enter.
Organize your posts with headings
To help screen reader users “scan” your post for interesting information, break up your long posts with headings. Screen readers read the Web page's code and make a list of links out of the headings they find in the code. The list allows screen reader users to jump from section to section to find the information they need. Users can also press the H key with the JAWS screen reader to jump to successive headings. Visually, headers in longer posts also provide eye relief for sighted users.
Recently, the WebAIM organization surveyed screen reader users. Of the 1,100 respondents, 76% of them reported that they always or often used the structure (headings) on a Web page to find information. This is an easy item to implement that could help many users.
When you add headings to your posts, make sure to use the proper heading code tags, such as <h1>, <h2>, and so on. Changing a section heading text using visual cues such as color, font style, emphasis, or font size does not help. These purely visual changes are not recognized by screen readers as section markers.
Don't code links so that they pop up in a new window
If you code the links in your blog to pop up in a new window or tab, then you might be confusing your readers, especially those who are blind or who have mobility impairments making trans-window navigation challenging. Not all screen-reading software announces that a new window or tab has been opened. Moreover, after a new window or tab is opened, the user cannot use the back button to return to the original page that they were viewing.
Focus your links
For the ease of keyboard users, give links a focus state. What does that mean? People who do not use a mouse might use the Tab key to move from link to link in your blog. Some programs apply a dotted box around the link when you tab onto it, but it can be hard to see. If there are a lot of links on a page, then it can be even harder to keep track of where you are when you are tabbing around. It is best to make a visual change when a link has been selected. Change the text color or underline the text when a link is selected.
Place your blogroll and other links on the right side of your blog
What is a blogroll? According to Wikipedia, a blogroll is “a list of other blogs that a blogger might recommend by providing links to them (usually in a sidebar list).” Your blogroll, your Twitter stream, lists of your recent posts, and other links should be placed on the right side of your blog because screen readers start at the top left of your Web page and read it from left to right. People who use screen readers do not want to hear your blogroll and other links every time they access your blog. In addition, someone with low vision might use screen magnifying software. If your blogroll appears on the left, and it is magnified, it might comprise 50% of the screen width or more. By putting the blogroll on the right, the screen magnifier user can view the primary content from the start and might avoid scrolling horizontally to begin reading.
These are easy-to-implement tips to help make your blog more accessible. Why should you care if your blog is accessible? If your blog is supposed to be a conversation, then don't you want to hear from everyone?
Linda Roberts (lerober1@yahoo.com) is a senior technical writer for SAS Institute and a member of the AccessAbility SIG. She has spoken at four STC Summits on accessibility topics.
REFERENCES AND SUGGESSTED READING
All Access Blogging, www.allaccessblogging.com/.
American Foundation for the Blind. 2010. “How to Make Your Blog Accessible to Blind Readers.” www.afb.org/Section.asp?SectionID=57&TopicID=167&DocumentID=2757.
Nickie's Nook. 2007. “Accessible Social Media: It's Not Just for Fun Anymore.” http://puppybraille.livejournal.com/531831.html.
Shelly, C., and B. Pezely. 2008. “Accessible Blog Posts with Windows Live Writer.” Proceedings of the W4A2008—Challenge. Beijing, China.
WebAIM. 2009. “Survey of Preferences of Screen Readers Users.” www.webaim.org/projects/screenreadersurvey.
