Tech Tips: Accessible Blogging

Wendy Chisholm, DO-IT staff

Have you ever heard the expression, "a picture is worth a thousand words?" If you have a blog, images are a great way to show your readers what you are up to, what your environment looks like, or what you look like. Images can give your blog character and help create a sense of personality and style.

How do you convey those same elements to someone who is not able to see the images? Sometimes people on mobile phones don't download images because it takes too long, and some of your friends may use screen readers to access your blog. This article will give you a few tips on how to make the images on your blog accessible.

Adding an Image

I'm using WordPress as an example in this article because wordpress.org hosts blogs for free; it produces standardized, accessible HTML by default; and there are tricks you can use to edit blog posts via the keyboard only. Unfortunately, the toolbar buttons in the "Visual" interface are not accessible to someone using a screen reader. (WordPress is aware of the issue and looking for someone to work on it.) If you are comfortable learning a little bit of HTML, you can include images in your blogs.

If you use a mouse or other pointing device, click on the "Add an image" icon in the editing toolbar (the first icon to the right of the text "Add media").

If you do not use a mouse and use Firefox without a screen reader:

  1. Make sure you've configured Firefox to navigate via the arrow keys. To turn it on, from the Firefox menu select "Preferences." In that window, select "Advanced." Check "Always use the cursor keys to navigate within pages."
  2. Create a new post or edit an old one. After the page has loaded, press the down arrow keys until the cursor is blinking near "Post." Press the right arrow key until you get to the image icon.
  3. When the cursor moves onto the left-most icon, press return. A window will pop up that prompts you to upload an image or provide a web address for an image that already exists online.

If you want to edit the HTML directly (this is a good option for someone using a screen reader and knows some HTML), select the "HTML" link at to the top of the edit area. Or you can use this keyboard shortcut: ALT + SHIFT + e to toggle between the visual and HTML editing interfaces.

Writing Alternative Text

The cool thing about WordPress is that part of this dialog is to prompt you for an "Image Caption." This is the text that will be used as a text equivalent to the image. In other words, when someone using a screen reader encounters this image, the image caption will be read as text.

How do you know what to write? Writing alternative text (alt-text) is an art, and there is a lot of debate about how to write good alt-text. As with other arts, it is up to you to determine how you want the alt-text to affect someone's experience of your blog. Here are some questions to consider:

  1. Why are you including this image? Does it convey data (like a graph) or does it simply give the page character?
  2. If you were reading your post out loud to a friend over the phone, what would you say about the image?
  3. Is the image surrounded by text or does it stand on its own?

Here are some examples:

  1. In a blog post about adding images to a blog post, the author includes a screen shot of the pop-up window that prompts for information about the image. The alt-text might read, "Screen shot of the dialog box that prompts for image information." Or, if the blog post doesn't talk about the options in the dialog box, the alt-text might read, "Screen shot of the dialog box prompting to upload images or provide image details. Options are: source, image title, image caption, alignment, link url."
  2. In a blog about cats, the author is writing about the difference between Calico and Siamese cats. Accompanying the article is a photo of each type of cat. If the author uses alt-text with each image, this is what a person using a screen reader would hear. "Calico cats have spots. In this example, the cat is white with black spots. Graphic Calico cat. Siamese cats typically have blue eyes, an obstinate personality, and silver and black fur. This is a photo of my cat, Tippy. Graphic Tippy." In HTML this may look like:

    <p>Calico cats have spots. In this example, the cat is white with black spots.</p>

    <img src="https://www.washington.edu/doit/calico.jpg" alt="Calico cat"/>

    <p>Siamese cats typically have blue eyes, an obstinate personality, and silver and black fur. This is a photo of my cat, Tippy.</p>

    <img src="https://www.washington.edu/doit/siamese.jpg" alt="Tippy"/>

  3. If an image is purely decorative and you want a screen reader to ignore it, type a single space for the alt-text. This will tell the screen reader not to read anything aloud or indicate that an image has been encountered.

When I use an image, I include as much information as is reasonable about the image directly in the body text so that the alt-text can be short, preferably one or two sentences.

More examples and information about writing good text equivalents can be found at these resources:

Editing HTML Directly

The above instructions are for using the preview view, which doesn't show you any of the HTML that is being created for your blog entry. If you are comfortable editing HTML, determine what the alt-text should be. Then add the following code to your blog entry:

<img src="https://www.washington.edu/doit/%3Ca%20href%3D"http://example.com/image.jpg"">http://example.com/image.jpg" alt="example text equivalent">

Adding text equivalents to images is one of the easiest things you can do to increase the accessibility of your blog, yet it is one of most commonly forgotten things to do.

For more information, check out Tim Noonan's article at www.timnoonan.com.au/consulting/vocalbranding.

I am on a search for the best blogging platform for someone using a screen reader. If you have suggestions, please email me at chiswa@uw.edu.