Images

Alternative text (alt text) provides a text-based description of images. Screen readers read alt text aloud, making visual content accessible to people who are blind or have low vision. Alt text also displays when images fail to load and helps search engines index content.

Overview

Why Alt Text Matters

Alt text serves multiple critical purposes:

Screen readers read alt text aloud for users who are blind or have low vision, providing equal access to visual content
When images fail to load due to connection issues or errors, alt text displays in place of the image so users understand what was supposed to be shown
Search engines use alt text to index and understand image content, improving SEO and helping your content reach a wider audience
Users with cognitive disabilities or those in noisy environments benefit from text alternatives to visual information

Types of Images

Simple Images

Simple images include photos, icons, logos, and other visual content with straightforward, self-explanatory meaning. These images require alt text but typically do not require additional long descriptions.

Guidelines for Simple Image Alt Text

Keep it brief: Alt text should be under 150 characters
Describe content and function: Explain what the image shows and what it does (for buttons, icons, linked images)
Avoid redundancy: Do not start with “image of” or “picture of” – screen readers already announce that it’s an image
Be specific: Use meaningful descriptions. Instead of “chart,” say “bar chart showing quarterly sales growth”

Examples of Simple Image Alt Text

Photo of UGA campus: “Students walking across the North Campus quad on a sunny day”
University logo: “University of Georgia bulldog logo”
Navigation icon: “Menu icon (three horizontal lines)”

Complex Images

Complex images include charts, graphs, diagrams, infographics, and other visual content that conveys significant information or data. These images require both a brief alt text AND a long description to fully convey all information.

Alt Text for Complex Images

The brief alt text for a complex image should:

Identify the image type (e.g., “Bar chart,” “Process diagram”)
Provide a brief overview of the topic or subject matter
Indicate that a long description is available below

Providing Long Descriptions

Long descriptions provide the full details of complex images. Choose from these approaches:

Place the long description in the text surrounding the image (before or after)
Create a separate linked page with the full description and link to it from the image caption
Use expandable content (such as collapsible text sections) to hide the long description until users choose to view it

Example: A chart showing enrollment trends over 10 years would have brief alt text like “Line graph showing UGA enrollment trends 2015-2024,” followed by a long description that lists the enrollment numbers for each year and explains significant changes.

Decorative Images

Decorative images are purely visual and do not convey meaningful information or add context to the page content. Examples include background images, divider lines, spacing images, or purely stylistic graphics.

Handling Decorative Images

Decorative images should have empty (null) alt text so that screen readers skip them entirely and don’t waste time reading descriptions of content that doesn’t matter to understanding the page.

HTML: Use alt=”” (empty alt attribute)
Microsoft Word, PowerPoint: Check the option “Mark as decorative” (the alt text field will be grayed out)
eLC/D2L, CMS: Check the “Decorative image” checkbox in the image properties dialog
Google Docs/Slides: Provide empty Title and Description fields, or use the decorative option if available

Images of Text

Images containing text (such as screenshots of text, images with embedded text, or stylized text) should be avoided whenever possible. However, when they must be used, the alt text must contain the exact text shown in the image.

When to Avoid Images of Text

Images of text create accessibility barriers because:

Screen readers cannot read text that is part of an image file
The text cannot be resized or reformatted for users with low vision
Search engines cannot index text within images
Users cannot copy, search, or translate text within images

Using Real Text Instead

Always use real, formatted text instead of images of text. For stylized text, use CSS styling or web fonts to achieve visual effects while keeping the text selectable and accessible.

If Images of Text Are Necessary

In cases where images of text cannot be avoided (such as displaying a historical document or screenshot for comparison), the alt text MUST include the exact text from the image word-for-word.

Example: An image showing a tweet with the text “Accessibility is not an add-on, it’s essential” would require alt text containing that exact quote.

Grouped Images

When multiple images together form a single concept or message, treat them as a group. Provide alt text for the group as a whole, and mark the individual pieces as decorative.

Techniques by Platform

HTML

Adding Alt Text to Images

In HTML, use the alt attribute on <img> tags to provide alternative text:

Decorative Images in HTML

For decorative images, use an empty alt attribute:

Complex Images with Long Descriptions

For complex images, use the aria-describedby attribute to link the image to a detailed description located elsewhere on the page:

<div id=”chart-description”>…full description of chart data…</div>

Alternatively, use the longdesc attribute to point to a separate page with the full description:

eLC (D2L Brightspace) / Course Management Systems

When inserting images into eLC or your institution’s learning management system:

Insert an image as you normally would
Right-click on the image or look for an “Image Properties” or “Edit” option
In the properties dialog, find the “Alternative Text” or “Alt Text” field
Enter descriptive alt text or leave empty if the image is decorative
Check the “Decorative image” checkbox if applicable
Save and close the properties dialog

Microsoft Word

Method 1: Right-Click Menu

Right-click on the image
Select “Edit Alt Text” from the context menu
The Alt Text pane will open on the right side of the screen
Enter your description in the text field
For decorative images, check the “Mark as decorative” checkbox

Method 2: Format Menu

Select the image by clicking on it
Go to the “Format” menu (or “Picture Format” tab if it appears)
Look for “Alt Text” option
Click to open the Alt Text pane
Enter your alt text description

Marking Images as Decorative in Word

