01 Alt-Text & Images

What is Alt Text?

Alt text (short for alternative text) is what screen readers use to describe images to people who can’t see them. It’s also what shows up if an image doesn’t load.

In your site editor (like Apptegy, Final Site, or Google Sites), every image has a spot for alt text—and it’s required for accessibility. Alt Text is also required in other editing programs, such as Google Workspace and Microsoft Office. You will need alt text whenever you use images in an asset that will be shared online.

Good Alt Text Is:

Meaningful: It describes what the image is
(Example: “Students planting flowers in the school garden.”)
Actionable: It describes the purpose of the image
(Example: “Link to the March lunch menu.”)
Short & Clear: Usually under 125 characters

The suggested length for alt text is typically around 125 characters.

What to Avoid:

Don’t say “image of…” or “picture of…” (the screen reader already knows)
Don’t leave it blank. If the image is decorative, enter "" (two quotations without spaces).
Don’t overload alt text with full paragraphs or captions

Fast Facts:

If the image has meaning, describe it
If the image has a function, explain it
If the image is just for decoration, mark it decorative (alt="")
Here is an Alt-Text cheat sheet you can bookmark, download, or print
The suggested length for alt text is typically around 125 characters.

Examples of Alt Text

It takes practice to write meaningful alt text. If you aren't sure how much information to include in your alt text, refer to the following examples for guidance.

Current examples are from the University of South Carolina's Digital Accessibility website.

Alt Text for Different Types of Images

A Group of Students
Alt Text: Four students pose on the shady horseshoe, with the two students in the front throwing their hands up.

Details on Campus
Alt Text: The USC smoke stack stands tall before the bright blue, partly cloudy sky.

Headshot
Alt Text: Close-up of a student sitting next to her practice piano.

Logo
Alt Text: University of South Carolina logo.

Decorative Icon
Alt Text: ""

Decorative Images Explained

Decorative images don’t add information to a page's content. For example, the information provided by the image might already be conveyed in adjacent text, or the image might be included to make the website more visually appealing.

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers.

Linked Images

For a functional image that serves as a link, banner, or button, its alt text should describe the destination of the link or the function of the button.

Example

Unhelpful Alt Text: A blue arrow shape pointing to the right with a white newspaper icon and text that reads Sign up for our newsletter!

Reason: It's more information that we need if the focus is describing function.

Helpful Alt Text: Sign up for our newsletter!

Writing Alt Text for Linked Images

When an image is the only element in a link, it needs alt text so that screen reader users can understand the link's purpose.

Avoid saying "Link to" or "Click to" in alt text.
Screen readers automatically identify all links by saying "link" or "clickable". Using phrases like "Link to..." or "Click to..." in your alt text is redundant for screen reader users.
Describe the purpose or function of the link.
If an image is the only item in a link, it needs alt text that conveys the link's purpose. Even if the image would otherwise be considered decorative, you will still need to write alt text.
However, if the same link includes visible text that already describes its purpose, you may consider it a decorative image.
Include important text or other visual information in the image.
If there is any important text or other visual information in the linked image that is not repeated nearby on the page, include that in your alt text.

Infographic Alt Text

When you write alt text for an infographic, you'll want to include important text, the context, and the layout of your image in the alt text.

Writing Alt Text for an Infographic

Infographics often communicate important information to the user, and they need a two-part text alternative so that screen reader users have access to that information.

Write a short description that identifies your infographic.
The short description can be very brief, with simply the title of the infographic and what type of information it is presenting.
Include any important text in your long description.
The long description of your infographic is where you should communicate all of the essential information from your image, including any important text that is part of your graphic.

Consider removing the text from your image and inserting it as live text on the page. Your alt text may need to include all of the text that occurs within the image if it is all important information that a screen reader would otherwise not have access to.
Account for the layout.
The order of information can be crucial to understanding the message of an infographic, so be sure to describe the layout of your graphic, such as where the text is placed in relation to the image, in addition to the whole of the content.

Example of Alt Text for an Infographic

In the following infographic, different types of program advisors are mapped to the students they advise. The goal of the infographic is to portray the ratio of program advisors to students for four major programs.

Short Description: Infographic mapping types of program advisors to students they advise.

Long Description: The graphic portrays four types of program advisors stacked vertically. Each row states the count of the program advisors and their students advised. The top-most Honors Advisors have a count of 17 and advise 2,400 students. Next, there are 3 Trio Advisors who advise 513 students. Third, there are 4 Education Abroad Advisors who advise 1,607 students. Lastly, there are 7 Athletics Advisors who advise 561 students.

