How to: Make your blog’s images more accessible

This tutorial explains how bloggers can make their images more accessible for people with visual impairments by adding ‘alt-text’. While most web accessibility tutorials assume that the all creators of web content code in raw HTML, it is 2009, and most bloggers today probably do not know HTML.

This tutorial also assumes that the blogger uses a blogging software (such as WordPress) and creates web content through a graphical interface. While this tutorial uses WordPress examples, the vast majority of this tutorial is applicable to any blogging software, content management system, and even to those who build webpages from scratch.

Tutorial

Understanding how to add ‘alt-text’ requires understanding how to edit a post in HTML mode, as well as understanding the structure of a HTML tag. These two prerequisites will be explained first. The content of this tutorial consists of the following sections:

  1. Accessing the HTML of your post
  2. Understanding HTML tags
  3. Adding ‘alt-text’ to images

Note that if you are only a blogger and you do not create WordPress themes or Blogger templates for your blog, then you do not have complete control over the HTML of your blog layout. Some blog layouts—such as the current theme of my Restructure! blog at WordPress.com—are less accessible than others, because the designers did not take accessibility issues into consideration. However, as a blogger, you still have control over the HTML of your posts, which would make at least the content of your posts more accessible.

1. Accessing the HTML of your post

In WordPress, when you compose or edit your post, you can access the HTML source by clicking on the “HTML” tab, which is pointed to by the big blue arrow in the following screenshot:

Screenshot of HTML tab in WordPress post editor

After you click on the HTML tab, you should see the HTML source of your post:

Screenshot of HTML composition mode in WordPress post editor

You can create or edit a post in HTML mode, including adding features to your post to make it more accessible.

2. Understanding HTML tags

HTML consists of HTML tags, which have the basic form:

<TAG />

or

<TAG>something goes here</TAG>

Some tags take first form, and other tags take the second form. An example of a tag that takes the second form is the following:

It is extremely difficult to imagine how somebody with "credentials" as an academic or intellectual could believe that it is acceptable for him to contradict himself, and believe, further, that <em>contradicting himself makes him intellectually superior to his logically-consistent peers</em>.

The ‘em’ tag is used to emphasize a part of the text, and appears in italics in a standard graphical web browser.

Attributes

Other tags have attributes. A tag with an attribute has the basic form:

<TAG X="a value for X" />

or

<TAG X="a value for X">something goes here</TAG>

For example:

In February, <a href="http://www.cbc.ca/canada/toronto/story/2009/05/06/hospital-charges.html">two security guards in Toronto allegedly beat an aboriginal man</a>, sending him to the hospital with three broken ribs and a punctured lung.

The ‘a’ tag is called an anchor tag, and is usually used to hyperlink text and make it link to another webpage. The anchor tag has the attribute ‘href’, and href has the value of “http://www.cbc.ca/canada/toronto/story/2009/05/06/hospital-charges.html&#8221;.

More than one attribute

However, a tag can have more than one attribute, and they are of the form:

<TAG X="a value for X" Y="a value for Y" Z="a value for Z" />

or

<TAG X="a value for X" Y="a value for Y" Z="a value for Z">something goes here</a>

Here is an example of the anchor tag with two attributes:

In February, <a href="http://www.cbc.ca/canada/toronto/story/2009/05/06/hospital-charges.html" title="Criminal charges unlikely against security guards accused of beating aboriginal man">two security guards in Toronto allegedly beat an aboriginal man</a>, sending him to the hospital with three broken ribs and a punctured lung.

In this example, the anchor tag has two attributes, ‘href’ and ‘title’, which have the values of “http://www.cbc.ca/canada/toronto/story/2009/05/06/hospital-charges.html&#8221; and “Criminal charges unlikely against security guards accused of beating aboriginal man”, respectively. Attributes must have particular values, e.g., the ‘href’ attribute must have the value of a web address or e-mail address, etc.

If a tag has more than one attribute, the order of the attributes does not matter.

<TAG X="a value for X" Y="a value for Y" Z="a value for Z" />

is equivalent to:

<TAG Y="a value for Y" Z="a value for Z" X="a value for X" />

For example:

In February, <a title="Criminal charges unlikely against security guards accused of beating aboriginal man" href="http://www.cbc.ca/canada/toronto/story/2009/05/06/hospital-charges.html">two security guards in Toronto allegedly beat an aboriginal man</a>, sending him to the hospital with three broken ribs and a punctured lung.

is equivalent to the earlier example of an anchor tag with two attributes.

3. Adding ‘alt-text’ to images

In practice, in its most basic form, the HTML for inserting an image into your post looks something like this:

<img src="http://restructure.files.wordpress.com/2009/11/blackface_universitytoronto_racism.jpg" />

