8 Tips for Accessible Blogging

By Melissa McAvoy, CATEA
January 12, 2007
Last Update: February 6, 2008

The following is a quick list to make sure that your blog posts and comments measure up when it comes to accessibility.

1. Use an accessible blogging service that will allow you to directly edit your posts and comments in HTML/XHTML.

Note: Using a Strict XHTML Doctype is recommended to achieve maximum browser compatibility. In addition, transitional doctypes allow for coding mistakes that can make a site difficult for screen readers to use. For more information on screen readers, please visit the Assistive Technology Wiki (ATWiki) – Screen Reading page.

2. Always include meaningful alternative text for images and any other non-text content.

i.e. “graphical representations of text (including symbols), animations (e.g., animated GIFs), ascii art, scripts, images used as list bullets, spacers, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video”

EX #1

alt=“yellow smiley face”

EX #2

alt=“ASCII art tank”

reference: http://www.ascii-art.de/ascii/t/tank.txt

NOTE

If you would like to include ASCII art, it is better to create an image of the ASCII art and provide alternative text. Otherwise, provide a link to jump over it. Users of screen readers often have to listen to every character in ASCII art which can be time consuming, confusing, and annoying.

EX #3

Providing a transcript for a video or audio clip

3. Don’t rely on color alone to indicate things such as emphasis or links.

Users who are colorblind or low vision may not be able to tell the difference between colors. Therefore, always include another indicator such as an underline for links, bolding or italics for emphasis.

EX #1

reference: http://gracefulflavor.net/

4. Ensure good contrast between the foreground and the background.

Users may not be able to read your blog if you choose poorly contrasting text or images.

EX #1

An example of a post that may be difficult to see.

Wow guys, look at this

EX#2

Improved post without changing the character much.

Wow guys, look at this

EX #3

The best forms of contrast are black-on-white or black-on-light-yellow. White-on-black text tends to recede into the background making the font look dimmer and smaller than it actually is. If you use a white-on-black color scheme, increase the size of your font.

Wow guys, look at this

Wow guys, look at this

5. Avoid graphics or video which may cause the screen to flicker.

Flickering screens can cause seizures. If you are concerned that a video or graphic is flickering, include a link to it instead of embedding it directly on the page and provide a warning that the content may flicker or cause seizures.

EX #1

The link below does not actual go to a video.
Video of last Friday’s concert (caution: video contains flickering)

6. Use clear and simple language

The web has quickly spread its own sort of language, including a large set of acronyms, that many users may not understand. Avoid using uncommon terms or acronyms. Difficult language should also be avoided unless the blog topic requires it. Technical blogs may require a greater vocabulary than other blogs.

7. Find a blog service that allows the use of cascading style sheets (CSS) to control layout

Some users may need to use their own style sheets or may remove style sheets altogether. Many blogs add style to text through the use of deprecated tags such as <font> which cannot be removed by the user’s browser. It is possible to by-pass this by directly editing the code.

EX #1

Poorly executed code.

<font color=“green”><b>Wow, did you see that!!</b></font>

EX #2

Better.

<span style= “color: green; font-weight: bold;”>Wow, did you see that!!</span>

8. Use short and descriptive link text.

Link text lets users know where they are going and what they are going to find. Users of screen readers such as JAWS may be able to see links in a list rather than in context on the page, therefore, it is important to use descriptive link text that lets the user know:

a. Is the link internal or external
b. What information can be found by following the link
c. Does the link open in a new window

If a link doesn’t say or imply that they are leaving the current site, chances are that they will assume that the link is internal.

EX #1

The link below does not actually go to a video.
Check out this video of the concert on MySpace.com (new window)