An informative image is an image that conveys a simple concept or piece of information that is represented on the page. These images can be used to supplement or label other information, portray an emotion or impression, or convey concise information or instructions.
Tips for writing the alt text:
1) They should be brief and concise, no longer than a phrase or short sentence.
2) Only the most crucial information should be included.
3) They often times aren't a literal description of the image, however, in some instances this could be necessary.
Examples:
<span>
<img src="img/phone-alt-solid.svg" alt="Telephone: " /> 615-555-9023
</span>
<span>
<img src="img/fax-solid.svg" alt="Fax: " /> 615-555-1234
</span>
The above image is considered an informative image because the images of the phone and the fax machine are being used to label the numbers that appear next to them and clarify which is which in the event that you needed to contact that individual or company. The alt texts are going to audibly label the numbers for any user that can't see the visual labels.
<img src="img/Familyfun.jpg" alt="We are a family friendly company." />
This image is one that could be found on a company's website to portray an environment that caters to families and strives to provide a fun, safe experience for its customers. Since this is a stock photo, the people shouldn't be identified and the alt text instead conveys the image's intended impression.
<img src="img/top.jpg" alt="Push down on cap, then turn it counter-clockwise." />
This image would be considered an informative image because it is visually displaying the specific instructions for opening the medicine bottle pictured. The alt text is then used to explain these instructions for those who are unable to use the visual cues seen on the cap.
<img src="img/MastroHERO.jpg" alt="Maddie Mastro edges out Chloe Kim and Xuetong Cai
for superpipe gold." />
<p>Professional snowboarder, Maddie Mastro, lands historic run at the 2019 Burton US Open
becoming the first woman to successfully land a double crippler in competition.</p>
This last image is also an informative image because the image is adding information to the text that accompanies it. In the text, you learn that Maddie made history at the Burton US Open this past winter. The picture, however, further indicates to readers that she finished in first ahead of Chloe Kim and Xuetong Cai. Therefore, the alt text conveys this extra bit of information.
Now, if the text had included the fact that Mastro had claimed a gold medal ahead of Kim and Cai, then this image would most likely become a decorative image. Since the imformation in the picture would already be conveyed elsewhere on the page, the image having an alt text would become repetitive.
Summary
An image being used to add a simple concept or piece of information to the content on the page is considered an informative image. Make your alt text as short and concise as possible and be sure to only include the most relevant information.
The decision of whether an image is a decorative image or an informative image can be a tricky one and is ultimately up to the person authoring the page. It comes down to the reason why the image is being included on the page, the content contained on the page, and what makes the most sense overall.
Top comments (2)
Love the examples we need more of these. I read so many articles about how important they are, but when I sit down to do it I find my self bouncing between too much and too little.
❌
vs.
❌
rarely is it that I can find that nice sweet spot.
✔
Totally! It is incredibly difficult to find that perfect amount of detail without going overboard. I struggle with this often myself and even did when trying to come up with these examples! But, being able to do so is super important, so I'm glad you found this helpful!