Introduction

Another common Accessibility issue on Virginia Tech's Ensemble pages is missing alternative (alt) text. This overview will familiarize you with what alt text is, and how to write different styles of alt text for different types of images.

Video Overview

Written Overview

What is Alternative (Alt) Text?

Alternative text, commonly referred to as Alt Text, is a short description added to an image's HTML that helps screen readers convey the image's content, purpose, and meaning to readers who can't see it. It's a critical part of making websites accessible to people with visual impairments. 

Alt text also serves as fallback content if an image fails to load, and it can improve SEO by helping search engines understand your images.

Different Types of Alt Text for Different Image Types

Not all images serve the same purpose, and that means not all images need the same type of alt text. There are four main types of images you'll encounter:

Informative Images:

Informative Images convey important content, like a photo illustrating a news story or a diagram explaining a concept. Informative images need clear, descriptive alt text that communicates the images meaning and context.

Decorative Images:

Decorative Images are purely visual, like background images or icons that don't add meaning. They should be hidden from screen readers using an empty alt attribute. This will be covered in more detail in a later alt text guide.

Functional Images:

Functional Images act as links or buttons, such as a magnifying glass icon for a search feature, or a printer icon for downloading. For functional images, the alt text should describe the function, not the image.

Complex Images:

Complex Images are images such as charts, graphs, or infographics that often need more than a short alt description. Use alt text for a brief summary, and provide a longer explanation in the surrounding text, or link to a detailed description. 

Understanding the different types of images will help you write alt text that's meaningful, appropriate, and accessible.