A collection of tips, guidance and practical suggestions in developing accessible websites
When we have an image on a web page and that image conveys content, then we know it is important to provide a text equivalent of the content that image offers. The most typical (but not only) way of doing this is to add the text equivalent content in an
alt attribute on that image. The text content of this attribute should convey the equivalent information that the image contains.
When a screen reader user, for example, reads the page all of the images are replaced with their text equivalents, and the resulting block of text is what the visitor gets. The two conceptually independent sources of text are merged into one block.
We need to consider the state of the merged content when that happens. Is the content still accurate, is the meaning and intention still clear.
When applying text equivalents to images we sometimes fail to consider how this new text will change the existing adjacent text content. The implications of this are:
Sometimes the end result is humourous. The late Dr. Alan Flavell in his notes on alt attribute howlers noted a real world example of two adjacent images, one was a picture of the page author in a canoe, and the other was a picture of a herd of buffalo. Two images of what interested the page author, and both with decent text equivalents. Unfortunately, in context, the block of text became:
Photo of a buffaloes in the water canoeing, which was not quite the intended meaning.
Some simple punctuation would have avoided this unintentional joke.
For this reason it is important to consider punctuating an image’s text-equivalent. A well-thought out comma or full stop, or parenthesis may be enough to protect the meaning and intention of existing text content from being changed when an image’s text equivalent is inserted where an image used to be.
If the text-equivalent can’t be written in a way that doesn’t hinder the meaning of the text content around it, then we need to consider moving the text-equivalent elsewhere; whether that means moving the image markup somewhere else, or leaving the image in place, and moving the text-equivalent to a more suitable spot (by using a null
alt attribute and then inserting the text as a block of markup in the page).
I did a little research into this a short while ago, and many markup constructs result in sentences running together if alt text is not punctuated. For example, without a full-stop at the end of it, an image’s alt text will “bleed” into a paragraph that immediately follows, even if the image itself is placed inside a paragraph. I’ll try to publish some results for reference.
Great information that will make a difference in how I do things from now on.
A related problem is when a floated image is placed in the middle of a paragraph to get the paragraph to wrap around the image. That puts the image alt text smack in the middle of the paragraph and sometimes in the middle of a sentence. It can really mess things up for a screen reader.
Good post. I remember seeing that alt text howler article, and the buffaloes in the canoe is stuck in my head!
@Kim: I often run into this problem and one way out of it is to have an empty alt if the text equivalent is in the surrounding paragraph. Not always possible, but may be a useful alternative?