If an image is purely decorative, check the “Mark as decorative” checkbox in the Alt Text pane. This tells screen readers to skip the image entirely.

Google Docs

Adding alt text to images in Google Docs is simple:

Right-click on the image
Select “Alt text” from the context menu
A dialog box will open with two fields: “Title” and “Description”
Enter a brief title in the Title field if desired
Enter the alt text description in the Description field
Click “Apply” to save

The Description field is where you enter the main alt text. The Title field is optional and can be used to provide a caption or brief label.

PowerPoint

PowerPoint provides tools to add alt text to images and other objects on slides:

Right-click on the image on your slide
Select “Edit Alt Text” from the context menu
The Alt Text pane will open on the right side
Enter your alt text description in the field
For decorative images, check “Mark as decorative”
Close the pane when finished

Note: PowerPoint also has an accessibility checker tool. Go to Review > Check Accessibility to identify images and other content that is missing alt text.

Google Slides

Adding alt text to images in Google Slides works similarly to Google Docs:

Right-click on the image on your slide
Select “Alt text” from the menu
Enter your alt text in the dialog that appears
Click “Apply” to save

Canva Accessibility

Canva is a popular design tool used to create social media graphics, infographics, presentations, and other visual content. Canva allows you to add alt text to design elements and exported graphics.

Adding Alt Text in Canva

When creating a design in Canva:

Select an element (image, text, shape, etc.) on your Canva canvas
Look for an “Alt text” or “Accessibility” option in the element settings or properties panel (usually appears on the right side)
Enter a brief, descriptive alt text for the element
Repeat for all meaningful elements in your design

Exporting Canva Designs

When you export a Canva design as an image (PNG, JPG, PDF, etc.), the design becomes a static image file. At that point:

If you’re uploading the image to a website or document, add alt text using the platform’s tools (Word, Google Docs, CMS, etc.)
If you’re sharing the Canva design directly (as a link), ensure alt text has been added to the design elements within Canva before sharing
For social media graphics created in Canva, add alt text when uploading to the social media platform (Facebook, Instagram, Twitter/X, LinkedIn, etc.)

Common mistakes

Missing alt text entirely: Images without alt text are completely inaccessible to screen reader users. Every meaningful image needs a description.
Alt text that says “image of…” or “picture of…”: Screen readers already announce that it’s an image. Start with the actual description instead of “Image of a dog” — just say “Golden retriever playing fetch.”
Decorative images not marked as decorative: Providing alt text for purely decorative images wastes time for assistive technology users. Use empty alt=”” attributes so screen readers skip them.
Screenshots of text without proper alt text: Screenshots containing text must have the exact text in the alt attribute. Images of text are a barrier, so avoid them when possible and use real text instead.
Complex images without long descriptions: Charts, graphs, and infographics need both brief alt text AND detailed descriptions so users can access all information.
CAPTCHAs without text alternatives: Image-based CAPTCHAs must have an accessible alternative method for authentication (such as audio CAPTCHA or a secondary verification method).

WCAG Accessibility Criteria

Creating accessible images with proper alt text helps ensure compliance with Web Content Accessibility Guidelines (WCAG).

WCAG 1.1.1 Non-text Content (Level A)

All non-text content (including images, charts, icons, and graphics) must have a text alternative. This is a foundational requirement for accessibility.

Examples of compliance:

Images have alt text that conveys equivalent information
Decorative images have empty alt attributes
Complex images have both brief alt text and detailed descriptions

WCAG 1.4.5 Images of Text (Level AA)

Text should not be presented as an image unless the image is essential to convey information. For example, images of handwriting, logos, or brand text are exceptions.

What this means for you:

Use real, formatted text instead of images of text whenever possible
For essential images containing text (such as screenshots), ensure alt text includes the exact text shown
Avoid using images for simple text content like quotes, captions, or headings

Best Practices for Alt Text

Follow these guidelines to create effective alt text:

Be Descriptive but Concise

Alt text should convey the essential information or purpose of the image without being excessively long. Most alt text should be one to two sentences or under 150 characters.

Consider Context

Write alt text that makes sense in the context of the page or document. The same image might require different alt text depending on why it’s being used.

Example: A photo of the UGA arch could have alt text “UGA archway entrance” if it’s used as a decorative element, or “Iconic UGA arch on North Campus, a key symbol of the university” if it’s used to illustrate campus landmarks.

Avoid Redundancy

If the image caption or surrounding text already describes the image, do not repeat that information in the alt text. Alt text should add value, not duplicate.

Include Relevant Details

Include details that are important for understanding the image’s message or purpose:

For people: include identifying information if relevant (e.g., “Dr. Jane Smith, professor of biology”)
For charts/graphs: specify the type of visualization and key data (e.g., “Bar chart comparing enrollment by college”)
For logos/icons: explain what they represent or link to
For screenshots: describe the relevant UI elements or content shown

Test with a Screen Reader

If possible, test your documents or web pages with a screen reader tool to ensure alt text reads naturally and provides sufficient context. This helps you understand how users with visual impairments will experience your content.

Getting help

If you have questions or need assistance, the Digital Accessibility Services Hub (DASH) is available to support colleges, schools, and administrative units as they build sustainable accessibility practices.

Contact DASH at [email protected] for consultations, training, or technical assistance.

Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.