Alt Text Overview

Alternative text or alt text is a description of an image or graphic file. It allows people who are visually impaired to understand what the image or graphic is and how it relates to its corresponding content. Here is an example of what alt text looks like in code:

In the above line of code, the tag is everything between the opening (<) and closing (>) carrot marks. In this instance, you are looking at an image tag.

This image tag has two attributes:

Src – the source of the image or graphic
Alt – alt text associated with the image or graphic

In the example code shared, the alt attribute for the image is set to "Map of Georgia." The presence of this description enables screen readers, a type of assistive technology used by people who are visually impaired, to describe the image out loud instead of defaulting to the image source (i.e., the file name). So, in this case, users who are visually impaired would hear “Map of Georgia” when they interact with that image on the webpage.

There are two types of images or graphics:

Informative images or graphics support their surrounding content and provide additional context. These types of images should have an accurate alt text that explains their purpose in as much detail as required.

Decorative images or graphics do not support the content on the page. These types of images should have an empty or “null” alt attribute, which triggers a screen reader to skip over the image. If you do not include an empty alt attribute, a screen reader will default to reading the file name for the image instead, which can be a distraction to people using screen reading technology.