Entering some text in the alt attribute (not alt tag, as it is commonly referred to) always made me feel a little better about the site I was building. There would always be, however, that apprehensive feeling of wondering just what I should be entering as alt text.

That nagging feeling would intensify as I realized I was being inconsistent in the kind of text I was using. “An image of …” I would sometimes say. Or sometimes I would just repeat the caption already stated elsewhere in the surrounding text. Both were ill-conceived ideas.

That nagging feeling really came from not knowing at all what kind of alt tag would be useful to someone using a screen reader. Every time I tried to imagine it, I would come up with something a little different. Thus the inconsistency. Thus the clumsiness.

Now I have a framework for thinking about images and using the alt tag in context. It will take practice. My main takeaway is that use of the alt attribute depends on whether the image is:

• Content
• Decoration
• Navigation

Those are Zoe Gillenwater’s points. In WebAIM’s article on alternative text , they frame it in terms of developers needing to present the Content and Function of the images within our Web content. Alternative text needs to accompany every non-decorative image. Alternative text, however can refer to either an alt attribute within an img tag or to information within the body of text adjacent to the image or on the page with that image. In some cases, alternative text can be provided on a separate Web page linked via a longdesc attribute (and sometimes also within an anchor tag).

Every image must have an alt attribute! Even if the image is purely decorative, and in those cases, the alt attribute should be empty (alt=””). When the alt attribute is empty, screen readers will ignore the image. If the alt attribute is not there at all, screen readers will substitute the image file name for alt text, and that can simply be an obstacle for a screen reader user.

As WebAIM states, “Context is everything.” Whether the image is illustrative, part of a link or image map, decorative, or functional. Whether the content of the image is already present in the text surrounding it. The alt attribute needs to consider these contextual possibilities and function accordingly. According to WebAIM, the alternative text should be:

• Accurate and equivalent
• Succinct
• Not redundant
• Not state “image of” as part of its description

Like semantic markup, alternative text can be haphazard. Like semantic markup and like good heading structures and heading text, alternative text must be placed with thoughtful consideration to the other content on the page, especially the content immediately surrounding the image.

This is a consideration I plan to take very seriously as a Web developer. There are challenges, especially where work on existing sites comes into play. And there will always be clients who need to be educated on the topic and “sold” on it when their ideas conflict with accessibility principles. But once the basics are understood, putting them into practice is not difficult. Yes, doing it well will require thought and practice, but Web sites utilizing good accessibility techniques are the ones that fulfill the mission of the “Web for everyone.”