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.
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:
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.
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:
After you click on the HTML tab, you should see the HTML source of your post:
You can create or edit a post in HTML mode, including adding features to your post to make it more accessible.
HTML consists of HTML tags, which have the basic form:
<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.
Other tags have attributes. A tag with an attribute has the basic form:
<TAG X="a value for X" />
<TAG X="a value for X">something goes here</TAG>
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”.
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" />
<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” 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" />
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.
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).
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?