DEV Community

loading...

Image Accessibility 101: Informative Images

alhasenzahl profile image Amanda Hasenzahl ・3 min read

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:

Telephone and fax machine icons with ten digit numbers displayed next to them.

<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>
Enter fullscreen mode Exit fullscreen mode

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.

A family smiling and hugging outside.

<img src="img/Familyfun.jpg" alt="We are a family friendly company." />
Enter fullscreen mode Exit fullscreen mode

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.

A medicine bottle cap with two step instructions for how to open it.

<img src="img/top.jpg" alt="Push down on cap, then turn it counter-clockwise." />
Enter fullscreen mode Exit fullscreen mode

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.

Maddie Mastro, Chloe Kim, and Xuetong Cai on the podium at the Burton US Open for women's snowboard superpipe.

<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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

pic
Editor guide
Collapse
waylonwalker profile image
Waylon Walker

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.

slopestyle podium

vs.

Professional snowboarder, Maddie Mastro, stands atop the podium with second place and third place each holding a bottle of already opened champaign in one hand and a snowboard in the other after landing a historic run at the 2019 Burton US Open becoming the first woman to successfully land a double crippler in competition. The look on her face is as if she has accomplished a lifelong dream, smiling ear to ear with joy"

rarely is it that I can find that nice sweet spot.

Maddie Mastro edges out Chloe Kim and Xuetong Cai for superpipe gold.

Collapse
alhasenzahl profile image
Amanda Hasenzahl Author

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!