The importance of Alt Tags
By Keith Bundy
Almost everyone who has even a basic level of involvement with accessibility has been told that they must use alt tags on all images. The alt tag is not really a tag; it is an attribute within an image tag. Why is the use of these attributes so important?
Who Is Affected
- Users who are blind or visually impaired need alt tags on images. Users who cannot see the screen and depend on a screen reader will have no way of comprehending an image on the page. Without an alt tag, the screen reader will read the source code and the user who is blind will most likely hear something such as “graphic 42368” or the filename of the image, such as “graphic htrn.png”. The alt tag describes the image or at least states what the image is trying to convey to the person seeing the page. In addition, users of screen magnification may not be able to get a complete view of the image and thus need the alt tag to let them know what the purpose of the image is.
- Some individuals with certain types of cognitive issues cannot understand the purpose of an image on a web page. They can hover the mouse over an image and see the alt tag, and the alt tag can convey to them the purpose of the image and thus greatly enhance their web experience.
- It's worth noting that search engine optimization (SEO) is also improved when images are tagged correctly.
- Remember that alt tags need to convey the purpose of the image and not necessarily a word-for-word description. So do your best to give essential elements of description while conveying why the image is present.
- Keep it brief. If your alt tag needs to be lengthy in order to convey the information the user needs to understand, consider using a long description (longdesc) or giving a detailed description of the image in the text of the page.
- If the image is purely decorative and serves no informational purpose, use a null alt tag <alt="">. Screen readers ignore these null alt tags and the screen reader user will never even know these decorative images exist.
- Accessibility: Image alt text best practices