The ‘img’ in the ‘img’ tag stands for ‘image’. The attribute ‘src’ stands for ‘source’, which is the web address of the actual image file. This way of inserting images into your post (i.e., having only the ‘src’ attribute) works in graphical web browsers, but it is technically incorrect, because the World Wide Web Consortium (W3C) says that an ‘alt’ attribute is required. The W3C requires that the img tag must have an ‘alt’ attribute not because they are trying to make things more difficult, but because the presence of the ‘alt’ attribute would make things easier for people who have visual impairments and browse the web using screen readers, for example. ‘Alt’ stands for ‘alternative’, i.e., the alternative to the image.

Thus, the proper HTML for inserting an image into your post, in its most basic form, requires both a ‘src’ attribute and ‘alt’ attribute, and looks something like this:

<img src="http://restructure.files.wordpress.com/2009/11/blackface_universitytoronto_racism.jpg" alt="Photo of U of T students in blackface ''Cool Runnings'' Halloween costumes" />

The value of the alt attribute is a text description of the image. In my example, I attempted to describe the image for someone who cannot see the photo. I probably should have also noted that there were five costumed young men, consisting of four young white men with their faces painted brown, and one young black man with his face painted chalk white.

If you have a WordPress blog and you view the HTML of your post using the WordPress post editor, the img tag would probably look messier, because it has additional attributes:

<img src="http://restructure.files.wordpress.com/2009/11/blackface_universitytoronto_racism.jpg" alt="Photo of U of T students in blackface ''Cool Runnings'' Halloween costumes" title="Blackface stirs debate" width="400" height="300" class="aligncenter size-full wp-image-8000" />

You can ignore the other attributes of the img tag by leaving them alone; you do not have to understand them, as long as you know that they are other attributes of the img tag.

To make your image more accessible, you just add or edit the ‘alt’ attribute of the img tag so that the value of the ‘alt’ attribute is a useful text description. Remember, the order of the attributes does not matter, so if the ‘alt’ attribute does not exist, you can add it to the end, or wherever.

When I say that you can “just” add or edit the alt attribute, I mean that the process of adding or editing the alt attribute is fairly straightforward if you know how to edit HTML. Ensuring that your text description is “useful” is not as straightforward, as translating an image into relevant text is a creative skill, and there is no one right way to do it. Your text description does not have to perfectly and completely describe the image, as that is impossible. However, one way to evaluate the appropriateness of your image is to see how your post looks like in the text web browser Lynx (Lynx for Windows / Lynx for Mac).

More examples

Here is another example of an img tag with an alt attribute. In this example, the image is of a bar graph:

<img class="size-full wp-image-1602" title="How Americans voted" src="http://restructure.files.wordpress.com/2008/11/howwevoted.jpg" alt="White Americans, 43% for Obama, 55% for McCain, and 2% for Other. Black Americans, 95% for Obama, 4% for McCain, and 1% for Other. Latino Americans, 67% for Obama, 31% for McCain, and 2% for Other. Asian Americans, 62% for Obama, 35% for McCain, and 3% for Other. Other Americans, 66% for Obama, 31% for McCain, and 3% for Other." width="580" height="185" />

As you can see, the value of the alt attribute is a description of the percentages displayed on the graph. The image description conveys the relevant information; the value is not just “Bar graph”.

However, sometimes an image is decorative and extraneous to understanding the text of the post. In this case, you can set the value of the alt attribute to an empty string (“”):

<img src="http://img14.imageshack.us/img14/1961/canadianimmigrationface.jpg" class="alignright" alt="" />

If the image is decorative, it is better to have an alt attribute with an empty value than to omit the alt attribute altogether. If an image is unnecessary, it is better for the screen reader to ignore the image than to read out the file name of the unviewable image, which is what would happen if the alt attribute is omitted.

Checking your work

You can check if you added the alt-text correctly by viewing the post, right-clicking on the image, and choosing “Properties” in Firefox. If you are using Internet Explorer or another web browser, you would check the alt-text in a similar way.

Why I made this tutorial

Brownfemipower (BFP) at Flip Flopping joy! recently criticized a Bitch Magazine post on web accessibility. Among other things, BFP writes:

The “description” (from the bitch article) about how to write good link text made no sense to me at all, and didn’t include how make a link text to begin with. So I know I won’t be doing that any time soon.

My first reaction was also, “How hard could it be?”, but then I clicked the link, and it was a link to a W3C guidelines page, which is something that I did not expect to be linked from a blog about social issues and intersectionality (and not about code). After all, W3C guidelines are intended for coders, not bloggers who are not blogging about code.

