Alt text for images

Possible alt text for this image: Three people walking off a plank that is tilting over a hole, and one last person is left standing on it…

It is common knowledge that images are required to have an alt attribute. This is one of the primary rules of accessibility for web pages (defined in WCAG 2.1 Principle 1, Success Criterion 1.1.1). Nevertheless, coming up with a good alt text for an img element might be easier said than done. Here are some guidelines that may help you:

1. The alt text is meant to be a description of the image, not a title, hint, or tooltip. Try to describe the image with a clear and concise sentence. What do you see when you look at the image? Is it a “Purple dinosaur with a Santa hat on its head”, or a “Red exclamation mark emitting yellow sparks”? A good textual description of an image makes it possible for blind and sighted users to talk about an element, which is especially important if it’s a significant element. For example, imagine if a link to a contact information page is just an envelope icon with the alt text “Contact us”. That could easily create confusion if e.g. a blind user trying to help their sighted grandma by telling her to click on the “Contact us” link, and she feels even more stupid because she can’t see such a link anywhere on the page.
2. Do not start the text by stating that it is “Image of”, since this is already implied by the semantics of the img element. It’s like saying, “Image of image…”
3. Do not use the same text that is also displayed in an adjacent element such as a heading. Those who see the alt text instead of the graphics don’t want the exact same text twice.
4. If it’s technically impossible to provide a good description for an image whose presence is significant, then you may resort to a more generic alt text, such as “User’s main profile picture”, or “Uploaded image 1” (or use date and time instead of index).
5. Never omit the alt attribute. However, if the image is insignificant and merely for decorative purposes, then you may use an empty string as alt text as a last resort. An empty alt indicates to assistive technology that the presence of the image should be ignored.

P.S.: Give SVG elements alt text too! Either by creating a title element as the first child element of the svg, or by setting role=”img” and aria-label=”The alt text” on the svg element. The latter won’t generate any tooltips on mouse-over events!