Example of an infographic for alt text lesson

Charts & Diagrams Alt Text

Data visualizations, charts, and other diagrams are often used to communicate complex information. By adding a two-part text alternative, you can make these complex visuals accessible to screen reader users.

Making Charts and Diagrams Accessible as Images

Screen readers can't inherently understand what information you are communicating in your complex images without alt text. If you're sharing your chart or diagram as an on-screen image, you should include a two-part text alternative for it.

Short description: briefly identifies the image in the alt text field.
Long description: contains the "essential information conveyed by the image", often presented as a data table or nearby text.

Writing the Short Description

You can add a short description to your standard alt text field to identify the image and describe its most basic properties.

Take a pie chart, for example. In your short description, you should call out that the chart type is a pie chart and name what type of data it is displaying. You can save the detailed data points for the long description.

Writing the Long Description

Depending on what your image displays, your long description may be best communicated as a data table or a detailed text description.

Data Table
For data visualizations and other charts that present trends in data, data tables are a screen reader accessible format for communicating your data. You can either provide an on-screen data table or provide a link to an accessible spreadsheet that contains the data.
Detailed Text Description
If your diagram's information is better described in a text format than a data table, you can either provide an on-screen text description with all the important details from your diagram, or you can provide a link to the long text description.

Example of Describing a Diagram

Short Description: A diagram of the Strategic Priorities for University of South Carolina.

Long Description: A triangle diagram with three sections, each labeled and coming together to the center that has the words University of South Carolina. The first section has the words Access and Transparency: reimagining the student experience and advancing post-graduate success. The second section has the words Inclusive Excellence: increasing research and scholarship to drive community and economic impact. The third section has the words Service and Integrity: transforming service delivery and promoting operational excellence.

Example of a diagram for alt text lesson

Example of Describing a Chart

Alt Text: A pie chart of Pell grant recipients with two slices.

Pell Recipient

Percent of Total Enrollment:14.5%

Enrollment Headcount: 5,162

Non-Pell Recipient

Percent of Total Enrollment: 85.5%

Enrollment Headcount: 30,428

Example of a pie chart for alt text lesson

QR Codes Alt Text

Digital accessibility guidelines for QR codes require them to be perceivable, operable, and understandable. Core best practices include providing clear text alternatives (alt text) for screen readers, ensuring high color contrast, offering equivalent text links for manual entry, and physically placing them at accessible heights and viewing distances. Adhering to these standards requires following specific implementation steps:

1. Text Alternatives & Instructions (Perceivable)

Provide Alt Text: If a QR code is on a website or digital document, it must have alternative text (alt text) explaining its purpose (e.g., "Scan to view the event schedule").
Provide Text Labels: Place the exact destination URL (Shortened if possible) in plain text near the QR code for users who cannot scan or prefer not to use a QR code.
Write Instructions: State clearly what will happen when the user scans the code (e.g., "Scan to open a PDF menu").

2. Design & Layout (Operable)

High Contrast: The QR code must contrast heavily with its background. A minimum contrast ratio of 4.5:1 is recommended, though 7:1 is ideal. Avoid gradients or reflective materials. Just use black on white whenever possible.
Proper Sizing: Test your QR code to make sure it can be scanned from the anticipated distance of your audience.
User Control: Avoid QR codes that automatically perform actions (like downloading a file or sending an SMS) without user permission. It should always link to an intermediate webpage first.

3. Physical Placement (Understandable)

Accessibility & Reach: Ensure physical QR codes are positioned at reachable heights (e.g., in compliance with ADA wheelchair reach limits) and avoid placing them behind glare, glass, or on curved surfaces.
Spacing: If multiple QR codes are used, space them out well to prevent users from accidentally scanning the wrong code.

AI Alert 🤖: Auto-generated Alt Text

It is best practice to write alt text yourself rather than relying on auto-generated alt text. Pre-written or auto-generated alt text won't take your page context into consideration and may not focus on the visual information that you are trying to convey in the image.

For instance, Microsoft products will auto-generate alt text when you upload an image to your document. You should replace this with your own alt text.

Reflection

What information would you include in alt text for a photo of students participating in a science experiment?

When would it be appropriate to use empty alt text (alt="")?

Why should a QR code include a text alternative or nearby link?

Report abuse