Alt Text Best Practices

What is alt text?

Alt text is used to tell the viewer what an image on a page is, if they are somehow not able to view it. If the image can't be loaded, the alt text will be displayed on the screen instead. If the user is using a screen reader, it will read off the alt text so they know what the image is. Alt text also helps with SEO so search engine crawlers can index the image better.

2018 Finalists

2018 finalist alt text example

Alt text displayed when the image isn't present

When to use alt text

Alt text should be used if the image is necessary to understand the page or if it contains important information. In these cases, the alt text should be descriptive of the content of the image and contain all text within it. Alt text should NOT be the file name. When inserting the image into a Cascade WYSIWYG, the Decorative box should be unchecked and Image Description is where you input the alt text.

decorative box and image description

If the image is decorative and doesn’t serve any other purpose besides that, it is not necessary to add alt text to the image. This means that the Decorative box should be checked. When this is checked, the Image Description box will disappear.

image description verification

If you aren’t in Cascade and are working within the source code, you can indicate that the image is decorative by leaving the alt tag blank (alt=“”). Do NOT omit this tag even if you intend on leaving it empty.

Examples of good alt text

Celebrating 5 years

Celebrating 5 years

King Alfred statue with a carved pumpkin on his head

King Alfred statue with a carved pumpkin on his head

Reclaiming Splendor: Ceramic Design by Chunmao Huang Featuring the First Lady of China’s Banquet Ware exhibition poster

Reclaiming Splendor: Ceramic Design by Chunmao Huang Featuring the First Lady of China’s Banquet Ware exhibition poster

Greene Hall as seen from Main St

Greene Hall as seen from Main St

Additional Information

Accessibility: Image Alt text best practices