Alt Text Guidelines
Adding effective, accurate and equivalent alternative text is essential to web accessibility.
Alt text serves several functions
- It is displayed in place of an image if an image file is not loaded, or if the user uses an extension that removes images from the page. These extensions are used by some users with visual or cognitive disabilities.
- It allows the content and function of an image to be accessible to screen reader users.
- It provides semantic meaning and description to images, which can be read by search engines.
If no alt
attribute is provided on an image, the file name may be read instead. Therefore, all images must have an alt
attribute, even if the value is null (alt=""
).
General Guidelines
The following general principles should be followed when writing alt text.
- Alt text should be accurate and equivalent to the original image by providing the same content and function.
- Alt text should be as succinct as possible - ideally, no more than a few words.
- Alt text should not be redundant or provide information that is also explained in text that accompanies the image.
- Alt text should not use the phrases like “image of..” to the describe the image. The user will already know that the content is an image. However, if the fact that the image is a photograph, illustration, etc. is important content, it may be appropriate to include it.
- Purely decorative images should have null alt text (
alt=""
).
Further Reading
- Web AIM - Alternative Text - a thorough resource with plenty of examples
Was this article helpful?