If you’ve ever skipped writing alt text because you weren’t sure you were doing it right, you’re not alone. It’s one of those website tasks that feels more complicated than it actually is. The good news is that you don’t need to be an accessibility expert to do it well.
Here’s what you need to know about writing better alt text, when to use it and why it matters.
What Is Alt Text and Why Is It Important?
Alt text, short for alternative text, is a written description of an image. That’s it. For users with visual impairments, alt text allows screen readers and other assistive devices to describe important visual content. However, in WebAim’s most recent published survey, screen reader users identified missing or inadequate alt text as one of the most problematic issues that they face when navigating websites.
Think about how quickly you process information from an image. In a matter of seconds, you can identify people, places, activities, emotions and context. Alt text helps bridge that gap for users who can’t see the image themselves.
For example:
At a glance, you can see the base jumper is suspended over rushing water with their parachute deployed. Below the base jumper, white water rafters navigate the rapids. You can infer that the base jumper is navigating their parachute to avoid hitting the rafters or landing in the rushing water.
Now imagine the only text accompanying that image is, “Jump Into Unforgettable Adventure.” Without alt text, a user relying on a screen reader may never know the potential danger that base jumpers and rafters face.
Even basic alt text like “base jumper at Bridge Day” leaves out important context. A more useful description might be: “A Bridge Day base jumper maneuvers their parachute to avoid colliding with rafters in Class IV Rapids.”
Now the user understands what’s happening, where it’s happening and why the image is relevant. That’s the purpose of alt text: giving every user access to the same information and context.
The Added Benefits of Alt Text
Accessibility is the primary reason alt text exists, but it’s not the only benefit. Search engines can’t “see” images the way people do. Alt text provides context about what’s shown, making it easier for search engines to understand visual content. Alt text can also appear on a page when an image fails to load, which matters more than most people realize, especially for images that explain a process.
Because accessibility is an important part of a well-built website, good alt text can support broader SEO efforts. In many cases, images with meaningful alt text are more likely to appear in image search results than images with missing or vague descriptions.
Does Every Image Need Alt Text?
One of the most common questions people have about alt text is whether every image needs it. The short answer is no.
A helpful exercise recommended by the Web Accessibility Initiative (WAI) is to imagine reading a webpage aloud to someone over the phone. If you skipped the image entirely, would they miss important information? If yes, it needs alt text. If not, it’s probably decorative and can be left out.
Images That Need Alt Text
Informative Images
WCAG’s Definition: “Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image. In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information”
In Other Words: Pictures of people, places, products, activities or things that are important to show for context. They are necessary to help the user make a key decision or distinguish between options on a page to find their path forward. Provide a literal description only when it is crucial to help the user understand the page.
Different types of Informative Images
In order to write effective alt text for informative images, you must understand why & how users will be using the images. You must identify what information the image provides that helps the user make a decision. The WCAG provides 5 examples.
Example: Images that serve to educate users directly
Identifying Page & Image Purpose
The Sportfish page on the West Virginia DNR website serves as a central hub for West Virginia sportfish species. It contains multiple images of different sportsfish that can be found in the state. The purpose of the page is to inform users about the variety of species and their differences. The page provides a clear route for users to learn more about each species.
The images of each species play a crucial role in helping the user determine which species they want to learn more about.
How users utilize the images:
Sighted users can observe and compare the different fish species by their visual appearance and name. For this reason, the images supplement other information on the page and are considered educational.
Alt text needs:
The alt text must provide equivalent information to help all users identify the unique fish species listed. Therefore, each photo’s alt text needs to:
- describe the distinguishing visual characteristics of the species
- clearly define similarities/differences with often mistaken species
- align with the ecological description/identification guide on the fish’s associated page
Nuance:
Typically, the best practice is to try to keep alt text below 150 characters. However, this image is taxonomic in nature and restricting the alt text length to 150 characters could render it ineffective. For these types of images, do not sacrifice accuracy for brevity.
Potential Alt text: Spotted bass (Micropterus punctulatus) in lateral profile against a blue background. The fish displays an olive-green back, silvery-white underside and horizontal rows of small black spots along the lower sides. The dorsal fin shows a shallow notch between the spiny and soft sections. The maxillary bone does not extend past the eye, a key distinction from largemouth bass.
Complex Images
WCAG’s Definition: “Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:
- graphs and charts, including flow charts and organizational charts;
- diagrams and illustrations where the page text relies on the user being able to understand the image;
- maps showing locations or other information such as weather systems.
In these cases, a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image.”
In Other Words: In the alt text, add a short description and if needed describe where users can find the same information in an alternate format.
Example: An Organizational Chart
Identifying Page & Image Purpose
The image serves to inform users of a company’s organizational structure.
How users utilize the image:
Sighted users can scan the organization chart’s branches to quickly uncover information. However, if you type a full description of all information in the organization chart, screen reader users would have to listen to the full description to access the information they are seeking.
In order to provide screen reader users with the same scannability, you must provide an alternate format of the same information in real text on the page.
Alt text needs:
In the alt text or in real text on the page, identify the type of image and tell the user where they can find the alternate format. For example, “Company Organization Chart. Refer to the following outline for the hierarchy of organization.”
Immediately following the graphic, provide an outline of the organization chart in a list format. This will allow screen reader users to tab through the relevant information quickly and efficiently. In the list, ensure that you are using appropriate levels to adequately convey the employee relationships and reporting order.
Example Heading: Organization Chart Outline
- Board of Directors
- Executive Director (reports to Board of Directors)
- Associate Director (reports to Executive Director)
- 2 Accountants (report to Associate Director)
- 2 Financial Reporting Specialists (report to Associate Director)
- Operations Manager (Reports to Associate Director)
- Administrative Assistant (reports to Operations Manager)
- Director of Financial Services (reports to Executive Director)
- 3 Loan officers (report to Director of Financial services)
- Documentation Specialist (reports to director of financial services
- Associate Director (reports to Executive Director)
- Executive Director (reports to Board of Directors)
Functional Images
WCAG’s Definition: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
In Other Words: Pictures that are meant to be clicked and have links attached or perform a function. The alt text must describe the action, not the appearance of the image itself.
Example: Images Used as Cards or Buttons
Identifying Page & Image Purpose
On this page, users can click the images to perform key actions related to the GoMart app and rewards.
How users utilize the images:
The image cards prompt the user for key actions related to their Rewards account. The stylized buttons allow users to access the app on iOS or Google Play. Each image has an associated link. Sighted users can read the cards directly to understand each image’s functionality and purpose. Screen reader users will rely on the alt text to explain the options available to them.
Alt text needs:
For each of the image examples, provide a concise description of the link purpose and any necessary context that helps the user understand the images’ functionality.
- Red image card alt text: Sign up for a new digital reward card on the GoMart app
- Yellow image card alt text: Register your existing reward card number on the GoMart app to access your reward benefits.
- Blue image card alt text: View and Redeem your GoMart reward points online.
- Button 1 (iOS) alt text: Download the GoMart app on Apple’s App Store
- Button 2 (Android) alt text: Download the GoMart app on the Google Play Store
Images of Text
WCAG’s Definition: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
In Other Words: If it’s not a logo, the best practice is not to use text in images. If it cannot be helped, the exact words in the image need to be in your alt text.
Example: Images of Text on a Campaign Landing Page
Identifying Page & Image Purpose:
This is a promotional hero image for a fictional brand’s new product launch. The hero banner contains an image of stylized text in the style of the campaign creative. However, the stylized text is actually a separate png, overlaid on the banner background. Below the stylized text is a png of a stylized button, also utilizing the campaign style.
How users utilize the images:
Users can quickly view the product image, read the visible text and interact with the button image to learn more about the product announcement.
Alt text needs:
For the large text graphic, type the text exactly as it appears in the graphic. In this case, “Totally Fake Webpage.”
Nuance:
The image of the product is classified as a background image and therefore purely decorative. It does not receive alt text and will not be announced to screen readers. To provide screen reader users with an equal experience, consider adding details about the product release to the button alt text.
Potential Button alt text: “Learn more about our new Loco Lemonade product options.”
Images That Don’t Need Alt Text
Decorative Images
WCAG’s Definition: “Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.”
In Other Words: Pictures that just make the page pretty or interesting to look at, but do not add information or value beyond visuals.
Example: Background Images providing texture or visual interest
For example, the moss image in the background of the West Virginia State Parks homepage is purely decorative. It is only intended to add visual interest to the page and does not fundamentally change/add to the page content. Adding alt text would call unnecessary attention to the graphic and would likely add an unnecessary disruption to the page flow for screen reader users.
Example: Image of stylized text for CTA section
At a glance, you may think that the “download the app” graphic would be considered an image of text. In other contexts, you would be correct. However, the real text on the page says “get the GoMart app” and the buttons already provide the context for how users can do so. In this case, a real text alternative already exists for the graphic. Adding alt text would add unnecessary redundancy for screen reader users. Therefore, this image should be treated as decorative.
Context Is Everything
Here’s where writing alt text gets a little more nuanced. The same image can need completely different alt text depending on where it lives on your site.
A photo of a man in a suit might identify him as your CEO on a leadership page, describe him as a keynote speaker on a conference page and note him participating in a company event in a workplace culture article.
This is especially relevant for destination marketing. Effective alt text isn’t just about describing what’s visible in an image. It’s about helping users understand why that image matters within the context of the page.
Take this image of Atkinson Farm in Danville, Virginia for example. A scenic image of the Lodge may be used as a decorative image on an about page, be described as a featured location on a wedding venues page or be included on a page for group lodging options. Same image, different context, different alt text.
If you’re showcasing a destination, include details about the location and the experience. If the goal is inspiration, the alt text can lean a little more marketing-forward while still staying precise and accurate. On a campaign landing page, a group of people sharing a laugh over drinks might become: “Sip, savor and stay awhile” or “Dive into SOSI’s favorite flavors.” The image sets the scene. The alt text makes it accessible to everyone.
Example: The masked ferris wheel image on Mercer County CVB’s Lake Shawnee page only serves to add visual variety to the page. It could be considered purely decorative. However, the ferris wheel is a highly recognizable and sought after feature of the famous abandoned amusement park and does not appear in other imagery on the page. In this case, you could justify adding alt text that calls attention to the ferris wheel’s presence.
Putting Alt Text Into Practice
Alt text doesn’t have to be perfect to be useful. Focus on the information an image provides, keep it concise and prioritize the details that actually matter in context. A thoughtful description beats no description every time, and small improvements add up fast.
If you’re having trouble writing your alt text, try putting it through a text to speech tool like TTS Reader. Remember, screen reader users adjust the speed to a level that is comfortable for them – some listen at upwards of 350 Words per minute. In the text to speech platform, try listening to the alt text at an increased rate and adjust until the text reads clearly.
If you’re having trouble deciding which category your images fall under, refer to the WCAG Alt Text Decision Tree. It provides a wealth of examples and resources to help you understand how to write the best alt text for your images.
If you’re looking to improve accessibility across your site and aren’t sure where to start, we’re happy to help. Reach out to learn more about our accessibility services.