Altered meaning

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:

• the content is not understandable
• the content becomes unintelligible
• the content changes meaning
• the content loses it’s accuracy
• the content becomes invalid or incorrect
• the content conveys a message that was not intended

Unintentional humour

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.

Punctuating or extra markup

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).