While conventional wisdom would require that bloggers know HTML to be competent in what they do, this is no longer reasonable or necessary. Bloggers do not have to know the basics of a HTML document, such the ‘body’ tag and ‘head’ tag. Bloggers who want to make their posts more accessible only need to know the structure of an XML tag, and how to implement specific HTML tags, such as img.

In any case, the length of the tutorial section of this post demonstrates that “step 2″ of the Bitch Magazine post How to make your blog accessible in five not-very-complicated steps is actually quite complicated, which is BFP’s point. It was fairly complicated for me to write this tutorial, since I wanted to break down “add ‘alt-text’ to images” to specific actions instead of vague, conceptual instructions that assume the reader knows how to view and read the HTML source of a webpage. For the original author of the five steps, “step 2″ was not-very-complicated, because her description was very poorly written as a “how-to”. The lack of code snippets makes the post appear more user-friendly and not-very-complicated, but hand-wavy, high-level explanations about HTML are unhelpful to most people.

However, I am someone who has had years of experience with HTML, so perhaps I am also assuming too much background knowledge in some areas of this tutorial. What do you think? Is my lengthy post on alt-text better than the web accessibility post at Bitch? Does a post littered with code snippets in monospace font with syntax highlighting scare off non-technical readers? Which one results in more bloggers learning how to add alt-text to their images?

About these ads

