Day 83 of 100DaysOfSpec, alt text for images, contd.

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading 4.7.1.1 Requirements for providing text to act as an alternative for images

4.7.1.1.5 Images of text

Remember way back in the day when, in order to use a custom font, you had to display text as an image? And whole content or navigation areas of websites were totally inaccessible? Aww.

Please don’t do that anymore.

The spec also discourages this practice, but if you absolutely must use an image that’s only text—or you’re trying to un-suck a super old site without sinking too much time into it—the alt text simply matches the text shown on the image.

Other tips in this section:

• If the same text is repeated for visual impact, it’s not necessary to repeat it in the alt text. Only put stuff there that would make sense if you read it out loud to somebody.
• If there’s other graphical info in the image besides just text, it may make sense to describe that in the alt text as well: only if it adds value or meaning.
• For symbols that can’t be shown in Unicode, use the phonetic spelling of said symbol in the alt attribute. But use Web fonts with character support instead wherever possible.

4.7.1.1.6 Images that include text

Examples given are images that include both a chart and text. Simple direction is to make sure that the text in the image is also in the alt text. You could alternatively do a short description in the alt attribute and a longer version in other text in the markup, as we saw with the section on alt text for charts.

4.7.1.1.7 Images that enhance the themes or subject matter of the page content

These are images that the surrounding content doesn’t reference directly, but would add more information, context, or meaning.

The big takeaway here is that you SHOULD have alt text for such an image. How that is implemented is something you need to think through: it should be a description that allows the end user to understand why it was relevant to surrounding text, or what info/meaning can be gleaned from the image that can’t be from the text.

4.7.1.1.8 A graphical representation of some of the surrounding text

“In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.”

These are cases where no meaning is lost by removing the image, but it’s a nicer experience to have it included. Like if your text talks about how oranges are round fruits with bumpy/dimpled skins, and you have a photo of an orange to supplement that description.

For images in this particular category, you could consider have a learn-more link in the image caption instead.