alt tags
GUIDELINES 1.1
Overview
Alt tags are text descriptions for images on the web. These descriptions help screen readers or those who are visually impaired to gain an understanding of what an image is without them seeing the actual image itself. This guideline goes over how to include alt tags for images, as well as gives insights on how, when, and why you would want to include them.
Who is impacted?
Users who are blind or vision impaired are primarily impacted. However, if images don’t load properly, this means all users could be impacted.
How to test?
One way to test alt tags on images is to use a screen reader and hear how that image is described. You may also inspect the element by right-clicking to view the alt tag.
Selection
The most important thing about text alternatives is choosing appropriate ones. Users should be able to understand what is happening in the element without having to visually see it. One important thing to remember is to aim to put the most important information about the element at the beginning.
Length
A text alternative should be a very concise description about the image. The user should be able to understand what that image is with a short sentence, rather than long and complex descriptions that could lead to confusion. The use of punctuation would allow for longer text alternatives to be easier to understand.
Null
It is important to note the difference between using an alt tag with “null” or leaving the alt tag empty. When images don’t convey any meaning, specifically decorative images, and don’t require any announcements to a screen reader, it is important to give it an alt attribute of “null”. With the “null” in place, the system will know that this image should not be announced to a user, meaning it would not get read out to screen readers.
If an author were to leave an alt tag blank instead of using “null”, a screen reader would announce the name of the image file, which would only confuse the user.