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

Image links

A common mistake is to correctly determine that the text equivalent for the image is already present on the screen, in the form of the story title, and go from there to inserting a null alt attribute (alt="") for the image. When that image is the sole child of an anchor we are left with an anchor with no link text. And that’s an accessibility barrier.

The screenreader fallback when there is no link text for an image link is to extract something from the image’s src attribute – a URL – and this typically results in something unintelligble being read out by a screenreader.

What we need to do here instead is to populate the alt attribute with something that can be used as link text. In the case where the only appropriate (and succinct) text is the story title, it is fine to use that.

Redundant links

Its true that having two links with the same perceived link text linking to the same page is a redundancy, but this is much less of an evil than a text-less link. And much less of an accessibility barrier too.