When it comes to accessible images remember: you need to add an alt tag that provides context.
1.Use contextual alt tag descriptions
What you write in your alt tag will depend on why you put the image on the page.
- Is the image informative? These are images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image. For example, if you have an image of the president standing at a red podium and there is significance to that podium being red, you must note in your alt tag that the podium is red.
- Is the image decorative? When the only purpose of an image is to add visual decoration to the page, provide a null text alternative (alt=””). The screen reader will then skip over the image.
- Does the image have text on it? If the image is not a logo, avoid text in images. However, if images of text are used, the alt tag should contain the same words as in the images.
- Is the image a graph or diagram? To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative. Include in your alt tag what type of graph or diagram it is. For example: alt=”life cycle diagram. Extended description in the boy copy.”
2. Actionable images should describe the action
If you are using an image for a call to action (apply now, social media icons, etc) your alt tag should describe the action. For example: a Facebook icon’s alt tag could be alt=”facebook icon when clicked brings you to the University’s Facebook account” and not alt=”white f on a blue background”
Tips:
- Add the alt tag as soon as you insert it into your content. If you are busy and think you’ll go back to add it, there’s a good chance you won’t.
- Keep alt tags as short as possible.
- Add periods for longer descriptions. This will create a pause as the screen reader dictates it.