14 Responses to “How to: Make your blog’s images more accessible”

  1. LaSmartOne Says:

    What happened to Abagond’s blog??? WordPress took it down! I can’t believe this!!!

  2. bfp Says:

    thank you for writing this! I am going to be spending some time going through it–but I got through the first quarter of it (or so) and have found it to be easy to understand and very helpful!

  3. flip flopping joy » Blog Archive » updates on accessibility…. Says:

    [...] Here is a post where the blogger addresses the second step of the original steps on how to make your blog more accessible. There is a step by step instruction on how to do that alt-text on your images! [...]

  4. Restructure! Says:

    bfp,

    Thanks! That means a lot to me.

    Let me know if you find any problems/confusing parts in the rest of the tutorial.

  5. Sungold Says:

    This is a helpful post. Thanks for taking the time to write it. I feel like I could do this now. I also feel like for the first time I’m starting to grasp the logic behind the HTML code for a link. I’ve never learned HTML and up ’til now I’ve just known the form I need to follow.

    What I don’t understand is that if having at least a blank ” ” as a value for alt is standard, why don’t Blogger and WordPress use that as a default, so that when we just use a decorative image that default blank would appear? This is another classic example of how individuals are left to tinker with things when a *collective* solution would be so much better!

    Thanks again!

  6. Restructure! Says:

    Sungold,

    Very recently, I noticed that WordPress.com has the alt-text of “” as the default, but it wasn’t like that before. However, note that “” (empty) is not the same as ” ” (space).

    Thanks for reading the whole tutorial!

  7. lubiddu Says:

    Your post is ten thousand times better than the Bitch post. Now, I know (a) what “alt-text” is, and (b) how to add it to an image. When I added images to my blog posts, I just did it with the WordPress template. I did not understand how the WordPress template worked, or how to tweak it. I just knew that if I clicked on the “add image”, I could do it.

    I had no idea that you could add a text description to that without knowing some arcane add-on. I didn’t know it was as easy as altering text from standard to italic—because no one ever showed me before. They just assumed I knew. By osmosis, I guess, because I use a computer. Funny how folks assume a great deal of computer knowledge from people who use them, yet don’t assume that most people can repair a transmission or even change out an alternator simply because they drive a vehicle every day.

    Anyway. Thank you. THANK YOU. You presented the knowledge in a way I could understand it. Not text-only, using lingo I don’t understand. I’m a visual-spatial person who is accustomed to learning in 3-D. Barring that, I like a big, visual map (it drives me crazy to look at a small display like a Blackberry, because there isn’t enough visual field—I need to see the big picture, just like real life! Small, piecemeal displays are like trying to walk around wearing pinhole glasses to me!).

    You gave a basic “road map” to alt-text, and anyone who learns the way I do should have no problem accessing it. Most computer related instruction is lingo-heavy and is unaccompanied by images. For people who are already familiar with the territory, that may be enough. For the rest of us, it’s daunting—and when I come home from work and have to get dinner on the table and help my daughter with her homework and put the laundry on and clean house and hey—might as well take a few short minutes and check email and blogs—-I’m not looking for “daunting”. I get enough of that, thanks.

  8. Restructure! Says:

    lubiddu,

    Thanks for the feedback.

    However, note that italicizing with

    <i></i>
    

    is not accessible for people browsing with screen readers.

    <em></em>
    

    also italicizes the text in a graphical web browser, but it has the additional benefit of being vocally emphasized by a screen reader.

  9. Andrea S. Says:

    Thank you! I have known for years that I was supposed to be using this “alt tag” thing to make images accessible but had NEVER EVER BEFORE seen an explanation of HOW to do it that made sense to me. And I do understand html coding! Not much, I admit. I learned bits and pieces back in the mid/late 1990s before most of today’s blogging and web page building software systems had entered into wide usage — just enough to do italics, bold, hypertext links, and that was about it. A few years ago I learned how to do anchor links. But whenever I went looking for instructions on how to do alt tags, I would find myself looking at something really complex and technical like those w3c things you were looking at. And what I needed was something simple and straight forward like what you have explained here.

    It was helpful that you explained how a tag can have more than one attribute in it. I had not really understood that before — I had SEEN tags with multiple attributes but didn’t understand how they were structured or how they “worked”. I had only learned a handful of the really simple, straightforward tags and had never learned the more complex tags. Now I understand that, when I’m inserting an image, I can look for where it says img src, then just leave a space after the “blah.blah.source.for.image” stuff and add alt=”description for image” after that, never mind what other attributes are in that tag.

    I also very much appreciate “Restructure”‘s explanation about versus — I knew that you could do italics either with i or with “emphasis” (had not seen “em” before but it seems a simple extrapolation from “emphasis”) but I had not realized that it made an accessibility difference for people with screen readers. I do sometimes type my own html coding in my blog (I have to work in raw html a bit anyway in any situation where I want to incorporate anchor links since wordpress doesn’t have an automated way to do those)

    Does it also make a difference whether you use “b” versus “strong” for making bold face? Because if so, then I can switch to that.

    The W3C guidelines really, really, really suck BIG time for ordinary bloggers who don’t already understand how this coding stuff works. I have never been able to sit down and read any of them. We need more, more, more posts like this one.

    Maybe you can tackle captioning next? As a deaf person I’m always begging people to use captions on their videos. And I know it can’t be that hard because on three separate occasions I have had people go, “oops you’re right we should do that” and come back within days with a captioned video. Or in one case, less than 24 hours after my email (I think it was about 23 hours from my email to the time they came back to me to say, “here you go”). But other people throw up their hands and say they want to but don’t have a clue how. And I don’t have a clue how to instruct them.

    Would love, love, love to see any more posts you might do along these lines in the future. Thanks for doing this.

  10. Restructure! Says:

    Andrea S.,

    Yes, generally, use “strong” instead of “b”, because it makes a difference for screen readers.

    Also, if you want to post HTML source code on WordPress.com, in posts or in the comments, WordPress.com just recently added support for posting source code. If you want syntax highlighting for HTML, you can add the parameter: language=”xml”. I also use the parameter: light=”true”.

    I don’t know how to add captioning to video. Sorry!

  11. bfp Says:

    hey–sorry to come back to this so late–but I just tried to do the alt thing, and all I am seeing when I put my cursor over the image is the *title* information, not the description of the text that I put in the alt quotes!!!! is that ok? Or did i do something wrong or something????

    here is the picture: http://flipfloppingjoy.com/2009/12/27/remembering-the-sun/

    I’d really appreciate it if you could let me know if I did it right–or if I need to get rid of the “title” information or put the description there or or or…I can think of all sorts of things I could do with that!!!! lol. anyway, I’d just appreciate your feedback!!! thanks so much!!!

  12. Restructure! Says:

    bfp,

    You did it correctly. If you right-click on the image and go to Properties, it tells you what the alt-text is: “a dark honey bee sitting on a very yellow flower”.

    The title-text is different, and it’s the text that shows when your cursor hovers over the image. You can put whatever you want in it, or you can remove the title attribute.

  13. bfp Says:

    oh, thank you so much!!! ok, I did that right click thing, and I saw it! thank you so much–I get it now–this tutorial is really *really* helpful–i think the biggest thing that helped me was like you said, ” putting it in context.” When I understand what all the gobbly gook means, it is just easier…

    the pictures and examples were *especially* helpful–I was able to mess around on my site until I found stuff and then compare/contrast what mine looked like as compared to your examples and again, it grounded the explanation in a reality instead of just some abstract stuff that I can’t catch a hold of.

    so–thank you so much for taking the time to do this–and the *only* thing I would suggest is putting in the ‘right click’ description so that you don’t have to answer five hundred people screaming “omg did i do it right????” lol!

    thanks again!!!!!

  14. Restructure! Says:

    Ugh, Mozilla removed the “Properties” menu in Firefox 3.6, because they thought that very few people used it. You can install an add-on to get it back:

    https://addons.mozilla.org/en-US/firefox/addon/14228


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 81 other followers

%d bloggers like this: